1. 경주 U-관광 프로젝트 키오스크 (기획)

프로젝트 후기 2009/04/10 18:00

 경주 관광안내 도우미(T.I.S)는 경주시의 다양한 관광지들과 문화재, 숙박시설, 음식점들의 정보를 손가락으로 화면을 누르며 확인할 수 있는 터치스크린(touch screen) 시스템입니다. 이 시스템이 제공하는 서비스는 아래와 같습니다.
  1. 분류 검색 서비스를 제공합니다. 사용자들은 이 서비스를 통해 자신이 원하는 형태의 관광자원만 정리해서 확인할 수 있습니다.

  2. 지도 검색 서비스를 제공합니다. 사용자들은 이 서비스를 통해 검색 대상의 대략적인 위치를 확인할 수 있고 주변의 여러 관광자원들의 위치도 파악할 수 있게 됩니다.

  3. 여행카트 서비스를 제공합니다. 모든 관광자원들은 여행카트에 담을 수 있고 사용자들은 이 여행카트에 담긴 관광자원들을 이용해 간단한 여행 일정표를 만들 수 있습니다.

  4. 4개국 언어환경 서비스를 제공합니다. 경주를 찾아 온 외국인들도 한국 사람들과 동일한 서비스를 제공 받습니다.

  5. 그외 각종 다양한 서비스들을 제공합니다. 경주시의 각종 행사 일정을 확인할 수 있을 뿐만 아니라 오늘의 날씨, 공공시설 위치 등 여행자들이 원하는 수많은 정보들을 제공합니다.

 이 시스템은 경주역과 안압지 입구에서 이용할 수 있습니다.


<여행도우미(키오스크) 조작화면>

 이번 키오스크 프로젝트는 저에게는 정말 큰 경험이었습니다. 웹 어플리케이션을 제작할 때 플래시를 사용해본 경험이 있으니 데스크탑 어플리케이션(플래시 AIR)도 쉽게 가능할 것이라 단정하고 이번 프로젝트에 임한 것은 정말 큰 실수였습니다. 생각해야할 것들이 너무 많았지요. 또한, 명확한 설계서 없이 진행되고 프로젝트 내내 새로운 컨텐츠가 추가되다보니 시간에 쫓기고 UX는 엉망이 되었 의도한대로 만들 수 없었습니다. 개인적으로는 최악의 프로젝트 중 하나로 기억될듯 합니다.

  1. 자원관리 : 데스크탑 어플리케이션은 웹환경과 달리 자원 관리가 굉장히 중요한 요소입니다. 포인트를 일일히 지정해서 메모르를 관리해야하는 C언어와 틀리게 플래시 플레이어의 가비지 컬렉션이라는 인공지능 모듈이 알아서 메모리를 관리해줍니다. Adobe측에선 이 기능을 대대적으로 홍보하고 있지만 실제 이 기능은 빚좋은 개살구나 마찬가지입니다. 가비지 컬렉션의 동작을 유도하는 것은 쉬운 일이 아니며 개발자 스스로가 메모리 관리를 할 방법도 없기 때문입니다. (이것에 대해선 차후에 다시 한번 포스팅할 예정입니다)

  2. 문서 : 프로젝트 도중에 수정사항이 들어오면 코딩은 산으로 가기 시작합니다. UX 설계는 말할 것도 없구요. 개발 전에 이루어지는 문서 정리 과정의 소중함을 다시 깨닫게 된 계기가 되었습니다.

  3. 설계 : TIMER객체를 이용한 옵저버 패턴으로 대부분의 이벤트를 처리했는데 이것이 코딩의 양이 방대해지니 문제를 일으키더군요. 각 리스너는 0.1초에 한번씩 이벤트를 살펴보는 구조로 되고 이런 구조는 소규모 어플리케이션에서는 안전하지만 대규모 어플리케이션에는 반드시 문제를 일으킵니다. (코딩의 양을 계산해보니 대략 7000줄 쯤 되는 것 같더군요) 그렇다고 TIMER객체의 시간 설정을 0.1초가 아니라 0.01초로 더욱 민감하게 만들어 놓으면 CPU 점유율이 올라갑니다. 진퇴양난입니다.;; 다른 개발자 분들은 어떻게 하시는지 모르겠지만 TIMER객체로 이벤트를 감시하는 구조는 가능한 자제하십시오.

  4. 컴포넌트 : 이번 키오스크는 터치스크린 구조입니다. 터치스크린은 손가락으로 조작하기 때문에 일반적인 마우스 조작과는 다른 환경입니다. 이 때문에 플래시에서 제공하는 우수한 UI컴포넌트들을 모두 버리고 직접 제작해야했습니다. ㅡㅡ;; UI컴포넌트를 사용할 수 있느냐 없느냐에 따라 프로젝트의 전체 일정도 상당한 차이를 일으키더군요. 일정이 자꾸 밀리기 시작했고 이 때문에 근 2달간 새벽에 퇴근해야했습니다.

 AS3.0 / 플래시로 데스크탑 어플리케이션을 제작할 때는 웹 어플리케이션 제작 일정의 2배로 잡아야 안전할 것입니다. 플래시 AIR를 제작하는 개발자 분들께 참조가 되었으면 좋겠군요.

저작자 표시 비영리 변경 금지

'프로젝트 후기' 카테고리의 다른 글

북구체육시설 예약서비스  (0) 2009/08/17
2. 경주 U-관광 프로젝트 키오스크 (디자인)  (0) 2009/04/17
1. 경주 U-관광 프로젝트 키오스크 (기획)  (0) 2009/04/10
경주 U-관광 프로젝트 여행카트  (0) 2009/04/03
경주 U-관광 프로젝트 입체검색  (0) 2009/03/20
경주 공공시설 예약 서비스 프로젝트 후기  (2) 2009/03/06
Posted by 정 영진
TAG AIR, 경주, 관광, 기획, 키오스크, 플래시, 대한민국>울산광역시>남구>무거동>벤처빌딩
트랙백 0개, 댓글 0개가 달렸습니다.

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

댓글을 달아 주세요

경주 U-관광 프로젝트 여행카트

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



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

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

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

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

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

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

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


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


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



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


(출처 : 조석 블로그)

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

'프로젝트 후기' 카테고리의 다른 글

2. 경주 U-관광 프로젝트 키오스크 (디자인)  (0) 2009/04/17
1. 경주 U-관광 프로젝트 키오스크 (기획)  (0) 2009/04/10
경주 U-관광 프로젝트 여행카트  (0) 2009/04/03
경주 U-관광 프로젝트 입체검색  (0) 2009/03/20
경주 공공시설 예약 서비스 프로젝트 후기  (2) 2009/03/06
초등 단계별 영어듣기인증제 듣기 평가  (3) 2008/11/14
Posted by 정 영진
TAG 경주, 기획, 여행, 카트, 플래시, 대한민국>울산광역시>남구>무거동>벤처빌딩
트랙백 0개, 댓글 0개가 달렸습니다.

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

댓글을 달아 주세요

경주 U-관광 프로젝트 입체검색

프로젝트 후기 2009/03/20 09:00
 이번 경주 u-관광 서비스 프로젝트에서 포털사이트의 핵심 서비스로 내새운 것 중에 하나가 입체검색과 여행카트입니다. 여행지들을 쇼핑카트처럼 담아서 일정표로 출력할 수 있는 여행카트 서비스는 기존의 여행관련 웹사이트나 관공서 등에서 많이 시도한 검증된 서비스고 관광정보를 원하는 사용자 요구사항을 대부분 충족시킬 수 있는 좋은 서비스입니다. 복잡 다양한 정보를 '패턴화'시키는 기준이 애매하기는 했지만 축적된 기획력과 기술력을 바탕으로 이번에 저희 회사에서 기존의 여타 웹사이트와 차별화된 훨씬 수준 높은 여행카트를 만들 수 있었습니다. 하지만 모든 서비스가 여행카트처럼 순적히 진행된 것은 아닙니다. 이번 포털 사이트의 검색 시스템은 네이버나 다음처럼 우리가 주로 사용하는 문서형 검색 방식이 아닌 입체형 검색 방식이라는 색다른 방법이었는데 이런 입체형 검색은 여러가지 문제를 내포하고 있었고 이 문제들을 해결하는데 시간이 많이 걸렸기 때문입니다.




 사실, 저는 개발 초기부터 입체형 검색을 사용하는 것에 대해 부정적인 입장이었습니다. 그 이유는 대략 아래와 같습니다.

  1. 대부분의 사용자들은 기존의 문서형 검색에 길들여져 있습니다. 근원적인 질문을 해봅시다. 입체검색이라는 것이 왜 필요한 것일까요? 정보가 가공되지 않은 형태로 난잡하게 작성된 글만 있는 문서는 사용자들이 알아보기 힘듭니다. 그래서 이렇게 난잡한 정보들을 의미에 맞게 정리, 축소, 도형화 시켜 다이아그램이라고 부르는 표현 객체로 만들면 사용자들이 보다 알아보기 쉽게 됩니다. 입체검색은 이런 다이아그램의 한 표현 방법이지요. 여기까지 생각해보면 입체검색은 꼭 필요한 서비스 같지만 현실은 다릅니다. 대부분의 사용자들은 네이버나 다움 등의 검색엔진이 제공하는 문서형 검색 결과에 오랜 기간동안 길들여져 있습니다. 그리고 사용자들은 이미 입체검색보다 문서형 검색결과에서 더 빠르게 반응하고 원하는 정보를 얻어가도록 훈련되어졌습니다. 기존의 문서형 검색으로도 충분히 원하는 정보를 찾아갈 수 있는데 굳이 사용자들이 입체검색을 이용할려고 할까요?

  2. 입체검색은 표현의 제약이 많습니다. 반대로 문서검색은 정보 표현의 제약이 거의 없습니다. 입체검색의 가장 큰 문제점은 사용자들에게 보여줄 정보 중에 몇 가지 형태는 '포기'를 해야한다는 것인데 이것은 우리가 일반적으로 기대하는 바람직한 검색이 아닙니다. 네이버도 최상의 검색 시스템을 사용자들에게 제공해주기 위해 꽤 많은 서비스를 연구하고 있고 그 서비스들 중엔 우리와 같은 입체검색도 존재하고 있습니다. 하지만 네이버의 UI 석박사들도 입체형 검색 결과와 문서형 검색 결과를 동시에 보여주는 형태를 선택했더군요.

  3. 입체검색은 사용자들의 이해가 필요합니다. 사용자들은 새로운 웹 UI정보를 받아들일 마음의 준비가 되어 있던 초창기 웹 환경과 달리 굳이 새로운 것을 교육받지 않더라도 자신의 머릿 속에 경험으로 누적된 UI 정보를 바탕으로 사용자들은 자신이 원하는 정보를 찾아낼 수 있게 되었습니다. 입체검색은 대부분의 사람들에게는 익숙하지 않은 UI이고 이것을 사용하도록 강요받을 때는 약간의 "짜증"을 사용자들에게 줄 수 있습니다. 이 문제를 해결 못하면 사용자 대부분은 "왜 이렇게 사용하기 어려워?"라고 투덜대며 이 웹사이트를 떠나버리겠지요. 경주관광 입체검색은 하늘 위에서 관광지들을 보는 것 같은 사용자 경험을 제공하고 주변 관광 정보까지 파악할 수 있는 훌륭한 서비스임에도 불구하고 말입니다. 안타깝지만 사용자들은 변화를 싫어합니다.

 입체검색은 이미 11번가에서 실패한 전례가 있었고 수많은 블로거들에게 혹독한 비난을 받았기 때문에 (저도 많이 팼습니다) 막상 제가 입체검색을 제작할려고 하니 밤에 잠이 안올 정도로 걱정되었습니다. 더군다나 공공기관 웹사이트인데;; 이번 경주 관광 입체검색은 신중하게 제작할 수 밖에 없었지요. 요구사항에 포함되지는 않았지만 11번가 입체검색보다 디자인, 기술력에서는 다소 부족하더라도 11번가 입체검색의 가장 큰 문제점이었던 사용성만큼은 최상으로 만들어야 했습니다.

 이해를 돕기 위해 11번가에 대해 간략히 설명드리겠습니다. 11번가는 SK라는 대기업의 지원을 등에 엎고 축적된 상품DB, 화려한 기술력과 참신한 기획력을 총동원하여 제작한 웹2.0 시대를 이끌 쇼핑몰이라 기대되었던 오픈마켓 사이트입니다. 거창하게 시작했지만 서비스를 시작한지 이제 1년을 넘은 현재까지도 11번가에서 제공하는 '자칭' 웹2.0 서비스들의 이용율은 미미한 편이고 오픈마켓 시장에서 큰 영향력을 끼치지도 못하고 있습니다. 수많은 기능으로 무장했음에도 불구하고 사용자들은 오히려 기술적 거부감을 느꼈고 궁극에는 "불편하다."고 단정짓고 11번가를 떠나버렸지요. 웹사이트 하나 잘 만들어 놓으면 그냥 사람이 모였던 예전 분위기와 틀립니다. 화려한 기술과 기획, 디자인으로 무장한 웹사이트라 하더라도 서비스 정신이 없으면 실패하는 것이지요. 시대는 그렇게 변한 것 같습니다.



 이상이 제가 입체형 검색을 사용하는 것에 대해 부정적인 입장을 취한 이유입니다. 잘할 수 있을지 무척 걱정되었지만 제가 할 수 있는 능력과 자원 안에서 최대한 사용성을 높여 보기로 했습니다. 다행히 11번가의 입체검색이 수많은 블로거들에게 얻어맞아준 덕분(?)에 좋은 참조가 되었습니다.

 제가 의도한 경주관광 입체검색의 형태는 아래와 같습니다.
  1. 가벼워야 합니다. 11번가의 입체검색은 심각할 정도로 자원소모가 심했습니다. 그리고 검색 결과가 모두 화면에 표시되기까지 지루한 과정(일종의 애니메이션)을 거쳐야했는데 이런 의미없는 과정들을 참을성 있게 지켜보고 있을 사용자는 (이것을 만든 사람을 제외하곤) 세상 어디에도 없습니다. 의미없는 검색 과정은 모두 제거했고 자원소모를 유발시키는 의미없는 미술적 장치들도 모두 제거했습니다. 개발 관련 부분에서 보다 자세히 다루겠지만 이런 최적화 노력으로 낮은 CPU점유율(검색결과의 양에 따른 램훅 현상은 어쩔수 없구요...)과 빠른 검색, 30KB 정도 밖에 안되는 썸네일 이미지 수준의 매우 작은 용량의 입체검색 플래시를 만들어 낼 수 있었습니다.

  2. 문서형 검색을 포함해야 합니다. 약간의 문서형 검색 결과를 삽입해놔야하는 이유는 다른게 아닙니다. 검색창 하나와 입체검색이 있는 웹페이지를 처음 본 사용자들의 기분을 상상해봅시다. 이것이 검색이라는 사실을 인지하기까지는 꽤 시간이 걸릴 것입니다. 최소한 사용자들이 첫눈에 "아~ 이건 검색이구나."라는 사실 정도는 알아야하니까요. 네이버의 UI팀들도 결국 입체검색과 문서형 검색을 동시에 보여주는 형태를 선택했다고 앞서 말씀드렸습니다. 그 정도로 입체검색은 자생력이 낮고 친숙하지 않은 서비스입니다. 저 또한 입체검색 상단에 간단한 문서형 검색 결과를 추가시켜놨습니다만 안타깝게도 이부분은 결국 제한적으로 구현되었습니다.

  3. 알아보기 쉬워야 합니다. 각 검색 객체에 사진을 넣어 의미전달성을 높였습니다. 네이버 인물 검색의 초상 이미지만큼 중요도가 높은 부분은 아니지만요. 그리고 각 메뉴의 타이틀은 제거했습니다. 사실 메뉴에 타이틀이 없으면 알아보기 힘들어 사용성이 떨어지지만 막상 집어넣어 보니 검색 객체의 다른 타이틀과 겹치면서 더 알아보기 힘들게 되더군요. 고민을 많이 했습니다만 결국 타이틀은 빼고 플래시로 Alt 기능을 구현하는 것으로 해결했습니다.(그래도 찝찝하네요.)

  4. 사용하기 쉬워야 합니다. 각 검색 객체를 누르면 간단한 모션이 발생합니다. 위치를 찾아가는 형태의 애니메이션인데 사용자들은 이 애니메이션을 통해 관광지의 위치 정보를 유추해낼 수 있게 됩니다. 간단한 애니메이션 하나로 부지 중에 위치 정보를 교육 받는 효과가 일어나는 것이지요. 아마 사용자들은 하늘 위에서 여행지를 돌아다니는 것 같은 기분이 들 것이고 이로 인해 새로운 것에 대한 '거부감' 없이 원하는 여행지로 찾아갈 것입니다. 카트담기 버튼을 제외 하고 다른 버튼을 크게 못 만든 것은 아쉽군요. 사용성을 생각하면 버튼을 크게 만드는 것이 맞지만 버튼이 너무 크면 상대적으로 검색 객체가 부각되지 않아 또다른 사용성 문제가 발생해서 말이죠.


 

 이번 입체검색은 아직 표준화 되지 못한 부분이 많은 미개척 서비스인 것이 사실입니다. 하지만 저는 우리 팀이 남들 다 하는 문서형 검색에 안주하지 않고 입체형 검색이라 새로운 분야에 도전하고 함께 머리를 맞대어 고민했다는 사실에 큰 의미를 두고 싶습니다. 누군가는 새로운 기술(neo-tec)에 도전하고 뒷 감당을 해야 세상이 발전하는 것이니까요. 사실인즉, 이번 프로젝트는 입체검색이라는 새로운 검색시스템을 실 웹서비스에 적용한 국내에서 몇 안되는 사례로 뽑힐 것입니다. 차후에는 저희 보다 훨씬 완성도가 높은 입체 검색이 계속 나왔으면 하는 바램입니다. (지켜보겠어!)

 제 글이 입체검색을 서비스하려고 계획중인 기획자나 사업자들에게 약간이나마 도움이 되었으면 좋겠군요.
저작자 표시 비영리 변경 금지

'프로젝트 후기' 카테고리의 다른 글

1. 경주 U-관광 프로젝트 키오스크 (기획)  (0) 2009/04/10
경주 U-관광 프로젝트 여행카트  (0) 2009/04/03
경주 U-관광 프로젝트 입체검색  (0) 2009/03/20
경주 공공시설 예약 서비스 프로젝트 후기  (2) 2009/03/06
초등 단계별 영어듣기인증제 듣기 평가  (3) 2008/11/14
V3 365 클리닉 프로젝트 후기  (0) 2008/03/25
Posted by 정 영진
TAG 경주, 기획, 입체검색, 플래시, 대한민국>울산광역시>남구>무거동>벤처빌딩
트랙백 0개, 댓글 0개가 달렸습니다.

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

댓글을 달아 주세요