트렌디한 플레이리스트 공작소
멜론 DJ센터
멜론 DJ센터
멜론의 핵심 서비스 중 하나인 멜론 DJ를 위한 관리 운영 시스템인
멜론 DJ센터를 소개합니다.
멜론 DJ센터는 멜론 DJ를 위한 곡, 플레이리스트 및 관련 통계자료 등을 관리하는 통합 서비스 관리 툴입니다. 또한 멜론의 전문 운영자만을 위한 시스템뿐만 아니라 멜론 DJ 및 일반 유저들 또한 쉽고 편리하게 이용할 수 있는 시스템으로 제작되었습니다.
멜론 DJ 서비스는 구 멜론 어드민센터(MelOn Admin 1.0)에서 통합관리 운영되고 있었습니다.
구 멜론 어드민센터는 멜론 운영자를 중심으로 구축 설계된 시스템으로 멜론 DJ나 일반 유저들이 접속하여 사용하기에는 많은 장애요소들이 있었으며 멜론 DJ 서비스를 위한 독립적이고 특화된 운영시스템과, 신규 서비스인 브랜드 DJ 서비스의 운영관리 시스템 추가까지 필요한 상황이었습니다.
위와 같은 상황을 개선, 확장하고 서비스의 목표를 이루기 위해서는 먼저 현재 시스템의 구조를 플랙서블 한 구조로 변경이 불가피하였으며 이를 위한 디자인 시스템 구축이 선행되어야 했습니다.
그리고 서비스 기획, 개발, 디자인 3개의 각 파트에서 매번 시스템을 업데이트하거나 또는 새로운 시스템을 구축하기 위해 수많은 인력과 시간을 소모하는 지난한 과정을 반복하지 않고 시장의 트렌드에 즉각적으로 반응하거나 또는 트렌드를 선 제안할 수 있는 유연한 구조의 살아 움직이는 유기적인 시스템을 구축하고자 하였습니다.
또한 원활한 시스템 사용을 위한 멜론 통합 어드민 관리 시스템에서 분리된 독립적인 로그인 시스템과, 서비스의 컨트롤타워 역할을 할 수 있는 데이터 운영관리와 통계 페이지와 파트너 DJ, 파워 DJ, 일반 유저들 모두 필수 불가결하였으며, 그래서 바로 멜론 DJ센터만을 위한 누구나 편리하게 이용할 수 있도록 범용적인 디자인 시스템 구축이 핵심이었으며 공동의 지식 자산을 쌓아가며 규모를 확장할 수 있어야 했습니다.
앞서 소개드렸던 멜론 Admin 2.0 개편 프로젝트를 통한 디자인 시스템 가이드 UIKit를 소개해 드렸는데요
오늘은 이를 활용한 멜론 DJ센터 제작과 이와 관련된 디자인 시스템 및 UIKit 구축에 관해 자세한 이야기를 들려 드리겠습니다.
로그인 그래픽 비주얼 테스트멜론 DJ 디자인 시스템 구축 목적
1. UI를 표준화하고 화면 간 일관성을 확보한다.
2. 주요 화면에서 사용되는 공통 UI 패턴과 주요 컴포넌트를 추출해 정의하고 상세 속성을 규정한다.
3. 기획자, 디자이너, 개발자가 정해진 기준에 따라 UI를 설계할 수 있다.
4. 멜론DJ 서비스의 공동의 지식 자산을 쌓아가며 규모를 확장할 수 있다.
5. 일관된 멜론 브랜드의 정체성을 유지하고 높은 사용성을 유지한다.
6. 여러 팀 간에 협업을 위한 커뮤니케이션의 기준을 마련한다.
디자인 시스템
1. 멜론 DJ센터의 중요한 요소들을 UI 패턴으로 정리하고 컴포넌트 단위로 재정리
컴포넌트 기반의 디자인은 기존 페이지 기반보다 빠르고 다양하게 스크린을 디자인할 수 있으며 업데이트와 유지 보수를 손쉽게 할 수 있습니다.
2. 서비스 성장 및 진화에 따라 같이 진화할 수 있는 디자인 시스템 구축
Color System
Typo System
Icon
3. 유저의 다양한 화면 해상도에 대응할 수 있는 플렉시블 한 레이아웃 시스템
4. 자신의 정보와 전체 메뉴 구조를 한눈에 인지할 수 있는 내비게이션 시스템
GNB System
Lnb System
사용자의 해상도나 좀 더 많은 콘텐츠를 보기 위해 본문 영역을 확대하기 위해 기본 모드와 미니모드로 구조설계를 하였으며 그에 따른 세밀한 시스템 구축과 가이드가 진행되었습니다.
LNB 기본 모드와 미니모드5. 주요 컴포넌트
Tab Guide
Table Guide
Form Guide
Title Guide디자인 시스템으로 멜론DJ 제작하기
위에서 소개해 드린 디자인 시스템을 기반으로 멜론DJ 시스템 제작을 진행하였으며 조그마한 아이콘 하나까지 세밀한 디자인 설계를 통해 조금 더 효율적이고 보다 편리한 플레이리스트 등록과 관리 및 통계 데이터를 제공할 수 있도록 하였습니다.
이제 몇몇 주요 화면을 통해 디자인 시스템으로 주요 페이지들이 어떤 모습으로 디자인되었으며, 어떤 페이지들로 플레이리스트가 만들어지며 관리되는지 소개해 드리도록 하겠습니다.
1. 로그인
2. 플레이리스트
3. 프로필 관리
4. 아티스트 관리
5. 배너 관리
6. 비디오 관리
1. 로그인
멜론 계정을 통한 로그인으로 시스템에 바로 접근할 수가 있으며 일반 유저 및 브랜드와 레이블을 대상으로
멜론DJ 신청을 바로 할 수 있도록 하였습니다.
다양하고 수많은 케이스의 화면 테스트
DJ 신청 안내2. 플레이리스트
플레이리스트 만들기
플레이리스트 목록3. 프로필 관리
브랜드DJ 프로필 수정4. 아티스트 관리
5. 배너 관리
6. 비디오 관리
지금까지 디자인 시스템을 활용한 멜론 DJ센터 디자인을 소개해 드렸습니다.
다시 간략하게 정리해보면 멜론 DJ센터 디자인을 위해 먼저 디자인 시스템을 구축하며 이를 통해 디자인 컴포넌트, 템플릿 등 UIKIT 활용하여 다양한 레이아웃과 데이터 기반의 페이지들을 체계적이고 효율적으로 구축해 나갈 수 있었습니다.
또한 이렇게 구축된 멜론 DJ센터는 이후 원활한 유지보수도 가능하며 팀 간의 공통된 룰과 언어로 원활한 커뮤니케이션을 통해 신속하고 효율적으로 서비스를 계속 성장시켜 날 수 있는 기반을 마련하게 되었습니다.
앞으로도 많은 관심 부탁드리며 멜론의 새로운 디자인 이야기로 다시 찾아오겠습니다.
감사합니다 :-)
