디자인 시스템 설계 시작하기 : 첫 단계

안녕하세요, 게으른 사부작이입니다!

 

오늘은 디자인 시스템 시리즈의 마지막 단계로, 디자인 시스템 설계를 시작하는 첫 단계에 대해 이야기해보려고 해요. 지금까지 디자인 시스템의 필요성부터 구성 요소, 컴포넌트, 디자인 토큰까지 배워왔으니, 이제 직접 설계해 볼 차례예요. 처음엔 저도 "어디서부터 시작해야 하지?" 하고 막막했지만, 작은 것부터 시작해 보니 한결 쉬워지더라고요. 그럼 저와 함께 디자인 시스템 설계의 첫걸음을 내디뎌 볼까요?

 

ChatGPT 생성 이미지

처음이라 막막했지만, 작은 것부터 시작했어요

제가 디자인 시스템을 처음 공부할 때, "디자인 시스템 = 거대한 프로젝트"라는 생각에 겁부터 났어요. 넷플릭스나 구글 같은 대기업의 디자인 시스템을 보면서 "이런 걸 나도 만들 수 있을까?" 하고 걱정했죠. 하지만 선배 디자이너가 "작은 것부터 시작해 봐!"라고 조언해 줬어요. 그래서 저는 개인 프로젝트로 간단한 디자인 시스템을 만들어보기로 했어요. 처음엔 버튼 몇 개와 색상 몇 개만 정의하는 걸 목표로 잡았죠. 이렇게 작은 단위부터 시작하니까 부담이 줄어들고, 점점 자신감이 생기더라고요. 여러분도 처음이라 막막하다면, 저처럼 작은 것부터 시작해 보는 걸 추천드려요. 오늘은 그 첫 단계를 함께 해볼게요!

개인 프로젝트로 버튼 3개, 컬러 5개 설계해 보기

디자인 시스템 설계를 시작할 때, 너무 거창하게 생각하지 말고 작은 단위부터 설계해 보는 게 좋아요. 저는 개인 프로젝트로 간단한 앱 UI를 만들면서 시작했어요. 목표는 버튼 3개와 컬러 5개를 설계하는 거였죠. 이 과정을 하나씩 설명해 볼게요.

1. 버튼 3개 설계하기

먼저 버튼을 설계해 봤어요. 버튼은 UI에서 자주 쓰이는 요소라 시작하기에 딱 좋더라고요. 저는 3가지 버튼을 만들었어요:

• 주요 버튼 (Primary Button): "확인"이나 "구매하기" 같은 주요 행동을 위한 버튼.
  • 크기: 48px x 48px, 색상: 파랑(#007BFF), 모서리 둥글기: 8px, 글씨: Noto Sans Bold, 16px, 흰색.
• 보조 버튼 (Secondary Button): "취소" 같은 덜 중요한 행동을 위한 버튼.
  • 크기: 48px x 48px, 색상: 회색(#D3D3D3), 모서리 둥글기: 8px, 글씨: Noto Sans Regular, 16px, 검정.
• 경고 버튼 (Warning Button): "삭제" 같은 경고 행동을 위한 버튼.
  • 크기: 48px x 48px, 색상: 빨강(#FF0000), 모서리 둥글기: 8px, 글씨: Noto Sans Bold, 16px, 흰색.

이렇게 버튼 3개를 설계하면서, 크기와 모서리 둥글기를 통일해서 일관성을 유지했어요. 버튼마다 역할(주요, 보조, 경고)을 명확히 정하니까 나중에 UI를 만들 때 "이 버튼은 어디에 쓰지?" 고민할 필요가 없더라고요.

2. 컬러 5개 설계하기

다음으로 컬러 팔레트를 설계했어요. 너무 많은 색상을 정하면 복잡해질까 봐, 5가지 색상만 골랐어요:

• Primary Color: #007BFF (파랑) - 주요 버튼, 링크 등에 사용.
• Secondary Color: #D3D3D3 (회색) - 보조 버튼, 배경 등에 사용.
• Accent Color 1: #28A745 (초록) - "확인"이나 "저장" 같은 긍정적 행동.
• Accent Color 2: #FF0000 (빨강) - "삭제"나 "경고" 같은 부정적 행동.
• Background Color: #F5F5F5 (연한 회색) - 기본 배경색.

이 5가지 색상을 정하면서, 각 색상의 역할을 명확히 정의했어요. 예를 들어, 파랑은 신뢰감을 주니까 주요 행동에, 빨강은 경고를 나타내�니까 삭제 버튼에 쓰는 식으로요. 이렇게 하면 색상이 UI에서 직관적으로 사용돼서 사용자 경험이 좋아지더라고요. 저는 Coolors라는 무료 툴을 써서 색상 조합을 맞춰봤는데, 초보자도 쉽게 사용할 수 있어서 추천드려요!

간단한 체크리스트 제공

디자인 시스템 설계를 시작할 때, 제가 사용한 간단한 체크리스트를 공유해 볼게요. 이 체크리스트를 따라 하면 처음 설계가 훨씬 쉬워져요:

• 목표 정하기: 작은 단위부터 시작할 것. (예: 버튼 3개, 컬러 5개)
• 역할 정의하기: 각 요소의 역할 명확히 정하기. (예: Primary 버튼은 주요 행동, 빨강은 경고)
• 일관성 유지하기: 크기, 스타일, 색상을 통일하기. (예: 버튼 크기 48px로 통일)
• 문서화하기: 설계한 요소를 간단히 기록하기. (예: "Primary 버튼: #007BFF, 48px")
• 테스트하기: 간단한 UI에 적용해보고 문제점 찾기. (예: 색상이 너무 강렬하지 않은지 확인)

저는 이 체크리스트를 따라 하면서 "아, 이 버튼 크기가 너무 크다!" 같은 문제를 미리 발견할 수 있었어요. 처음엔 간단하게 시작하더라도, 이런 체크리스트를 활용하면 체계적으로 설계할 수 있답니다.

실무 팁: 기록과 테스트가 중요

디자인 시스템을 설계하면서 깨달은 팁을 하나 더 드릴게요. 설계한 요소는 꼭 기록해 놓고, 간단한 UI에 적용해 보며 테스트해 보세요. 저는 처음엔 기록을 안 했다가 "이 버튼 색상이 뭐였지?" 하고 다시 찾느라 시간을 낭비했어요. 간단하게 노트 앱이나 엑셀에 "Primary 버튼: #007BFF, 48px" 이런 식으로 정리해 놓으니까 훨씬 편하더라고요. 또, 설계한 버튼과 색상을 실제 UI에 적용해 보니, "이 색상은 너무 강렬해서 눈이 아프네" 같은 문제를 미리 발견할 수 있었어요. 작은 테스트가 나중에 큰 문제를 줄여주는 셈이죠.

시작했으니, Figma로 실습해 볼게요!

디자인 시스템 설계의 첫 단계를 해보니, 처음엔 막막했던 게 점점 재미있어지더라고요. 버튼 3개와 컬러 5개만 설계했는데도, UI가 훨씬 체계적으로 보였어요. 작은 것부터 시작하는 게 이렇게 큰 차이를 만들 줄 몰랐네요. 이제 시작했으니, 다음 포스트에서는 Figma를 활용해서 이 설계를 실제로 구현해 보는 실습을 해볼게요. 여러분은 어떤 요소부터 설계해보고 싶나요? 저는 버튼 설계하면서 UI의 기본 뼈대가 잡히는 느낌이 들어서 좋았어요. 댓글로 여러분의 경험도 공유해 주세요!