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

방구석 디자인 사수

구독자님 반가워요!

방구석 디자인 사수입니다.

지난 호에 이어서

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

3️⃣  간격 체계 (Spacing System) — 8pt 그리드가 정답이에요

디자인이 '뭔가 허접해 보이는' 원인의 80%는 간격이 제각각이기 때문이에요.

8pt 기반 간격 세트

Figma에서 이 값들을 Number Variables로 등록하고, Auto Layout을 적용할 때 이 변수들만 사용하도록 강제하면 컴포넌트 간 여백이 통일돼요.

💡 사수의 팁

"간격을 얼마로 해야 하지?"라고 고민이 들 때, 이 표에서 골라 쓰기만 하면 돼요. 

개발자가에게 핸드오프할 때도 "여기 16px, 저기 24px"처럼 일관된 숫자로 전달하면 구현 속도가 훨씬 빨라져요. (7~8호에서 다뤘던 QA 체크리스트 기억나시죠?)

4️⃣  핵심 컴포넌트 5개 — 이것만 먼저 만드세요

컴포넌트를 한꺼번에 50개 만들겠다고 하면 절대 시작 못 해요.

가장 많이 쓰는 5개만 먼저 만드세요.

그리고 미니멀 시스템에서 기억할 원칙 하나!

평상시에는 심플하고 플랫하지만, 사용자가 버튼을 눌렸을 때 확실한 변화가 느껴져야 해요.

맥북 트랙패드를 꾹 눌렀을 때의 단단한 햅틱 피드백 같은 거죠.

장식이 없는데 피드백까지 약하면, 시스템 전체가 가볍고 엉성해 보일 수 있어요.

미니멀 컴포넌트 스타터 키트

1) 버튼 (Button) - '누르는 맛'이 있는 버튼

Variant와 Statge:

미니멀 버튼의 디테일 - 하드 섀도우(Hard Shadow) 기법

Pressed 상태 구현 - 래퍼 프레임 + 상단 패딩 트릭

"그림자를 없애고 버튼을 아래로 이동"이라고 하면 간단할 것 같지만, 

Auto Layout안에서는 컴포넌트를 임의로 Y축 이동을 할 수 없어요. 

해결법은 다음과 같아요.

① 버튼 컴포넌트를 감싸는 래퍼 프레임을 하나 만들어요 → 래퍼 높이 = 버튼 높이 + 그림자 4px

② Variant별로 래퍼의 상단 패딩을 다르게 줘요. 

③ Pressed에서 상단 패딩 4px이 생기면서 버튼이 아래로 밀려 내려가고, 동시에 그림자가 사라져요.

래퍼 높이가 고정이라 주변 레이아웃도 안 밀려요 → 그림자가 있던 4px 공간으로 버튼이 쑥 들어가면서, 물리적으로 눌린 것 같은 착시가 만들어져요.

④ Figma Interactive Components에서 Pressed 애니메이션을 100m 이하로 설정하면 즉각적인 조작감이 완성돼요.

2) 인풋 필드 (Input Field)

3) 카드 (Card)

4) 네비게이션 바 (Navigation Bar)

5) 모달/다이얼로그 (Modal)

💡 사수의 팁

모든 컴포넌트에 공통으로 적용할 상태(State) 체크리스트가 있어요.

처음부터 완벽하게 다 만들려고 하지 마세요.

Default와 Hover, Disabled만 먼저 만들고, 쓰면서 나머지를 추가하는 게 가장 빠른 방법이에요.

5️⃣ 간단한 사용 가이드 — Do / Don't로 제약을 명확하게

"문서화"라고 하면 무겁게 느껴지지만, Figma 파일 안에 페이지 하나 추가하는 거예요.

여기서 핵심은 "자유롭게 쓰세요"가 아니라, 제약을 명확히 두는 것이에요.

미니멀 시스템이 일관성을 유지하려면 Do / Don't 가이드라인이 반드시 필요해요. 

예를 들면

"📖 Guide" 페이지에 이것만 적어두세요

이게 왜 중요하냐면요, 나 혼자 쓰더라도 3개월 후의 내가 기억 못 하기 때문이에요.

"이 버튼 왜 이렇게 만들었지?" 하는 순간이 반드시 옵니다.

미래의 나를 위한 메모라고 생각하세요.

그리고 개발자에게도 이 페이지 링크를 공유하면 돼요.

장문의 문서 대신 "여기 보시면 됩니다" 한 마디로 끝.

일반 디자인 시스템 vs 미니멀 디자인 시스템

지금까지 설명한 내용을 표로 정리해 볼게요.

AI 활용하기 — 단계별로 쪼개서 물어보세요

디자인 시스템 구축에도 AI가 꽤 유용해요.

다만 여기서도 원칙은 같아요.

AI는 초안 / 검토 도구로만 쓰고, 최종 결정은 내가 하는 것.

여기서 중요한 팁 하나!

AI에게 컬러 추천 + 대비 체크 + 토큰 네이밍을 한꺼번에 물어보면 각 항목을 얕게 다루게 돼요.

단계별로 쪼개서 물어보고, 각 단계마다 내 판단으로 검증하고 수정하는 게 훨씬 정확한 결과를 줘요. 

Step 1 — 컬러 추천받기

💡 포인트

[구체적 도메인] 자리에 내 서비스 도메인을 넣고, 타겟 사용자와 경쟁 서비스 정보를 함께 주면 AI가 맥락에 맞는 추천을 해줘요. "B2B SaaS"만으로는 금융인지 HR인지 모니터링인지 AI가 판단할 수 없거든요.

Step 1 결과 예시

→ 여기서 받은 결과를 내 화면에 직접 넣어보고, 괜찮다 싶으면 다음 단계로!

Step 2 — 받은 결과를 검증하기

Step 2 결과 예시

Step 3 — 토큰 구조 잡기

Step 3 결과 예시

Primitive Tokens (실제 색상값)

Semantic Tokens (Light 모드)

Dark 모드 매핑 예시

AI 사용 시 주의점

"그래도 AI로 만들면 되지 않나요?"

맞아요. 만들 수 있어요.

그런데 그렇게 만든 시스템은 "왜 이 색인지", "왜 이 간격인지", "왜 상태가 필요한지"를 내가 모르는 시스템이예요.

기획자가 "이 버튼 색 좀 바꿔주세요"라고 했을 때, 시스템을 직접 만든 사람은 이렇게 말할 수 있어요.

근거 있는 대화가 되는 거죠.

내가 시스템의 구조와 이유를 알아야 "이건 취향의 영역이 아니라 시스템의 일관성 문제입니다"라고 정중히 방어할 수 있어요.

그리고 AI가 만든 시스템은 "우리 제품"을 모른다는 점도 중요해요.

AI는 일반적인 베스트 프랙티스를 줄 수는 있지만, "우리 사용자가 40대 이상이라 14px 본문은 너무 작다", "우리 서비스는 데이터 테이블이 많아서 Compact 간격이 필요하다" 같은 맥락은 판단 못 해요.

그 맥락을 읽고 시스템을 조정하는 건 결국 디자이너의 몫이에요.

유지보수 문제도 있어요.

디자인 시스템은 만드는 게 30%이고, 제품이 성장하면서 함께 업데이트 하는 게 70%예요.

내가 구조를 이해하지 못한 시스템은 뭔가 하나 바꾸려고 할 때 어디를 건드려야 할지 모르게 돼요.

"이 토큰을 바꾸면 어디까지 영향이 가는 거지?"를 판단하려면 처음에 직접 설계해본 경험이 반드시 필요해요.

처음에 한 번이라도 직접 만들어보면서 구조를 이해한 사람이, 이후에 AI나 플러그인을 검증하면서 쓸 수 있는 사람이 되는 거예요. 

직접 만들어본 경험이 있어야 AI가 뱉어 내 결과물을 보고 "이건 맞고, 이건 우리 제품에 안 맞아"를 구분할 수 있거든요.

디자인 시스템 흔한 실수 3가지

디자인 시스템을 처음 만들 때 자주 하는 실수들이에요.

실수 1: 처음부터 너무 많이 만들려고 한다

"컴포넌트 30개는 있어야 시스템이지!" → 3개월째 미완성 → 결국 안 씀

→ ✅ 핵심 5개부터. 쓰다가 필요하면 그때 추가하세요.

실수 2: 예쁘게 만드는 데만 집중한다

가이드 페이지를 포트폴리오처럼 꾸미느라 정작 컴포넌트는 안 만듦

→ ✅ 가이드는 읽을 수 있으면 충분해요. 예쁜 문서보다 쓸 수 있는 컴포넌트가 100배 가치 있어요.

실수 3: 한 번 만들고 업데이트를 안 한다

디자인 시스템은 한 번 완성되는 것이 아니에요. 제품이 변하면 시스템도 변해야 해요.

→ ✅ 간단한 Governance 규칙을 정해두세요. "새로운 패턴이 3번 이상 반복되면 컴포넌트로 만든다", "분기마다 한 번 사용하지 않는 컴포넌트 정리한다" 이 정도면 충분해요. Figma 파일 이름에 버전 날짜를 적어두면 업데이트 시점도 놓치지 않아요. (예: "DS_v1.0_2026.03")

한 줄 요약

10~11호 뉴스레터에서 알려드린 5가지(컬러 토큰, 타이포그래피, 간격 체계, 핵심 컴포넌트, Do/Don't 가이드)만 갖춰도, 내일 작업할 때 체감이 확 달라질 거예요.

거창하게 시작하지 않아도 괜찮아요.

작게 시작하고, 쓰면서 키우는 게 진짜 프로의 방법이에요.

이번 주도 수고 많으셨어요.

다음 편에서 또 만나요! 💪