로그인 해주세요!
본문 바로가기
Design News
디지털 뮤즈가 둥지를 튼 플랫폼의 진화 벅스 앱 5.0

프로젝트명 벅스 앱 5.0
프로젝트 기간 2018년 초~2019년 3월
발표 시기 2019년 3월
디자인 NHN벅스 디자인팀
웹사이트 music.bugs.co.kr/bugs5Open


벅스 앱 5.0.


홈 화면. 전반적으로 심플해진 구성이 특징이다. 폰트의 경우 가독성을 고려해 크기는 키우고 웨이트는 얇게 표현했다. 전체적인 UI의 균형을 맞춘 것이다.


벅스 앱 5.0의 탐색 기능. 상황과 기분에 따른 추천 카테고리를 제공한다.


벅스 앱 5.0 런처 아이콘.


음성 명령 서비스. 인터랙션을 삽입해 사용성을 높였다.

20세기 말과 21세기 초는 아날로그 음원 시장이 디지털로 빠르게 재편된 시기다. 그리고 벅스는 그 시작을 알린 주인공으로, 그야말로 디지털 음원 시장의 개국공신이라 할 수 있다. 국내 최초의 음원 서비스로 1999년 출발한 벅스는 20년 가까이 많은 이들의 꾸준한 사랑을 받았다. 데스크톱에서 MP3로, 다시 스마트폰으로 음악을 소비하는 방식은 달라졌지만 그 가운데서도 벅스라는 브랜드가 굳건히 자리 잡을 수 있었던 데에는 오랜 기간 축적한 노하우와 자기 쇄신적 디자인의 힘이 컸다. 지난 3월 선보인 벅스 앱 5.0 출시 역시 브랜드 관점에서 큰 분수령이 될 것으로 보인다. “벅스 앱 4.0 개편 후 5년 가까운 시간이 흘렀고 그동안 100여 차례 콘텐츠를 업데이트했다. 서비스가 방대해지면서 이를 잘 정돈해 효과적으로 노출시키는 변화가 필요했다.” 프로젝트를 주도한 NHN벅스 디자인팀 안윤정 팀장의 말이다. 이번 프로젝트의 슬로건은 ‘익숙한 듯 단순하게’. 실제로 심플하면서도 트렌디한디자인이 눈길을 끈다. 벅스 앱 5.0은 장식적인 요소를 배제하고 색상 또한 최소화한 것이 특징인데 불필요한 요소에 힘을 쏟기보다는 사용자가 콘텐츠 자체에 집중할 수 있도록 유도했다는 인상을 받는다. 장식이 빠진 빈자리를 촘촘히 메우고 있는 것은 고도화된 사용성이다. 개인화 추천 서비스 ‘뮤직4U’의 기능을 강화하고 라디오 메뉴 중 ‘라이프스타일 채널’을 신설해 드라이브, 운동, 집중, 휴식 등 4개 테마에 맞는 세분화된 음악 채널을 제공한다. 또 멀티 재생 목록을 지원하고 음성 명령 기능을 신설하는 등 사용자의 생활 패턴을 면밀히 관찰하고 이에 기반한 여러 요소를 도입했다. 이때 UI·UX 디자인은 다양한 기능과 콘텐츠를 하나로 엮는 강력한 구심점인 동시에 길잡이 역할을 한다. 콘텐츠 플랫폼이 가장 빠지기 쉬운 함정 중 하나가 바로 ‘발견의 병목bottleneck of discovery’. 콘텐츠의 양이 증가할수록 선호하는 콘텐츠를 발견하기 어려워지는 현상을 뜻하는, 일종의 풍요 속 빈곤이라 할 수 있다. 콘텐츠의 망망대해가 펼쳐지면서 사용자가 원하는 바를 쉽고 편리하게 찾도록 돕는 것이 오늘날 플랫폼이 갖춰야 할 새로운 덕목으로 자리 잡게 됐다. 벅스는 이런 흐름을 정확히 이해하고 있는 듯했다. 가장 많이 이용하는 5개의 주 메뉴 ‘홈’, ‘뮤직4U’, ‘내 음악’, ‘탐색’, ‘라디오’를 하단 탭에 배치하고 첫 화면의 주요 카테고리에는 최근 발매한, 인기 있는, 추천하는 콘텐츠 위주로 간결하게 정리했다. 또한 첫 화면에서는 스크롤을 하지 않아도 최신 음악을 한눈에 확인할 수 있는 UI를 도입했다. 보편적이고 직관적이며 향상된 UX는 기존 사용자의 이탈을 막고 새로 유입된 사용자가 쉽게 앱에 적응할 수 있도록 돕는다. 사용자와의 기능적·감성적 교감을 고려한 점 역시 눈길을 끈다. 인터랙션을 삽입한 음성 명령 서비스로 사용자에게 디테일한 피드백을 제공할 수 있도록 설계했고 아이콘의 움직임에서는 에어비앤비에서 개발한 애니메이션 툴 ‘로띠lottie’를 활용해 마이크로 애니메이션을 구현했다. 이 밖에 물결치는 곡선과 풍성한 그러데이션이 돋보이는 런처 아이콘과 세심하게 조정한 폰트 스타일링 또한 벅스의 진화를 실감케 하는 요소다. ‘신은 디테일에 깃든다’고 했던가? 사용자의 행동 패턴과 라이프스타일을 마이크로 단위로 분석해 다듬은 이 플랫폼 디자인에는 역동적인 뮤즈의 감성이 깃들어 있다.


뮤직4U. 시각적으로 음악 콘텐츠를 강조했다. 선호하는 장르와 아티스트를 선택하면 취향을 분석해 음악을 추천해준다.


플레이리스트. 미니멀한 레이아웃과 여백을 살린 구성이 돋보인다.


취향 분석 서비스. 사용자의 기호를 면밀히 분석해 음악을 매칭해준다.


플레이어 화면. 음악 감상 시 블러 이미지와 함께 앨범 아트에서 추출한 컬러를 반영해 개별 음악에 아이덴티티를 부여했다.

안윤정 NHN벅스 디자인팀 팀장

“디테일은 결과물을 특별하게 만드는 마법 같은 힘이 있다.”



이번 벅스 앱 5.0 프로젝트에서 주안점을 둔 부분이 있다면?
한마디로 심플simple & 에센셜essential이라고 정의할 수 있다. 벅스 앱 5.0의 기획 방향은 꼭 필요한 것만 심플하게 제공하고, 고민 없이 듣고 싶은 음악에 다다를 수 있도록 탐색 경로를 정리하며, 벅스가 가진 풍부한 콘텐츠를 끊김 없이 탐색할 수 있는 경험을 제공하는 쪽으로 설정했다.

4.0에 비해 레이아웃이 무척 심플해졌다.
콘텐츠를 돋보이게 하는 이른바 ‘최소한의 디자인’에 집중했다. 음악 감상에 방해가 되는 장식은 최대한 배제했다. 심지어 앱상에서 벅스의 브랜드 키 컬러조차 배제한 채 흑백만으로 인터페이스를 구성했는데 이 모든 게 음악 콘텐츠를 최대한 부각시키기 위한 것이다. 또 여백이 충분하지 않아 카테고리별 그루핑이 어려웠던 4.0의 사례를 타산지석 삼아 좀 더 시원시원하게 여백을 두고 화면을 정리했다.

사실 단순하게 만드는 것이 더 어려운 법이다.
심플하게 만든다는 것은 결코 쉬운 작업이 아니다. 무엇보다 디자이너가 서비스의 본질과 핵심을 정확하게 이해하고 있어야 한다. 또 디테일을 지속적으로 다듬어나가야 한다. 대세로 자리 잡은 플랫 디자인을 따르되 타 브랜드와 차별화되는 벅스만의 디자인 아이덴티티를 살리는 것 또한 숙제였다. 일반 사용자 입장에서는 당장 결과물의 차이를 느끼지 못할 수 있지만 시간이 지날수록 그 차이는 확연해질 것이다. 디테일은 결과물을 특별하게 만드는 마법 같은 힘이 있다.

무엇보다 UX의 변화가 눈길을 끈다.
다른 음악 서비스의 보편적 UI·UX를 학습한 사용자가 벅스를 이용할 때도 별도의 학습 없이 이용 가능하도록 직관적인 UX를 제공하는 데 힘썼다. 새로운 사용자 유입의 진입 장벽을 낮춘 것이다. 또 다른 특징은 멀티 재생 목록을 지원하는 것이다. 기본 재생 목록 외에도 사용자의 취향대로 플레이리스트를 만들어 언제라도 듣고 싶은 재생 목록을 관리 및 감상할 수 있도록 했다.

새롭게 바뀐 비주얼 리브랜딩에 대해서도 설명해달라.
브랜드의 노후화에 대한 우려가 불거져 젊은 음악 서비스 브랜드로서의 리포지셔닝이 필요한 상황이었다. 컬러를 배제한 앱 화면과 대조적으로 런처 아이콘은 생동감 있게 물결치는 곡선과 풍성한 레드 그러데이션 컬러를 사용했는데 이는 다양하고 풍성한 음원을 제공하는 벅스의 서비스를 형상화한 것이다.

Share +
바이라인 : 글 최명환 기자
디자인하우스 (월간디자인 2019년 5월호) ⓒdesign.co.kr, ⓒdesignhouse.co.kr 무단 전재 및 재배포 금지