XE3 UI Style guide #1

디자인 언어 시스템 구축하기

XE3는 기존 Xpressengine 1.x 버전의 확장성 문제를 해결하고 모던한 CMS를 만들기 위한 프로젝트다. 내부 UI 구성부터 외부 테마 및 스킨 제작에 필요한 기본적인 UI를 구축하기 위해 기본 뼈대가 되는 일련의 규칙이 필요했고, Core내에 Component, Element, Collection를 제작하여 시멘틱하게 관리할 수 있도록 정의하였다.

이 글에서는 기본 UI를 구축하기 위한 Layout, Contents, Element, Collection의 일부를 소개한다.
제작 과정에서 Git과 Bitbucket으로 Front-End 개발자과 긴밀하게 협업하였으며, 별도의 Style Guide 문서를 꽤 오랫동안 업데이트하며 견고하게 구축되어졌다.

Style Guide문서와 적용된 페이지 마크업 산출물은 보안 문제로 전체를 공개하지 못하지만, 대략적인 구성을 아래에 소개해본다.

Layout

Adaptive Web

XE3는 기본적으로 12colum의 그리드 시스템을 사용한다. 가장 많이 쓰이는 12col 그리드 시스템을 적용한 이유는 간단하다. 다양한 어플리케이션(플러그인)이 테마와 노출될 때 오류를 방지해주며, 믹스인을 통해 그리드 변수와 개개 그리드 컬럼들을 위한 시멘틱 CSS생성이 용이하기 때문이다.

일반 반응형과 달리 Adaptive Web을 채택한 이유는 PC환경에서 사이드 메뉴, 게시판과 같은 번들 플러그인 노출시 각 플러그인에 별도의 그리드 시스템을 적용할 수 있도록 하기 위함이다. 이를 통해 서드파티의 플러그인 제작이 용이하고 그리드 시스템을 사용하지 않거나 별도의 쿼리를 적용한 독립적인 플러그인을 포용할 수 있게 되었다. 즉, 기본적으로 그리드 시스템을 사용할 수 있으나, 사용하지 않아도 무방한 에코 환경을 만들기 위함이였다.

그리드 시스템 기반으로 다양한 레이아웃을 구성할 수 있다

Grid Option

Contents

Color Scheme

각 컬러는 각기 적용하는 UI요소를 구분하여 사용한다. 그레이스케일은 타이포그라피와 아이콘 및 구분선 등 전반적으로 적용되므로, 아주 세밀하게 가이드를 설정하여 적용하였다. Primary Color는 XE3에 공통 적용하는 브랜드 컬러로, 이외에 Primary 4종은 XE 시스템 UI를 규정하는 컬러 규칙으로 적용하였다. 이외의 Secondary 컬러셋은 플러그인 제작자와 Contributor가 쉽게 컬러스키마를 활용할 수 있도록 제공하였다. 각 컬러 스와치는 ‘컬러명+X00’ 으로 클래스명을 제공하여, 개발시 쉽게 활용할 수 있도록 Sass로 클래스를 분리해 두었다.

Typography

한글 폰트는 웹폰트인 ‘나눔바른고딕’ 폰트를 기본 폰트로 정의하였다. 한글 폰트는 꽤 많은 고민이 있었는데, CMS Core에 들어가는 웹폰트이므로 용량이 작고 서브셋 폰트 설정이 쉬우며, 동시에 확장성이 좋은 폰트를 선정하여야 했다. 마침, 협업 개발자가 NAVER에서 제공한 ‘나눔바른고딕’ 폰트를 서브셋으로 Github에 만들어 오픈소스로 배포중이였고, 테스트 결과가 만족스러워 설정하게 되었다.

영문 스타일은 ‘Open Sans’를 기본 스타일로 선언하였고, 웹폰트로 제공은 하지 않아 다른 서체로 차용할 수 있도록 하였다. 사용에 대한 기본 규정을 정의하여 시스템에 일괄 적용할 수 있도록 하였다.

Style

기본 스타일을 정의하여, 스파게티 현상(다양한 작업자로 인해, 한 서비스에 너무 많은 종류의 크기와 스타일이 사용되는 것)을 방지하도록 하였다. 기본적으로 XE3의 UI 총괄은 내가 진행했지만, 많은 담당자가 아니더라도 작업할 때마다 정의된 것이 없으면 매번 찾기도 어렵고 스파게티 현상이 일어나기 쉽상이였다.

이러한 크기와 스타일은 일반적인 사용 조건에서 콘텐츠 밀도와 읽기에 편안함을 주기 위해 개발하였다. 유형의 크기를 바꾸려면 SP(확장픽셀)로 지정하여 적용할 수 있도록 하였다. 다양한 스타일이 있지만, 기본 베이스 스타일로 13, 15, 17, 24, 34px 크기의 폰트를 태그(h, p, span..등)로 정의하여 적용하였다.

 

Line Height

가독성과 적당한 간격 유지를 위해 줄간은 각 스타일의 개별 크기 및 중량에 기초하여 결정하였다. 줄간격은 Body, Subhead, Headline, Smaller Display 스타일에 적용하도록 하였고, 다른 모든 스타일은 한개에서 두개 라인을 유지한다는 사용성 조건하에 1.25em으로 일괄적용하였다. 이를 위해 em, rem 단위로 적용하는 경우 통일해서 적용할 수 있도록 구별하여 사용하도록 하였다.

Line Length

각 폰트 스타일은 가독성과 길이에 따른 양감에 기초하여 고유 자간을 유지하도록 하였다.
자간은 본문 스타일과 디스플레이 스타일로 크게 나누어 em단위로 일괄 설정하였다.

Letter Spacing

본문의 문구는 가독성을 위해 줄 길이를 두가지 타입으로 권장하도록 하였다. 이는 테스트 결과로 정의하였으며, 결과물은 이를 통해 그리드 시스템을 사용하거나 max-width 설정으로 조정하도록 하였다.

긴 줄의 경우 한 줄에 60-90자를 기준으로 한다. 줄 길이가 지나치게 긴 경우, 마지막 단에서 다음줄 시작으로 가는 시선이동이 어려움이 있다. 지속적인 읽기 행위를 위해 가이드에 주어진 길이를 기준으로 개발자에게 텍스트 블럭을 만들도록 하였다. 짧은 줄의 경우 한 줄에 30-60자를 사용할 것을 권장하였다. 15자 이내가 될 경우 문장의 리듬이 깨질 수 있어, 상황에 따라 최소 15자, 30자, 40자, 60자를 기준으로 텍스트 블럭을 만들어 UI를 구성하도록 하였다.

Basic UI Components

Dropdowns

드랍다운메뉴는 버튼, 액션 또는 다른 컨트롤과 인터렉션할 때 사용하는 UI다. 선택 목록을 한 줄에 하나씩 표시한다.
각 드랍다운 메뉴 항목은 개별 옵션 보기, 응용 프로그램 보기 또는 선택한 요소에 영향을 줄 수 있는 액션으로 구성하며, 앱이나 웹 내에서 탐색을 위한 기본 방법으로 드랍다운 UI를 사용하는 것은 OS 또는 기기별 대응이 어렵기 때문에 사용하지 않도록 정의하였다. (일반적인 Selectbox를 사용해도 무방하다면 구지 Dropdown UI를 사용하는 것은 리스크가 크다.)

Basic Spec

Width: 1x-56px, 4x-224px, min-width: 1.5x-84px
Style: 2px rounded corner, border 1px #dedede
box-shadow: 0 1px 2px rgba(0,0,0.25), 0 0 1px rgba(0,0,0,.35)

Menu item height: basic 40px, 36px, 48px, 32px(only desktop)
Menu item left, right pading: 16px
Menu item text top, bottom padding: 10px(40), 8px(36), 14px(48), 6px(32)

Cascading Redlines

Depth menu margin: -6px(3depth), +6px(4depth)

Cascading menu top, bottom padding: 8px
Cascading menu left, right padding: 16px
Divider: 1px #e4e4e4, margin 6px 0
Menu icon for sub-item margin right: 10px

Types

Basic
Active / Inactive

Selection
A dropdown can be used to select between choices in a form.
Selection dropdowns can be initialized directly on a select or with the matching html and a hidden input.

Search Selection
A selection dropdown can allow a user to search through a large list of choices.

 

잡담 또는 후기

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

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

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