UI Kit 만들기가 그렇게 어렵나요?
티몬의 UI Kit [MONSTER UI BOX] 제작기
네, 어렵습니다
UI Kit 넘나 많은것...@구글구글링만 해도 발에 치이듯 나오는 게 UI Kit인데 티몬에서 UI Kit를 만들었다는 소식이 과연 그렇게 대단한 일이고 어려운 일일까요? 적어도 아래 두 가지 맥락에서는 분명 그렇습니다.
# 크리에이티브에 더욱 집중
우리 디자이너들에게는 '크리에이티브'라는 무기가 있습니다. MONSTER UI BOX는 그 무기를 더욱 날카롭게 하고 치명적으로 사용할 수 있게 해줍니다.
# 명확한 규칙과 가이드라인 제시
Tool은 계속 진화하는데 예전의 방식을 유지하다 보니 디자인 작업 시 생기는 비효율과 리소스 관리의 미흡함이 발생했습니다. 또한, 규칙과 가이드라인이 부족하다 보니 디자이너가 사소한 고민에 소비하는 시간이 많아졌습니다. MONSTER UI KIT는 이 부분을 해결했습니다.
문제 정의와 목표.
1. UI 디자인 작업 시 필요한 리소스를 찾는 시간이 길며 그 관리가 비효율적이다.
2. 디자인 콘텐츠 대비 PSD 파일의 용량이 계속 커지다 보니 작업 환경이 쾌적하지 않다.
3. 명확한 규칙과 가이드라인이 미흡하여 사소한 고민에 쏟는 시간이 많아졌다.
그래서 최종 파일은 어디에...Tool은 계속 발전하는데 이전의 방식을 유지하다 보니 위와 같은 비효율이 존재했습니다. 이러한 부분을 개선하고 더욱 효과적으로 일하고 '크리에이티브'에 더욱 집중하고 싶었습니다.
디자이너가 크리에이티브에 더 많은 시간과 노력을 할애할 수 있도록!
MONSTER UI BOX.
프로젝트 전체 프로세스1. Research
티몬 APP 화면 수집먼저 내/외부 리서치를 진행했습니다. 현재 어떤 UI Kit들이 사용되고 있고 얼마나 많은 디자이너들이 이를 사용하고 있는지, 각각의 장점과 단점은 무엇인지를 파악했습니다. 그리고 현재 우리 TMON에는 어떤 UI Kit가 필요한지 파악하기 위해 다양한 내부 리서치를 진행했습니다.
첫 번째로 TMON앱의 모든 화면을 수집했습니다. 2011년부터 존재했던 TMON APP이기 때문에 그동안 방치되고 노후된 UI 화면이 많았습니다. Android와 iOS의 모든 화면들을 모아보니, 기준이 있음에도 지켜지지 않은 화면, 기준 없이 방치된 화면 등 최근의 UI 개편에 어울리지 않는 화면들이 곳곳에 숨어있었습니다.
두 번째로 실시한 사용자 여정 지도 제작은 MONSTER UI KIT를 사용하게 될 사용자 즉 UX 디자이너가 어떤 시나리오에 따라 디자인을 하는지 파악하고, 각각의 상황과 니즈를 파악하기 위해 진행했습니다. 아래와 같이 각 상황별로 느끼는 만족도를 파악할 수 있었고 표시된 부분을 개선해 나가는 것으로 초점을 맞추었습니다.
UI 디자이너의 프로젝트 단계별 만족도2. Prototype
리서치를 통해서 확인했듯이, 디자이너가 작업 시 느끼는 가장 큰 어려움은 바로 디자인 리소스 관리의 문제에서 기인했습니다. 크리에이티브센터에서는 PSD 원본 및 가이드 등의 파일을 공용 사내 서버에 업로드하고 있는데, 2012년부터 쌓인 파일들이 수 백개는 됩니다. 예를 들어, 내가 기존 화면 수정 작업을 맡았거나, 특정 아이콘의 원본을 수정 작업할 일이 있다고 상상해보세요. 공용 서버 어디에 어떤 파일이 있는지 빠삭하게 아는 디자이너가 아니라면 대개 해당 파일을 찾느라 시간을 낭비하게 됩니다.
따라서 어떤 화면을 디자인하더라도, UI키트 파일만 열어보면 필요한 소스들을 가져와 사용할 수 있도록 디자인 소스들을 모으기 시작했습니다.
이때 중요한 것은, 이 소스들을 '어떤 분류체계로 정리할지'였습니다.
단순히 모든 소스들을 마구잡이로 모아놓은 UI Kit는 의미가 없습니다. 핵심적인 UI 소스들을 명확한 분류체계로 정리해놓아야, UI Kit를 사용하는 디자이너 입장에서도 내가 원하는 소스가 어느 그룹에 있는지 찾기 쉬우며, 추후에도 분류체계에 맞춰 새로운 소스를 지속적으로 업데이트할 수 있는 환경이 갖추어지기 때문입니다.
1. 아이콘, 폰트 스타일 및 색상 등 스타일
2. 티켓몬스터 UI의 주 재료가 될 UI COMPONENTS
첫 번 째 베타 버전의 UI Kit는 이렇게 분류되었습니다.
이 중 UI Components를 다시 세분화하는 작업이 꽤나 어려웠는데요, UI 요소를 분류하는 명확한 기준을 정의 내리기가 어려웠고, 다른 UI Kit의 분류 체계를 벤치마킹하기엔 해당 분류체계가 우리 서비스만의 특성을 반영하지 못한 경우가 많았기 때문입니다.
UI키트 프로토타입 버전에는 명확히 분류하기 힘들어 'ETC'라는 이름으로 묶어버린 소스들도 있었습니다. Components는 차후 최종 버전에서 다시 한 번 재분류됩니다. 
이렇게 Components가 담긴 PSD 파일과, 스타일이 담긴 포토샵 라이브러리 파일을 묶어 UI KIT 프로토타입으로 크리에이티브 센터 내 디자이너 네 명을 대상으로 배포했습니다.
3. Usability Test
프로토타입을 받은 네 명의 디자이너 분들은 입사한 지 4개월 차 신입 디자이너 두 명과 경력 2년 이상의 디자이너 두 명으로 이루어졌습니다. 신입사원과 경력사원으로 나누어 테스트를 진행한 이유는, 티몬 UI와 가이드, 파일 위치 등에 대한 이해도가 낮은 디자이너와 높은 디자이너가 이 UI키트의 사용성에 대해 느끼는 사항이 다를 것이라고 생각했기 때문입니다. 1주의 시간 동안 작업에 UI Kit를 활용하도록 했습니다. 그리고 1주가 지난 시점에 UI키트 만족도와 개선사항에 대한 설문조사와 인터뷰를 실시했습니다.
그 결과, UI키트의 유용성에 대해 높은 평가를 받은 반면 Kit의 사용성 부분에서 몇몇 부분 아쉬움을 표현하셨습니다.
1. UI Components의 분류체계가 실제 작업 시 연상하는 UI 요소 네이밍과 완벽히 일치하지는 않다는 점,
2. 티켓몬스터 기존의 화면을 수정하는 작업이 많은데, 화면 단위의 원본 파일이 없다는 점
이 두 가지 의견을 보완해, MONSTER UI BOX를 제작했습니다.
4. MONSTER UI BOX
드디어 MONSTER BOX 등장
MONSTER UI BOX의 구성품들은 PSD 파일과 Adobe Cloud Library를 통해 제공됩니다. PSD 파일에서 필요한 소스를 원하는 대로 수정하고 가져올 수 있으며, Adobe Cloud Library에서는 클릭 한 번을 통해 지정된 폰트 타입, 색상 등을 적용하고 아이콘 리소스 등을 쉽게 가져올 수 있습니다.
UI Components · Project Templates · Resource Library 이렇게 3가지 구성품을 하나씩 살펴보도록 하겠습니다.
# UI Components
UI Components가장 먼저 UI Components는 UI를 구성하는 수많은 요소들 중 서비스 내 표준 UI가 될 요소를 말합니다. PSD 파일 형식으로 제공하며, Android 버전과 iOS 버전으로 각각 제공합니다.
UI ComponentsUI Components를 아래 정의에 따라
Form · List · Bar · Modal · Page Controls · Floating Button으로 분류합니다.
Form :기본 컨트롤 요소, 정보를 받아서 보여주고 보내는 역할 수행
List : 동일한 정보 구조로 구성된, 수직으로 반복 나열되는 복합 요소
Bar : 특정 목적을 위해 수평으로 구성된 복합 요소
Modal : 페이지 기본 depth 보다 상위 depth에 보이는 복합 요소
Page Controls : 현재 페이지의 위치와 수량을 사용자에게 알려주는 요소
Floating Button : 페이지 내에서 쉬운 접근과 사용을 위해 상위 depth에 위치하는 복합 요소
UI Components GuidelinePSD 파일 내에 UI Components Guide를 함께 제공합니다. 각 요소들을 각자의 작업환경에 맞게 사용할 때 수정할 수 있는 부분에 대한 가이드를 제공합니다. 버튼을 예로 들면, 버튼 위 텍스트의 글자 수 제한, 버튼 크기를 변형할 때의 규칙 등을 확인할 수 있습니다.
# Project Templates
Project Templates티몬의 각 프로젝트별 최종 UI 화면을 하나의 PSD 파일로 모아 Project Templates으로 제공합니다. PSD 파일 형식으로 제공하며, Mobile Web 개발을 커버하는 Android 버전과 iOS 버전으로 각각 제공합니다. UI 요소를 개별적으로 확인하는 UI Components와 달리 프로젝트 단위별 UI 화면으로 확인할 수 있기 때문에, 전체 UI의 느낌과 Components활용 케이스도 쉽게 파악할 수 있습니다. 하나의 프로젝트는 하나의 PSD 파일로 제공하는 것을 원칙으로 하여 파일 내에 여러 아트보드를 활용하여 다양한 화면을 제공합니다.
# Resource Library
Resource LibraryUI Components 외에도 UI를 구성하는 기본 중 빼놓을 수 없는 것이 있습니다. 바로 폰트와 색상, 그리고 아이콘입니다. TMON의 스타일과 UI를 완성하는 이 요소들을 Adobe Cloud Library로 제공합니다. 스타일 요소의 특성상, 별도의 PSD 파일을 열어 레이어를 가져오는 방식이 아니라, Photoshop 인터페이스 상에서 라이브러리 창을 열어 작업 중인 화면에 즉각적으로 적용할 수 있는 포맷을 선택했습니다. 아이콘의 경우 라이브러리에서 각 아이콘을 개별적으로 찾을 수 있을 뿐 아니라, Android 버전과 iOS 버전의 아이콘 PSD에서 모든 아이콘을 한눈에 확인하고 가져다 쓰는 것 또한 가능합니다. 여러 개의 계정에 연결된 Adobe Cloud Library의 동기화를 통해, 가장 최신의 리소스를 빠르게 확인하고 작업에 적용할 수 있습니다.
# Manual
MONSTER UI BOX 사용 매뉴얼MONSTER UI BOX 배포에 앞서 사용 매뉴얼을 제작하여 함께 배포하였습니다. UI BOX의 구성품은 어떤 것들이 있고 무엇을 기준으로 제작되었으며 어떻게 사용해야 더 효과적인지에 대한 사용 팁과 여러 내용을 포함하고 있습니다.
효과.
1. 누구나 TMON UI 디자인에 빠르게 적응할 수 있다.
2. UI 가이드라인과 디자인 리소스를 찾는 시간이 단축되었고 접근성이 향상되었다.
3. 일관성 있는 전체 UI 화면을 통해 훌륭한 사용자 경험을 제공할 수 있다.
4. '크리에이티브'에 더욱 집중할 수 있다.
MONSTER UI BOX를 사용하게 되는 디자이너는 TMON의 다양한 화면을 한눈에 확인하여 TMON 서비스를 한눈에 훑어볼 수 있습니다. 또한, 세부적인 UI 요소들과 그 가이드라인에 맞게 직접 테스트해 보면서 TMON UI에 대한 이해도도 높일 수 있으며, 기존 내부 서버에 흩어져있던 UI 리소스를 한 군데에서 관리하다 보니 서비스 유지 보수 및 신규 디자인 작업 시 리소스를 찾아 헤매는 시간을 크게 아낄 수 있게 되었습니다.
마치며.
최고의 UI Kit라고 하기에는 좀 쑥스럽습니다. 좀 더 멋있게 만들었으면, 구조적으로 더 탄탄했으면, 개발까지 이어지는 전천후 Kit 였으면 하는 아쉬움이 있습니다. 하지만 이번만큼은 시도만으로 그치지 않았고 실제로 업무에 효과적인 UI Kit를 만들었다는 생각에는 변함이 없습니다. 그리고 다시 한번 질문을 던져봅니다.
UI Kit 만들기가 그렇게 어렵나요?
아니요, 사용자인 디자이너의 입장에서 시작하면 결코 어렵지 않습니다.
