XE3 UI Style guide #2

UI Style Guide 구축하기

XE3 UI Style guide & Design principle #1 에서 UI Style Guide를 만들게 된 계기와 UI 일부(Layout, Contents의 몇가지)를 소개하였다.
1부에서는 UI설계를 Design Language System으로 봤다면, 2부와 3부에서는 어쩌면 아주 뻔하지만 너무나 필요한 UI요소들에 대한 고민이 어떠한지 보여주는 것이 좋겠다 생각하여, 본 글에서는 Component나 Element 항목에 해당하는 Dialog와 연관된 Form, Button 등을 몇가지를 소개한다.

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

Dialog

Dialog는 사용자에게 특정 작업을 알리고 중요한 정보를 노출하여, 결정을 요구하거나 또는 여러가지 기타 작업을 포함할 수 있다.
기본적인 UI는 유지하되, 다양한 커스텀 기능을 활용하여 Confirmation, Alerts, Simple Menu 등으로 사용할 수 있도록 설계하였다.

일반적으로 팝업, 모달, 시스템메시지 등 다양하게 불리는데 이는 해당 Dialog가 수행하는 역할에 따라 달라지고 시스템에서 Validator를 거치는 것인지 혹은 일반적인 메시지를 보여주기 위함인지에 따라 다르게 명명한다. 이에 대한 자세한 내용은 블로그에 별도로 글을 포스팅하도록 하겠다.

Basic Spec

Dialog는 기본적으로 컨텐츠, 액션 그리고 선택 가능한 제목을 포함한다.

Optional Title

제목은 선택의 유형을 간략하게 설명하는 역할을 수행한다. 경우에 따라 질문이 될 수도 있고, 서비스 부가적인 제목이 될 수도 있다.
항상 Dialog의 전반적인 내용을 수반해야하고 꼭 필요할 때만 사용하는 것을 권장한다. 예를 들어, 제목은 Dialog가 수행하는 역할과 관련된 부분을 설명하거나, 사용자 의사결정에 필요한 주요 정보를 식별할 수 있도록 돕는 역할을 하게된다.

Content

대화 내용은 일반적으로 텍스트와 Action을 수행하는 컨트롤 요소(Button, Selectbox 등)으로 구성된다. 주로 특정 작업에 포커스하여 구성되는데 예를 들어, 항목을 삭제할 때 확인(Confirmation)하게 하거나, 설정 등에서 선택(Selection)을 하도록 할 때를 들 수 있다.

Title, Content, Action. 3가지로 크게 구분된다.

Header: 제목과 닫기 버튼을 포함한다.
Footer: 액션을 수행하는 버튼을 포함한다.
Body: 일반적인 본문이나 스크롤을 동반하는 내용이 들어간다.

Content guidelines

Padding around content area: 24px
Padding betwwen title and body text: 24px
Padding around buttons: 8px
Button height: 36px (basic)
Dialog elevation: 24px

Button width and padding

Button height: 26dp, Menimum button width: 64dp
Internal button padding: 8dp, Padding between buttons: 8dp

Action

Dialog는 사용자 액션의 범위를 제한하고 집중할 수 있도록하며, 일반적으로는 긍정과 부정에 대한 액션을 수행한다.

  • Affirmative actions are placed on the right side and continue the process. Affirmative actions may be destructive, like “Delete” or “Remove.”
  • Dismissive actions are placed directly to the left of affirmative actions and return the user to the originating screen or step in the process.
  • Dismissive and affirmative action text can be “Cancel”/”OK” or specific active verbs or verb phrases that indicate the outcome of the decision.

Size

Modal size is on (56*X)
Mini size modal: 280px (5X)
Small size modal: 392px (7X)
Default size modal: 560px (10X)
Large size modal: 840px (15X)
Full size modal: 96% width of the window.
Full screen modal: contents area 560px

Programmatic Dialog Boxes

서비스의 기능을 수행하기 위해 사용자플로우상에 설계된 Dialog도 있지만 시스템에서 Validator를 통해 설정된 기본 모달도 있다. 일반적으로 한국에서는 ‘시스템 메시지’라고 부르는데 Alert, Confirmation, Prompt 로 나뉜다.

Alerts dialog

UI에서 Title 영역을 잠재적인 연결 손실이나 리스크가 높은 경우에만 사용하도록 정의한다. 또한 사용자는 Title과 Action 버튼 텍스트만으로 선택 사항을 이해할 수 있어야 한다.

제목이 필요한 경우:
“USB 저장 내용 비우겠습니까?”와 같이 Content 영역 설명에 기반한 명확한 질문이나 문구를 사용한다. “경고!” 또는 “괜찮습니까?” 와 같이 맥락을 이해할 수 없거나 양해를 구하는 질문은 피해야한다.

Prompt dialog

내용 자체가 중요한 경우에 사용:
Dialog 내용이 다른 UI 요소에 의해 가려지거나 일부만 표시되어서는 안된다.
필요한 조치(닫거나 선택하는 Action)가 취해질 때까지 항상 화면상에서 포커스 되도록 해야한다.

피해야하는 UI:
Dialog 내에서 Dialog를 열기
스크롤링 콘텐츠를 포함

Discard:
사용자가 변경한 경우 삭제 작업을 확인하라는 메시지를 표시해야한다.

Variations

Form Components

Modal with default vertical form layout and responsive grid. Forms must be placed outside of .modal-body container to prevent extra horizontal padding.

List components

Content padding for a dialog in a scrolled state.

Optional modal

colors You can use theses for Alerts or others

 

잡담 또는 후기

Dialog를 중심으로 몇가지 UI 요소들과 모듈을 살펴보았다. 흔히 생각하는 ‘팝업’으로만 생각했다면 오산이다. 많은 서비스들이 플로우에서 Dialog를 차용하며, 경우에 따라 고정헤더를 가지는 서브 페이지와 같은 역할을 수행할 때도 있다.

작업을 하면서 닫기 버튼이 과연 모바일에서도 우측에 두는 것이 맞을지, 경우에 따라 닫기 버튼 외에 다른 역할을 수행하는 버튼을 위에 둘 때에는 어떻게 공통화하여 표현할지 많은 논의를 진행하였다. 결국 CMS 특징상 ‘기본’을 벗어나는 ‘UI 규정’을 만들어내는 것은 아니다라고 판단하고 현시대에 익숙한 UI만 적용하는 것으로 결론이 났다.

언젠가 단일 서비스를 진행할 때에는 Dialog를 활용하는 방법을 꽤 구체적으로 설계할 수 있을 것이라는 기대감을 가지게 하였다. 그 때에는 ‘이게 다이얼로그야!’라고 말할 수 있으리라. ㅋ_ㅋ