번 아이나비 에어 시리즈 감속도우미에 이어 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 신고  댓글주소  수정/삭제

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

키천기입니다. 3편도 많이 많이 늦었습니다. 기다리신 분들께 정말 죄송할 따름입니다. 요즘 정신없이 바쁩니다. 그 이유는 ------(방송에서 편집음처리 사운드)’ 때문입니다. 바쁜이유가 궁금하시겠지만, 그건 나중에 빵! 터뜨리기로 하구요, 3편은 아이나비SE아이나비3D의 라인업 체계에 대해 포스팅을 하려합니다.

 

사실 아이나비SE 3D UX리뉴얼은 매립형과 거치형의 표준UX를 구축하는 거대한(?) 프로젝트였습니다. 이제는 말할 수 있습니다. 이번달 출시한 매립형 전용 3D단말인 "아이나비RS"가 출시 되었고, 지난 4월에 매립형 내비게이션에 대한 업그레이드가 있었지요, 매립형 아이나비업그레이드를 받아보신 분이나, 아이나비RS를 구입하신 분들은 ? 이거 거치형 리뉴얼 GUI와 다르네?” 라고 생각하셨을 겁니다.

 

네 그렇습니다. 사실 아이나비UX 리뉴얼은 터치조작은 기본이고, 자동차환경의 특수성을 기본으로 한 매립형을 고려하여 조작계(리모컨 4방향이동 및 휠조작)에 대응하여 조작계만으로도 대부분의 기능을 수행할 수 있도록 하는 거대한 프로젝트였습니다. 그것이 진정한 UX표준화인것이지요.

 

사실 12월 업그레이드에 대한 1편 포스팅을 진행할시 이미 매립형 특화 아이나비S/W가 열혈개발중이었습니다. GUI 디자인은 개발 진입 이전에 거치형과 매립형의 거의 동시에 진행되었던것이죠.

우리팀은 거짓말 조금 보태서 완전 토할 정도(?) 200%의 가동이었습니다,(우리팀원들에게 다시한번 감사를.) 그 당시까지만 해도 보안이었기 때문에 참 말하고 싶은데, 뭐라 표현할 길이 없었습니다.(또 삼천포로 빠진다!)

 

다시 본론으로 돌아와서 매립형은 조작계를 고려한 부분을 GUI로 특화 하였습니다. 그러나, UI구조와 정보구조는 동일합니다. 거치형에서 매립형으로 전환해도 전혀 사용자경험에 대한 격차가 없습니다. 그 반대도 마찬가지지요.

 

일단 아이나비 SE/3D의 매립형 단말과 거치형의 라인업 구조를 보시면 다음과 같습니다.

 

어떠신가요? 이렇게 전체적으로 보니 한눈에 파악되시지요?

 

그렇다면 어떤부분이 특화되어 있는가에 대해 알아볼까요?

 

매립형 내비게이션GUI디자인시 고려해야할 사항은 거치형과 기본사항이 크게 다르지 않습니다. 그러나 매립과 조작계(리모컨, 휠)에 대한 특성을 파악해야합니다. 그 특성이란 것은 다음과 같습니다.

 

1화면시야각

차량에 따라 달라지는 매립각도가 모두 다릅니다. 또한 IPS LCD가 아닌이상, 매립각도 및 깊이 높이에 따라 LCD의 시각적으로 보이는 상태가 달라져 색상 및 시인성에 영향이 치명적일 수 있습니다. 아이나비의 LCD는 대부분 TN방식 이라 시야각에 따라 시인성의 차이가 큽니다. 그렇기 때문에 정보의 시인성을 확보할 수 있도록 명도, 색상 대비를 극대화한 포인트 컬러사용을 고려하였습니다. 

 

 

2.차량내장인테리어

매립형의 GUI는 차량의 인테리어의 분위기와 조화가 잘 되어야 한다고 파악하였습니다. 이부분이 참 애매하고 어려운 부분 이었습니다. 차량의 인테리어는 차종에 따라 다르며, 같은 차종이라도 옵션에 따라 분위기가 달라질 수 있는 가능성도 있습니다.

여러가지 색상에 잘 조화될 수 있는 중~저채도 중~저명도 계열의 베이스 컬러가 대부분 무난하게 인테리어 영향을 최소화할 수 있을 것이라 판단하였습니다.(이 부분은 거치형과는 차별화된 디자인 정책입니다.) 

 

 

3. 조작의 일관성

차량에 따라 화면 매립의 각도와 위치, 깊이에 따라 터치가 어려운 경우가 있습니다. 이런 터치조작을 보완 할 수 있는 것이 조작계(조그다이얼, 리모컨)작동입니다. 조그 다이얼의 방향성과 사용자의 조작예측방향성을 일치(조작과의 동작 양립성)하기 위한 레이아웃과 디자인형태를 고려하였습니다.

 

 

 

백문이 불여일견, 그렇다면 일단 매립형 아이나비3D의 동작영상을 보시지요.

 

 

영상을 보니 거치형과 다른 매립형의 GUI의 특성을 확실히 아실 수 있지요?

 그러면 아이나비의 매립형과 거치형이 어떤점이 차이가 있는지 몇가지 화면의 스크린샷을 보며 좀더 알아보겠습니다.

 

첫번째는 트립정보를 고려한 지도주행화면입니다.

지도주행화면에서 차량의 각종 정보 및 공조정보등을 보여주는 트립컴퓨터를 지원함에 따라 다양한 트립정보를 확인할 수 있도록 구성한 것입니다. 이것이 매립형과 거치형의 가장 큰 차별화라고 할 수 있겠습니다.

 

 

두번째, 앞서 라인업 시스템의 이미지와 같이 메인메뉴화면의 차이입니다.

거치형은 직선의 그리드 형태인 반면, 매립형은 곡선형의 호의 형태를 갖추고 있습니다. 그 이유는 앞서 언급한것과 같이 원형의 휠조작의 동작양립성을 우선적으로 고려한 GUI이기 떄문입니다.

 

확대

 

 

 

 

세번째, GUI콤포넌트의 형태 차이입니다.

메인메뉴에서 각각의 하부 페이지로 접근하시면, 곡선형 호의 형태로 버튼과 탭이 구성되어 있는 것을 확인하실 수 있습니다. 이 또한 휠조작의 동작양립성을 고려한 것입니다.

 

 

네번째는 조작계에 특화된 서클입력키보드의 추가입니다.

휠조작, 4방향조작에 대한 컨셉을 최대한 반영한 디자인이라 할 수 있습니다. 환경설정에서 서클키보드와 매트릭스키보드중 하나를 설정하실 수 있습니다. 기본설정은 매트릭스로 되어 있습니다. 그 이유는 서클키보드는 터치가 용이하지 않은 상황(매립각도나 깊이로 인해)에서 조작계로만 검색어를 입력할 경우를 상정한 것이기 때문에 일반 터치조작방식은 매트릭스 키보드가 더 용이 합니다. 물론 서클, 매트릭스 키보드 모두 터치와 조작계는 100%대응합니다

 

 

 

이러한 매립형 아이나비에 대한 제품이 어떤것들이 있으신지 궁금하시지요?

 

3D는 2012년 5월에 아이나비RS가 새로 출시 되었습니다. 

아이나비 RS 제품정보 보러가기

 

실용적인 면을 우선하신다면, 아이나비SE맵이 탑재된 매립형 아이나비ST200을 고려해보실수도 있습니다.

아이나비 ST200 제품정보 보러가기

 

 

 

이상으로 아이나비S/W가 변했다 3편의 라인업시스템에 대한 내용을 보셨습니다.

 

매립형 내비게이션의 조건이 하드웨어적인 특성일 수 있겠지만, 소프트웨어 또한 그에 맞게 특화가 되어야 한다고 생각합니다. 이것이 아이나비 UX의 철학이라고 말씀드리고 싶습니다. 아이나비의 철학이라고 하기에는 부족하다 비판하실 수도 있지만, 제가 말씀드리는 아이나비 철학은 역사와 함께하며 누적되고 변하고 발전되어 내제되어있는 유,무형의 모든것이라 규정하고 싶습니다.

앞으로 출시될 아이나비 제품이 있고 그 제품이 가지는 컨셉과 라인업적인 위상에 따라 아이나비 맵의 컨셉도 계속 변화할 것입니다. 비록 그 변화의 과정에서 기존의 아이나비에 대한 친숙한 사용자 경험에 비교하여 낮설고 어색하고 불편할 수 도 있을 것입니다. 

하지만 이것도 더 나은 아이나비를 향하기 위한 인고의 과정일 것입니다. 사용고객님들께서도 팅크웨어가 만드는 아이나비의 행보에 대해 믿고 응원을 보내주십시오. 비판과 개선요구도 아이나비를 만드는 인원들에게 많은 도움이 되지만, 믿음을 바탕으로 한 칭찬과 응원 또한 더 큰 힘이 됩니다.      

아쉽게도 럭키천기는 이제 3편으로 이 시리즈 포스팅을 마무리 할까 합니다. 여러분들께 말씀드리고 싶은 아이나비UX 비하인드 스토리는 너무너무 많지만, 지금까지 포스팅한 3편으로도 충분한 어필이 되었다고 생각합니다. (한편으로는 빠른 시리즈 업데이트를 해드려야 하는데 그러지 못해 죄송한 마음도 그 이유중에 하나입니다.)

 

무더운 여름이 다가오고 있습니다. 여름을 대비하여 차량정비도 꼼꼼히 해주시구요, 럭키천기의 마무리멘트는 늘 그래왔듯이 안전, 또 안전운행입니다. 그럼 다음포스팅 때 다시찾아뵙겠습니다.

즐거운 하루 되세요~^^  

 

 

아이나비S/W가 변했다 #1

 

아이나비S/W가 변했다 #2

 

 

 

 

 

 

 

 

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

댓글을 달아 주세요

  1. 김성진님 2012.06.11 17:43 신고  댓글주소  수정/삭제  댓글쓰기

    저도 아이나비 매립사용자데.. 한동안 업그레이드를 안해서...
    저런기능들이 생겨났군요...ㅋ
    한번 해봐야겠습니다.

    좋은 정보 감사합니다.

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

      김성진님 안녕하세요~ 블로그 읽어주셔서 감사합니다^^
      업그레이드에 대한 자세한 내용은 저희 회사 아이나비 홈페이지를 참조해주시구요~ 업그레이드후 편리하게 잘 사용하셨으면 좋겠습니다~

  2. 언어유희/유린/장애 2012.06.14 09:49 신고  댓글주소  수정/삭제  댓글쓰기

    럭키천기님... 고생 많으셨네요~~ 한 사람의 아이나비 사용자로서 뿌듯함을 느낍니다. 앞으로도 더 좋은 아이나비 만들어 주세요 ^^

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

      언어유희/유린/장애 님 안녕하세요~ 별명이 참 특이하시네요~^^ 부족한 글 읽어주셔서 감사합니다. 아이나비를 사용하시면서 뿌듯함을 느끼신다니, 정말 감사할 따름입니다. 좋은 칭찬에 힘입어 더 좋은 아이나비를 만들 수 있도록 노력하겠습니다.



티스토리 툴바