UI 디자인 구조 설계하기: #2-1 준비하기
스케치를 사용한 UI 구조 설계 방법
이 글은 스케치 사용을 통한 UI 디자인 구조 설계하는 방법을 소개한 글로써 지난번 글과 조금은 이어지는 글이다.
서론
설계
#2-1. 준비하기 (현재 글)
#2-2. 아이콘
#2-3. 버튼
#2-4. 모달
#2-5. 탭
#2-6. 캘린더
협업
#3-1. 개발 편의를 위한 에셋 관리
#3-2. 인터렉션 프로토타이핑 만들기
#3-3. 디자인 형상 관리
기타
#4-1. 가이드 툴 비교 분석
#4-2. 프로토타이핑 비교 분석
#4-3. 스케치 플러그인
먼저 알려드릴 것은, 각 회사나 프로젝트별로 설계에 필요한 환경들이 다를 텐데 이 글은 별로 객관적이지 못하다. 한 가지 예로 아이콘 같은 에셋 파일을 개발 조직과 디자인 조직 중 누가 관리 주체인지에 따라서도 글의 내용은 크게 달라질지도 모른다. 그러나 다른 상황은 경험해보지 못했기 때문에 객관적인 글을 쓰는 것은 불가능한 것 같아 나의 주관적인 환경 아래에서 작성하고 있으며, 이에 먼저 나의 작업 환경을 소개한다.
개발 중심의 조직
다수의 개발자와 소수의 디자이너로 구성된 프로젝트 단위의 작은 조직이다.
하나의 프로젝트 지속
단 하나의 프로젝트를 처음부터 시작하였고 계속 발전시켜나가고 있다. 즉, 외주처럼 끝이 있는 것이 아니며, 영향을 주는 외부 클라이언트가 없다.
다양한 OS 및 디바이스
Android, iOS, Windows, Mac에서 동일 스펙을 개발을 지향하며, 여러 디바이스 화면 크기에 대응하고 있다.
스크럼, 스크럼반 프로세스
얼마 전까지만 해도 스크럼으로 프로젝트를 운영하고 있었으나 최근 스크럼반을 도입했다. 그래서 지금은 이 사이에서 과도기다.
그럼 이제 UI 디자인 구조 설계를 위한 준비과정을 소개하겠다.
내용은 준비 과정 순서별로 작성되었으며 크게 폴더, 페이지, 컬러, 타이포그래피로 나누어졌다.
1. 폴더
먼저 프로젝트에서 사용될 파일들의 위치를 관리할 폴더구조부터 만드는 것부터가 시작이다.
프로젝트 폴더 안에 각 OS폴더가 만들어져 있고 이안에는 그 OS에서 작업되는 스케치 파일을 포함하여, 각종 디자인 파일 및 에셋들이 들어가게 된다.
중요한 것은 1 OS = 1 Folder = 1 Sketch file 형식의 구조인데 이는 디자인의 형상 및 버전 관리를 편하게 하기 위해서이다. 그리고 추가로 사용된 UI KIT을 정리할 수 있는 폴더를 준비한다.
(형상 및 버전 관리는 git을 사용하여 이루어지는데, #3-3. 디자인 형상 관리에서 자세히 소개할 예정이다. 이를 위해 미리 알려드리자면 위에서 말하는 OS폴더가 바로 git의 Repositories 폴더다.)
참고로 아래 링크는 해외 어느 디자이너의 프로젝트 폴더구조를 소개한 글인데 스케치에서 메일링으로 추천하기도 했던 글이다.
2. 페이지
페이지는 아래 총 5개의 페이지로 구성되어 시작되며 프로젝트 버전이나 심벌 규모에 따라 더 늘어날 수 있다.
Element
한 프로젝트 내의 다른 스케치 파일(=다른 OS)에서도 함께 사용될 수 있는 디자인 원소들이 있게 될 페이지이다.
이 곳에 있게 될 심벌의 이름과 형태는 가능하다면 거의 변경되지 않아야 한다
ex) 작게는 컬러 & 타이포그래피부터 크게는 아이콘까지
Component
위 엘리멘트들이 모여서 이루어지게 되는 구성 요소들이 있게 되는 페이지이다.
ex) 버튼이나 텍스트 필드
Template
위 컴포넌트들이 모여서 구성하게 될 스크린의 한 영역을 의미한다. 한 스크린 안에서 많은 영역이 존재하는 경우(데스크톱 같은)가 아니라면 위 Component 페이지와 구분되지 않아도 괜찮다. 다만 한 페이지 안에 심벌이 너무 많아질 경우 스케치가 버벅거리는 현상이 있게 되니 규모가 커질 것 같다면 나눠주는 것이 좋다
Screen
실제 서비스처럼 보이는 디자인된 스크린이 있게 되는 부분이다
해당 OS에 버전이 많아진다면 스크린을 버전별로 나누게 되는 경우도 있다.
Guide
개발 시 이용하기 위한 에셋과 가이드를 모아놓는 곳이다.
이렇게 총 5개의 페이지를 준비하여 Element 페이지에 이어서 소개할 컬러와 타이포그래피를 채워 넣으면 UI 디자인 구조 설계 준비가 완성된다.
3. 컬러
컬러에는 사용 목적에 따라 Brand Color, UI Color, Gray Color 총 3가지로 구분된다.
Brand Color
주로 사용하게 될 BI를 전달할 수 있는 컬러이다.
ex) Primary와 Accent 컬러
UI Color
UI에서 상태 등을 표현할 때 사용하게 될 컬러인데 위 Brand Color와 동일한 컬러를 사용할 수 도있으나, 보통은 사람들이 이미 인지하고 있는 메타포를 가진 컬러를 사용한다.
ex) 선택이나 주목을 나타내는 컬러는 파란색, 오류나 부정을 나타내는 컬러는 빨간색, 긍정과 성공 및 안정을 나타내는 컬러는 초록색 사용 등등…
Gray Color
회색조 컬러이다.
ex) 다양하게 사용
위 3가지의 컬러 군의 각 컬러 팔레트를 채도와 명도를 조정한 스펙트럼을 만들도록 한다. 스케치에서 컬러 팔레트를 용이하게 정리하려면 8단계의 스펙트럼을 준비하는 것이 좋다.
참고로 https://coolors.co를 이용하면 원하는 컬러 스펙트럼을 만들어내는데 용이하다.
4. 타이포그래피
타이포그래피는 최소 사이즈, 라인 높이를부터 적당하게는 텍스트 컬러까지 고려하여 스타일 정리한다.
텍스트 정렬과 굵기 등과 같은 속성도 고려할 수 있다면 하는 것이 좋겠으나 너무 많이 정리하는 것도 비효율인 것 같다.
정리할 때, 라인 높이(line height)는 아래와 같은 텍스트가 사용되는 컴포넌트 환경 고려해야 한다
동일한 패딩이 필요할 경우 (ex. 버튼 안), 싱글 라인 (ex. 한 줄 글), 멀티라인 (ex. 문단)
텍스트 컬러는 텍스트의 중요도와 상태를 나타내는데 다음과 같은 상태를 고려해야 한다
Primary, Secondary, Placeholder, Disabled, a link 등등
+ 추가로 Error, Success, Focus도 필요하다면 함께.
텍스트 컬러를 가장 쉽게 조정하는 방법은 불투명도를 조정하는 것이다. 이렇게 하면 여러 배경색 위에서도 조화롭게 보이므로 많은 부분에서 쉽게 사용하기 좋다. 바로 머티리얼 디자인이 이렇게 한다. 하지만 컬러가 너무 단조로워 보일 수 있는 단점이 있다. 그래서인지 모르나 머티리얼 디자인 가이드를 만든 구글도 불투명 도로만 텍스트 컬러를 조정하진 않으므로 편한대로 하면 될 것 같다.
여기까지 하면 UI 디자인 구조 설계의 기초는 모두 완성되었다. 이젠 이 준비된 엘리멘트를 이용해서 컴포넌트와 스크린들을 만들게 되며, 더 나아가서 개발에 활용될 수 있는 가이드와 에셋 관리까지 차근차근 이루어지게 된다.
다음 글에서는 아이콘을 만들고 정리해보면서 본격 활용할 수 있는 방법을 설명할 예정이다.
직접 확인하실 수 있도록 .sketch 예제 파일을 준비했습니다. 앞으로 계속 이 파일을 사용하여 업데이트할 예정입니다.
https://junhyeopsong@bitbucket.org/junhyeopsong/junhyeop-article
나중에 '#3-3. git을 이용한 디자인 형상 관리'를 설명할 때 필요할까 하여 git에 올렸습니다. 링크의 download에서 다운로드하여 확인하실 수 있습니다.
