[제로베이스 UI/UX 파트타임 스쿨] 12주차 - (금) 제플린에서의 공유 & 심볼과 스타일

제로베이스 82일차 학습노트이다.
오늘은 디자이너가 만든 UI를 개발자와 효과적으로 공유하는 방법으로 Zeplin을 활용한 공유 방식을 배웠고, 이어서 새로운 디자인 툴인 Sketch의 심볼과 스타일 기능에 대한 기본 개념과 활용법을 익혔다. 다양한 툴을 이해하고 사용하는 경험을 통해 실무에서의 디자인 협업과 효율적인 자산 관리가 얼마나 중요한지 다시 한 번 느낄 수 있었다.

---

오늘의 강의 내용

 

1. Zeplin에서의 공유
Zeplin은 디자이너가 작업한 디자인 시안을 개발자에게 명확하게 전달하기 위한 협업 툴이다. Adobe XD, Figma, Sketch 등 다양한 디자인 툴에서 만든 화면을 Zeplin에 연동하여 공유할 수 있으며, 개발자는 해당 화면에서 폰트 정보, 색상, 여백, 마진, 크기 등을 정확하게 확인하고 CSS나 Swift 코드 등을 바로 추출할 수 있다.

특히 오늘 실습에서는 Adobe XD에서 작업한 쇼핑몰 UI 화면을 Zeplin에 업로드하고, 각 화면별로 스타일 가이드와 스펙을 자동 추출해 확인해보았다. 별도로 코딩 문서를 만들지 않아도 개발자가 디자인을 그대로 구현할 수 있는 환경이 자연스럽게 형성되어 디자이너-개발자 간 커뮤니케이션의 효율성이 크게 향상된다는 점이 인상적이었다.

 

2. Sketch의 심볼과 스타일
Sketch는 macOS 전용 UI 디자인 툴로, 오늘은 그중에서도 심볼(Symbol)과 스타일(Style) 기능에 대해 학습했다. 심볼은 반복적으로 사용되는 UI 요소(버튼, 아이콘, 입력창 등)를 하나의 컴포넌트로 정의해두고, 여러 화면에서 재사용할 수 있게 해주는 기능이다. 하나의 심볼을 수정하면 해당 심볼을 사용한 모든 위치에 자동 반영되어, 디자인 관리의 일관성과 효율성이 높아진다.

스타일은 텍스트 스타일, 색상 스타일 등 디자인 요소들의 속성을 저장하고 재활용할 수 있도록 하는 기능으로, 조직 내에서 디자인 언어를 통일하는 데에 큰 도움이 된다. 예를 들어 ‘헤드라인 1’이라는 텍스트 스타일을 만들고 폰트 크기, 두께, 색상 등을 정의해두면 이후 동일한 스타일을 손쉽게 불러와 사용할 수 있다.

Sketch는 XD와 유사하지만 컴포넌트 관리나 디자인 시스템 구성 측면에서 더 세분화된 기능을 제공한다는 인상을 받았다. 실무에서 팀 단위로 작업할 때는 심볼과 스타일 기능을 통해 통일감 있는 디자인 시스템을 구축하는 것이 매우 중요함을 체감할 수 있는 강의였다.

---

Zeplin을 활용한 공유 방식은 향후 개발자와의 협업 과정에서 반복적인 커뮤니케이션을 줄이고, 정확한 UI 구현을 유도하는 기반으로 활용할 수 있을 것 같다. 또한 Sketch의 심볼과 스타일 기능은 디자인 시스템 구축 및 관리에 큰 도움이 되며, 협업 툴 선택의 폭을 넓혀주는 실용적인 툴로 느껴졌다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.