brunch

라이킷 190 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Melon Design Apr 25. 2018

음악으로 톡하는중, 카카오멜론

카카오멜론 UI 구축 이야기

카카오 또 뭐해? 음악으로 톡하는중, 카카오멜론

지난 3월 29일부터 미디어마케팅을 통해 홍보하고 있는 카카오멜론의 광고 카피를 들어보셨나요?

카카오멜론은 카카오와 멜론이 시너지를 내는 프로젝트로, 카카오톡 유저가 대화를 하면서 음악도 감상하고 또 친구와 함께 음악을 듣는 경험을 제공합니다. 그럼 카카오멜론 서비스가 어떻게 진행되었는지 그 과정을 설명해 드리려고 합니다.

카카오멜론 프로젝트의 시작

카카오톡 내 여러 서비스와의 자연스러운 흐름을 유지한 심플하지만 진화된 멜론

작년 봄부터 출발한 카카오멜론은 카카오M과 카카오 양사가 하나의 목표를 가지고 진행하였는데, 기업문화와 업무 프로세스가 다른 두 회사가 만나 하나의 서비스를 잘 만들어가기 위해서는 서로를 이해하는 것이 가장 중요했습니다. 따라서 커뮤니케이션 방식 일원화 논의 및 정기적 회의를 서로의 사무실을 오가며 진행했습니다.

우선 UX 및 디자인 방향은 "멜론의 맥락은 유지하되, 진화되고 간결한 음악서비스, 그리고 카카오톡 내의 여러 서비스와 자연스러운 흐름을 유지하자"로 합의하여 시작하게 되었습니다. 한마디로 '심플하지만 진화된' 하지만 그 양사의 메인 서비스와는 연계성도 살려야하는 기본방향을 가지고 시각화하는 작업은 무에서 유를 창조하는 프로젝트보다 더 어려운 일이었습니다. 그만큼 초반에 양사 및 내부 타부서와의 바라보는 기준점을 합의하기 위해 많은 프로토타이핑을 진행하게 되었습니다.

업무 영역에 대해 간략히 말씀드리면 카카오톡에서 진행되는 부분은 Native App 영역이며, 우리가 진행하는 서비스 페이지는 모바일 웹페이지로 구분지어져 있습니다.

두번째이미지인 경우 Native App영역이며 나머지 화면은 모바일웹으로 구성된 카카오멜론 서비스페이지입니다

개발 과정

종이와 펜, 스케치툴을 통한 발빠른 프로토타이핑

서비스 구조설계와 맞물려 주요 기능도 양사의 목소리를 담아내야하고 더불어 시너지도 만들어내야하는 프로젝트인 만큼 합의점을 찾아 유연하게 풀어야하는 것이 이 프로젝트가 풀어야 할 과제였습니다. 그래서 서비스 구조설계부터 기획, 디자인, 개발 등 서로 다른 직군의 구성원이 참여를 하여 기존보다 유연한 프로세스로 진행되었습니다. 정리된 스토리보드 ppt파일 받아 구체화하기보다는 기획 목표와 방향성을 같이 토론하면서 종이와 펜을 통해 그리기도 하고 때로는 스케치툴을 통해 발빠른 프로토타이핑을 만들며 구체화하였습니다. 빠듯한 일정이지만 유연한 프로세스는 일하는 즐거움을 가져다 준 것 같습니다.

스케치툴을 통해 포토샵보다는 좀 더 빠르게 프로토타이핑을 하면서 기획과 다양한 각도로 기민하게 논의를 하였습니다.

타사 리서치와 벤치마킹 작업은 카카오멜론의 서비스 볼륨에 적합한 메뉴 구조 및 탭 형태, 접근빈도가 가장 높은 검색페이지에 대한 구조설계, 멜론보다는 가벼운 서비스인 만큼 사용성을 올려줄 수 있는 My 및 상세페이지에 대한 구조등에 대한 아젠더를 가지고 아이데이션 작업을 진행하였습니다.

모바일웹서비스를 중심으로 주요뮤직서비스 및 포털서비스등을 중심으로 벤치마킹을 진행하였습니다.

카카오멜론 서비스 대표기능 Flow

서비스 소개

카카오톡에서 음악감상 / 프로필음악 설정 / 개인화 맞춤 음악추천 / 이용권선물하기

카카오톡의 기능과 연계된 부분이 많아 사용자 Flow 기준으로 서비스 화면을 소개하고자 합니다.

대화창에서의 +버튼으로 ‘음악’ 진입 후 친구에게 음악 함께듣기 및 플레이리스트 상세화면

채널 탭으로 ‘음악’ 진입하여 멜론의 특화서비스 소개 (나는 지금, 테마 태그)

프로필 음악 설정시 서비스 페이지 진입

이용권 선물을 하고, 친구는 받고 마이페이지에서 음악과 함께 이용권 사용하기

서비스 런칭 프로모션

귀여운 라이언3D 이모티콘과 무료 PPS 10 이용권지급

지난달 3월 29일부터 4월 18일까지 런칭 프로모션을 대대적으로 진행하였습니다. 미디어 광고를 통해 서비스 브랜딩 확산 및 프로모션 참여를 유도하여 자연스러운 서비스로 진입하기 위한 마케팅 프로모션이 진행하였습니다. 너무 귀여운 라이언 3D 이모티콘과 무료 PPS 10 이용권은 탐나는 아이템이었죠. 미디어 광고 영상과 크리스피스튜디오에서 제작한 브랜드 영상도 함께 감상해 보시죠!