제로베이스 85일차 학습노트이다.
오늘은 Sketch 툴을 기반으로 한 첫 실습 수업으로, 아이콘 디자인과 심볼 및 스타일의 활용에 대해 배웠다. Sketch의 다양한 벡터 툴과 심볼 시스템을 실제로 사용해 보며 디자인 작업의 기본 흐름과 효율적인 반복 요소 관리 방법을 익히는 시간이었다.
오늘의 강의 내용
1. 아이콘 디자인
Sketch는 벡터 기반 툴인 만큼 아이콘을 그리기 위한 다양한 쉐이프 편집 도구를 제공한다. 오늘 실습에서는 특히 Boolean 연산 기능인 Union(합치기), Subtract(빼기), Intersect(교집합), Difference(차집합)을 활용해 다양한 형태의 간단한 아이콘을 만들어 보았다. 이 기능들은 서로 겹치는 도형을 조합하거나 잘라내며 새로운 아이콘 형태를 만드는 데 매우 유용하다.
또한 Pen, Pencil, Shape Editing, Scissors 도구를 사용하여 곡선과 직선을 자유롭게 그리거나, 기존 도형을 세밀하게 수정하는 방법도 실습하였다. 이러한 기능들은 아이콘처럼 작은 크기에서 디테일이 중요한 그래픽을 다룰 때 특히 많이 쓰인다. 단순한 하트, 별, 화살표와 같은 아이콘들을 직접 그려보며 벡터 툴의 기본기를 익힐 수 있었다.
2. 심볼과 스타일
심볼 기능은 반복되는 UI 요소를 효율적으로 관리하기 위한 Sketch의 핵심 기능 중 하나이다. 오늘 수업에서는 버튼을 예시로 들어, 심볼을 만들고 이를 여러 화면에 복제한 뒤 속성을 수정하면 모든 인스턴스에 반영되는 구조를 실습했다. 특히 텍스트와 색상, 크기 등의 속성을 재사용 가능한 스타일로 저장하고, 이 스타일을 불러와 적용함으로써 일관된 UI 구성과 빠른 수정이 가능함을 체감할 수 있었다.
심볼 안에서도 다른 심볼을 중첩할 수 있고, 오버라이드를 통해 각 인스턴스에만 부분적으로 다른 내용을 적용하는 것도 실습을 통해 익혔다. Sketch의 스타일 시스템은 디자인 시스템을 구축하는 데 필수적이며, 실제 UI 작업에서 시간과 리소스를 절약할 수 있는 중요한 기능이라는 점을 확인할 수 있었다.
Sketch의 벡터 툴을 활용한 아이콘 제작과 심볼 시스템은 UI 구성의 기본이 되는 작업들로, 향후 버튼, 카드, 네비게이션 등 반복적이고 모듈화된 구성 요소를 제작할 때 매우 유용하게 활용될 수 있을 것이다.
이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.
'제로베이스 학습 노트' 카테고리의 다른 글
[제로베이스 UI/UX 파트타임 스쿨] 13주차 - (목) 컴포넌트 디자인 - Navigation drawer & Bottom navigation (0) | 2025.06.12 |
---|---|
[제로베이스 UI/UX 파트타임 스쿨] 13주차 - (수) 컴포넌트 디자인 - App bars1 & Tabs (0) | 2025.06.11 |
[제로베이스 UI/UX 파트타임 스쿨] 12주차 - (토) 스케치의 인터페이스 (0) | 2025.06.07 |
[제로베이스 UI/UX 파트타임 스쿨] 12주차 - (금) 제플린에서의 공유 & 심볼과 스타일 (0) | 2025.06.06 |
[제로베이스 UI/UX 파트타임 스쿨] 12주차 - (목) 카트 리스트와 주문 & 디자인 스타일 가이드 정리 (0) | 2025.06.05 |