2 메인메뉴에 이어 다음 포스팅이 나오기까지 기대에 찬 마음으로 오래 기다리셨죠? 3편은 아이나비 에어의 지도디자인에 대해 풀어보겠습니다.

 

 

아이나비 SE 지도와 비슷하다구요? 그렇게 보시면 아니아니~아니되오!  

 

아이나비 에어의 지도를 보시고, 아이나비 SE 지도를 그대로 썼구나! 하시면정말 우울해지고 섭섭해질겁니다... 물론 아이나비 SE 지도 체계가 기반이 되기는 했습니다. 그러나, 비교를 해보시면 지도의 분위기가 확연하게 다름을 느끼실 수 있을 겁니다. 지도의 컬러를 현재의 지도 디자인 트랜드에 발맞추어 대폭 개선을 했기 때문이죠~ㅎ

 

아이나비 에어 지도의 디자인컨셉은 이러합니다.

 

 

백문이 불여일견, 그럼 아이나비 SE아이나비 에어지도를 비교해 볼까요?

슬라이드 이미지 상단의 "◀◀" , "▶▶" 버튼을 누르시면 아이나비 SE아이나비 에어 지도를 쉽게 비교하실 수 있습니다.

 

어떠신가요비교하니 아이나비 에어 지도의 변한 점을 확인하실 수 있지요? 화면상으로 보시면, 주간의 경우 아이나비 SE보다 채도가 낮아 흐릿해 보이고, 야간의 경우는 과도하게 어두운 느낌이 들것입니다. 실내의 모니터에서 보시면, “뭐 별로 개선된 점이 없어 보이는데?” 라고 느끼실 수 있지요. 그러나, 주행상황과 디바이스 LCD의 상태를 고려하여 실차테스트를 통한 튜닝에 튜닝을 진행하여 나온 지도의 톤입니다.

 

아이나비 에어를 실제로 사용해 보신 분들 중에서 흐릿하고 안보여서 도로선형이 잘 파악되지 않거나 지도의 시인성이 저하된 느낌을 받으신분 있으신가요? 아마 대부분 없으실겁니다!(는 밑도끝도 없는 자신감이겠지요? 죄송합니다;;; )

 

사용 고객에 따라 약간씩 느끼는바에 차이가 있겠지만, 현재까지 지도의 시인성에 대해 크리티컬하게 불만을 제시한 사용고객님은 없으신 것으로 알고 있습니다. 그 이유는 디바이스 LCD의 차이에 있습니다. 기본적으로 요즘 출시되는 스마트폰 디바이스는 화질이 비교적 매우x5 뛰어난 편입니다. 그래서 미세한 색감, 명도 등의 차이가 뚜렷하게 나타납니다. GUI 디자이너가 의도한 컬러가 잘 표출되는 편이지요.

 

<여기서 잠깐> 담당분야로 살짝 빠질게요~ GUI디자인 영역에 몸담고 계신 분은 "스마트폰 LCD LCD나름이다!!" 라고 이견을 제시하실 분 있다는 것 알고 있습니다. 하지만, TN패널에 난반사를 방지하는 논글레어타입 위주의 내비게이션 화면에 비해 스마트 디바이스의 LCD환경은 완전 천국이라는 것을 직접 겪어보지 않으면 모르실겁니다.

 

아이나비 SE 지도는 기본적으로 TN패널에 최적화된, 그리고, 이전 하향스펙단말의 LCD까지 고려하여 안정적인 시인성을 보장해야하는 감안사항으로 인해 색상,명도, 채도를 다소 과도하게 적용한 것입니다. 이 컬러를 스마트 디바이스에 그대로 적용(실제로도 초기 시안 작업할 때 아이나비 SE지도를 캡쳐해서 작업했습니다.) 했더니오히려 과도한 표현들로 인해 눈이 피곤하며 산만하고 정보인지에 어려움이 발생했습니다. 시리즈 포스팅 첫 회때 에어 디자인의 컨셉에도 언급했을 것입니다. Smart Device Base가 얼마나 중요했는지를요~

 

지도 디자인은 제가 "판도라의 상자를 연다"라고 종종 말합니다. 보통 잘 모르시는 분들은 이렇게 말합니다. "도로선형이 잘 안보이니까 보이게 끔 좀더 진하게 바꾸면 되겠네?" 그 도로선형의 컬러를 건드리는 순간 판도라의 상자가 열리는 것입니다. 쉬워 보이지만, 쉽게 접근했다가 겉잡을 수 없이 다양한 정보와 그에 따른 색상컬러의 톤의 조화를 고려해야 하기 때문에 최적의 결과물을 도출하기 위한 이 과정이 상당히 어렵습니다.

 

이렇게 아이나비 에어 프로젝트에서는 이렇게 판도라의 상자를 열었습니다. 정보 인지의 범위에서 폰트의 크기와 색상, 명도를 정보의 우선순위를 고려하여 강약을 조절하였습니다또한 지도의 톤에 조화를 고려하여 도로번호 아이콘도 색상 및 채도를 조절 하였습니다. 도로의 선형의 굵기 컬러 또한 아이나비 에어의 디바이스 환경과 컨셉에 맞게 최적화를 진행했습니다.

이렇게 개선하고 정리를 진행하고 보니 지도가 참 깔끔하고 세련되었다는 느낌이 들었습니다. 이부분이 주행테스트할 때 몸소 느낀 부분인데 지도를 계속 보게 만드는 마력이 있었습니다. 안전운행에 방해가 되지 않는 선에서요- (너무 자화자찬 아니냐? 혼날라구...) 물론 부족한 부분도 있습니다. 하지만 이 부분들은 차후 업데이트에 반영될 수 있게 노력하겠습니다. ㅠ ㅠ

 

이렇게 보니, 아이나비 SE지도가 상대적으로 못나게 비교되어 사용자분께서 불만을 표출 하실 수도 있을 것 같습니다. “지도가 못났어! 못나도 너~~~~~~~~~~~~~~~~무 못났어! 바꿔줘! 안바꿔줘? 안바꿔준다 이거지? 브라우니! 물어! 물어!” (….앙대!! 버틸 수가 없다!)  알겠습니다. 아이나비 SE지도도 개선을 고려하겠습니다. 다 같은 아이나비인데, 차별할 수는 없지요…. (팀원의 분노에 찬 원성이 느껴진다. 등에 칼꼽히기 전에 감사로 마무리 해야지!)   

 

끝으로 아이나비 에어 지도 디자인의 기반을 탄탄하게 다져준 지도디자인 팀원분들과 [필살! 화룡정점]을 찍은 우리 팀원(일기당천의 초강력 능력자!)에게 특수 감사를 드립니다또한 지도가 멋지게 나올 수 있도록 긴밀한 실무협업을 해주신 GIS연구소, 내비개발부문의 부서장님, 팀장님, 개발연구원님들께 특별 감사를 드립니다.

특수 감사와 특별 감사의 차이는 뭐냐구요? 특수는 훈에 대한 감사구요, 특별은 처럼 빛나는 개발내공을 발휘해 주신 것에 대한 감사입니다. (너무 급조한 티 팍팍난다! 급조해도 너~~~~~~~~! 급조했어! 바꿔줘!)

 

지도에 대한 포스팅은 여기까지 하겠습니다. 이번 포스팅은 다소 글이 길어졌네요, 점점 재미없어지는 이 시리즈 다음 내용은 주행 안내 GUI에 대한 포스팅으로 인사를 드리겠습니다.

졸음운전, 음주운전, 통화운전은 No! x3 항상 안전운행하시구요~ 럭키천기는 이만 인사드리겠습니다. 즐거운 하루 되세요!~

 

'아이나비에어' 이제는 말할 수 있다 GUI편_ #1 감속도우미

'아이나비에어' 이제는 말할 수 있다 GUI편_ #2 메인메뉴   

 

 

 

 

 

 

 

 

 

저작자 표시 비영리 변경 금지
신고
Posted by 도란도란양

댓글을 달아 주세요

  1. 강초코 2012.10.25 11:23 신고  댓글주소  수정/삭제  댓글쓰기

    지도 안에 글씨체도 바뀐건가요? *_*

    • 럭키천기 2012.10.25 14:10 신고  댓글주소  수정/삭제

      "아니 어떻게 알았지?!!" 네 맞습니다. 글씨체가 바뀌었습니다. 강초코님 예리하신데요? 저 조만한 이미지에서 어떻게 그것을 간파하셨습니까? 아니면 아이나비 에어를 쓰시면서 기존 폰트와 비교를 하셔서 아시게 된건가요? 폰트에 대한 포스팅은 기회가 되면 나중에 추가로 자세하게 알려드리겠습니다.

  2. ㅋㅋㅋㅋ 2013.12.24 17:38 신고  댓글주소  수정/삭제  댓글쓰기

    사투리음성안내좀... 그분목소리10년동안들었는대 이잰질렀음 맵피처럼 사투리안내와연예인음성안내해주세요..

    • 럭키천기 2014.01.03 09:45 신고  댓글주소  수정/삭제

      안녕하세요~ "ㅋㅋㅋㅋ"님, 먼저 새해 복 많이 받으세요~^^ 댓글 답변이 다소 늦은점 양해부탁드립니다. 아이나비도 부족하나마 일부 전용 단말제품에 한해서 예전과 달리 다양한 음성안내 목소리를 제공하고 있습니다. 좀더 서비스가 확대 되려면 관련부서에서 검토가 필요할것으로 보입니다.^^ 다양한 제품에서 제공드리지 못하는 점 저도 안타깝게 생각하고 있습니다. 너그러운 양해 부탁 드리겠습니다.
      항상 아이나비에 관심가져주시는점 감사드립니다.

  3. 홍홍 2014.01.04 11:54 신고  댓글주소  수정/삭제  댓글쓰기

    프라다3.0은언제지원하나요? 트랭글하고 길찾기땜에빨리서야하는데...

    • 럭키천기 2014.01.15 10:40 신고  댓글주소  수정/삭제

      안녕하세요~ 홍홍님, 먼저 아이나비 에어 항상 관심가져주시는 점 감사드립니다. 댓글이 다소 늦었습니다. 양해부탁드리겠습니다.
      홍홍님 댓을을 확인한 후 이부분을 담당하고 있는 분(도란도란블로그 필진 "4년뒤샹"님이랍니다.^^)께 내용을 전달 드렸는데, 프라다 3.0은 현재 아이나비 에어의 최신 버젼을 구동하기에는 무리가 있다고 합니다. 저도 여러 단말에 아이나비 에어를 고루고루 제공해 드리면 좋겠습니다만, 그러지를 못해 아쉽기만 하네요. 좋은 답변을 드리지 못한점 송구합니다.

  4. 2014.05.06 10:09  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

번 아이나비 에어 시리즈 감속도우미에 이어 GUI디자인 컨셉과 홈화면(이하메뉴)에 대해 풀어볼까 합니다. 감속도우미로 아이나비 에어에 대해 기능적인 부분에 집중했지만, GUI디자인의 관점에서 본다면 이게 정식 순서이겠지요~ ^^  

 

정식 출시 전 이미 아이나비 에어는 메이트 체험단을 통해 베타버젼이 배포되었습니다. 항상 많은 고민과 노력 끝에 새로운 UX나 서비스를 내놓고 그 반응이 어떤지 지켜보는 마음은 두근반 세근반입니다. 메이트분들께서도 선행체험을 통해 많은 리뷰와 스크린샷을 온라인상에 올려주셨고, 그것을 보신 누리꾼분들께서 댓글을 달아주셨는데요, 대부분 긍정적인 반응을 주셔서 다행으로 생각하고 보람을 많이 느꼈습니다. 아이나비 에어가 기존 출시된 자사단말 및 컬러패키지와 비교해서 디자인측면에서 어떤 차이점이 있는지 그 뒷얘기를 풀어보겠습니다.

 

앞으로 아이나비 에어 시리즈 포스팅을 계속 전개해 나가겠지만, 공통적으로 해당되는 GUI 디자인의 메인 컨셉에 대해 먼저 언급하겠습니다.

 

Floating : 공간감이 풍부한 톤 배경 위에 떠있는 요소들의 비주얼 그래픽

Simple : 기본에 충실하고, 군더더기를 제거한 절제된 디자인요소, 맵디자인의 명료한 색상체계.

Smart Device Base : 스마트 디바이스의 상향 하드웨어 스펙, 고급스러운 그래픽 효과를 지원해주는 OS를 기반으로 한 디자인요소.(미세한 색감, 인터렉션기반 디자인 등).

 

아이나비에어 메인메뉴 어떻게 디자인할 것인가?  

 

아이나비 에어 GUI디자인을 진행할때 가장 고민스럽고 어려웠던 부분 중에 하나가 아이나비 메인메뉴였습니다. "기존의 아이나비3D/SE의 메인메뉴와는 다르게 아이나비 에어만의 독특한 디자인을 도출할 것!" 이 최대 미션이었습니다.

이 부분은 우리 UX부의 UI기획자와 GUI디자이너가 초기부터 서로 아이디어를 공유하며 기획안의 시각화, 시각화를 통한 기획의 새로운 아이디어를 반복하며, 같이 고민한 부분이었습니다. 우리 팀원과 제가 수많은 시안을 디자인(이라 쓰고 토해내고 라고 읽는다.)하고 인터렉션 시뮬레이션을 제작하여 테스트하고 다듬고 다듬어서 지금의 메인메뉴 디자인이 나오게 된것이죠.

항상 결과물을 보면 뭐 별거 아닌데?” 라고 생각하실 수 도 있지만, 조금이라도 안목이 있는 분이라면 이러한 디자인이 왜 나왔는지, 어떤 과정이 있었을지, 무엇을 포기하고 무엇에 집중했는지에 대해 한번 쯤 생각해보실 것이라 생각합니다.

(위 이미지 보시면 뒤에 흐릿하게 처리된부분이 토해낸 시안들입니다. 이것도 추려서 이정도만....쿨럭.)

 

메인메뉴의 기능적인 측면에서의 가장 중요한 중점사항은 사용자중심의 최적화된 빠른 검색 및 경로탐색입니다. 사용자관점에서 가장 자주 쓰는 집으로가기, 자주가는곳, 등록지점, 최근목적지에 집중하여 메인메뉴를 디자인하고, 상단의 검색창을 통해 언제나 빠르게 검색을 진입할 수 있는 인터페이스를 열어놓았습니다.

 

최근목적지는 기존 아이나비 3D/SE와 동일하게 30개까지 저장이 가능하며, 이를 커버플로우의 반복순환형태로 제공합니다. 이부분이 아이나비 에어 메인메뉴 디자인의 뽀인트입니다.

(여기서 뒷얘기...) 커버플로우에 대한 상세 인터렉션에 대한 정의는 내부적으로도 논쟁이 아주 많았던 부분입니다. 보통 커버플로우는 터치하면 기능의 바로실행이지만, 이것은 미디어(음악이나 사진을 볼때)에 한정되었을 때의 경우입니다.

 

그러나, 내비게이션상황에서는 추가적인 기능을 더 고려해야 했습니다. 바로 커버플로우의 상단 말풍선에 포함되어 있는 삭제, 등록/전송, 경로탐색의 다중 기능을 고려해야 한다는 것이었습니다. 또한 터치시 바로실행은 운전상황이라는 부분을 감안하면 오동작을 일으킬 가능성이 높은 이유도 한몫하는 것을 감안해야 했습니다.

 

한가지 숨겨진 장치 더!  아이나비 에어 커버플로우 GUI의 컬러는 심미성을 위해 다채로운 컬러를 사용했다고 생각할 수 있습니다. 물론 그 이유도 있습니다. 그러나 GUI디자인은 심미성뿐만 아니라, 정보의 체계를 다루는 부분도 감안해야 합니다. "왜 이 컬러를 썼나요?" 라고 물어보면, “그냥이쁘니까요!” 라는 것이 아닙니다.

이 커버플로우에는 아이나비의 정보체계가 깨알같이 녹아들어가 있습니다. 지도의 POI아이콘 (위이미지의 하단) 은 아이나비 GIS데이터에 의해 그 종류별이 체계적으로 분류 되어 있습니다. 그것이 디자인으로는 컬러의 구분으로 체계가 잡혀있습니다. 교통관련 POI는 블루계열, 의료관련 POI는 레드계열 등등 이 POI아이콘의 컬러와 메타포를 커버플로우와 동기화한 것입니다. 아이나비 나름의 정보체계가 녹아있는 핵심 포인트라 할 수 있습니다. 분명한 이유가 있는 의도적인 디자인이라는 것이지요.

 

아이나비 에어의 메인메뉴의 장점적인 부분만 부각했지만, 그렇다고 이것이 100점짜리는 아닙니다. 사용자 마다 제각각 다른 관점과 선호도를 만족하는 100점 짜리 UX가 나온다면, 얼마나 좋을까요? (그날부로 하산해야하나...) 디자인은 참으로 어렵습니다.

그렇기 때문에 만족이란 있을 수 없겠지요, 앞으로도 아이나비 에어의 메인메뉴 개선에 대해서는 지속적으로 진행할 것입니다. 또한 사용고객분들의 칭찬과 관심어린 개선 의견도 많이 주시겠지요? 이 모든 것을 고려해서 앞으로 아이나비 에어가 더 발전할 수 있도록 노력해하는것이 최선일것입니다.(라고 하지만, 현실은 정말 가시밭길입니다. ㅠ_ㅠ)  

 

메인메뉴에 대한 포스팅은 이만 줄이겠습니다. 제가 감속도우미 포스팅때 많은 기대! 부탁 드린다고 말씀드렸었죠? 다소 재미없었을 수도 있겠지만, 전 분명 많은 기대 하지말라고 했으니까 잘못 없습니다. (맞을래? 퍽!) 끝가지 읽어 주셔서 감사드립니다^^

다음 시리즈 포스팅으로 빠른 시일내에 곧 인사를 다시 드리겠습니다. 럭키천기는 언제나 여러분의 안전운행을 기원합니다~  그럼 즐거운 하루 되세요~

 

'아이나비에어' 이제는 말할 수 있다 GUI편_ #1 감속도우미

'아이나비에어' 이제는 말할 수 있다 GUI편_ #3 맵디자인

 

 

  

 

 

 

 

저작자 표시 비영리 변경 금지
신고
Posted by 도란도란양

댓글을 달아 주세요

  1. 우와~~ 2012.10.11 09:42 신고  댓글주소  수정/삭제  댓글쓰기

    에어 메인은 정말 이쁘고 차별화 된 것 같습니다.
    앞으로도 더 좋은 디자인 만들어 주세요.
    이쁘게 잘 사용하겠습니다.^^

    • 럭키천기 2012.10.11 09:58 신고  댓글주소  수정/삭제

      "우와~~"님 칭찬의 말씀 정말 감사드립니다~ 아이나비 에어 유용하게 잘 사용하시구요~ "우와~~"님 말씀처럼 더 좋은 디자인으로 보답할 수 있도록 노력하겠습니다~ 즐거운 하루 되세요~ ^^

  2. 아이 2014.01.13 16:31 신고  댓글주소  수정/삭제  댓글쓰기

    아이나비메뉴 se처럼주행중에 메뉴버튼이있었는데
    아이나비에어카톡은 없네요...이거추가해주세요
    글구에코드라이브하고 음악하고아이나비하고같이쓰면 소리가뭉처서 뭐라고하는지모르겠네요...
    안내할때 음악소리좀줄어주세요..
    글구듀얼뷰좀...골목길이나서울같은길은짱조음
    아글구지니내비하고 아이나비에어하고비교하며써봤는대 지니는 2km앞 소래포구가사거리교차로에서 소래방면으로회전주의통과후방면으로좌회전입니다이라고안내하는대 아이나비는간단함 2km앞전방에서소래방면으로좌회전입니다
    이래서자주경로이탈을많이함
    고가차도지하차도안내할때잠시후지하차도입니다가아니라 2km앞 선학지하차도진입입니다 윈쪽2개차선을이용하새요 이라고안내했으면좋갰네요 제가너무까다롭나요 ㅎㅎ 죄송합니다 이거꼭해주세요~글구터널안내할때 잠시후남산1호터널진입입니다 터널길이는1000m입니다이라고했으면좋갰네요 글구도로관리용cctv하고 방법용cctv안내좀... 글구뷸륨좀...글구교통정보음성안내 2.2km전방성수대교까지원할합니다이라고안내했으면좋겠네요..

    • 럭키천기 2014.01.15 11:23 신고  댓글주소  수정/삭제

      안녕하세요~ 아이님, 먼저 아이나비에어에 관심가져주신점 감사드립니다. 댓글 내용을 확인했는데, 쓰시면서 불편이 많으셨겠습니다. 해당내용은 담당부서에 전달될 예정입니다.^^
      그럼 오늘도 즐거운 하루 되세요~ 감사합니다.



티스토리 툴바