디자인 시스템, 에셋과 스타일부터 제대로 정리하기

 

"이 아이콘 원본 파일 어디 있어요?", "버튼 그림자 값이 화면마다 달라요." 디자이너와 개발자가 함께 일하는 팀이라면 한 번쯤 이런 메시지를 주고받아 봤을 거예요.

 

이런 질문이 반복된다면 대부분 에셋(Asset)과 스타일(Style)이 체계적으로 정리되지 않았다는 신호입니다.

 

디자인 시스템이라고 하면 버튼이나 입력창 같은 컴포넌트를 먼저 떠올리기 쉽지만, 그 컴포넌트를 이루는 재료가 바로 에셋과 스타일이에요. 재료가 정리되어 있어야 핸드오프가 매끄럽고, 개발자가 "디자이너님, 이거 확인 한 번만…"이라고 묻는 횟수도 줄어듭니다. 이번 글에서는 피그마를 기준으로 에셋과 스타일을 어떻게 준비하면 좋은지 차근차근 살펴볼게요.

 

그라디언트도 색상·위치·각도·유형을 함께 적어 두면 개발자가 그대로 구현할 수 있어요.

 

에셋: 개발자가 '내려받아야 하는' 모든 것

에셋은 쉽게 말해 개발자가 코드로 직접 그리지 않고 파일로 받아서 쓰는 요소예요. 아이콘, 일러스트, 사진, 로고, 폰트 파일, 로티(Lottie) 같은 애니메이션이 여기에 해당합니다. 반대로 버튼 배경색이나 모서리 둥글기처럼 CSS로 표현할 수 있는 건 에셋이 아니라 스타일 영역이에요.

 

에셋은 성격별로 분류해 두는 것만으로도 관리 부담이 크게 줄어듭니다.

 

1. 픽셀 단위를 깔끔하게 맞추기

아이콘을 그리다 보면 좌표가 12.37px처럼 소수점으로 떨어지는 경우가 생겨요. 이렇게 서브픽셀이 섞이면 실제 화면에서 선이 흐릿하게 뭉개져 보입니다. 특히 안드로이드 기종이 다양한 국내 환경에서는 해상도별로 차이가 더 도드라지니, 좌표와 크기는 가능한 한 정수로 맞춰 주세요.

 

2. 프레임 밖으로 삐져나오지 않게 하기

피그마 프레임의 '콘텐츠 자르기(Clip content)' 옵션을 켜 두면, 프레임 밖으로 튀어나온 요소가 내보내기 결과에 섞이는 일을 막을 수 있어요. 24×24 아이콘을 내보냈는데 받은 파일이 25×26이라면, 대부분 이 설정이 빠진 경우입니다.

 

3. 이름은 개발자와 합의한 규칙으로

"아이콘_최종_진짜최종"처럼 이름을 붙이면 나중에 누구도 찾을 수 없어요. icon/arrow-left, illust/empty-cart처럼 분류/이름 형식을 쓰고, 영문 소문자와 하이픈으로 통일하는 걸 권장합니다. 한글 파일명은 빌드 환경에 따라 깨질 수 있으니 레이어 이름은 영문으로, 설명은 한글로 나눠 쓰면 편해요.

 

4. 컴포넌트 설명란에 에셋 위치 남기기

예를 들어 '장바구니 빈 화면' 컴포넌트에 일러스트가 들어간다면, 컴포넌트 설명(Description)에 해당 에셋 링크를 붙여 두세요. 개발자가 컴포넌트를 보다가 곧바로 원본으로 이동할 수 있어서 "이 그림 파일 어디 있어요?" 같은 질문이 사라집니다.

 

스타일: 디자인 규칙을 이름 붙여 저장하기

스타일은 색상, 글자, 그림자, 그리드처럼 반복해서 쓰는 속성 값을 이름으로 묶어 둔 것이에요. 앞 단계에서 변수(토큰)를 잘 만들어 두었다면 스타일 작업은 생각보다 수월합니다. 변수를 조합해 스타일을 만들기만 하면 되거든요.

 

 

색상 스타일: 그라디언트는 '레시피'까지 적기

단색은 HEX 값만 있으면 되지만, 그라디언트는 이야기가 달라요. 색상 두 개만 알려 주면 개발자는 각도와 색 위치를 추측해야 하고, 결과물은 시안과 미묘하게 달라집니다. 위 첫 번째 그림처럼 색상, 각 색의 위치(%), 각도, 유형(선형·원형)을 한 세트로 정리해 두세요. 이벤트 배너나 프로모션 페이지처럼 그라디언트를 자주 쓰는 커머스 서비스라면 특히 효과가 큽니다. 피그마 그라디언트를 CSS로 바꿔 주는 플러그인을 함께 쓰면 값 전달이 더 정확해져요.

 

텍스트 스타일: 역할 중심으로 이름 붙이기

텍스트 스타일은 '16px 볼드' 같은 수치가 아니라 역할로 이름을 붙이는 게 핵심이에요. 제목은 h1부터 h6까지, 본문은 body, body-bold, body-link처럼 나누고, 이미지 설명이나 보조 문구는 caption처럼 용도가 드러나는 이름을 쓰면 됩니다.

 

한글 서비스라면 몇 가지를 더 챙겨 주세요. Pretendard나 Noto Sans KR처럼 한글과 영문이 모두 자연스러운 폰트를 기준으로 삼고, 한글은 영문보다 글자 면적이 넓어 보이니 행간을 150% 안팎으로 넉넉히, 자간은 -1% ~ -2% 정도로 살짝 좁히는 경우가 많아요. 이 값을 스타일에 담아 두면 화면마다 자간이 들쑥날쑥한 문제를 막을 수 있습니다.

 

 

이펙트 스타일: 그림자도 공식처럼

카드 그림자, 모달 뒤 배경 흐림, 떠 있는 버튼의 그림자처럼 효과도 스타일로 저장해 두세요. shadow/sm, shadow/md, shadow/lg처럼 단계를 나누면 "이 카드는 그림자 좀 더 진하게요" 같은 요청도 "md에서 lg로 바꿔 주세요"로 명확해집니다.

 

레이아웃 그리드: 화면 환경별로 따로

PC 웹, 태블릿, 모바일은 열 개수와 여백이 전부 다르기 때문에 그리드 스타일도 플랫폼마다 따로 만들어야 해요. 예를 들어 PC는 12열, 모바일은 4열에 좌우 여백 20px 같은 식이죠. 국내 서비스는 약관 동의, 쿠폰 안내, 앱 설치 유도처럼 팝업과 바텀시트를 자주 쓰는 편이라, 팝업 전용 그리드를 하나 더 두면 화면마다 팝업 너비가 제각각인 문제를 예방할 수 있습니다.

 

핸드오프 전에 확인하면 좋은 체크리스트

• 아이콘·일러스트 좌표와 크기에 소수점이 남아 있지 않은가요?
• 에셋 프레임에 '콘텐츠 자르기'가 켜져 있나요?
• 에셋 이름이 팀에서 합의한 규칙(영문 소문자, 분류/이름)을 따르나요?
• 컴포넌트 설명란에 사용된 에셋 링크가 들어 있나요?
• 그라디언트에 색상·위치·각도·유형이 모두 적혀 있나요?
• 텍스트 스타일에 한글 기준 행간·자간 값이 반영되어 있나요?
• PC·모바일·팝업 그리드가 각각 준비되어 있나요?

 

 

에셋과 스타일 정리는 눈에 띄는 작업은 아니지만, 한 번 잘 해 두면 이후 모든 화면 작업의 속도와 정확도를 끌어올려 줍니다. 처음부터 완벽하게 만들 필요는 없어요. 이번 스프린트에서는 아이콘 이름 규칙부터, 다음 스프린트에서는 텍스트 스타일부터 하나씩 정리해 나가 보세요. 디자이너와 개발자가 같은 이름으로 같은 것을 가리키게 되는 순간, 디자인 시스템은 비로소 팀의 공통 언어가 됩니다.

 

 

출처:

https://medium.com/design-systems-collective/design-system-best-practices-assets-and-styles-e202fa70f644