멜론 Admin 2.0 개편 프로젝트
체계적인 디자인 시스템 가이드 UI Kit 제작 이야기
멜론의 기존의 노후화된 어드민 페이지에서 이번에 새롭게 제작한 체계적인
디자인 시스템 가이드인 UI Kit 제작기를
소개드리고자 합니다.
제작 목적
멜론 서비스 디자인을 하면서 백엔드의 운영이 어떻게 이루어지고 있으며 어떤 시스템으로 등록되고 있는지는 정확하게는 알지는 못했습니다.
이번에 멜론 어드민 2.0 리뉴얼 킥오프 회의에서 그동안 운영되고 있던 멜론 어드민 사이트에서 많은 개선 사항들이 보였습니다. 기획에서 멜론 서비스를 운영하면서 많은 고충이 있을 거라는 생각이 들었습니다.
멜론 서비스의 수많은 메뉴들이 명확한 규칙과 가이드라인 없이 유지, 운영이 되고 있었습니다. 디자인적으로나 기능적으로나 전체적인 개선이 필요한 프로젝트였습니다.
우선, 현재 OSV어드민의 파편화되어있는 다양한 컴포넌트를 일원화하여 운영자에게 일관된 경험을 주기 위한 시스템인 UI Kit 작업이 필요해 보였습니다. 어드민 설계 시 정제화 된 컴포넌트로 조합을 통해 기획 및 개발 시 업무 효율성에 기여하기 위함입니다.
백엔드는 프런트엔드 뒤의 수없이 많은 시스템이 구성돼 있습니다. 그만큼 체계적이고 통일성 있는 시스템 디자인이 매우 중요합니다. 이를 바탕으로 UI Kit 제작이 매우 중요한 프로젝트입니다.
UI Kit 제공으로 사용하기 편리한 UX를 적용함과 동시에 향후 유지, 관리하는 데에 효율성을
높이고자 제작하였습니다.
명확한 분류체계를 바탕으로
체계적인 UI 가이드와 컴포넌트를 제시한 UI Kit
관리자성 기능에 부합하는 다양한 UI/UX를 제시하고 일관성 있고 통일성 있는 UI와 컴포넌트를 제시하였습니다. 기획, 디자인, 퍼블리싱, 개발 작업 시 유용하게 컴포넌트를 표준화하고 모듈화 하였습니다.
UI 요소 분류 및 용어를 정리하여 리소스 라이브러리를 정리하였고, UI 소스들을 명확한 분류체계로 디자인 작업 시 요소들을 빠르게 적용시켜 작업할 수 있도록 가이드화 시켰습니다.
우선 General • Layout • UI elements • Table • Form 5가지 분류로 구분하였습니다.
General :
가장 기본이 되는 단위로 뉴 어드민 디자인을 정의합니다.
Layout :
레이아웃 구조와 해상도 대응에 대한 설명 및 GNB영역에서는 메뉴 편집 기능, LNB의 메뉴 구조, 그리고 페이지 전체에서 사용하는 Top버튼에 대한 정의입니다. 콘텐츠 영역은 어드민에서 사용하는 타입을
크게 2 타입으로 분류하여 챕터별로 분류되어있습니다.
UI elements :
재사용이 가능한 단위의 컴포넌트의 조합입니다.
Table :
Content Layout의 조회형 타입에 쓰이는 테이블 형태로 멜론 5.0 신규 어드민에 적용되는 테이블을 기본으로 제작되어있습니다.
Form :
Content Layout의 입력형 타입에서 사용하는 형태로 어드민에서 노출할 콘텐츠를 등록 시에 주요 쓰이는 컴포넌트들로 구성되어 있습니다.
UI Kit을 바탕으로
체계적이고 통일성 있는 시스템 화면 디자인 제시
UI Kit을 바탕으로 사용하기 편리한 UX를 적용함과 동시에 체계적이고 통일성 있는 시스템 화면 디자인을 제시하였습니다.
탄탄한 UI Kit 작업으로 밀도 있고 디테일하게 어드민 프로젝트 구축을 할 수 있었습니다.
마치며...
01.
UI Kit을 이용하여, 화면 설계를 최소화하여, 더 빠르고 효율적으로 어드민 시스템 구축을 할 수 있을 것이라 생각합니다.
02.
디자이너들에게는 UI Kit 가이드와 컴포넌트를 조합하여 체계적이고 빠르고 밀도 있는 작업을 할 수 있도록 디자인 접근성을 향상할 수 있습니다.
03.
디자인 외에 기획, 개발에도 표준화하고 모듈화 한 소스들을 활용하여 어드민 운영시 빠르고 효율적으로 운영할 수 있습니다.
04.
기획과 개발에 커뮤니케이션 도구로 잘 활용될 수 있습니다.
지금까지 멜론 Admin 2.0 개편 프로젝트에 대한 디자인 작업 스토리를 소개해드렸는데요,
이번에 개편된 어드민 구축을 통해 이전보다 더 효율적이고 편리하게 멜론 서비스를 여러분께 제공해 드릴수 있을 거라 생각합니다.
앞으로도 많은 관심 부탁드립니다.
감사합니다 :-)
