웹사이트나 애플리케이션의 규모가 커지다 보면 페이지 수가 10개, 20개로 늘어나게 된다. 이때 페이지마다 폰트 크기가 오락가락하거나, 카드 상자의 그림자 깊이가 달라지고, 버튼의 메인 색상이 미세하게 달라지는 현상을 흔히 목격할 수 있다.
페이지가 늘어날 때마다 "지난번에 썼던 제목 폰트 크기가 24px이었나, 28px이었나?", "메인 브랜드 색상 헥스 코드가 #1E40AF였나, #2563EB였나?"를 확인하려 이전 화면을 뒤적거리는 것은 엄청난 시간 낭비다.
디자인의 일관성을 유지하고 브랜드의 신뢰도를 높이기 위해 필수적으로 갖춰야 하는 것이 바로 '디자인 시스템(Design System)'의 기초인 '컬러 및 텍스트 스타일 가이드'다. 피그마에서 스타일을 미리 정의해 두고 필요할 때마다 재사용하는 실무 노하우를 알아보자.
디자인 시스템을 거창하게 생각할 필요 없다. 핵심은 '자주 쓰이는 색상과 폰트 속성에 고유한 이름을 붙여 중앙에서 관리하는 것'이다.
피그마에서는 특정 요소에 적용된 색상이나 텍스트 속성을 스타일(Style)로 저장할 수 있다.
컬러 스타일 저장: 색상이 적용된 도형을 선택하고, 우측 패널 Color 항목 옆의 점 4개 아이콘(Style)을 클릭한 뒤
+버튼을 누른다.스타일 이름 지정: 무작정
#3B82F6같은 색상 코드 대신, 색상의 '역할'을 반영한 이름을 지어준다. 예:Primary / Default,Background / Light,Text / Main텍스트 스타일 저장: 폰트 종류, 크기, 굵기, 행간, 자간을 세팅한 후 텍스트 속성 상자에서 똑같이 Style
+버튼을 누른다. 예:Heading / H1,Body / Medium,Caption / Regular
이렇게 스타일을 만들어 두면, 새로운 페이지를 만들 때 수치를 일일이 기억할 필요 없이 우측 패널에서 등록된 스타일 이름만 클릭하여 적용할 수 있다.
스타일 가이드를 구축할 때 가장 큰 장점은 '유지보수와 전체 일괄 수정의 편리함'이다.
만약 서비스의 메인 테마 색상을 변경해야 할 때, 스타일이 지정되어 있지 않다면 수십 개의 페이지를 일일이 찾아다니며 색상을 고쳐야 한다.
반면 Primary / Default라는 컬러 스타일로 묶여 있다면, 피그마 우측 패널에서 해당 스타일의 원본 색상 딱 하나만 수정해 주면 된다. 해당 스타일을 사용하고 있던 수십 개의 프레임과 컴포넌트가 단 1초 만에 새로운 색상으로 한꺼번에 일괄 변경된다.
텍스트 스타일 역시 마찬가지다. 본문 폰트를 Pretendard에서 Noto Sans로 교체하거나 행간을 24px에서 26px로 조절할 때, 텍스트 스타일 가이드 원본만 수정하면 전체 프로젝트의 본문 가독성이 한꺼번에 업데이트된다.
시리즈의 1편부터 10편까지 다룬 내용을 종합해 보면, 완성도 높은 디지털 디자인은 특출난 예술적 감각이 아니라 '정교한 시스템과 규칙'에서 나온다는 점을 알 수 있다.
1~4편 (시각 기초): 크기 대비, 여백, 60-30-10 컬러 배분, 가독성 폰트
5~7편 (피그마 기초): 프레임 조작, 오토 레이아웃(
Shift + A), 컴포넌트/베리언트8~10편 (응용 및 시스템): Constraints 고정, 모바일 반응형 구조, 스타일 가이드 정의
이 규칙들을 바탕으로 작더라도 나만의 스타일 가이드를 차곡차곡 쌓아나간다면, 비디자이너라도 누구나 깔끔하고 완성도 높은 UI/UX 디자인을 빠르고 정확하게 완성할 수 있게 된다.
[핵심 요약]
디자인 스타일 가이드는 자주 쓰이는 색상과 폰트 속성에 고유한 역할 이름을 부여해 일관성을 유지하는 시스템이다.
피그마의 Style 기능을 활용하면 수치 입력 없이 클릭 한 번으로 미리 정해둔 폰트와 컬러를 정확히 재사용할 수 있다.
스타일 가이드 원본 수정 시 프로젝트 전체 화면에 변경 사항이 일괄 반영되므로 유지보수 시간을 획기적으로 줄여준다.
[다음 편 예고] 이번 편으로 '비디자이너를 위한 UI/UX 웹 디자인 기초' 10편 시리즈가 모두 마감되었습니다. 다음 세션에서는 또 다른 애드센스 승인 친화적 주제로 찾아뵙겠습니다.
0 댓글