2014~2019
Overview
기존 선두 주자의 독점 체제의 국내 디지털 음원 서비스 시장에서 지니뮤직은 가입자를 빠르게 확보하며 메이저 플랫폼으로 발돋움하는 시기였습니다. 양적인 성장이 가파르게 이루어지는 만큼, 폭넓은 유저층을 지속적으로 락인(Lock-in)하기 위해 서비스의 독자적인 브랜드 인지도를 높이고, 플랫폼 전반의 UI/UX 완성도를 한 단계 끌어올려야 하는 중요한 전환점이기도 했습니다. 급격한 서비스 확장 과정에서 다소 파편화되어 있던 인터페이스 환경을 일관되게 정돈하고, 지니뮤직만의 심미성과 고유한 정체성을 구축하여 사용자 경험의 질적 성장을 이뤄내겠다는 확실한 목표를 가지고 프로젝트에 참여했습니다.
역할과 책임
2014년 지니뮤직에 합류한 이후, 브랜드 인지도 상승이라는 최우선 목표를 달성하기 위해 어플리케이션 전반의 UI 디자인 개선과 유저 사용성 고도화에 집중했습니다. 2017년 버전 4.4 업데이트를 기점으로 공통 컴포넌트 가이드라인 및 디자인시스템 구축에 주도적으로 참여하여, 제품의 시각적 일관성과 작업 효율성을 끌어올렸습니다. 이에 그치지 않고 대대적인 이미지 전면 벡터화, 마이크로 인터랙션(Lottie Animation) 등 새로운 디자인 기술을 주도적으로 도입하여 고질적인 앱 무거움 문제를 해결하고 최적화된 사용자 경험을 제공했습니다. 구조화된 디자인 시스템과 인터페이스 혁신을 통해 지니뮤직이 시장 내 메이저 스트리밍 플랫폼으로 도약하고 브랜드 인지도를 굳건히 다지는 데 핵심적인 역할을 수행했습니다.
정기적으로 수집하는 유저 피드백을 반영하여 지니뮤직의 공통 컴포넌트, 홈화면 UI, 플레이어, 장르, 뮤직허그 등 어플리케이션 전반의 UI 를 지속적으로 개편 또는 개선하였습니다. 홈화면은 연간 1~2회의 메이저 업데이트와 정기, 비정기적으로 업데이트하였으며 기획자 + 디자이너 구성으로 UI설계를 협업으로 진행하였습니다.
지니뮤직 모바일앱/웹, PC웹, 태블릿, 웨어러블 등 UI/UX 개선
컬러 테마, 컴포넌트 라이브러리 제작 리드
이미지 전면 벡터화
Micro Interaction, Lottie Animation 도입 및 제작 리드
Sketch, Framer, Protopie 등 도입 제안 및 교육
업무 효율화 리드
지니 웨어러블 신규 구축 및 UX/UI 개선
웨어러블 디바이스 도입 초기, 모바일 앱과의 연동을 고려한 스마트워치 환경의 지니뮤직 UX/UI를 선제적으로 설계했습니다. 최초로 도입되는 애플의 Human Interface Guidelines > Watch OS 가이드라인을 면밀히 분석하여 작은 화면 안에서도 핵심 기능이 직관적으로 제어되도록 스크린 플로우를 구축했습니다.
실시간 차트 확인, 플레이어 조작, 가사 확인 및 볼륨 조절 등 미디어 스트리밍의 필수 동선을 최적화했을 뿐만 아니라, '지니 스포츠'와 연계된 실시간 심박수 측정 기능 및 하트런 등 헬스케어 맥락의 UI를 밀도 있게 설계했습니다. 기획자 및 개발자와의 긴밀하고 빠른 협업을 통해 디바이스 특성에 맞춘 상호작용 인터랙션을 성공적으로 구현했으며, 멀티 디바이스로 확장되는 지니뮤직의 사용자 경험 기반을 탄탄히 다졌습니다.
음성 및 사운드 검색 기반의 음악 추천 서비스인 '지니어스'의 가치를 극대화하기 위해, 실제 유저들의 생생한 목소리를 수집하는 정성 리서치부터 시작했습니다. 초기 조사에서 인지 혼란이나 오동작과 같은 유저들의 솔직한 불편 사항들을 직면했고, 이를 근거로 제품의 개선 기회로 삼았습니다.
기존 유저들의 사용성 유지를 위해 전체적인 구조를 유지해야 하는 제약이 있었지만, 오히려 GUI와 마이크로 인터랙션을 정교하게 다듬는 방향으로 집중하여 돌파구를 찾았습니다. 하단 내비게이션 바의 위계를 타 서비스와 동일한 레벨로 맞춰 인지도를 높였고, 음성 명령 예시 표출과 파형 애니메이션을 통해 시각적 피드백을 강화했습니다. 특히 지니어스 캐릭터의 장식 요소를 걷어내고 검색 결과 성공, 실패, 없음 케이스에 따른 반응을 단순화된 표정으로 위트 있게 디자인하여 사용자와의 친밀한 상호작용을 유도했습니다. 불편함을 느꼈던 유저의 경험을 긍정적인 여정으로 전환하며, 디테일한 UI 정돈 또한 사용자 경험에 변화를 만들어내는 점을 체감한 유의미한 사례였습니다.
생산성 향상을 위한 UI 컴포넌트 라이브러리 구축
서비스와 플랫폼이 다각도로 확장됨에 따라, 전체 프로덕트의 시각적 일관성을 지키고 작업 효율을 극대화하기 위해 컴포넌트 단위의 라이브러리 구축을 주도했습니다. 파편화되어 있던 UI 요소들을 공통 모듈로 재설계하고, 디자인 툴을 Sketch로 전환하는 프로세스를 리딩하며 협업 환경을 체계화했습니다.
디자인 에셋 제작에 그치지 않고, 개발팀과의 긴밀한 소통을 통해 실제 코드상의 컴포넌트 구조와 디자인 라이브러리의 구조를 1:1로 매칭시키는 고도화 작업을 시도했습니다. 화면 내 타이틀 영역, 탭 바, 인풋 창, 플레이어 컨트롤러 등 핵심 인터페이스 요소를 규격화된 시스템 아래 정돈함으로써 디자이너 간의 협업은 물론, 디자인과 개발팀 간의 싱크율을 획기적으로 높였습니다. 결과적으로 리소스의 중복 생산을 막고 제품의 완성도를 다지는 탄탄한 기반을 마련했습니다.
특히 라이브러리 구축 과정에서 오랜 기간 누적되어 있던 다량의 디자인, 개발 레거시를 마주하기도 했습니다. 하지만 이를 단순한 장애물이 아닌 프로덕트의 체질을 개선할 전환점으로 삼아, 불필요한 리소스를 전수 조사하고 과감히 정리해 나갔습니다. 리팩토링 과정을 통해 기술적 부채를 해결하는 시야를 넓혔으며, 장기적인 유지보수가 가능하도록 시스템의 안정성을 한 단계 끌어올리는 뜻깊은 성장을 이뤄냈습니다.
지니뮤직의 전방위적인 서비스 확장 과정에서 제품의 시각적 완성도와 성능을 동시에 끌어올린 가장 결정적인 분기점은 아이콘 리디자인과 전면 벡터 리소스 도입이었습니다. 당시 급격한 기능 추가로 인해 서비스 전반의 아이콘 스타일이 파편화되어 있었고, 과도하게 누적된 고용량 이미지 리소스는 앱이 무겁고 느려진다는 유저 피드백의 주된 원인이었습니다. 이 문제를 근본적으로 해결하기 위해 단순한 스타일 수정을 넘어, 지니뮤직만의 브랜드 아이덴티티인 '친한 친구처럼 편안하고, 중성적이며 소년미가 느껴지는 이미지'를 시각적인 규칙으로 녹여내는 전면 개편을 단행했습니다.
아이콘의 R값 규칙, 선의 두께(1.5px), 형태의 복잡도에 따른 정밀한 디자인 가이드라인을 새롭게 정의했습니다. 대중에게 익숙하고 직관적인 메타포를 적극적으로 활용하여 사용자가 작은 화면 안에서도 인지적 혼란 없이 기능을 즉각적으로 이해할 수 있도록 컴팩트하게 설계했습니다. 비주얼 정돈과 더불어, 기존의 무거운 비트맵 리소스를 경량화된 벡터 리소스로 전면 교체하는 작업을 주도했습니다.
이 작업은 프로덕트의 체질을 바꾸는 거대한 터닝 포인트가 되었습니다. 불필요하게 낭비되던 이미지 레거시를 완벽히 제거함으로써 앱 전체의 용량을 획기적으로 줄였고, 유저들이 고질적으로 겪던 앱 로딩 속도와 구동 성능 문제를 해결했습니다. 또한, 해상도에 구애받지 않는 고품질의 벡터 에셋을 확보한 덕분에 2018년 OS 시스템 수준의 '다크 테마' 환경까지 유연하게 확장하여 대응할 수 있는 강력한 기술적 기반을 마련했습니다. 파편화된 비주얼을 시스템화하고 기술적 제약을 디자인으로 돌파하며, 프로덕트와 디자이너로서의 역량이 본격적으로 동반 성장함을 체감한 프로젝트입니다.
2018년 OS 시스템 수준에서 대대적으로 도입된 다크 테마 트렌드를 단순한 기술적 업데이트가 아닌, 지니뮤직의 사용자 경험을 한 단계 진화시킬 수 있는 최고의 기회로 삼아 개발팀과 협업했습니다. 앞서 주도했던 전면 벡터 리소스 도입 성과에 이어, 해상도 대응이나 리소스 별도 제작이 필요 없이 컬러테마 스펙에 유연하게 대응할 수 있었습니다.
컬러 테마 구현을 위해 개발팀과의 긴밀한 협업에 집중했습니다. 단순히 디자인 시안을 전달하는 방식에서 벗어나, 라이트와 다크 환경 모두에서 최적의 가독성과 심미성을 유지할 수 있도록 OS별 테마 컬러 팔레트를 정밀하게 정의하고 구조화했습니다. 개발팀과 실시간으로 스펙을 싱크하고 컴포넌트 단위의 컬러 대응 매커니즘을 함께 고민한 끝에, 이질감 없이 완벽하게 구동되는 다크 모드 인터페이스를 성공적으로 구현할 수 있었습니다. 진취적인 시도와 직군 간의 단단한 신뢰가 시너지를 발휘하여, 유저들에게 편리한 감상 환경을 제공한 프로젝트입니다.
My Role : Vector Image Resources 도입 제안 및 리소스 제작 리딩. Android, iOS 테마별 컬러 팔레트 정의
마이크로 인터랙션 도입
유저들이 음악을 감상하고 탐색하는 여정 곳곳에 생동감을 불어넣고, 서비스와의 정서적 상호작용을 한층 더 강화하기 위해 마이크로 인터랙션 구축을 주도했습니다. 정적인 인터페이스에 갇혀있던 핵심 유저 액션인 '좋아요', '잠금해제', '즐겨찾기', '음악 검색' 에 따라 즉각적이고 매력적인 동적 피드백을 제공하는 스펙을 설계했습니다.
이를 구현하기 위해 고용량 리소스 부담이 적으면서도 정교한 표현이 가능한 로띠(Lottie Animation) 기술을 프로덕트에 본격적으로 도입했습니다. 단순히 화려한 모션을 보여주는 것에 그치지 않고, 유저가 기능에 몰입하고 적극적으로 참여할 수 있도록 자연스러운 연출과 타이밍을 설계하는 데 집중했습니다.
특히 리소스 제작 리드로서 모션 그래픽을 직접 고도화하는 것은 물론, 구현 단계에서 개발팀과 긴밀하게 소통하며 애니메이션의 트리거 시점과 구동 성능을 싱크했습니다. 이 과정을 통해 앱의 퍼포먼스를 저하시키지 않으면서도 완벽하게 구동되는 마이크로 인터랙션을 완성했습니다. 디테일한 시각적 반응 하나가 유저의 조작 재미를 극대화하고, 서비스에 대한 긍정적인 만족도로 이어지는 성과를 얻은 프로젝트입니다.
- My Role : Lottie Animation 리소스 도입, 개발자 협업을 통해 마이크로인터랙션 구현
성과 및 회고
정기적인 유저 조사와 VOC 등의 정성 피드백은 물론, VOC 인입량 추이와 기능별 사용성 피드백 등 스스로 찾아낼 수 있는 모든 정성, 정량적 데이터를 적극적으로 수집하고 분석하며 지니뮤직의 전방위적인 사용성을 고도화했습니다. 라이브러리 표준화로 누적된 레거시를 정리하며 제품의 체질을 개선했고, 벡터 리소스와 마이크로 인터랙션, OS 컬러 테마를 주도적으로 도입하여 앱 최적화와 트렌디한 경험을 동시에 달성했습니다.
지니뮤직에서의 경험은 멀티 플랫폼을 아우르는 디자인 시스템의 생산성을 깊이 체감한 전환점인 동시에, 데이터 기반 UX의 중요성을 몸소 깨달은 계기였습니다. 인프라의 제약 속에서도 데이터를 활용해 사용자 경험을 논리적으로 개선해 본 이 값진 경험은, 이후 프로젝트에서 단순한 직관을 넘어 비즈니스 지표와 숫자로 디자인의 가치를 증명해 내는 데이터 기반의 단단한 UX 디자이너로 도약하는 모멘텀이 되었습니다.