올 9월에 론치한 트래블로의 3번째 아이폰앱, TRIPHERE

트립히어가 월간웹 11월호에 나왔다. 아직 글로벌 버전 론칭 전인데다 한국어 버전도 1.5버전까지는 업데이트가 되어야 내가 원래 생각했던 모습이었기 때문에 그동안 블로그에 포스팅을 미뤄두고 있었는데, 이번에 월간웹에 실린 겸 또 얼마전 한국어 버전도 1.5로 업데이트 된 겸 이제야 블로그에 올려 본다. 월간웹 기사에 있는 캡쳐 화면들은 1.0버전이라 1.5버전과는 UI디자인이 좀 다르기 때문에 아쉬웠지만 그래도 기사를 보는 동안 혼자 뿌듯해했다. 글로벌 버전은 현재 준비중으로 아마 내년 1월쯤 앱스토어에 올라갈 예정. 처음부터 내가 개인적으로 하고 싶어했던 글로벌 론칭에 중점을 둔 앱이었고, 트래블로가 만든 3개의 앱 중 서비스의 가장 핵심이 되는 앱이기 때문에 더욱 애정이 가는 TRIPHERE! 앞으로 더 많은 사랑 받을 수 있기를 :)








[월간 웹] 여행을 일상처럼, 일상을 여행처럼 TRIPHERE
LBS 기반으로 한 앱이 최근 많이 등장했다. 사람들에게 주어진 일상이나 여행을 기록하는 도구 또한 다양해진 셈이다. 페이스북, 미투데이와 같은 SNS가 있는가 하면, Trip Journal(트립저널)과 같은 기록 유틸리티도 있다. 트립저널은 복잡한 UI로 인해 사용이 쉽지 않고. 일반 SNS는 범용적이다 보니 여행 목적으로 쓰기에는 다소 아쉬움이 있는 것이 사실이다. 이런 아쉬움을 달래줄 앱이 탄생했으니, 그것이 바로 트립히어다.


여행의 기록, 공유, 발견 TRIPHERE
TRIPHERE(이하 트립히어)는 ‘여행을 여행답게 기록하고 공유할 수 있게 하자’는 목적성이 명확한 앱이다. 사용자는 트립히어를 사용하기 전에 여행 SNS 트래블로(http://www.travelro.co.kr)를 경험해보는 것이 많은 도움이 될 것이다. 트래블로는 ‘여행의 새로운 길을 만나다’라는 캐치 프레이즈를 내건 여행길(Route)을 기반으로 자신의 여행경험 혹은 계획에 대한 이야기와 정보를 공유하는 여행 SNS다. 그리고 트립히어는 트래블로 사용자에게 또 다른 여행을 하게끔 동기부여 요소라 할 수 있다. 트립히어는 여행의 기록은 곧 여행자끼리의 네트워크로 구성된 즉, SNS의 친근함과 함께 여행을 기록하는 즐거움을 더한 앱이다. 제작사인 아토미디어는 “웹으로 구성한 트래블로를 앱으로 옮겨 ‘여행’이라는 범주 혹은 주제 안에서 정보의 기록적인 측면뿐 아니라 사람과의 관계를 만들 수 있는 서비스가 만들어진다면 의미가 남다른 것이라는 생각에 트립히어를 제작했다”고 전했다. 트립히어는 무엇보다 사용자가 쉽게 접근할 수 있게 제작하는 것을 우선 전략으로 세웠다. 프로젝트를 진행하면서 트립히어만의 색을 찾는 것에 집중했다고 한다. 트립히어는 크게 기록, 공유, 발견이라는 것에 주안점을 뒀다. 사용자는 자신의 여행을 여행답게 기록하면서 ‘여행’ 앱이라는 느낌을 받는다. 트립히어는 ‘일상’을 ‘여행’으로 받아들일 수 있게 일상과 여행을 구분한 것이 이색적이다. 일상에 있을 때도 자신의 기록을 남기고, 여행 모드로 전환하면 실제 여행의설렘을 느낄 수 있게 한 것이다. 특히, 여행은 지인과의 공유뿐 아니라, 내 주변에서 여행하는, 내가 갔었던 혹은 관심 있는 여행지에서 여행 중인 여행자와의 교류가 중요하다. 그런 부분에서 트립히어는 정보와 감성이 공유될 수 있게 제작했다. 또한, 이런 공유를 통해서 사용자는 다른 여행자의 기록을 통해 새로운 여행지를 발견하게 되고, 또 다른 여행을 꿈꾸거나 함께 여행할 수 있는 동료를 발견할 수 있는 부분까지 고민을 담아냈다.

<Expression>
Theme & Motive Easy, Simple, Clean, Fresh
트립히어 콘셉트는 ‘Easy’다. 쉽게 기록하고, 공유하고, 발견할 수 있는 데 중점을 뒀다. 룩앤필 키워드는 ‘Simple’, ‘Clean’, ‘Fresh’로 단순하고 깨끗한 느낌을 주되 포인트 있는 디자인이 특징이다. 앱 특성 상 지도를 포함한 사용자의 다양한 사진과 글이 올라오는데, 디자인은 그것들의 가독성을 해치지 않으면서도 트립히어라는 브랜드를 인지할 수 있는 부분들을 갖고 있다. 아토미디어는 다양한 색 사용보다는 적절한 폰트 사이즈와 여백에 중점을 뒀고, 글로벌 론칭을 위해 영문버전을 먼저 디자인한 후 한글버전을 작업했다.

<Information Architecture>
Contents 일상 모드와 여행 모드의 색다른 경험
트립히어의 데이터는 ‘여행 기록’과 각 기록들이 모여 하나의 여행을 이루는 ‘여행길’, 이렇게 두 가지로 구성이 된다, 여행길은 일상이 아닌 여행 모드일 때만 만들어 진다. 하나의 기록은 위치와 메모로 구분이 되며, 위치 정보는 꺼둘 수 있다. 모드를 일상과 여행으로 나눈 것은 일상에서 여행으로 모드를 바꿀 때, 오프라인의 감성을 표현하려 했고, 여행 모드로 바뀌면서는 여정이 생기기 때문에 그 여정을 맵으로도 의미 있게 구성해 보여준다. 트립히어 ‘등록’페이지에는 유저액션 순서를 키가 되는 콘텐츠 우선순위에 맞춤으로써 트립히어가 무엇을 하는 앱인지 쉽게 알 수 있다.

<Development>
Prototype 프로토타입 개발해 사용
트립히어는 여행을 더욱 쉽게 기록하고 공유할 수 있도록 특화시킨 SNS이어서 기존 SNS 앱 기능뿐 아니라 여기에 여행을 기록하고 공유하기 위해 맵을 효과적으로 활용했다. 또한, 개발 초반부터 어느 정도 기능이 동작하는 프로토타입을 개발해 사용했다. 개발 과정에서는 트립히어의 개발 일정 관리를 위해 스크럼(Scrum)이라는 애자일(Agile) 개발 방법론에서 사용하는 제품 백로그(Backlog)를 이용, 개발 관리 업무 자체는 최소화하되 작업의 진행 상황 및 남은 작업, 우선 순위를 명확하게 함으로써 프로젝트의 가시성을 높여 보다 프로젝트 효율을 높이는 데 신경 썼다.

<UX - User eXperience>
UI 직관적인 이름과 아이콘 TripHere
아토미디어가 프로젝트 초반에 가장 고민했던 것은 하단탭의 직관적인 이름과 아이콘이었다. 추후 해외 진출을 염두에 뒀기 때문에 한글과 영문 모두를 고려했고, 결국은 서비스를 더욱 잘 나타낼 수 있는 영문명을 선택했다.
‘TripHere’는 앱 브랜드면서 가장 중요한 액션인 ‘등록’이기도 해서 하단탭 중앙에 위치했고 다른 탭보다 조금 더 눈에 띄게 디자인했다. 아이콘 또한 앱의 특징과 의미들(현재위치+장소+커뮤니케이션)을 내포할 수 있게 제작했다.

UX 인상적인 일상/여행 모드 전환
트립히어 사용자들은 일상/여행 모드의 전환을 인상적이라고 평했다. 사용자가 글 쓸 때 제일 먼저 하는 액션이 일상/여행 모드 선택인데, 일상모드일 땐 각각의 단편적인 글들이 등록되고, 여행모드일 땐 여행시작부터 여행을 끝낼 때까지 올렸던 글들이 하나의 여행길로 묶여 지도에서 자신의 여행 여정을 한눈에 볼 수 있다. 기능적으로 봤을 때 모드전환은 앱의 작은 부분 중 하나일 수 있지만, 이 작은 부분이 사용자 경험 측면에서는 큰 역할을 한다.

기사 출처 : 월간웹

아이폰 앱 디자인을 할 때 아래 첫 화면(스플래쉬)이 디자이너에겐 굉장히 중요하다고 할 수 있는데, 아이폰의 특성상 비주얼 컨셉을 보여줄 부분이 많지 않기 때문. 또한 스플래쉬는 유저가 해당 앱에 대한 시각적 첫 인상을 느끼는 접점이기 때문이다. 스플래쉬 제외한 다른 페이지에서 해당 앱의 느낌을 시각적으로 전달할 수 있는 영역은 상단 네비게이션 영역과 곳곳에 들어가는 아이콘 혹은 일러스트레이션 스타일, 백그라운드 이미지 정도라고 생각한다.

스플래시 화면을 디자인 할 때 유의해야 할 것은 아이폰 바탕화면에 들어가는 앱 아이콘. 컴퓨터 모니터로 보는 것과 실제 아이폰 화면으로 보는 것과는 컬러와 사이즈에서 차이가 꽤 있으므로 아이폰 화면에서 테스트하며 디자인 수정은 필수. 폰트도 사이즈와 기본폰트 종류가 웹디자인을 할 때와는 다르므로 처음 앱디자인을 할 때 조금 헤맬수도 있겠다. 이럴 땐 Fonts! 앱을 활용해보자. 아이폰에서 제공되는 폰트들을 사이즈별로 볼 수 있어 앱디자인 할 때 꽤 도움이 된다는 :) 물론 iPhone Stencils PSD는 필수! 디자인 할 때 아이폰 케이스에 넣고 하는 것과 없이 하는 것의 차이는 크다. 실제 아이폰에서 어떻게 보여지는지를 느끼며 디자인 하려면 꼭 스텐실을 활용할 것.


내가 처음으로 디자인 한 아이폰 앱. 파워스피킹 Power Speaking
2010.07.21 아이툰즈 앱스토어에 론치된 이후 한국 Top Paid iPhone Education Apps 1위, 현재 Top Grossing 4위, Top Paid 9위를 달리고 있다. 후후. 영어공부 하면 고개를 절레절레 젓는 사람이 많을 것이다. 나만해도 그렇다는 -_-; 때문에 교육관련 앱들은 대부분 디자인이 밝고 친근한 느낌이 많다. 그런 부분들을 메인 컬러인 스카이블루와 동글동글한 폰트쉐입, 웃고있는 아이콘을 통하여 주고 싶었고, 아이콘의 입모양을 하하 :D 웃는 느낌 + 색색깔의 Power Speaking의 알파벳들을 넣어주었다. 

Travelro 팀의 첫번째 앱이자 나에겐 두번째 앱. Travelro 트래블로 전국맛집
2010.07.28 아이툰즈 앱스토어에 론치되고 이틀만에 한국 Top Free iPhone Lifestyle Apps 1위, 현재 Top Free iPhone Apps 2위를 달리고 있다. 이대로 쭈~욱 가주길! 트래블로 전국맛집 앱은 컨셉디자인만 내가 잡고, 전체적인 디자인 작업은 Designer 오나가 고생해 주셨다. (쌩유, 오나!) 처음 이 앱의 컨셉을 생각했을 때 번뜩하고 떠오른건 빨간색 접시, 동그란 스팟아이콘 쉐입 그리고 초록색 나뭇잎. 식감을 자극해주는 다홍색에 가까운 레드와 발랄한 이미지의 옐로우의 투톤 조합. 하지만 너무 눈을 아프게 하는 조합이 될 수 있으므로 편안한 느낌을 줄 수 있도록 컨트라스트와 컬러톤을 여러번 조절해야 했다.