XE3 UI Style guide #3

UI Style Guide 구축하기

XE3 UI Style guide & Design principle #1 에서 UI Style Guide를 만들게 된 계기와 UI 일부(Layout, Contents의 몇가지)를 소개하였다.
1부에서는 UI설계를 Design Language System으로 봤고, 2부에서는 Dialog를 중심으로 연관된 몇가지 Component와 Module들을 살펴보았다. 3부에서는 알림과 피드백에 필수인 아주 기본적인 Element인 Toast, Badge, Tooltip을 끝으로 Style guide 포스팅을 마치려고 한다.

1부에서도 언급하였지만 보안 문제가 있어, 일부만 공개하는 부분도 있고 사실 전체를 문서처럼 작성하자니 양이 지나치게 방대해지는 부분도 있어 대략적이고 기초적인 몇가지를 소개하고 실제 서비스 UI에 대한 내용으로 넘어간다.

Toasts

토스트 팝업은 화면 하단의 메시지를 통해 작업에 대한 간단한 피드백을 제공한다.
수행 된 작업과 직접적으로 관련이있는 텍스트 한 줄을 포함하며, 주로 시스템 메시징에 사용한다. 한 작업에 하나의 창을 표시하며, 같은 기능을 수행하는 토스트 팝업이 중복되어 사용되지 않아야 한다. 토스트 팝업은 “취소” 또는 다른 단일 작업을 포함할 수 있다. (다중선택 불가)

Mobile Specs

Min-width: 360px
Max-width: 560px
2px rounded corner
Text: system font, 14px / 20px / #fff, #ffea00
Default background fill: #2c2e37 / 0.95

Tablet, Desktop Specs

Min width: 500px
Maximum width: 960px

 

Badge

배지는 제공하는 위젯, 모듈과 연동하여 사용자에게 알리는 역할을 한다.
Notification UI와 분리하여 정보를 수급하고 다시 Notification 또는 해당 모듈로 이동하도록 도와주는 UI다.
기본 3자리까지 카운팅하며 커스텀하여 제어할 수 있다.

Basic Specs

Style
min-width: 1.8em / min-height: 1.8em / padding: .4em
line-height: .8em / text-aligh: center / border-radius: 500rem;

Position
position: absolute; / font-size: 10px; / top: -0.5em;
left: 100%; / margin: 0 0 0 -1.5em

Animation
transform: translateY(-50%); / transition: opacity .2s ease-in-out .1s;

 

Tooltip

툴팁은 사용자가 요소를 가리키거나, 포커스를 설정하거나, 터치 할 때 나타나는 텍스트 레이블이다. 툴팁은 활성화 될 때 요소를 식별하는 특징이 있다. 해당 기능에 대한 간략한 help text가 포함되며, 툴팁은 입력 포커스를 제공하지 않아야 한다.

툴팁이 매우 일반적인 element이면서도 어려운 부분이 크게 두가지가 있는데, 하나는 모바일에서 어떤 액션을 취할 때 활성화할 것인지와 스크린에서 해당 element 위치에 따라 위, 아래, 좌, 우 위치를 자동으로 어떻게 조정할 것인지였다.

결론부터 얘기하자면, 모바일은 길게 탭하였을 때 활성화하도록 했고, 타이밍을 테스트를 통해 조정하였다. 툴팁의 위치는 스크립트를 사용하여 현재 element의 위치에 따라 노출 위치가 변경되도록 변수를 넣었다.

Interaction

PC의 경우 마우스오버를 기준으로, 모바일과 공통으로 항목을 길게 눌렀을때에 활성화하도록 하였다. 사용자가 element를 계속 누르고있는 한 툴팁을 계속 표시한다.

타이밍
사용자 input이 끝난 후, 1.5 초 동안 툴팁을 표시한다. 해당 시간이 끝나기 전 사용자가 다른 작업을 수행하면 툴팁은 사라진다.

모션 세부 정보
툴팁이 나타나는 모션은 감속 곡선을 사용하여 150ms 이상으로 움직이며, Acceleration Curve를 사용하여 150ms 이상에서 종료된다. (Android 기준에 의거함)

 

잡담 또는 후기

Core UI를 구성하는 뼈대인 내용이다. 안에 사실 많은 히스토리와 논의가 있었지만, 중요한 것은 그 과정에서 UI가 업그레이드 되고 확장성이 좋아지고 작업하기 편리한 새로운 메서드들을 찾아내는 것이 원활해야 한다고 느꼈다.

Front-End UI 정의가 잘 되어있는 Framework들이나 Google의 Material Design Guide 등이 많은 도움이 되었고, 그 라이브러리들을 차용해 보면서 서비스에 맞는 UI로 변경해보거나 다른 방식을 취했던 실험들이 계속 이어졌다.

누군가는 디자인 스타일 가이드가 가이드일 뿐이라고 생각할지도 모르겠다. 하지만 스타일 가이드가 얼마나 숙성되어 가는지, 얼마나 많은 고민을 통해 발전했는지를 묻지 않았다면, 그 사람은 아마도 진짜배기 UX/UI 디자이너가 아니지 않을까?