음식 앱에 대한 아이디어
다이닝코드가 별로 마음에 들지 않을 때
사람들은 마음에 들지 않을 때, 크리틱을 한다. UI 디자이너는 좀 더 구체적으로 투덜거릴 수 있는데, 거기에 적당한 무료함과 시간의 여유가 있으면, 디자인을 해볼 수 있다.
낯선 곳으로 드라이브를 가는 경우, 구글로 음식점을 찾아보는 편인데, 매번 다이닝코드의 음식 추천이 검색된다. 그런데 이 서비스는 결과는 많이 보여주고 정보는 정말 많은데 어렵고 쓸모없다. 어딜 가든 구글링에 잡히긴 하는데, 막상 도움이 안 된다. 정확히는 도움이 안 된다기보다는 재미가 없다. 정보는 너무 많고, 대체 어떻게 해야 할지 모르겠다.
그러던 어느 날, 여느 때처럼 페이스북을 보고 있는데, 누군가 불평을 했다. 다이닝코드의 디자인이 조악하다는 것이다. 주요 관점은 타이포가 줄이 안 맞는다는 건데... 대체 디자인에 대해서 크리틱을 할 때 왜 글 간격이나 글자의 정렬부터 따지는 걸까? 맞춤법과 타이포그래피는 사실 실제 콘텐츠와는 별 상관없는 부분인데 왜 사람들은 타이포에 대해서 불만이 그렇게 많을까를 고민하다가 이 앱의 디자인이 생각보다 문제가 많다는 사실을 발견했다.
그래서 내 스타일로 작업해보기로 했다. 내친김에 아주 드리블스럽게 만들어보기로 했다.
시도와 결과 그리고 설명
첫 번째로 보인 문제는 색상이다. 배달의 민족이 민트색을 사용한다. 다이닝코드는 빅데이터를 기반으로 음식점을 추천해주는데, 필요 이상으로 민트색을 사방에 쓰고 있다. 데이터 기반인 서비스에 민트색을 왜 쓰는지 모르겠는데, 전반적으로 너무 과도하게 사용되어 있다. 음식 서비스에도 민트, 글쓰기 서비스에도 민트, 금융 서비스에도 민트... 이래서야... 여하튼 기존 디자인에서는 민트와 화이트 때문에 음식 사진이 분명하게 표시되지 않는다. 민트색은 유지하되 그 비중을 정말 중요한 부분에만 사용하기로 했다.
그리고 다이닝코드의 과도한 타이틀도 단순하게 표시하기로 했다. 이 앱에서 내가 알고 싶은 내용은 실제로 가진 않더라도 주변에 가볼만한 음식점이 있는 확인하는 용도인데, 배경도 밝고, 글자도 밝은 데다가 폰트가 너무 화려해서 잘 보이지 않았다. 배경이미지는 적당히 무게감이 있고, 적당한 원 모양이 있고, 민트색을 보강할 녹색과 노란색이 있는 사진을 골랐다.
다이닝코드의 원래 개발자들이 강조하고 싶은 것들은 검색이겠지만, 검색은 사실 매우 어려운 행동이다. 내가 만든 가상의 '나'는 딱히 뭘 검색하기보다는 그냥 내 주변에 그럴듯한 맛집이 있다는 걸 확인하고 내키면 가볼까 말까 하는 생각을 하는 '나'다. 내가 설정한 퍼소나는 거리를 걷고 있고, 그다지 배는 고프지 않지만, 적당히 인기 있는 맛집이라면, 가볼 생각이 있다.
'추천 검색어'를 선택하면, 해당 버튼을 누르는 순간 검색을 한 것으로 가정했다. 당연히 강릉의 백종원 관련 다녀간 맛집을 검색하여 출력한다. 사용자를 다음 검색으로 유도하기 위해 부가적인 추천 검색어를 제공한다.
'내 주변 맛집'은 지도부터 보여주는 기존 UI를 버리고 리스트로 표시했다. 지도를 보는 기능은 오른쪽 상단의 아이콘 버튼으로 접근할 수 있지만, 사용자가 그러지 않았으면 좋겠다. 500m 이내의 맛집을 표시하고 맛집의 주요 키워드(태그)를 나열한다. 거리별로 리스트를 분할해서 보여준다. 원하는 경우, 태그를 추가해서 혹시라도 주변에 내가 원하는 태그가 포함된 음식점을 찾아볼 수도 있다.
'오늘의 인기 맛집'은 요일과 그날의 인기 항목을 보여준다. 요일별로 나눈 이유는 당연히 요일별로 사람들의 행동이 다를 것이기 때문이다. 다이닝코드는 빅데이터 서비스이기 때문에 관련 데이터가 있을 것이라고 예상했다. 여기서는 음식점 썸네일을 생략했다.
음식점 이름을 탭하면, 상세 정보를 보여준다. 이 스크린들에 몇 가지 아이디어를 시험해봤는데, 중간 상태를 가정한 것이다. 보통은 목록이 있고, 상세 페이지가 있다. 하지만, 실제 '나'를 힘들게 했던 다이닝코드의 정보 폭풍을 피하기 위해서 빨리 볼 수 있는 중간 상태를 디자인했다. 중간 상태에서 꼭 확인해야 하는 것이 내가 가보고 싶은 것과 가본 상태를 구분하는 것이다.
이 디자인에서 시도한 또 다른 아이디어는 선택을 잠시 유보하고, 좀 더 자세한 정보를 확인하는 경우다. 그럴 경우에만 상세 페이지로 넘어가는데, 상세 페이지에서는 좀 큰 사진과 실제 음식점으로 가볼 수 있는 정보들을 제공하고, 주소의 경우는 지도 화면으로 넘어갈 수 있는 기능을 부여하고, 전화번호에는 바로 전화를 걸어볼 수 있는 기능을 부여한다. 그리고 중간 상태에서 유보했던 선택을 다시 요청한다.
나는 '오늘의 인기 맛집'을 통해서 내가 스쳐봤던 음식점을 쉽게 찾게 하고, 실제 사용자가 가본 음식점일 경우 다음 단계를 통해서 좀 더 자세한 정보들을 기록할 수 있는 절차를 제공하고 싶었다.
작업 결과
내가 확보한 시간에서는 이 정도까지 작업할 수 있었다. 작업 시간은 대략 4~6시간 정도 사용한 것 같다. 작업 결과를 강평하면, 나의 스타일이 점점 어느 정도 자리를 잡아간다는 것. 약간 더 다른 비주얼 스타일도 생각해봐야 한다는 것과 실제 작업을 해보니 오늘의 인기 맛집이 생각보다 매력적이라는 것이다.
위에도 잠깐 언급하긴 했지만, 비슷한 업종에서 내가 속한 서비스보다 더 많은 인지도를 가진 브랜드가 비슷한 색을 사용했을 때, 컬러 사용 전략에 대해서도 좀 더 발전시켜볼 가능성이 있는 것 같다.
대부분의 앱은 사진 배경 사용에 대해서 금기로 받아들이는 것 같은데, 적당한 사진을 사용하면, 좀 더 다른 경험을 줄 수 있을 것 같다.
