UI 디자인 구조 설계하기: 개요와 이유
스케치를 통한 UI 구조 설계 방법 정리 #1-1. 개요와 이유
UI 디자인 구조 설계란?
UI 디자인 툴인 스케치는 심볼이라는 편리한 기능을 통해서 디자인 구조를 설계할 수 있다.
하나의 UI 컴포넌트는 여러 다양한 엘리먼트들이 모여서 만들어지게 되는데, 이 엘리먼트 단위부터 디자인하여 이것이 다양한 UI 컴포넌트로 조합될 수 있게 설계하는 것이다. 개발자들의 객체지향과 유사한 것 같다.
(예시) 엘리먼트들의 조합으로 컴포넌트 구성하기그렇다면, 디자이너는 왜 개발자처럼 UI 구조를 설계해야 하는가?
1. 개발 환경
개발환경과 디자인 환경의 싱크
디자인한 UI는 결국 개발자들의 코드로 구현되는데, 이 둘은 서로 같은 규칙과 환경 안에서 UI를 구현하고 에셋을 관리할 수 있다.
버튼 컴포넌트를 구성하는 여러 엘리먼트들2. 디자인 유지 보수
디자인 수정이 발생했을 때 이것을 효율적으로 관리 적용할 수 있다. 만약 구조화해놓지 않는다면 하나의 수정사항을 적용시키기 위해 노가다 일을 해야 한다.
스케치 심볼을을 통해 디자인 일괄 변경3. 일관된 디자인
다양한 디바이스나 OS환경에서도 공통된 엘리먼트트들을 사용하여 일관된 UI 디자인을 만들어 낼 수 있다.
4. 스파게티 디자인 예방
다른 디자이너와 함께 일해도 욕먹지 않으며, 다른 디자이너가 작업한 디자인 파일을 봐도 디자인 규칙과 구조를 이해할 수 있다.
위의 장점들을 설명 및 정리하기 위해, 여러 설계 방법들을 컴포넌트 제작 사례중심으로 정리해보려 한다.
1~2주에 하나씩 업로드할 예정이다.
구조로 UI 디자인 설계하기 목차
서론
#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. 스케치 플러그인
