본인 스스로도 이미 색안경을 끼고 있다는 사실을 인정한다. 그래도 나는 네이버의 웹디자인을 최고로 친다. 그 이유는 단순히 심미성과 기획만 보자면 네이버보다 뛰어난 웹디자인은 부지기수지만 웹표준 정신과 웹 최적화, 사용성을 모두 고려한 작품을 뽑으라면 단연 네이버이기 때문이다.

 이런 개인적인 평가는 나의 디자인 성향에도 부지 중에 많은 영향을 미치고 있는 것 같다. 1년전 울산 공공시설예약서비스 디자인 시안을 뽑을 때도 너무 네이버스러운 시안을 만들어 버려서 혼자 쓴웃음을 지은 적이 있다. 안타깝게도 나의 실력 부족(개발자가 메인 시안까지 잡는 이해할 수 없는 상황)과 웹서비스 사업의 성공여부 보단 화려한 것으로 클라이언트의 눈을 즐겁게 해야 하는 용역업체의 특성상 플래시를 이용한 '기능'을 강조한 웹사이트 시안을 선택할 수 밖에 없었지만...

 개인적으로는 이 '네이버'스러운 시안을 시도해본 것 자체는 만족.



 이 시안 작업을 한지 얼마 후에 리뉴얼된 네이버 부동산 사이트 디자인을 보고 좀 많이 놀랬다는.... 내가 처음 시안 작업을 할 때는 네이버 메인 페이지의 디자인을 참고만 했을 뿐인데 네이버 파생 사이트의 레이아웃과 메뉴구성까지 같아질줄은 꿈에도 몰랐다.



네이버와 같은 포털사이트의 웹디자인이 항상 정답은 아니다. 그러나 포털사이트의 웹디자인을 참고삼아서 디자인하는 것은 좋은 시도라고 본다. 그 이유는

  1. 사용성 삽질을 미연에 방지할 수 있다. 대형 포털사이트의 웹디자인은 우수한 웹디자이너와 UX석사들의 손을 거쳐서 나오기 때문에 평범한 웹디자이너들이 고민하는 문제들의 '해답'이 이미 페이지에 나와있다. 결론적으로 시안 작업 시간을 아낀다는 것.

  2. 사용자들은 포탈사이트의 디자인에 익숙하다. 사용자들이 가장 많이 접하는 웹사이트가 포털사이트이기 때문에 이미 포털 사이트들의 화면 구성과 기능에 익숙해져있다. 무모한 기획과 디자인 시도는 필연적으로 하자보수로 이어지고 이는 프로젝트 기간을 길게 만드는 원인이 된다.

  3. 웹 최적화 노가다를 피할 수 있다. 개발 단계, 프로젝트 말미에 항상 터지는 최적화 수정사항을 시안 단계에서 이미 끝난다고 보면 된다. 배경이미지 처리, CSS 처리 등 대형 포털사이트의 페이지들은 우리가 생각하는 것 이상으로 많은 최적화 기술들이 적용되어 있다.


저작자 표시 비영리 변경 금지
이 장소를 Daum지도에서 확인해보세요.
울산광역시 남구 신정1동 | 울산시청
도움말 Daum 지도
Posted by 정 영진

트랙백 주소 : http://www.weblind.com/trackback/105 관련글 쓰기

댓글을 달아 주세요



 이번에 개설한 (현재 제작중) 서울산교회 청년회 카페 입니다. 청년 리더 회의의 의결을 토대로 2009년 8월 23일에 카페가 개되었습니다.

 청년회는 제가 10년을 몸담은 곳이기도 하고 이런 일에 대해 하나님께서 제게 주신 뜻이 있기에 현재 이 일은 비영리로 진행하고 있습니다. 마음이 평안하네요.

 공적인 사이트의 목적에 맞추어 흔히 볼수 있는 네비게이션과 상단부 디자인을 사용했고 이벤트 플래시 영역은 쇼핑몰에서 으레 접할 수 있는 형태로 설계하여 사용자 편리성을 높였습니다.

 이번 카페 제작을 하면서 느낀 바는 아래와 같습니다.
  1. 웹사이트 제작에 드는 비용보다 카페를 제작하는데 드는 비용이 훨씬 저렴하다.
  2. 웹사이트를 제작하는 기간보다 카페를 제작하는 기간이 훨씬 짧다.
  3. 웹사이트는 방문자 수가 늘면 서버를 확충해야하고 유지 비용이 들지만 카페는 서버 이용이 무한대면서 비용이 들지 않는다.
  4. 카페는 FLV변환기, 텍스트 에디터, 지도API와 같은 각종 API를 공짜로 사용할 수 있지만 웹사이트는 모두 사거나 제작해야한다.
  5. 이 모든 장점에도 불구하고 웹사이트를 만드는 이유는 디자인인데, 실상 카페의 디자인 수준이 웹사이트보다 떨어지지 않는다.
  6. 수많은 UI디자이너와 UX석박사들이 만든 디자인 템플릿을 웹사이트 구축시에는 돈을 주고 구입해야 하지만 카페는 공짜로 이용할 수 있다.
  7. 웹사이트의 컨텐츠는 검색 엔진에 쉽게 걸리지 않지만 카페의 컨텐츠는 검색 엔진에 잘 걸린다.

 카페의 유일한 단점은 누적된 자료를 빼낼 수 없다는 점인데 사실, 누적된 자료 빼내서 옮길 확율이 얼마나 될까요? 지붕 무너질까봐 집에서 잠을 못자는 성품이 아닌 이상...

 주소: http://cafe.naver.com/flocks/
 소속: 울산광역시 울주군 삼남면 교동리 서울산교회 청년부

저작자 표시 비영리 변경 금지
이 장소를 Daum지도에서 확인해보세요.
울산광역시 울주군 삼남면 | 서울산교회
도움말 Daum 지도
Posted by 정 영진

트랙백 주소 : http://www.weblind.com/trackback/103 관련글 쓰기

댓글을 달아 주세요

 저는 UI디자인을 할 때 대부분의 경우 회색 계통의 색상을 사용합니다. 앞으로도 UI디자인을 할 때 특별한 이유가 없을 경우에는 무조건 회색을 사용할 것입니다. 제가 UI 디자인에 회색과 같은 무채색을 고집하는 이유는 다른게 아닙니다. UI는 그 역활이 문서의 '종이'와 같기 때문입니다.

 여러분 앞에 빨간 토마토 사진과 토마토에 대한 설명이 담긴 문서가 있다고 가정해봅시다. 이 문서를 작성한 사람은 토마토의 싱싱함을 나타내기 위해 물방울이 살짝 맺힌 접사 이미지를 넣었습니다. 그리고 이 토마토에 대해 알고 싶어하는 사람들을 위해 이 토마토가 얼마나 맛있고 어디서 파는지에 대한 글을 작성했습니다. 여기까지가 대부분의 사람들이 기대하는 '토마토 관련 문서'일 것입니다. 그런데 이 문서를 작성한 사람이 토마토의 느낌을 살리기 위해 종이의 색상을 빨간색으로 처리했다면 어떻게 될까요? 그 문서의 디자인을 한번 상상해봅시다. 일단 글자가 눈에 안 들어올 것입니다. 검정 글씨든 하얀 글씨든 간에 절대 한눈에 안 들어올 것입니다. 그리고 가장 중요한 토마토 이미지도 눈에 안 보일 것입니다. 전부 빨간색이니 사람들은 이렇게 말하겠지요.

 "글자가 잘 안보여요!"
 "토마토도 잘 안보여요!"


<토마토를 상장한다는 배경 : 가독성이 떨어진다>

 저는 문서의 종이 즉, UI 디자인 안에 정보와 의도를 담으려는 시도는 가능한 피하는 것이 좋다고 생각합니다. 이런 시도는 정작 가장 중요한 것들(내용)을 망쳐버리지요. 이것은 마치 예쁜 나를 표현하기 위해 꽃무늬 배경 안에서 증명사진을 찍는 것과 같습니다. 내용의 선명도를 떨어뜨리는 잘못된 문서의 배경 디자인은 문서를 보는 사람들로 하여금 짜증을 유발시킵니다.(이것을 보통 사용성 스트레스라고 부릅니다) 그것이 아무리 예쁘고 화려한 배경 디자인이라 하더라도요. "오!! 이토록 다채로운 의미가 담긴 세련된 배경 디자인을 보라!!"라고 감탄하며 유심히 살펴보는 사람은 사실 디자이너들 밖에 없습니다.

 재밌는 것은 웹페이지도 결국은 페이지(문서)이기 때문에 사용자들이 웹페이지를 읽을 때 나타나는 모든 반응과 기대심리는 문서의 그것과 동일하다는 것입니다. (심미성에 자신이 없는 웹디자이너 분은 편집디자인에 대해 공부를 하시면 상당히 도움이 될 것입니다) 이 사실을 염두에 둔다면 UI디자인은 크게 고민하지 않아도 될 것이고 무척 쉬워집니다. 상대적으로 역사가 긴 편집디자인 분야의 누적된 노하우를 웹UI 디자인에 적용만 하면 되니까요.


<아무 의미 없는 배경 : 이미지와 글이 더 선명하게 전달된다.>

 이번 경주 관광 포털의 여행카트 디자인은 이런 편집 디자인의 기본 원칙에 충실했습니다.(상세내용) 기본에 충실했기 때문에 당연히 UI디자인에서 경주를 상징하는 미술적 장치들을 넣지 않았습니다. 굳이 이런 미술적 장치를 넣지 않더라도 이미 경주의 이미지가 여행카트에 나오고 있으니까요. (한번 상상해보세요. 경주의 느낌을 살린답시고 저 여행카트 UI 디자인에 첨성대 벽돌문양을 넣었을 경우 어떻게 보였을지 말이죠.)

 
 여러분들이 UI디자인을 할 때 화면이 허전해 보일 경우 미술적 장치를 적절히 넣어 심미성 균형을 맞추는 것이 바람직합니다. 하지만 필요 이상으로 많은 미술적 장치를 넣게 되면 UI 디자인의 가독성과 명확성은 급격히 떨어집니다. 좀 더 심하면 사용자들은 어느것이 정보고 어느것이 표현인지 구분 못하게 되어 사용성 스트레스를 겪게 되겠지요.
 UI디자인을 할 때는 "이것도 좋고 저것도 좋으니 이것, 저것 둘다 있으면 더욱 좋겠구나!"라는 착각은 버리십시오. 최소한의 미술적 장치를 이용해서 심미성을 높이는 고민을 하십시오. 셍떽쥐베리는 "완벽은 더 이상 덧붙일 것이 없는 상태가 아니라 더 이상 뺄 것이 없는 상태이다." 라고 말했습니다.
저작자 표시 비영리 변경 금지
Posted by 정 영진

트랙백 주소 : http://www.weblind.com/trackback/89 관련글 쓰기

댓글을 달아 주세요

  1. 정명진 2009/08/02 19:32  댓글주소  수정/삭제  댓글쓰기

    잘보았습니다 ^^ 감사

1단계: 개발팀에서 화면구성안이 넘어왔습니다. 오늘 UI디자인 해야할 것은 [세외수입부과시스템]이라는 공공기관에서 사용하는 C#기반의 데스트탑 어플리케이션입니다.


2단계: 심호흡하고 10분 정도 고민하고 UI구성을 머릿속으로 그려봅니다.

3단계: 그후 개발팀과 대화를 나눕니다. (10분) 상상속 의 UI구성이 기술적으로 가능하고 요구사항에 부합되는 것인지...

4단계: 이야기가 끝나고 기술적으로 문제 없다고 판단이 서면 디자인 시작합니다.


 일전에 저는 심미성 패턴을 지키면 디자인이 굉장히 빨리 끝난다는 글을 포스팅한적이 있습니다. 실제로 메뉴 디자인과 레이아웃 잡는 것은 10분만에 끝내긴 했습니다. 하지만 심미성 패턴만으로도 어떻게 할 수 없는 영역이 있더군요.

바로 도트입니다.



 별것 없는 것 같지만 정말 시간이 많이 걸리는게 도트 디자인입니다. 점 하나로 심미성과 제공성이 달라지기 때문에 도트 디자이너들은 도트 하나를 찍을 때도 몇번씩 삭제하고 고민합니다. 안타깝게도 관리직 사람들은 이런 도트 디자이너들의 노고를 잘 이해하지 못하는 것 같더군요.

 (나중에 기회가 되면 도트 디자인의 중요성에 대해 포스팅해볼 예정입니다)

 추가 팁으로 로고는 배경과 잘 싱크 되게 타이틀은 선명하게 하는 것이 심미성을 높이는 지름길입니다.


 "공직사회의 깔끔함(?)"을 표현하기 위해 파란색 라인을 사용했는데 그리 나쁘진 않군요.


5단계:
어플 디자인이 끝났으면 이제 바탕화면에 보여질 아이콘을 디자인 해야겠지요?


 사이즈는 128*128, 48*48, 32*32, 16*16... 총 4개입니다. 이렇게 4개를 따로 만들어 두는게 좋습니다. 방금 제가 말한 사이즈로 만들면 대부분의 운영체제에서 깨지지 않고 깔끔한 아이콘으로 나올 것입니다. (이것이 표준이라고는 자신있게 말씀은 못드리겠군요)

6단계: 무한루프 수정사항 반영 (무서워요 ㅜㅜ)

 아무튼 여기까지가 일반적으로 데스크탑 어플리케이션의 UI디자인을 해 나가는 과정 중 가장 빠른 방법입니다. 사용자 요구사항, 체크리스트, 사용성 테스트 등 UI디자인은 신중하고 체계적인 순서를 거쳐야하지만 이렇게 간단한 어플은 위에서 제가 알려준 방법대로 해도 크게 무리가 없답니다. 신입 디자이너 분들께 도움이 되었으면 좋겠군요.
저작자 표시 비영리 변경 금지
Posted by 정 영진

트랙백 주소 : http://www.weblind.com/trackback/80 관련글 쓰기

댓글을 달아 주세요