경주 관광 포털 사이트의 핵심 서비스 중에 하나인 여행카트 서비스는 사용자들이 웹서핑 중에 마음에 드는 여행지가 있으면 상품 카트처럼 여행지들을 카트에 담을 수 있는 서비스입니다. 사용자들은 이렇게 카트에 모은 여행지들을 정리해서 여행 일정표를 작성하거나 출력할 수 있습니다.



이번 여행카트 디자인과 설계의 특징은 대략 아래와 같습니다.
  1. 전체적인 UI디자인은 회색계통의 무채색을 사용했습니다.그래픽툴, 개발툴, 웹브라우저까지 총 망라한... 우리가 접하는 수많은 UI들이 회색을 사용하고 있습니다. 회색이 정보를 표현하는데 가장 명확하고 공정한 색이기 때문이지요. 이번 여행카트 디자인에는 다양한 형태의 관광지 사진이 들어가는데 이 다채로운 색상의 이미지들을 모두 받아내는 UI색상은 역시 회색 밖에 없다고 생각했습니다. 사용자들의 눈에 들어와야하는 정보는 UI디자인이 아니라 관광지 이미지니까요. (자세한 설명은 예전의 기사를 참고 하시길 바랍니다.)

  2. UI에서 큰 아이콘은 검정색으로 처리했습니다. 아이콘이 UI와 같이 회색이면 주목성이 떨어지고 유채색을 사용할 경우엔 정보객체(관광지 사진)의 주목성을 떨어지기 때문입니다. 아이콘이 작을 경우에는 유채색이어도 정보객체의 주목성을 떨어뜨리지 않기 때문에 적절히 사용해도 상관없습니다.

  3. 우측의 버튼으로 카트의 내용을 보여줄 수도 있고 숨길 수도 있게 했습니다. 커다란 카트가 항상 열려 있으면 사용하는데 무척 걸리적 거리겠지요?

  4. 플래시가 제공하는 기본컴포넌트의 디자인을 그대로 사용했습니다. 이런 디자인들은 가급적 손을 대지 않는게 좋습니다. 왜냐하면 이미 사용자들은 이러한 UI디자인에 오랜 기간 숙달되고 익숙하기 때문입니다. 새로운 디자인이 아무리 훌륭하고 아름다워도 사용자들이 그 디자인에서 "기능(Function)"을 빠르게 유추해내지 못하면 쓸모가 없는 것이지요. 그러므로 UI디자이너들은 가급적 기본 컴포넌트에 어울리게 UI를 디자인을 하는 것이 좋습니다.

  5. 여행지들의 이동과정을 유추할 수 있도록 디자인 했습니다. 한 화면에 관광지를 3개 밖에 넣을 수 없어 조금 아쉬웠지만 상단의 여행코스 탭의 괄호() 안에 여행지 갯수를 넣고 카트 좌우측에 < > 버튼과 여행정보 객체 사이에 → 버튼을 넣어 '여행 카트에 더 많은 여행지들이 숨어 있다.'는 사실을 사용자들이 유추해낼수 있게 했습니다. (할만큼 했는데 조금 아쉽네요)

  6. 상세목록 탭을 클릭하면 해당 여행 경로가 목록으로 나옵니다. 앞서 설명한 여행코스 탭에서 한 화면에 다 담지 못한 여행객체들을 도표로 한눈에 볼수 있게 했습니다. 그리고 우측에 간략히 정리된 문서형 정보가 나오기 때문에 도표를 잘 이용하는 사용자들에 큰 도움이 될 것입니다.

  7. 여행 정보객체들을 드래그해서 위치를 바꿀 수 있게 했습니다. 아마 대부분의 사용자들은 이 기능을 잘 몰라서 사용하지 않을 것입니다. 아직까지 인터넷 세상에서 드래그앤드랍 기능을 사용해볼 기회는 그렇게 많지 않으니까요.


각 여행지 객체에는 롤오버시 작은 메뉴가 나옵니다.
이 메뉴의 삭제 버튼과 드래그 등을 통해 여행 일정을 조정할 수 있습니다.
모든 이미지는 도트로 명확하게 표현했고 텍스트도 안티엘리어싱이 없습니다.


달력 컴포넌트입니다.
플래시CS3는 자체적으로 달력 컴포넌트를 제공하지 않아 만들어 써야 했습니다.
어설픈 컴포넌트 하나 만드느라 약간 애를 먹었네요.



도표의 사용빈도는 의외로 높습니다.
참신한 기획력과 디자인, 기술을 입힌 컨텐츠도 좋지만
다소 투박하더라도 이런 도표 컨텐츠를 추가로 넣어두면 웹카트의 사용성은 더욱 높아집니다.
(시간과 비용이 허락하는 선에서 말이죠)


(출처 : 조석 블로그)

 이번 경주 관광 포털의 여행카트는 쇼핑몰의 상품카트와 여행포털의 일정표 서비스의 장점들을 합친 서비스입니다. 다소 생소한 서비스지만 웹카트는 쇼핑몰 등을 통해 워낙 많이 접해본 서비스이니 첫 사용자들이 겪게 되는 사용성 스트레스는 그리 크지 않을 것입니다.
저작자 표시 비영리 변경 금지
Posted by 정 영진

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

댓글을 달아 주세요

 저는 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박2일로 수정했습니다.

사용자 삽입 이미지
갑갑한 도시에서 떠날 마음의 준비가 되셨습니까?







첫째날:송정해수욕장


오전 : KTX를 타고 대구로 출발


사용자 삽입 이미지
울산까지 4시간 이상을 버스타고 오는건 정말 힘든 일이에요.
KTX 타고 대구까지는 1시간 30분이면 갈 수 있습니다.
제가 마중나와 기다리고 있을게요.


오후 : 영진집에서 짐을 푼 후 송정으로 출발


사용자 삽입 이미지
사용자 삽입 이미지
잘 아시는 해운대 바로 옆의 해수욕장입니다.
이곳도 해운대처럼 사람은 많습니다만 물이 좋아요. ㅋ


저녁 : 영진집


사용자 삽입 이미지
사용자 삽입 이미지
누추한 곳인데 마음에 드실지 모르겠네요.
이곳 마당에서 제가 고기를 구워드릴게요.
밤늦게는 놀지 못하는데... 정 아니다 싶으면 경주 대명콘도로 숙박을 옮기겠습니다.
(콘도 싸게 이용하는 방법이 있지요.)





둘째날:낚시



사용자 삽입 이미지
집 뒤에 저수지로 낚시 하러 갈까합니다.
"창호씨~ 낚시도 나름 재밌어요."
저수지는 저기 골짜기 안에 있습니다.



약간 쉬신다음에 제가 대구까지 대려다 드릴게용.
대구서 KTX타고 올라가심 될겁니다. ^^

'사는 이야기' 카테고리의 다른 글

맨유의 지난 10년 리빌딩 과정  (0) 2008/05/27
다시 울산으로  (0) 2008/05/22
여름 여행 광고  (0) 2008/04/23
디자인팝 가족  (0) 2008/04/07
군문제 남녀 불평등 해결 방안  (1) 2007/05/18
축구선수의 연봉이 낮은 이유  (13) 2006/02/20
Posted by 정 영진

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

댓글을 달아 주세요

얼마전에 디자인팝 가족들이 가평에 여행을 갔었다.

난 울산에 내려가야해서 아쉽게 참석 못했지만 인트라넷을 통해 귀한 사진을 구할 수 있었다. 사진은 박미정 과장님, 안기현 과장님, 유진화씨 등이 찍었고 나는 허락도 없이 올린다. 안올리면 후회할 거 같아서 ... ^^
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지






























































이 사람들과 함께한 추억은 평생 못잊을 것이다. 10개월간 정말 즐거웠다.

'사는 이야기' 카테고리의 다른 글

다시 울산으로  (0) 2008/05/22
여름 여행 광고  (0) 2008/04/23
디자인팝 가족  (0) 2008/04/07
군문제 남녀 불평등 해결 방안  (1) 2007/05/18
축구선수의 연봉이 낮은 이유  (13) 2006/02/20
자화상  (0) 2005/07/12
Posted by 정 영진

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

댓글을 달아 주세요