바오밥나무

멜론 Admin 2.0 개편 프로젝트

In Web Posted Jan 17, 2022
Extra Form
저작자 Melon Design
출처 https://brunch.co.kr/@design-melon/83
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

멜론의 기존의 노후화된 어드민 페이지에서 이번에 새롭게 제작한 체계적인

디자인 시스템 가이드인 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가지 분류로 구분하였습니다.

 

saved_resource(1).png

 

General :

가장 기본이 되는 단위로 뉴 어드민 디자인을 정의합니다.

saved_resource(2).png

 

saved_resource(3).png

 

Layout : 

레이아웃 구조와 해상도 대응에 대한 설명 및 GNB영역에서는 메뉴 편집 기능, LNB의 메뉴 구조, 그리고 페이지 전체에서 사용하는 Top버튼에 대한 정의입니다. 콘텐츠 영역은 어드민에서 사용하는 타입을 

 

크게 2 타입으로 분류하여 챕터별로 분류되어있습니다.

saved_resource(4).png

 

saved_resource(5).png

 

saved_resource(6).png

 

UI elements : 

재사용이 가능한 단위의 컴포넌트의 조합입니다.

saved_resource(7).png

 

saved_resource(8).png

 

saved_resource(9).png

 

Table : 

Content Layout의 조회형 타입에 쓰이는 테이블 형태로 멜론 5.0 신규 어드민에 적용되는 테이블을 기본으로 제작되어있습니다.

saved_resource(10).png

 

saved_resource(11).png

 

Form : 

Content Layout의 입력형 타입에서 사용하는 형태로 어드민에서 노출할 콘텐츠를 등록 시에 주요 쓰이는 컴포넌트들로 구성되어 있습니다.

saved_resource(12).png

 

saved_resource(13).png

 

UI Kit을 바탕으로 
체계적이고 통일성 있는 시스템 화면 디자인 제시

UI Kit을 바탕으로 사용하기 편리한 UX를 적용함과 동시에 체계적이고 통일성 있는 시스템 화면 디자인을 제시하였습니다.

 

탄탄한 UI Kit 작업으로 밀도 있고 디테일하게 어드민 프로젝트 구축을 할 수 있었습니다.

 

saved_resource(14).png

 

마치며...

01. 

UI Kit을 이용하여, 화면 설계를 최소화하여, 더 빠르고 효율적으로 어드민 시스템 구축을 할 수 있을 것이라 생각합니다.

 

02. 

디자이너들에게는 UI Kit 가이드와 컴포넌트를 조합하여 체계적이고 빠르고 밀도 있는 작업을 할 수 있도록 디자인 접근성을 향상할 수 있습니다.

 

03. 

디자인 외에 기획, 개발에도 표준화하고 모듈화 한 소스들을 활용하여 어드민 운영시 빠르고 효율적으로 운영할 수 있습니다.

 

04. 

기획과 개발에 커뮤니케이션 도구로 잘 활용될 수 있습니다.

 

지금까지 멜론 Admin 2.0 개편 프로젝트에 대한 디자인 작업 스토리를 소개해드렸는데요, 

 

이번에 개편된 어드민 구축을 통해 이전보다 더 효율적이고 편리하게 멜론 서비스를 여러분께 제공해 드릴수 있을 거라 생각합니다.

 

앞으로도 많은 관심 부탁드립니다.  

감사합니다 :-)


  1. 멜론 Admin 2.0 개편 프로젝트

    #Web 읽기
    Read More
  2. 비즈니스 프로세스를 그리자. — BPMN 2.0

    #Web 읽기
    Read More
  3. Myth #9: 디자인은 독창적이어야 한다

    #UI/UX 읽기
    Read More
  4. Myth #8: 스톡 사진은 사용자 경험을 향상시킨다

    #UI/UX 읽기
    Read More
  5. Myth #7: 그래픽은 페이지 요소를 더 잘 보이게 만든다

    #UI/UX 읽기
    Read More
  6. Service Blueprints: Definition

    #UI/UX 읽기
    Read More
  7. Myth #6: 접근성 좋은 사이트는 추하다

    #UI/UX 읽기
    Read More
  8. Myth #5 : 접근성은 비싸고 어렵다

    #UI/UX 읽기
    Read More
  9. Myth #4: 디자인은 제품을 보기 좋게 만드는 것이다

    #UI/UX 읽기
    Read More
  10. Myth #3: 사람들은 스크롤하지 않는다?

    #UI/UX 읽기
    Read More
  11. Myth #2 모든 페이지는 3회 이내의 클릭으로 사용 가능해야 한다

    #UI/UX 읽기
    Read More
  12. Myth #1 사람들은 웹을 읽는다

    #UI/UX 읽기
    Read More
  13. REST API

    #Web 읽기
    Read More
  14. [번역] 반응형 웹 디자인의 단점

    #Web 읽기
    Read More
  15. 공인 IP, 사설 IP, 고정 IP, 유동 IP

    #Web 읽기
    Read More
  16. Billable Hour 직업의 함정

    #Web 읽기
    Read More
  17. 다국어사이트의 URL주소는 서브 도메인? 아니면 하위 디렉토리?

    #Web 읽기
    Read More
  18. [번역] 빵조각 메뉴: 무엇, 언제, 어떻게

    #UI/UX 읽기
    Read More
  19. [번역] 고통없는 계정 UX에 대한 3가지 법칙 : 로그인

    #UI/UX 읽기
    Read More
  20. [번역] 이 이메일에 회신하지 마시오

    #UI/UX 읽기
    Read More
목록
Board Pagination Prev 1 2 3 4 5 Next
/ 5