LiVE LG

얼마 전 유럽에 출시해 좋은 반응을 얻은 LG의 아레나폰이 오는 6월 국내 출시를 앞두고 있습니다. 지난 2월 ‘MWC 2009(Mobile World Congress)’에서 첫선을 보인 이후 학주니 님, 디지털 통 님. Go_on 님, engadget 님, 외로운까마귀 님, CUBIX 님 등 많은 IT블로거들도 뜨거운 관심을 보여주셨습니다. 그래서 <더 블로그>에서 아레나 폰의 핵심 차별화 포인트인 혁신적인 S클래스 UI(User Interface) 개발에 참여한 곽재도 책임과 유혜진 주임을 만나 궁금증을 풀어보았습니다.

가장 쉽고, 가장 빠르고, 가장 재미있는 사용자 환경을 제공하는 ‘S클래스 UI’는 실생활에서 익숙한 경험들이 3차원(3D) 그래픽으로 구현돼 별도의 학습을 할 필요 없이 누구나 쉽게 사용할 수 있다고 하죠. 제가 인터뷰를 위해 MC 연구소가 위치한 가산 디지털 단지를 찾은 것은 철쭉이 흐드러지게 핀 초여름 같은 봄날이었습니다. 초행길인 탓에 길을 헤매다가(사실은 약간 길치인지라 -,.-) 약속 시간보다 조금 늦었는데도 두 분께서 반갑게 맞아주셨습니다.

가장 빠르고, 매끄럽고, 정말 입체적인 3D S클래스 UI


아레나 폰 출시를 앞두고 S클래스 UI에 대해 궁금해하는 분들이 많을 것 같습니다.
S클래스의 S는 무슨 의미인가요?
곽 책임: S 클래스의 S에는 세 가지 의미가 담겨 있습니다. Speedy, Stylish, Smart인데요. 결국은 고객이 휴대폰을 폼나고 쉽게 사용할 수 있도록 하는 것이죠.

첫 번째 스피디(Speedy)는 원하는 메뉴를 빨리 찾아 사용할 수 있도록 하는 것을 의미합니다.
S 클래스 UI에는 ‘큐브’라 불리는 3D 홈스크린(휴대폰 첫 화면)을 적용해 자주 쓰는 메뉴들을 세 개의 화면에 꺼내놓을 수 있습니다. 휴대폰은 전화를 하는 것이 주 기능이지만 수많은 주소록 중에서 자주 전화하는 사람은 몇 안 되거든요. 한 번만 주소록의 사진들을 바탕화면에 꺼내 놓으면 언제든 바로 사진을 클릭해 전화를 걸거나 메시지를 보낼 수 있죠. 영화를 볼 때도 마찬가지로 기존에 플레이어를 켜고, 영화를 찾고, 재생 버튼을 누르던 과정이 사라져 훨씬 편리하고요.

* 아레나폰 가상체험 사이트: http://arena.lgmobile.com/emulator/

두 번째 스타일리시(Stylish)는 그래픽 퀄리티와 화면 전환을 더 멋지게 구현했다는 이야기입니다.
S클래스 UI는 WVGA1를 지원하는데, 고해상도인 만큼 기존 휴대폰에서 볼 수 있는 화면 외곽의 흐림 현상을 해결했어요. 보시면 전체적으로 아이콘들이 크고 선명합니다. 엣지(edge) 있는 디자인이라고 할까요 ^^ 또 메뉴가 전환될 때 실사와 같은 리얼 메타포를 사용해 사용성을 높였습니다. 책을 볼 때는 책장을 넘기는 것 같은 애니메이션을 사용하거나 영화의 페이드인 페이드 아웃과 같은 기법을 적용해 부드럽게 화면이 전환되죠. 이런 화면 전환은 사용자들이 다음 메뉴를 기다리는 시간을 더 짧게 느끼게 하는 효과도 있고요.

마지막 스마트(Smart)는 자주 사용하는 기능을 손쉽게 사용할 수 있도록 하는 것입니다.
첫번째 스피디(Speedy)와도 연결되는 내용인데요, 자주 사용하는 콘텐츠와 기능들을 사용하기 편리하게 구성할 수 있도록 디자인 한 것입니다. 홈 스크린에 자주 사용하는 기능을 그룹으로 묶어 어떤 콘텐츠든 클릭하는 순간에 자동으로 실행된다거나, 가로로 쓰다가 세로로 돌리면 자동으로 화면이 전환된다거나, 세로로 여러 장의 슬라이드를 넘겨보다가 가로로 돌리면 자동으로 크게 보기가 된다거나… 이런 것을 말합니다. 요약하자면, “고객의 마음을 먼저 알아주자~” 하는 게 S클래스의 콘셉트인거죠.

bmmx5OxDhO0$

개발 과정에서 특별히 기억에 남는 에피소드가 있을까요?
유 주임 S클래스 UI는 콘셉트를 잡는 데 4개월, 시나리오를 짜는 데 몇 개월이 걸려 총 1년 반 정도 걸렸습니다. 가장 오랜 기간을 고민한 것은 아무래도 계획한 UI를 적용하는 기간이었죠. 이때는 개발자들과 숙식을 함께하며 신경전(^^;)을 벌이기도 합니다.

디자이너는 보통 자신이 생각하는 이상적인 방향으로 UI를 그립니다. 그런데 막상 개발을 하다 보면 구현이 불가능한 부분이 있어요. 기술적인 제약, 가격 제한도 그렇고 국가별, 개인별로 문화적 특성과 경험칙이 달라 조율하기가 힘들 때도 있죠. 그럴 때면 대안을 찾거나 눈물을 머금고 다운그레이드를 하기도 하죠.

S클래스 UI 개발 프로젝트는 그런 면에서 디자이너들에게 좀 더 많은 창의력을 발휘할 수 있는 프로젝트였습니다. 그래서 재미있게 사용할 수 있도록 오락적 요소도 많이 반영됐습니다. 예를 들면  메인 메뉴 화면에서 폰을 가로로 돌렸을 때 나오는 화면이 3D 큐브처럼 빙글빙글 돌아가도록 하는 거죠. 사실 이건 단순히 ‘재미 효과’이기 때문에 화면이 그냥 전환되는 방식으로 구현할 수도 있었지만 바쁜 일정에도 불구하고 개발자들이 욕심을 부려 결국 막바지에 적용되었죠.

말씀을 듣다 보니 UI 디자이너는 그림을 그린다기보다는 화면을 설계하고 스토리를 만든다는 생각이 드는데요, UI를 한마디로 말한다면 뭘까요?
곽 책임 저희는 UI는 ‘You&I’ 라는 이야기를 합니다. UI는 데이터 입력이나 동작을 제어하기 위한 화면에 표현되는 외관, 음악, 콘텐츠를 표현하는 방식 모두를 말합니다. 그래서 저희 부서에는 사운드 디자이너, UX전문가, UI전문가 등 다양한 일을 하는 사람들이 있습니다. 디자인, 심리학, 기계공학, 국문학 등 13가지 전공을 한 사람들이 있죠. ^^

유 주임 좁게는 영화의 ‘스토리보드’라고 이해하면 됩니다. 콘센트를 잡고, 시나리오 짜고 하는 과정이죠. 사용자가 원하는 메뉴에 얼마나 적은 클릭으로 도달할 수 있는지를 고민하기도 합니다. 세분화하면 실제 그림을 그리고 색을 입히는 영역은 GUI(Graphic User Interface)영역이고, 재미를 살리는 부분은 UX(User eXperience)이고 그렇습니다.

UI가 디자이너의 영역인가요? 개발자의 영역인가요?
곽 책임 디자인을 어떤 의미로 해석하느냐에 달린 것 같습니다. 어원을 보면 ‘새로운 것을 계획하다. 만들다’라는 뜻이 들어있어요. 그렇게 따지면 “디자이너와 개발자의 구분이 필요할까?” 하는 생각이 듭니다.

휴대폰은 신제품 출시 주기가 매우 짧고 시장 진입시점을 얼마나 앞당기느냐에 따라 점유율이 30% 정도 차이가 납니다. 그러다 보니 디자이너와 개발자가 한 몸이 되어 작업을 할 수 밖에 없죠. 일반적으로 시나리오는 디자이너가 짜고 구현 가능 여부는 개발자가 확인하지만 저는 “UIer의 영역이다.”라고 말하고 싶습니다.

디자이너는 사물이나 자연에서 영감을 얻기도 한다는데 UIer는 어디에서 영감을 얻나요?
곽 책임 테마를 고민하기 위해 고객 속으로 들어가죠. 예전에 이슬람의 메카폰을 개발할 때는 이태원의 이슬람 사원에 가서 지나다니는 사람들을 관찰하고 이야기도 해 봤습니다. 신사동 가로숫길에는 유명한 카페가 있는데 ‘이 카페는 무엇 때문에 유명할까?’, ‘왜 사람이 많을까?’를 직접 가서 파악해 보기도 합니다. 장사가 잘 된다는 건 고객이 원하는걸 잘 파악했기 때문이니까요.

결국 모든 것은 고객의 마음을 읽는 데서 시작한다?
곽 책임 네, 휴대폰도 그렇거든요. 키패드, 그립감, 무게감 등 사소한 것들이 고객의 마음을 움직이니까요. 가령 고객들은 얇은 폰을 원하지만 두께가 10mm보다 얇아지면 한 손에 쥐기 불편할 것이다, 12mm까지는 괜찮더라, 화면을 크게 만들면 보기 좋을 것 같지만 너무 크면 불편하다, 등… UI는 사람의 행동과 밀접한 관련이 있기 때문에 마음과 행동패턴을 읽는 것이 중요합니다.

UI가 휴대폰 선택의 요소가 될 수 있을까요?
곽 책임 요즘은 터치폰이 많이 나오잖아요? 휴대폰 화면이 커지고, 형태가 비슷해지다 보니 UI가 어떻게 차별화 되어 있는지가 휴대폰을 선택하는 핵심 요소가 되고 있어요.

처음 공개되었을 때 아이폰과 닮았다는 얘기가 있었는데 어떻게 생각하시는지?
유 주임 아이폰 출시 이후 터치폰이 대중화 되면서 아이콘들을 화면 전면에 배치하는 콘센트가 업계 트렌드가 됐습니다. 그런데 저희가 아이콘을 바닥에 죽 늘어놓고 써보니까 오히려 찾기 불편하더군요. 그래서 S클래스 UI에는 3D 큐브를 도입해 하나의 화면을 세개로 넓히고, 자주 찾는 기능을 그룹으로 묶어 보여줘 편의성을 높였습니다.

또, 보통 휴대폰에서는 메뉴를 클릭하면 다른 화면으로 넘어가는데요, S클래스 UI에서는 리스트가 위아래로 늘어나며 내용을 보여줍니다. 이렇게 하면 사용자는 내용과 리스트를 동시에 볼 수 있어 메뉴를 빠르게 이동할 수 있는 편리함이 있죠. 실제로 여러가지 휴대폰을 놓고 사용자 평가를 해봤는데, 메뉴를 실행하게 하는데 있어 S클래스 UI의 만족도가 가장 높았습니다. 써보시면 차이를 느낄 수 있을 거에요.

S클래스 다음엔 뭘까요?
곽 책임 아마도 S클래스의 스피디(Speed), 스타일(Stylish)한 DNA는 그대로 두고 더 스마트(Smart)한 방향으로 발전하지 않을까 싶습니다. 작년까지 UI의 프레임 워크(S클래스, A클래스, 키패드 관련 프레임 워크 등)을 정립하는 작업을 마쳤어요. 올해부터는 테마와 스토리에 대한 고민을 더 하고 있습니다. 단순히 편리한 UI보다 사용자의 기분까지 파악하고 서비스 영역까지 확장하기 위해 고민 중입니다. 고객들의 마음을 조금 더 알아주는 UI에서 한 걸음 더 나아가 재미있는 이야기를 들려주는 스토리텔링이 담긴, 그런 디자인을 지향합니다. 재밌는 작업이 될 것 같아요.