UI 디자인 구조 설계하기: 개요와 이유

스케치를 통한 UI 구조 설계 방법 정리 #1-1. 개요와 이유

Apr 8. 2017

UI 디자인 툴인 스케치는 심볼이라는 편리한 기능을 통해서 디자인 구조를 설계할 수 있다.

하나의 UI 컴포넌트는 여러 다양한 엘리먼트들이 모여서 만들어지게 되는데, 이 엘리먼트 단위부터 디자인하여 이것이 다양한 UI 컴포넌트로 조합될 수 있게 설계하는 것이다. 개발자들의 객체지향과 유사한 것 같다.

(예시) 엘리먼트들의 조합으로 컴포넌트 구성하기

1. 개발 환경

개발환경과 디자인 환경의 싱크

디자인한 UI는 결국 개발자들의 코드로 구현되는데, 이 둘은 서로 같은 규칙과 환경 안에서 UI를 구현하고 에셋을 관리할 수 있다.

버튼 컴포넌트를 구성하는 여러 엘리먼트들

2. 디자인 유지 보수

디자인 수정이 발생했을 때 이것을 효율적으로 관리 적용할 수 있다. 만약 구조화해놓지 않는다면 하나의 수정사항을 적용시키기 위해 노가다 일을 해야 한다.

스케치 심볼을을 통해 디자인 일괄 변경

3. 일관된 디자인

다양한 디바이스나 OS환경에서도 공통된 엘리먼트트들을 사용하여 일관된 UI 디자인을 만들어 낼 수 있다.

4. 스파게티 디자인 예방

다른 디자이너와 함께 일해도 욕먹지 않으며, 다른 디자이너가 작업한 디자인 파일을 봐도 디자인 규칙과 구조를 이해할 수 있다.

위의 장점들을 설명 및 정리하기 위해, 여러 설계 방법들을 컴포넌트 제작 사례중심으로 정리해보려 한다.

1~2주에 하나씩 업로드할 예정이다.

서론

#1-1. 개요와 이유

설계

#2-1. 준비하기

#2-2. 아이콘

#2-3. 버튼

#2-4. 모달

#2-5. 탭

#2-6. 캘린더

협업

#3-1. 개발 편의를 위한 에셋 관리

#3-2. 인터렉션 프로토타이핑 만들기

#3-3. 디자인 형상 관리

기타

#4-1. 가이드 툴 비교 분석

#4-2. 프로토타이핑 비교 분석

#4-3. 스케치 플러그인

keyword

송준협 직업 기획자

@XL8