거창하게 시작하지 않아도 되는 미니멀 디자인 시스템 구축법 - 1

방구석 디자인 사수

구독자님 반가워요! 방구석 디자인 사수입니다.

요즘 제 홈페이지를 리뉴얼하고 있는데요,

욕심을 좀 부렸더니 예상보다 페이지 수가 많아지더라고요.

그래서 이왕 욕심 부린거,

미니멀한 디자인 시스템을 같이 만들어보기로 했답니다.

저랑 같이 만들어보실래요?

오늘은 거창한 이론 대신, 

지금 당장 Figma를 열어서 시작할 수 있는 미니멀 디자인 시스템 구축법을 알려드릴게요.

오해부터 풀고 가기

"미니멀 디자인 시스템"이라고 하면 많은 분이 "화면에서 요소를 최대한 없애는 것"이라고 생각해요.

하지만 No, No, No~

미니멀 디자인 시스템의 진짜 의미는 

"핵심 기능과 목적에 집중해서, 확장 가능하고 통제하기 쉬운 효율적인 뼈대를 만드는 것"이에요.

불필요한 시각적 노이즈를 덜어내되, 제품의 일관성과 작업 속도를 극대화하는 거죠.

장식을 빼는 게 아니라 선택지를 줄여서 결정의 피로도를 낮추는 과정이라고 생각하시면 정확해요.

왜 디자인 시스템이 필요할까?(그리고 왜 미루게 될까?)

디자인 시스템이 필요한 이유는 사실 간단해요.

"매번 같은 고민을 반복하지 않기 위해서"예요.

버튼 만들 때마다 "둥글기가 8px이었나 12px이었나?",

텍스트를 쓸 때마다 "본문이 14px이었나 16px이었나?",

색상 넣을 때마다 "메인 컬러가 #2563EB이었나 #3B82F6이었나?"

이런 마이크로 결정(Micro Decision)이 하루에 수십 번 일어나죠.

하나하나는 별것 아닌 것 같지만, 쌓이면 결정 피로가 돼요.

그리고 결정 피로가 싸이면 우리에게는 이런 일이 벌어지죠.

디자인 시스템은 이 마이크로 결정을 '미리 내려놓는 것'이에요.

한 번 정해두면 매번 고민하지 않아도 되니까, 중요한 UX문제 해결에 에너지를 더 쓸 수 있겠죠?

그런데 왜 다들 미루게 될까요?

'완벽하게 만들어야 한다'는 압박감 때문이에요.

디자인 시스템 전담 팀이 있는 대기업조차 리소스 부족이 가장 큰 불만이라고 해요.

이런데, 1인 디자이너가 완벽한 시스템을 한 번에 만들겠다는 건 애초에 불가능한 목표인거죠.

핵심이 이거예요.

시작 전,내 현황부터 파악하기 : 미니 디자인 오딧

바로 만들기 전에 딱 하나만 먼저 해보세요.

지금 작업 중인 화면을 훑어보는 거죠.

거창한 감사(Audit)이 아니라, 아래 3가지만 체크하면 됩니다.

☑️ 버튼 스타일이 몇 가지인가요? (색상, 사이즈, 라운드가 다 다르면 다 다른 거예요)

☑️ 텍스트 사이즈가 몇 가지인가요? 

☑️ 같은 역할의 컬러인데 hex 값이 미묘하게 다른 곳이 있나요?

→ 이 숫자가 클수록 디자인 시스템이 시급한 겁니다. 

미니멀 디자인 시스템, 이것만 있으면 됩니다.

거창하게 생각하지 마세요. 

아래 5가지 파운데이션만 정리하면 당장 내일부터 작업 속도가 달려져요.

 1️⃣ 컬러 팔레트 (Color Palette) - "색 수"보다 "역할 수"를 먼저 정하세요.

미니멀 팔레트의 핵심은 예쁜 색 조합이 아니라, 적은 수의 색을 구조적으로 쓰는 것이에요.

많은 분들이 "어떤 색을 쓸까?"부터 고민하는데, 순서가 반대예요.

"내 화면에서 색이 해야 할 역할이 뭐가 있지?" 부터 정의하고, 그 역할에 색을 입히는 거예요.

미니멀 컬러 역할 세트

이렇게 역할부터 정의하면 "색이 너무 많은 건 아닌지, 빠진 건 없는지" 판단이 쉬워져요.

💡 사수의 팁 - 토큰(Token)으로 관리하세요

여기서 한 단계 더 나아가면 디자인 토큰 개념이에요.

어렵게 생각하지 마세요. 

핵심은 색값을 직접 쓰지 말고, 역할 이름으로 연결하라는 거예요.

Figma의 Local Variables에서 이렇게 세팅하면 돼요.

1단계 - Primitive (원시값) : 실제 색상값을 저장하는 레이어

2단계 - Semantic (의미값) : "어디에 쓰는지"를 이름에 담는 레이어

이 구조를 쓰면 나중에 브랜드 컬러가 파란색에서 보라색으로 바뀌어도,

Primitive 한 곳만 수정하면 전체 화면이 한 번에 업데이트돼요.

다크 모드 대응도 같은 원리예요.

text/primary라는 이름은 유지하고, Light에서는 gray/900, Dark에서는 gray/100을 연결하면 끝.

왜 Blue-500 대신 action/primary로 이름을 짓냐면요,

나중에 브랜드 컬러가 초록색으로 바뀌었을 때 Blue-500이라는 이름이 초록색을 가리키는 웃긴 상황이 되버리거든요. 

역할 기반 네이밍이 훨씬 오래 갑니다.

⚠️ 접근성 체크 - 이건 꼭 지켜주세요 

미니멀하다는 이유로 연한 회색을 남발하면 실제 사용성이 크게 떨어져요.

특히 회색 기반 UI에서는 border, disabled, placeholder, secondary text가 서로 구분이 안 되는 문제가 자주 생겨요. 뉴트럴 스케일 간 간격을 충분히 벌려주세요.

2️⃣ 타이포그래피 (Typography) - 1개 폰트, 2개 웨이트로 끝내기 

미니멀 시스템에서는 색이 적은 대신 타이포가 정보 구조를 더 많이 담당해요.

그래서 텍스트 설계가 특히 중요합니다.

원칙은 간단해요.

폰트 종류를 여러 개 쓰면 미니멀한 느낌이 바로 깨져요.

폰트 1개, 웨이트는 Regular와 Bold 딱 2개로 시작하세요. 

Medium이나 Semi-bold를 섞기 시작하면 시각적 노이즈가 생겨요.

미니멀 타입 스케일 (비율 1.25 기준)

💡 사수의 팁 - 컬러와 타이포 조합 규칙

헤드라인에 굵고 큰 타이포를 썼다면 색은 절제하고, 반대로 강한 브랜드 컬러를 헤드라인에 쓴다면 서체는 단정하게.

둘 다 강하면 과도하게 튀어요.

실무에서 가장 안전한 조합

줄 간격(Line-height)은 폰트 크기의 140~150%로 통일하면 가독성이 확보돼요.

Body 16px이면 Line-height 24px, 자간(Letter-spacing)은 폰트가 커질수록 약간 줄여 (-1%~-2%) 밀도를 높이면 깔끔해요.

Figma에서 Text Styles로 등록해 두면 매번 수동으로 맞출 필요가 없어요.

이번 호는 여기까지!

11호에서 나머지 3가지에 대해서 자세히 다뤄볼게요.

궁금하셔도 조금만 기다려주세요 😉

그럼, 이번 주도 다들 힘내보아요!! 

화이팅!!