아이나비 S/W가 변했다. #1 프롤로그에 이어서 2편은 아이나비 UX리뉴얼에 대한 탄생 배경과 컨셉을 이야기 해볼까 합니다. 2편을 오랫동안 기다리신 분들께는 다소 늦은감이 있어 죄송한 마음입니다. (전혀 기다리지 않으셨다구요? 쿨럭;;;)
팅크웨어에서 2D와 3D라는 아이나비 소프트웨어를 만들 때 고려해야 하는 사항은 여러가지가 있겠지만, 그중에 하나는 동일한 사용자경험(UX)를 제공해야 한다는 것입니다. 하지만, 리뉴얼이전까지는 그렇지 못했습니다. ㅠ ㅁ ㅠ
아이나비SE와 아이나비3D가 서로 다른 UI를 제공하기 때문에 그에 따른 누적된 사용자경험이 달라 SE를 사용하는 분들이 3D로 전환을 했을 때 또는 그 반대의 경우, 많은 불편이 있으셨을 겁니다.
이러한 문제점을 해결하기 위해 아이나비만의 표준 UI에 대한 방안이 거론되었고, 이에 대한 UX기획, 설계를 비롯한 GUI디자인의 리뉴얼을 진행하게 된 것입니다.
아이나비SE와 아이니바3D가 표준UI를 구축하여 정보구조나 접근방식은 동일하게 하더라도, GUI스타일은 오랫동안 서로 다른 분위기를 유지해온 부분이 있고, 기타 여러가지 요인으로 인해 동일하게 적용하기 어려운 점이 있었습니다. 아이나비SE와 아이나비3D UI를 표준화로 동일하게 적용하되 GUI디자인 스타일은 라인업별 차별성을 두자는 방안이 유관부서간 회의를 통해 결정되었습니다.
GUI디자인 스타일은 다르더라도 기본적인 디자인 접근컨셉은 “AUA컨셉”으로 동일하였습니다. 뭔가있어 보이고 그럴싸해 보이는(?) AUA컨셉이 무엇인지 궁금하시죠? 그것은 Advance(진일보), Unity (통일성), Authenticity(정통성)의 앞의 문자를 딴 컨셉명칭입니다.
Advance(진일보)
기존의 Old한 느낌의 디자인요소에 대해 자기비판적인 분석을 통해 디자인스타일 트랜드 흐름을 반영하여 세련되고 진보된 인상을 줄 수 있는 디자인을 추구합니다.
Unity (통일성)
아이나비SE와 아이나비3D간의 디자인 스타일은 차이를 두더라도 아이콘메타포와 각종 안내심볼등의 형태를 동일하게 유지합니다. 사용고객으로 하여금 SE/3D전환간에도 혼란이 없게 하고 형태적인 인상을 동일하게 각인하게 하여 아이나비 소프트웨어의 브랜드제품 이미지에 대한 통일성을 유지한 디자인을 추구합니다.
Authenticity(정통성)
역사의 누적에 따른 아이나비 GUI디자인에 대한 유형적인 부분뿐만 아니라, 심리적, 무의식적인 인식이라는 것이 있습니다. 이것은 정확하게 설명하기 참으로 애매하지만, “이건 우리 아이나비의 스타일” 이라는 느낌이라는 것입니다. 이와 같이 유형, 무형적인 아이나비의 정통성을 계승한 디자인을 추구합니다.
이러한 컨셉을 바탕으로 하여 아이나비 GUI디자인 작업을 진행하였습니다.
아이나비SE는 기존의 블랙계통의 컬러분위기를 계승하되 컬러값에 대해 미세하게 개선을 진행하고 디자인 요소에 대한 밀도를 강화하고 명확한 시인성을 높이는데에 집중을 하였습니다. 또한 기존의 지도주행화면에서 불편한 점으로 제기되었던 대부분의 사항을 아이나비3D와 동일한 레이아웃으로 적용하여 대부분의 문제점을 개선하였습니다. 안전운행심볼에 시계가 가리는 부분개선, 안전운행구간 정보의 그룹핑, 방향안내정보들의 그룹핑등이 해당됩니다. 이부분은 따로 포스팅하겠습니다.
아이나비3D는 아이나비SE에 비해 중요한 고민이 있었습니다. 아이나비SE와 어떻게 "디자인 스타일에 대해 어떻게 차별화를 줄것인가?"였습니다.
그러한 차별화 요소중 가장 큰 부분을 차지하는 것이 바로 컬러였습니다. 아이나비3D의 기존 GUI컬러는 붉은색과 보라색이 혼재되어 있었습니다. 붉은색은 아이나비 메뉴화면 그룹에서 사용하고 있었고 보라색은 지도주행화면에서 사용하고 있었습니다. 이는 아이나비SE에 비해 지도와 메뉴의 컬러가 달라 일관성을 저해하는 부분이었습니다. 또한 메뉴화면에 대한 붉은색계통의 컬러에 대한 변경이슈도 존재하고 있었습니다.
그런데 왜 아이나비3D의 베이스컬러는 보라색으로 사용하였나요?
내비인사이드의 오시짱님의 댓글중에 “보라색…선택전 엄청 고민했을 듯”이라는 댓글이 있었습니다. 그 댓글이 어찌나 마음에 와닿았는지 모릅니다.
여러 디자인 시안과 많은 고민을 통해 결정된 색상이 Violet(보라색)입니다.
아이나비3D의 주행화면정보 레이아웃을 개선하기 전 저는 한동안 타사 내비게이션만 사용한적이 있었습니다. 타사의 주행안내방식과 디자인 등을 벤치마킹 하다가 발견한 점은 대부분이 블랙계통을 베이스 컬러로 사용한다는 점이었습니다. 물론 블랙계통은 무난하고 안정된 컬러로 다른 색들과도 잘어울리기 때문에 사용하기 쉽다는 장점이 있습니다. 그래서 대부분의 내비게이션이 채용한 컬러일 것입니다. 아이나비SE도 그와 같은 이유입니다.
그러나 아이나비3D는 그러한 평범함보다는 당시 다른 내비게이션이 넘볼 수 없는 3D내비게이션의 최고를 상징할 수 있는 아이나비3D만의 이미지가 필요하다고 생각했습니다. 이는 프리미엄급의 아이나비3D의 지도 주행화면에 대한 아이나비3D만의 아이덴티티를 확립하고자함이었습니다.
운전자가 가장 많이 보는 화면이며, 그에 따라 이미지가 각인될 수 있는 화면이고, 이는 브랜드 이미지와 직결되는 요소라고 생각했습니다. 어떤 사람이 봐도 “아 이건 아이나비3D의 주행화면이야”라고 인식될 수 있는 이미지, 옆의차가 무슨 내비게이션을 사용하나 보면 “아 저건 아이나비3D의 주행화면이구나” 하는 유니크한 인상이 필요하다고 생각했습니다. 그것을 나타낼수 있는 색상이 Violet(보라색)이라고 판단하였습니다.
보라색은 보통 긍정적인 이미지 보다는 부정적인 이미지가 강합니다. 보라색을 좋아하는 사람은 정신적으로 문제가 있다는 속설이 널리 알려진 보라색의 부정적 이미지입니다. 그러나 어느 색상이든 긍정적 의미와 부정적 의미를 함께 가지고 있습니다.
보라색에 대해서 조금만 더 깊게 살펴본다면 상당히 매력 있는 컬러라는 것을 알 수 있습니다. 보라색은 쉽게 범접할 수 없는 최고의 지위를 상징하는 컬러입니다. 그래서 예로부터 왕실의 색으로 사용되었습니다. 이는 최고의 아이나비3D를 나타내는데에 적절한 의미라 생각하였습니다.
또한 심리적으로는 쇼크나 두려움을 해소하고 불안한 마음을 정화시켜주는 역할을 하며 정신적인 보호기능을 하는 색상입니다. 운전이라는 상황을 고려할 때 안정된 운전자의 마음은 안전과도 직결되는 중요한 부분이기 때문에 보라색의 사용이 논리적으로도 합당하다고 사료되었습니다. 이것이 지도주행화면을 보라색으로 사용한 이유입니다.
이러한 이유로 사용된 색이 보라색이었고, 이는 메뉴화면에도 동일하게 적용하였습니다. 지도주행화면과 컬러의 일관성을 유지하여 리뉴얼 이전 대비 하나의 소프트웨어로 보일 수 있도록 의도한것입니다.
포인트 컬러의 경우 민트블루를 선택하였습니다. 이 또한 타사와는 차별화 될 수 있는 컬러, 시인성이 보장된 컬러, 그리고 보라색과 잘 어울리면서 적절한 대비감을 줄 수 있는 컬러를 고민한 끝에 나온 컬러입니다. 프롤로그 포스팅의 댓글중 102223님의 말씀처럼 민트블루와 보라색의 조화는 쉽지 않은 색상조합이라 최적의 색상값이 나오기 까지 수차례의 테스트를 진행하며 나온 컬러입니다.
이렇게 수많은 고민과 테스트를 통해 나온 디자인이 세상에 출시되고 그 반응이 혹평일색이었다면, 아마 저와 저희 팀원들은 상당히 슬펐을겁니다. 디자인의 처음부터 끝까지 외부업체에 의뢰 한 것이 아니라 저희팀 내부에서 모두 진행했기 때문에 그만큼 애착은 더했지요.
솔직히 아이나비3D의 GUI디자인은 출시 전 걱 정이 많이 되었던 것도 사실입니다. 보라색이나 민트블루가 다른 색상조합에 비해 무난한 조합은 아니기 때문에 사용고객들마다 호불호가 극명하게 갈리고, 또한 “불호”가 더 많다면 우리팀뿐만 아니라 전체적으로 아이나비 브랜드 이미지 자체에 손상을 가져다 줄 수 있는 부분이기 때문이었습니다.
아이나비 리뉴얼 버전이 출시되고 얼마 후 저는 고객만족팀 담당자에게 전화를 걸었습니다. 이번 리뉴얼 디자인에 대해 사용고객분들의 불만사항이 없는지를 문의한것이죠. 다행히도 그 당시 디자인에 대해 큰 불만 사항은 없다고 했습니다. 그 대답을 듣고, 온라인상의 리뷰와 댓글을 보고 저는 안도의 한숨을 내쉬면서도 디자이너로서의 보람을 느꼈습니다. 우리 팀원들도 마찬가지였지요^^ 물론 개인적인 관점에 따라 디자인이 마음에 안드시는 분들도 분명히 계실겁니다.
그래서 100점짜리 디자인을 만들기가 여간 어려운 것이 아니죠. 그렇기 떄문에 최선의 결과물을 도출하기 위해 지속적으로 노력할 뿐입니다!!!
이번 포스팅은 속으로 담아왔던 내용을 마구마구 펼쳐내느라조금 길어졌네요. 얘기를 이어가자면 끝이 없을것 같아 그나마 요약해서 끊었는데도 이정도입니다;;; 긴글 읽어주셔서 감사드리며, 다음에도 아이나비 리뉴얼 디자인에 대한 숨겨진(?) 이야기들을 가지고 다시 찾아뵙겠습니다. 추운 겨울 지나고 따스한 봄이 오는 환절기 건강 조심하시구요, 항상 그래왔듯 럭키천기의 마무리 멘트는 “안전운전!”입니다.^^ 그럼 3편을 기약하며 인사드리겠습니다.
여기서 잠깐!) *GUI가 무엇일까 궁금해하시는 분들을 위해 준비했습니다.
Graphic User Interface의 줄임말로 사전적인 의미는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경을 말합니다. 아이나비를 기준으로 쉽게 말씀드리면, 아이나비SE/3D에 주행화면, 메뉴화면등에 여러가지 버튼을 눌러서 원하는 기능을 실행하게 되는데 그러한 버튼과 정보요소들이 GUI의 쉬운 예입니다. GUI팀에서는 아이나비 내비게이션 SW(SE/3D)안에 들어가는 전반적인 화면의 그래픽요소들을 디자인하고 있습니다.
여기서 한번 더 잠깐!) *UX가 무엇일까 궁금해하시는 분들을 위해 준비했습니다.
*User eXperience의 줄임말로 이 또한 사전적인 의미는 사용자가 어떤 시스템,제품,서비스를 직,간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 의미합니다. 워낙 총체적인 범위라서 UX안에는 여러 학문과 영역이 포함되어 있습니다. GUI도 UX의 영역중에 하나입니다. 워낙 총체적이고 복잡한 부분이라 설명하자면 많이 길어지기에 이해하기 쉬운 예를 들겠습니다.
아이나비를 사용하시는 분이라면 아이나비를 구입해서 현재까지 사용하시는 동안 어떠한 느낌과 생각을 가지고 계시는지, 어떤 이미지인지에 대한 요소들이 UX의 일부라고 볼 수 있습니다.
댓글을 달아 주세요