괴산골 초당옥수수 |
|
이지휠킥보드 |
|
김고은 전병 |
|
산골짜기농장 새싹삼 |
|
강동상사 |
|
베일통상 |
|
선기획 |
|
테라링크 스마트톡톡 |
|
황토배농원 |
|
한샘토탈 |
|
(주)한국캐비치 |
|
키친홈글라스 |
|
나나푸드 |
|
쿨매트 |
|
스마트지앤피 |
|
|
|
|
|
|
|
작성일 : 09-06-26 18:47
조회 : 12,638
|
웹기획 이해하기 - 강좌14, 웹디자인 이해해기(기획자가)
웹기획자로 전향한 많은 사람들은 웹디자이너 출신이다. 웹사이트 개발업체에서 화면을 정의하고
사용성을 고민하다 자연스럽게 스토리보드를 그리기 시작한 후 기능적이거나 작품적인 디자인의
개념을 넘어서 좀더 분석적이고 비즈니스 마인드가 필요한 웹기획자로의 직무를 선택하게 된다.
디자이너 출신들은 디자인에 대해 다시한번 살펴보는 기회가 될 것이고, 기타 개발자 출신이거나
처음 웹기획을 시작하는 분들에게는 좋은 참고가 되리라 생각한다.
디자인의 중요성은 날로 커지고 있다. 핸드폰, 자동차 등의 제품들은 연구개발의 막대한 부분을
우수한 디자인을 만들기 위해 투자하고 있으며, 이 또한 매출에 상당한 영향을 끼치게 된다.
그렇다면 웹디자인은 어떠할까? 사실 디자인만으로 웹사이트를 이용하는 경우란 거의 없다고
봐도 될 것이다. 그렇다면 웹사이트의 디자인은 어떤 기능들을 하게 될까? 기본적인 ‘디자인‘이라는
큰 효과에는 다를바가 없다. 사이트의 주의를 끌게만드는 첫 번째 요소는 디자인이 될 것이고,
사이트의 신뢰를 형성하고 네비게이션을 도우며 컨텐츠를 효과적으로 보여주도록 하는 기능을 하게 된다.
우리가 자주 이용하는 웹사이트의 종류는 어떤 것이 있을까? 일반적으로 많이 이용하는 사이트의
형태를 아래와 같이 분류해 보았다. (사실 아래 세 개의 구분은 서로 통합되고 나뉠 수 있다.)
- 홍보를 위한 사이트
- 무엇을 팔기 위한 사이트
- 정보제공/검색 사이트
1. 사이트의 성격에 따른 항목별 디자인의 중요성
<삼성전자 홈페이지, 홍보형 메인>
홍보를 위한 사이트에서 웹디자인의 중요성은 무엇일까? 제품을 홍보하기도 하며 오프라인에서
제공되는 특정 서비스를 홍보하기도 한다. 또는 기업 이미지를 홍보하기도 하며, 온라인상에 특정
서비스를 홍보 하기도 한다. 홍보에서 가장 중요한 것은 사용자의 두뇌속에 특정 키워드를
인식시키는 작업이다. 사용자의 머릿속에 키워드를 인식시키기 위해서는 광고를 만들 듯 굉장히
창조적이면서도 사용자 밀착적인 아이디어와 구성이 필요하다.
디자인의 중요성이 가장 큰 성격의 사이트가 홍보를 위한 사이트이다. 때로는 브랜드 아이덴티티를
강력하게 표현하며 때로는 제품자체에 대한 사용자들의 임팩트를 크게 함으로써 홍보 효과를
얻을 수 있을 것이다.
무엇을 팔기 위한 사이트, 예를 들면 쇼핑몰을 구축함에 있어 디자인의 중요성은 어느정도 일까?
쇼핑몰에서는 IA(정보설계)와 컨텐츠배치가 매우 중요하다. (물론 신뢰성과 제품의 퀄리티,
가격이 가장 중요한 요소이나 설계 부분만을 따져 보겠다.) 그렇다면 디자인의 역할은 정보설계부분과
컨텐츠 배치부분을 어떻게 효과적으로 지원해 주느냐에 달려있다. 네비게이션 이미지 디자인,
레이블링의 디자인처리, 전체적인 사이트 구도에 웹디자인 역량의 80%이상을 투자하여야 한다.
최근에 백화점에서도 수십년간 습관처럼 배열했던 기존의 구도를 깨고 있다. 1층엔 잡화나 신발등이
있었으나 이런 틀을 과감히 탈피하고 다른구조를 이루는 곳도 있다.
<검색포탈 네이버 메인>
정보를 제공하는 사이트, 예를 들면 뉴스 사이트나 검색포탈의 경우가 이에 해당한다. 대부분의
모든 사이트 설계시 ‘일관성’은 웹디자인의 가장 중요한 요소 이다. 색의 일관성, 네비게이션
디자인의 일관성, 레이블링 디자인의 일관성은 사이트를 안정적으로 만들고 신뢰할 수 있도록
만든다. 정보제공 사이트에서는 이 일관성의 중요성이 더욱 높아진다.
다양한 색과 다양한 디자인으로 사용자의 머릿속을 복잡하게 만든다면 컨텐츠에는 눈이 쉽게
가지 않게 될 것이다 (이건 굉장히 안좋은 디자인 방법이다.) 다시한번 강조하자면 정보를
제공하는 사이트에서는 ‘일관된 디자인’, ‘심플한 디자인’, ‘정교한 디자인’이 필요하다. 심플한
디자인은 정보를 제공하는 전체적인 구조가 복잡해 보이지 않게 만드는 것을 의미하며 정교한
디자인은 HTML코딩부터 사소하게 여겨지는 이미지디자인 까지 세심한 배려가 사용자의 신뢰를 얻게 만든다.
지금까지 하고 싶은 이야기는 웹사이트 종류에 따른 구체적인 디자인전략을 이야기 하고
싶은 것은 아니다. 각각의 상황에 따른 웹디자인은 굉장히 전략적이어야 한다는 것을 의미한다.
단순히 디자이너의 주관성에 집착한 나머지, ‘그냥 이뻐서’, ‘내가 맘에들어서’, ‘그냥 과거에도
이렇게 해왔으닌깐’ 이라는 어설픈 사고로 문제를 해결하지말라는 것이다. (물론 경험이 많은
디자이너의 순간의 선택이 옳은 경우도 많다. 이런경우는 디자이너의 감각이 월등할 경우에만
가능하며, 설사 그렇다 할지라도 전략적인 접근은 반드시 필요하다.)
그래서 사이트 기획초기 디자인전략 및 디자인가이드라인을 만들어야 한다. 웹디자이너와
상의해야 하는 것은 너무나 당연하다. 그러나 기본적인 사이트의 목적, 성격, 전략에 대한
구체적인 사항들을 웹디자이너와의 협의시 인지시켜야 하며 그 틀 안에서 디자인의 방향을
정해야 하는 것이다.
2. 웹디자인에서 중요한 요소들
웹디자인에 있어 중요한 요소는 무엇일까? (엄밀하게 이야기 하자면 웹기획자 입장에서 바라보는
웹디자인이다.) 몇가지를 나열해 보겠다. 일관성, 목적성(정체성), 조화성, 기능의 연장성, 심미성,
참신성 등을 꼽을 수 있다. 이와같이 요소를 선별한 나름대로의 기준의 웹사이트를 사용하는
사용자의 입장에서 정보/물건 등을 구입하는 행위를 쉽게 도와주도록 하는 관점에서 바라보았으며
다시 찾도록 만드는 부분도 포함되어 있다.
일관성
색, 폰트, 네비게이션등의 일관성은 두말할 나위도 없다. 전체적인 사이트에 대한 이미지를 심어주는
것으로써 일관성이 없다면 사이트에 대해 인지되는 느낌은 ‘복잡함’,‘산만함’ 이외에는 없다.
목적성(정체성)
전체적인 디자인의 구성이 사이트의 목적과 부합하느냐의 문제이다. 쇼핑몰을 정보제공사이트와
같이 만든다거나 회사홍보 페이지를 회사의 아이덴티티와는 상반되게 만든다거나 하는 것은
굉장히 큰 실수 이다. 사이트의 목적과 정체성을 유지하는데 웹디자인은 기여해야 한다.
조화성
사이트내에 모든 컨텐츠, 네비게이션, 레이블링들은 조화를 이루어야 한다. 이와 같은 사항을
상의 없이 서로다른 디자이너가 각각 작업하여 퍼즐 맞추듯 조립해 놓는 다고 생각해 보라.
서로 눈에 튀게 만들 뿐만 아니라 조화롭지 못해 전체적인 일관성을 해치게 될것이다. 또한
사이트에서는 중요도를 구분하여 ‘선택과 집중‘이 되도록 구성해야 한다. 모든 컨텐츠,
네비게이션디자인 등이 서로 바달라고 소리쳐 외친다면 고객은 혼란 스럽게 된다.
기능의 연장성
예를 들면 버튼, TAB, 링크, 콤보박스 등의 기능적인 부분에 들어가는 디자인을 의미한다.
버튼 디자인을 한다면, 버튼을 보았을시 ‘누르면 어떤 반응을 하겠구나!’라는 암시가 되어야
한다. 링크도 마찬가지이다. 다양한 스타일시트를 써서 링크의 색을 변경시키는데 파란색의
원래 링크색을 해주는 것이 사용자를 더 배려하는 것이다. 디자이너가 스스로 만족하기 위하여
링크의 색을 맘대로 변경하지 마라.
참신성
정보중심의 심플한 디자인을 한다고 하더라도, 누가 어떻게 하느냐에 따라 굉장히 달라지게된다.
그라데이션 표현을 하더라도 남들과는 다른 참신함을 보여줄 수 있다. 웹디자인을 함에 있어
창조적인 디자인이란 이런것이다. 똑같은 디자인을 하더라도 남들과 다른 참신성을 바탕으로
한 효과, 그러면서 전체적인 조화와 일관성에 위배되지 않는 이런디자인. (말은 쉽다고 말할 수
있겠지만 창조란 그래서 어려운것이다.)
3. 웹디자이너와 커뮤니케이션 하기위해 알아두어야 할 지식들
1) 색의 삼속성
색이라는 것은 빛이 사물에 반사되어 인간의 눈에 접했을때 비로소 인지하게 된다. 그래서
빛이 어떻게 작용하느냐에 따라 색이 달라지게 된다. 이런 것을 광원이라 한다.
<색의 삼속성>
색은 색상,명도,채도의 삼속성을 갖고 있다. 이러한 삼속성의 적절한 배합이 인간과의
커뮤니케이션에 있어 합리적인 정보 처리를 돕게 된다. 웹디자이너와의 커뮤니케이션에
있어서도 명도,채도 그리고 색상에 대한 표현을 정확히 하도록 하자. (고등학교 미술시간에
배운 것 이므로 복습하도록 하자.)
명도, 색상과는 관련없이 색의 밝기만을 표현한 것이다. 밝고 어두움을 표시한 것이며 가장
밝았을때는 흰색이라고 할 수 있다.
채도, 색의 순수한정도. 즉 색상의 포함정도, 색상이 많이 포함되어 있느냐 적게 포함되어
있느냐를 따진다. 진한색, 연한색, 흐린색, 맑은색과 같은 표현을 할 수 있으며 채도가 높다는
것은 그만큼 원색(순색)에 가깝다는 것이며, 채도가 낮다는 것은 여러 색이 섞여 원색보다 많이
탁해졌다는 의미이다.
색상, 태양의 광선을 분광하였을때 보여지는 무지개의 형상을 의미
2) 컬러 시스템
어떤 색채가 사용느냐에 따라 그 색에 대한 영향과 미적인 부분이 달라지게 된다. 따뜻하게
느껴지는 색채는 빨강,주황,노랑,자주. 차갑게 느껴지는 색상은 녹색, 파랑, 남색등이 있다.
또한 무겁거나 가볍게 보이는 색도 있다. 이러한 무게의 판단은 명도의 영향을 받는데 명도가
낮을수록(어두운 색일수록) 무겁게 보이고 명도가 높을 수록(밝은 색일수록) 가볍게 보인다.
또한 크기의 판단에도 명도의 영향을 받는다고 한다. 크기가 같더라도 밝은쪽이 커보이게 된다.
이러한 색의 사용은 웹사이트를 사용하는 주요유저들의 성격을 반영해야 하는 것은 너무나
당연하다. 명도와 채도의 조절로 보다 깔끔한 색을 사용할 수 있을 것이다.
웹사이트를 구성함에 있어 적게는 3~4가지 색에서 4~5가지 정도의 색을 사용한다. (상황에
따라 다르다.) 같이 사용되어지는 색의 조화가 사이트의 전반적인 분위기를 좌우한다. 또한
감정적인 부분 즉 명랑, 안정적, 화려한, 차가운, 따듯한, 자연스러운, 깨끗한 등의 느낌을
나타내도록 할 수 있다. 이러한 분석의 시도는 의미분화법(semantic differential method)
등의 연구를 통하여 느낌에 맞는 색의 조합을 찾아내고 있으며 연구하여 시중에 발간된
책들이 있다. 디자인 초기시 반드시 디자이너와 상의하여 몇 개의 샘플을 정해 놓고 시작하는
것도 좋은 방법이다.
의미 분화법, 시맨틱디퍼렌셜법 [semantic differential method]
1959년 미국의 심리학자 찰스 오스굿이 고안한, 개념의 의미내용을 분석하는 방법.
의미분화법, 또는 의미미분법이라고도 번역된다. 일반적으로는 크다―작다, 아름답다―추하다와
같이 상반되는 의미의 형용어를 짝지은 ‘평정(評定) 척도’를 10∼50개를 사용하여 어떤 ‘개념’,
이를테면 백두산이라고 하는 말이 우리의 뇌리에 연상시키는 내용을 그 강도에 따라 평정케 한다.
백두산이라고 하면 일반적으로 대단히 크고, 대단히 아름답다라고 하는 평점(評點)이 주어지는데,
이 평점의 프로필이 ‘백두산’이라고 하는 개념의 의미내용을 분석한 것이라고 생각하는 것이다.
문제는 평점척도의 선택방법인데, 오스굿 등은 좋다―나쁘다로 대표되는 평가, 크다―작다로
대표되는 역량, 활발함―활발치 않음으로 대표되는 활동성의 3차원이 가장 중요하다고 한다.
그들은 이 방법을 사용하여 정치상의 지도자들이 일반대중에게 어떤 ‘의미’로 받아들여지는가를
분석하려고 하였으며, 평정대상은 반드시 언어적 개념이 아니라도 된다. 미술작품이 우리에게
주는 인상의 분석 등에도 사용할 수 있다. 어쨌든 계량언어학이라든가 언어심리학이라고 불리는
연구영역에서의 유력한 방법의 하나이다. <네이버 백과사전>
3) RGB와 CMYK
컴퓨터의 브라운관(또는 LCD판넬)과 같이 빛을 이용하여 색이 표현된다. RED, YELLOW, BLUE의
세가지 색의 조합으로 색을 만들어 내는데 이를 RGB 색상이라 한다.
<포토샵 color 윈도우, info 윈도우 에서의 RGB, CMYK>
따라서 모니터로 본 색감과 프린터로 인쇄해서 보는 색감을 다를 수밖에 없다. 종이에 잉크나
토너를 통해 묻어 나오는 것은 빛으로 표현한 것이 아니기 때문이다. 이렇게 빛에 기초한
원리(가산혼합)을 사용하는 모드가 RGB이며 인크의 혼합과 같은 원리(감산혼합)의 원리를
CMYK 색상이라 한다.
CMYK 색상은 Cyan, Magenta, Yellow의 색상에 모두 섞을 경우 Black를 포함하여 4가지로
표현한다. (세가지색 CMY를 모두 섞어도 검은색이 되진 않는다. 그래서 Black를 포함하여
CMYK색상을 만들었다.)
그러므로 인쇄물에 사용할 경우에는 CMYK 색상을 사용하여 작업하는 것은 당연한 일이다.
4) 메타포(metaphor)의 이해
메타포 즉, 은유법이란 원관념을 숨기고 보조관념만을 드러내어 표현하려는 대상을 설명하거나
그 특징을 묘사하는 방법이다. 레이블링을 만들때도 사용할 수 있고 네비게이션에서 매뉴에
아이콘을 형상화 하여 만드는 경우도 있다.
웹사이트에서 이러한 메타포를 사용하는 이유는 현실세계의 느낌을 웹사이트에서도 그대로
느낄 수 있도록 만들어 주기 위해서 이다. 현실세계(real-world)에서의 경험을 그대로 웹사이트
에서도 적용함으로써 사용자의 머릿속에 ‘인식’시키는데 큰도움을 줄 수 있다.
그러나 메타포의 개념을 남용해서는 안된다. 잘못 사용되어질 경우 해당개체(이미지,텍스트)가
나타내는 것이 무엇인지 알 수 없는 경우가 생긴다. 인간이 일반적으로 유추해서 충분히 생각해
낼수 있어야 한다. 그리고 텍스트와 텍스트, 이미지와 이미지 또는 이미지와 텍스트의 조합으로
새로운 은유적 관념을 만들어 내기도 한다. (정확히 관념을 만들어 내지 못한다면 쓰지 말라.)
<윈도우즈의 메타포> <어느 웹사이트의 배너 메타포>
윈도우즈의 메타포들은 너무나 친숙하다. 윈도우탐색기, 그림판, 내문서, 휴지통까지 수 년간
너무나도 자연스럽게 사용하던 아이콘들이라 하단의 텍스트를 보지 않아도 얼만든지 무엇인지
판단해 낼 수 있다. 우측은 어느 웹사이트의 배너이다. 상단에 위치 해 있었으며 텍스트와 아이콘이
조합된 형식이다. 본인은 저 아니콘이 어떤 동영상을 보여줄 것이라는 착각을 하게 되었다. 클릭
이후 그냥 광고페이지가 나타났다. (배너 디자이너가 이걸 바랬던 것인가? 사용자를 속이면 안된다.
속이려 하지 않았더라도 사용자는 속고 말았다.)
메타포는 은유적인 기법이라고했다. 이 광고에서는 텍스트는 존재하지 않는다. 장미가
가득한 검은색 욕조 안에 금색 수도연결관 그리고 욕조안의 여자, 이것이 암시하고 있는
것은 무엇일까? 고급, 럭셔리, 비싼느낌(expensive)‘의 단어들이 연상될 것이다. 이러한
연상이 핸드폰과 연결되고 핸드폰의 이미지를 좌우하고 있다. (홍보용사이트나 브랜드
아이덴티티를 강조하는 사이트에서는 두개이상이 조합된 형식이 특정 키워드를 인식시킬
수 있다. 단, 잘 했을경우에는 말이다.)
오피스2007의 파워포인트 메뉴이다. 기존의 파워포인트와는 달리 아이콘의 시각화를
극대화 하였다. 표,그림,차트,동영상의 아이콘과 하단에 텍스트를 두어 연상되도록 하고 있다.
텍스트만 있는것보단, 이미지만 있는 것보단 이렇게 두개가 접합되었을 때 사람이 인지하고
인식하는 접근성이 높아지게 된다.
5) 폰트 및 CSS
폰트의 사용은 이미지에서 사용될 폰트, 텍스트로 사용될 폰트를 웹사이트의 목적에 맞게
미리 선정하여 적용하여야 한다. 그렇지 않을 경우 순간순간 생각 나는 폰트들이 웹사이트
전반에 적용되어 이해하기 어려운 상당히 복잡한 웹사이트로 되고 만다.
이미지에 사용될 폰트의 선택은 무척 중요하다. 웹디자인 초기에 색을 선별하는 것만큼이나
중요한다. 사이트의 이미지에 큰영향을 미치기 때문데 폰트에 대한 벤치마킹도 수시로 해야
한다.(물론 디자이너가 더 해야한다. 기획자도 가끔은 관심을 갖지)
CSS는 Cascading Style Sheets의 약자로 폰트 사이즈, 색깔, 폰트명, 링크색(마우스 올렸을시,
클릭시 등), 박스스타일, 테이블 스타일, 본문(body)스타일 또한 미리 정의해 놓고 스타일만
불러와서 사용할 수 있다. 그렇기 때문에 사이트 초기 CSS에 관한 정의를 어떻게 하느냐가
향후 사이트에 미치는 영향은 매우 크다.
6) HTML 코딩
최근에는 프로젝트에 분업이 세분화 되어 HTML 코더가 별도로 있는 경우도 있다. 별도로 있지
않은경우에는 웹디자이너가 HTML코딩까지 담당하는 경우가 많다. 미리 구성된 사이트설계에
따라 웹 이미지 디자인이 완성이 되고 디자인의 구도와 같이 디자이너가 이미지를 싹뚝 싹뚝
잘라내가 된다. 그다음 HTML로 이미지 사이즈에 맞게 틀을 만들게 되고 그 틀에 퍼즐처럼
이미지를 끼워 맞추면 된다.
HTML코딩만으로도 실력이 많은 차이를 보인다. 정교하고 세밀한 부분까지 신경써서 만든
웹사이트와 대충만든 웹사이트는 보는 것만으로도 다르게 보인다. 아주 잘되어 있다고
생각하는 웹사이트를 선택해 다른이름으로 저장을 하고 드림위버에서 열어보자 어떻게 했는지
한눈으로 볼 수 있을 것이다.
7) 사이트의 구도(레이아웃)
사진이나 미술작품에서도 구도는 굉장히 중요하다. 안정적으로 보이고 각 내용물(컨텐츠)들이
조화롭게 보이기 위해선 좋은 구도를 잡는게 매우 중요하다. 미술작품에서는 황금비율을 많이
사용하는데 1:0.618 또는 1:1.618의 구도가 가장 안정감이 있다고 알려져 있다. 과거유럽의
미술품, 건축물 현대의 조형물, 실생활에 사용되는 담배, 신용카드 등등이 사용되어진다.
<황금비율 1.618 : 1 또는 1 : 0.618>
한국 한옥의 비율은 1:1.414 비율을 갖고 있다.(정말 신기하게도 파이값과 동일하다) 한국적인
비율로 나누고 싶으면 1:1.414의 구도로 나누어서 하는 것도 방법일 것이다.
4. 웹디자인 작업 프로세스
아래에 말하는 웹디자인 작업의 프로세스는 모두 동일하지 않으며 상황에 따라 다를 수 있음을
밝힌다. 웹디자인의 사이사이에 웹기획자와 디자이너는 지속적으로 협의하여 성공적인
웹디자인이 나올 수 있도록 하여야 한다. 스토리보드만 넘겨주고 내 일을 다 했다고 손을
놓는다고 생각하면 오산이다.
1) 기획 컨셉, 디자인전략 협의
설계된 스토리보드(UI설계서)와 기획컨셉, 디자인전략을 협의하에 스타일가이드(디자인원칙)를
만든다. 색의 배합, 폰트의 성격 등의 대략적인 부분만 합의한다.
2) 구도 작업
웹기획자가 우선 전체적인 웹사이트의 구도를 잡는다. 웹기획자도 물론 몇가지 안을 가지고
웹디자이너와 협의하여 전체적인 구도의 틀을 정한다. 구도 부분도 상당히 전략적이어야 하기
때문에 모든 부분에 의미를 두어 작업한다.
3) 디자인 시안작업
메인페이지와 서브페이지의 이미지 디자인작업을 2~3개정도 만든다. 보통 하나는 기획자 및
PM 또는 고객이 요구하는 그대로의 스타일로 만들고 또하나는 디자이너의 창조성이 많이
들어간 스타일, 나머지는 두개가 결합된 스타일을 만드는 것이 좋다.
4) 메타포 작업 및 네비게이션 디자인
아이콘, 박스스타일, 사진의 사용, 마케팅적 홍보관점의 이미지등의 컨셉을 기획자와 지속적으로
협의하면서 정해 나간다. 글로벌네비게이션, 로컬네비게이션의 스타일을 정한다.
5) 최종 디자인 확정 및 이미지 디자인작업
여러 가지 시안과 정의된 메타포스타일을 기준으로 최종 이미지 작업에 들어간다. 포토샵,
일러스트, 플래시의 툴들이 사용되어 진다.
6) HTML 코딩 및 이미지 삽입
HTML 코딩과 동시에 이미지를 잘라내어 HTML 틀 사이사이에 끼워 맞춘다.
7) 테스트
테스트 서버에 작업한 파일들을 올려놓고 링크는 제대로 걸리는지 깨진부분은 없는지 또는
어긋난 부분은 없는지 전반 적으로 살핀다.
8) 프로그래머에게 전달
7)번 작업과 동시에 이루어지며 이미 정해진 스케줄과 같이 작업이 지속적으로 이루어진다.
(HTM코딩 -> 프로그래머 전달 의 작업이 반복적으로 이루어진다.) 디자인이 나오지 않은
상태에서 프로그래머가 먼저 기능적인 작업에 들어가는 경우도 있다. 물론 얼마든지 먼저
할 수 는 있지만 전체적인 측면에서 시간을 보았을때, 디자인이 나온후 프로그램을 입히는
것이 더 속도가 빠르다는 것인 본인의 의견이다.
5. 시니어디자이너와의 웹스타일 가이드의 협의 必
프로젝트나 작업이 시작되기 전에 시니어디자이너와 디자인의 전체적인 내용에 관하여
협의한 사항을 문서화 해야 한다. 문서화 하지 않으면 언제든 방향이 너무나도 쉽게 뒤바뀔
수 있기 때문에 간단하게 나마 문서화 해야 한다.
항목을 예로 들자면, 색상, 폰트, 레이아웃, 메뉴구성, 폼, 배치, 아이콘 스타일, 각 파일
명명규칙 등 기타사항들에 대해서 간략하게 협의 해야 한다. 물론 시니어웹디자이너와
협의하기 전에 기획자는 전체적인 웹스타일가이드를 대략적으로 작성하여 하나하나
협의를 통한후 결정해야 한다. 이부분에서 디자이너와의 충돌이 일어 날 수도 있다.
디자이너의 업무이니 기획자는 신경쓰지 말라! 라는 말을 하는경우를 간혹 보아 왔는데,
이는 디자이너의 편협된 사고 속에 나온 오류이다.(물론 안그런 경우가 더 많다.)
디자인이 엉성해서 나온 사이트의 실패에 대한 책임은 웹기획자가 갖고 있다. 모든 사항의
컨트롤은 시니어웹기획자의 임무임을 잊어서는 안된다. 협의는 강압적이거나 딱딱하게
함으로써 웹디자이너들과의 관계를 얼어붇게 만들 수 있다. 웹디자이너들의 생각과 그들의
작업방식을 확실히 이해함으로써 디자인작업시 발생하는 웹디자이너의 스트레스를 알아주고
들어주는 것만으로도 충분히 신뢰를 얻을 수 있을 것이다.
6. 웹디자인의 목적은 기획자의 목적, 개발자의 목적과 같다.
간략하게 나마 웹디자인이라는 것에 대해 알아봤다. 디자이너와 커뮤니케이션 하기위해서
또는 그들을 리딩하기 위해서 웹디자인 기술들과 용어들, 또는 디자인적 마인드를 마음속에
심어놓는 것은 개인적인 큰 자산이 될 것이다.
웹디자인의 목적과, 프로그램개발의 목적, 사이트기획의 목적은 모두 동일하다. 쇼핑몰에서는
물건을 많이 팔기 위함이고 정보제공사이트에서는 정보를 많이 보고 다시 찾아 주는 것이
목적이다. 홍보사이트이면 고객들의 마음에 특정 ‘키워드’를 인식시켜 주는 것이 목적이다.
이러한 목적은 웹사이트를 구축하는 어떠한 단위작업에서도 동일하다.
단순히 아이콘 하나를 만들더라도, 폰트의 선택, 색의 사용에 있어서도 사이트의 목적과 전략이
무엇인지 항상 염두해 두어야 하며 나름대로의 디자인전략을 구사하는 것이 사이트를 성공적으로
이끄는 중요한 요소가 될 것이다.
출처 : [직접 서술] 블로그 집필 - JKs 웹기획, 웹생태계 기획스토리
|
|
|
|
