본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
이번 디자인 시스템 강의를 들으며, 디자인 시스템은 단순히 UI를 예쁘게 정리해두는 문서가 아니라, 제품과 조직이 성장하면서도 흔들리지 않도록 지탱해주는 기반이라는 점이 인상 깊었다. 특히 “디자인 시스템은 한 번에 완성되는 것이 아니라 지속적으로 진화해야 한다”는 관점이 기억난다.
또한 파운데이션, 컴포넌트, 패턴, 문서화로 이어지는 구조를 통해 디자인 시스템이 단순한 디자이너의 산출물이 아니라 개발, 기획, 비즈니스 전반과 연결된 공통 언어라는 점이 중용하다. 일관성, 효율성, 확장성, 온보딩 비용 절감 등 디자인 시스템의 목적이 곧 비즈니스 가치로 이어진다는 점도 다시 한번 실감하게 되었다. 디자인 시스템이 디자이너의 취향이나 완벽주의를 위한 도구가 아니라, 팀 전체의 속도와 신뢰를 높이기 위한 전략적 선택이라는 메시지였다. 이번 강의를 통해 디자인 시스템을 ‘만들어야 할 것’이 아니라, ‘제품과 함께 키워가야 할 것’으로 바라보게 되었고, 앞으로 어떤 프로젝트에서든 이 관점을 기반으로 디자인 결정을 해나가야겠다는 생각이 들었다.
디자인 시스템, 왜 필요하고 어떻게 만들까?
디자인 시스템 개요
이번 파트에서 다룰 내용
- 디자인 시스템의 개념과 목적
- 디자인 시스템 vs 스타일 가이드 차이
- 파운데이션(Foundation)의 개념
- 컴포넌트와 패턴 구조
- 접근성(Accessibility)
- UX 라이팅(보이스 & 톤)
- 인터랙션 디자인
- 레이아웃 시스템
- 디자인 토큰(Design Tokens)
- 디자인 시스템 구축 및 운영 프로세스
1. 디자인 시스템이란?
정의
- 디자인 원칙, 스타일 가이드, UI 컴포넌트, 코드 스니펫, 사용 규칙을 포함한 통합 라이브러리
- 한 번 만들고 끝나는 산출물이 아니라 제품 성장에 따라 지속적으로 관리·진화되는 시스템
디자인 시스템의 구성 요소
- Foundation (기초 요소)
- 컬러, 타이포그래피, 그리드, 아이콘, 간격, 쉐입 등
- Components
- 버튼, 입력창, 카드 등 재사용 가능한 UI 요소
- Patterns
- 로그인, 검색 등 컴포넌트가 결합된 기능 단위
- Documentation
- 디자인 원칙, 사용 가이드
- Do / Don’t, 예외 케이스 설명
2. 디자인 시스템의 목적
왜 디자인 시스템이 필요한가
- 일관성 확보
- 누가 만들어도 동일한 UX·브랜드 경험 제공
- 단, 소규모 조직에서는 우선순위가 아닐 수도 있음
- 효율성 증대
- 재사용을 통해 디자인·개발 속도 향상
- 반복 작업 감소
- 커뮤니케이션 비용 절감
- 공통 언어(컴포넌트, 토큰)로 협업 효율 향상
- 확장성 지원
- 서비스 규모·플랫폼 확장 시에도 품질 유지
- 브랜드 신뢰도 상승
- 통일된 UI → 제품 신뢰감 강화
- 기술 부채 감소
- 중복 코드 제거
- 유지보수 비용 절감
- 빠른 시장 출시
- 검증된 컴포넌트 조합 → 프로토타이핑·배포 가속
- 온보딩 비용 절감
- 신규 디자이너·개발자의 빠른 적응 가능
3. 디자인 시스템 구축의 기본 관점
- 디자인 시스템은 한 번에 완성되지 않는다
- 대부분의 경우:
- 제품은 이미 존재
- 디자인 시스템은 없음
- 따라서 기존 제품을 기반으로 전수조사 → 정리 → 시스템화하는 접근이 필요
4. 디자인 시스템 구축 단계
1) 시각적 전수조사 (Audit)
- 기존 제품 UI를 모두 캡처
- 불일치 요소 / 반복 패턴 파악
2) 디자인 원칙 정의
- 제품의 핵심 가치 반영
- 디자인 선택의 기준이 되는 원칙 수립
3) 파운데이션 정의
- 컬러, 타이포, 간격 등을 변수화
- 디자인 툴(Figma)과 코드 간 동기화
4) 컴포넌트 제작
- 아토믹 디자인 방법론 활용
- 재사용 가능한 컴포넌트 라이브러리 구성
5) 문서화 및 배포
- Figma, Storybook 등을 활용
- 사용법, 예외 케이스, 코드 사용 가이드 포함
6) 유지보수 & 거버넌스
- 시스템 업데이트 규칙 정의
- 기여 방식(Contribution) 설정
- 버전 관리
- 디자인 시스템의 지속적인 진화 관리
5. 시각적 전수조사 체크리스트
준비 단계
- 조사 범위 설정
- 전체 페이지 vs 핵심 플로우
- 플랫폼 구분
- Web / Mobile / iOS / Android / Admin
- 정리 도구 선택
- Figma, Miro 등
- 분류 기준 정의
- Foundation 중심 / Component 중심 / Pattern 중심
컬러(Color)
- 브랜드 컬러
- 페이지별 HEX 값 불일치 여부
- 그레이 스케일
- 과도한 컬러 수 사용 여부
- 시스템 컬러
- 성공(초록), 에러(빨강), 경고(노랑) 일관성
- 투명도
- opacity 값의 규칙성 여부
타이포그래피(Typography)
- 폰트 패밀리 수
- 3개 이상 혼용 여부
- 스타일 위계
- H1, H2, Body 구조 명확성
- 웨이트 사용
- 기준 없이 남발되고 있지 않은지
- 행간(Line-height)
- 규칙 존재 여부
레이아웃 & 스페이싱
- 그리드
- 마진, 컬럼 값 일관성
- 간격 규칙
- 4px / 8px 배수 사용 여부
- 임의 값(10, 15 등) 남용 여부
아이콘
- 스타일 통일성
- 라인 vs 필드
- 선 굵기 일관성
- 사이즈 규칙
- 24, 32 등 표준화 여부
UI 컴포넌트
- 버튼
- Primary / Secondary / Disabled / Text 버튼
- 입력 요소
- Text field, Checkbox, Radio, Toggle, Dropdown
- 내비게이션
- GNB / LNB
- 탭, 브레드크럼, 페이지네이션
- 피드백 UI
- Modal, Toast, Tooltip, Alert
- 데이터 디스플레이
- 카드, 리스트, 테이블, 태그, 배지, 아바타
디자인 시스템 – 파운데이션 & 컴포넌트 구축 노트
1. 파운데이션(Foundation)의 역할
- 파운데이션은 디자인 시스템의 기초
- 실질적으로는 확장 가능한 스타일 가이드
- 이후 모든 컴포넌트, 패턴, 페이지의 기준이 됨
2. 컬러(Color) 정의 체크리스트
2.1 컬러의 종류
- Primary Color
- 브랜드 정체성을 대표하는 메인 컬러
- 화면에서 가장 중요한 액션/포인트에 사용
- Secondary / Accent Color
- 보조 컬러, 강조 또는 서브 액션에 사용
- Semantic Color (기능적 컬러)
- 의미를 가진 컬러
- 성공(Success): 초록
- 오류(Error): 빨강
- 경고(Warning): 노랑
- 정보(Info): 파랑
- Neutral Color (Grayscale)
- 배경, 텍스트, 라인 등에 사용
- 과도한 그레이 단계 사용 여부 점검 필요
2.2 접근성(Accessibility)
- 텍스트와 배경의 명도 대비 비율
- WCAG 기준: 4.5:1 이상
- 색상만으로 의미 전달 ❌
- 컬러 정의 시 반드시 대비 체크
3. 타이포그래피(Typography) 정의
3.1 기본 설정
- 국문 / 영문 / 숫자에 사용할 폰트 패밀리 지정
- 과도한 폰트 혼용 지양
3.2 타입 스케일(Type Scale)
- H1, H2, Subtitle, Body, Caption 등
- 각 스타일별 폰트 사이즈 명확히 정의
3.3 행간(Line-height)
- 가독성 기준
- 글자 크기의 1.3 ~ 1.5배
- 배수 규칙으로 관리
3.4 폰트 웨이트
- Regular / Medium / Semibold / Bold 등
- 제한된 웨이트만 사용하도록 규칙화
4. 그리드 & 스페이싱(Grid & Spacing)
- 8pt Grid System 기본
- 예외 대응용으로 4pt 허용
- 모든 간격은 4 또는 8의 배수
4.1 컬럼 시스템
- Mobile: 4 columns
- Tablet: 8 columns
- Desktop: 12 columns
- 브레이크포인트 기준 명확히 정의
5. 아이콘 & 쉐입(Icon & Shape)
5.1 아이콘
- 라인 아이콘 vs 필 아이콘 중 하나로 통일
- 라인 굵기 규칙 (예: 1.5px 또는 2px)
- 기본 사이즈: 24×24
- 중앙 정렬 필수 (교체 시 깨짐 방지)
5.2 Radius (모서리)
- 버튼: 예) 8px
- 카드 / 모달: 예) 16px
- 컴포넌트별 일관된 규칙 필요
6. 그림자(Elevation / Shadow)
- 화면에서 가까울수록:
- 그림자: 진하고 얇음
- 멀어질수록:
- 그림자: 옅고 넓음
- 보통 4~5단계 레벨로 정의
- 각 단계별 사용처 명확히 구분
7. 아토믹 디자인(Atomic Design) 개념
구조 단계
- Atom (원자)
- 텍스트 스타일, 컬러, 아이콘
- 최소 단위 요소
- Molecule (분자)
- 원자들의 조합
- 예: Search Form (Label + Input + Button)
- Organism (유기체)
- 분자들의 조합
- 예: Global Navigation Bar
- Template
- 유기체들의 레이아웃 구조
- Page
- 실제 콘텐츠가 들어간 완성 화면
➡️ Bottom-up 방식
작은 단위 → 큰 화면으로 확장
8. 디자인 토큰(Design Token)
- 컬러, 폰트, 간격을 변수화
- 예:
- ❌ #FF0000 직접 입력 (하드코딩)
- ✅ color.error 토큰 사용
- 토큰을 통해:
- 디자인 ↔ 개발 동기화
- 유지보수 용이
9. 원자(Atom) 단위 체크리스트
- 디자인 토큰 연결 여부
- 상태 정의
- Default / Hover / Pressed / Focus / Disabled
- 접근성
- 명도 대비 4.5:1 이상
- 터치 영역
- 최소 44×44 또는 48×48
- 아이콘 정렬 및 규격 통일
10. 분자(Molecule) 단위 체크리스트
- Auto Layout 적용 여부
- 텍스트 길이 변화 대응
- 옵션으로 제어 가능한지
- (아이콘 on/off 등 → Variant 활용)
- 내부 패딩/간격 규칙 준수
11. 유기체(Organism) 단위 체크리스트
- 반응형 대응
- Mobile / Tablet / Desktop
- 실제 데이터 삽입 시 깨짐 여부
- 다국어 적용 시 레이아웃 안정성
- 최대 너비 및 배경 처리 규칙
12. 템플릿(Template)로 확장
- GNB + Hero + Section 조합
- 반복 가능한 페이지 구조 완성
- 이후 실제 콘텐츠를 넣어 Page 생성
https://atomicdesign.bradfrost.com/chapter-2/
Atomic Design Methodology | Atomic Design by Brad Frost
Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before.
atomicdesign.bradfrost.com
디자인 시스템 – 핸드오프 · 문서화 · 거버넌스 노트
1. 아토믹 디자인의 완성 단계
- 원자 → 분자 → 유기체 → 템플릿 이후
- **실제 콘텐츠(텍스트, 이미지, 데이터)**를 채우면 최종 화면(Page) 완성
- 이 전 과정을 아토믹 디자인 방법론이라 부름
- “부품을 조립해 화면을 만든다”는 개념
2. 핸드오프(Hand-off) 체크리스트
👉 디자이너 → 개발자 전달 단계
2.1 네이밍 컨벤션
- 디자인 컴포넌트 이름 ↔ 개발 코드 이름 일치
- 예시:
- Design: btn / primary / large
- Code: Button variant="primary" size="large"
- 구조와 개념이 동일해야 함
- 반드시 개발자와 함께 검증
2.2 컴포넌트 설명(Description)
- Figma 컴포넌트 Description 영역 활용
- 포함 내용:
- 어디에 사용하는지
- 어떤 경우에 쓰지 말아야 하는지
2.3 레이어 정리 (매우 중요)
- ❌ Rectangle 1 / Group 38 같은 기본 이름
- ✅ 역할이 드러나는 레이어 이름
- 개발자는 레이어 구조를 그대로 참고함
2.4 에셋 익스포트 설정
- 아이콘 / 이미지 Export 설정 확인
- 포맷(SVG, PNG 등)
- 사이즈
- 네이밍 규칙
3. 문서화 & 배포 단계 체크리스트
3.1 온보딩 가이드
- 신규 디자이너 / 개발자가 처음 봤을 때:
- 어떻게 설치하는지
- 어디서 시작하는지
- 디자인 시스템도 툴킷 설치 개념이 있음
3.2 디자인 원칙 명시
- 문서 첫 페이지에 위치하는 것이 이상적
- “왜 이렇게 디자인하는가”에 대한 기준 제공
3.3 변경 이력 관리 (Changelog)
- 디자인 시스템은 살아있는 시스템
- 반드시 포함:
- 버전
- 변경 내용
- 변경 날짜
4. 컴포넌트 문서화 체크리스트
4.1 기본 정의
- 이 컴포넌트는 무엇인가
- 언제 사용해야 하는가
- 언제 사용하면 안 되는가
예:
- Primary Button
→ 페이지의 주요 행동에만 사용
4.2 Anatomy (구성 요소 설명)
- 컴포넌트 내부 요소의 명칭 정리
- 각 파트가 무엇을 의미하는지 명확히
4.3 상태(State) 정리
- Default
- Hover
- Pressed
- Disabled
- Focus
→ 모든 상태가 시각적으로 나열되어 있어야 함
4.4 Do / Don’t 가이드
- ✔ 올바른 사용 예
- ✖ 잘못된 사용 예
- 비교 형태가 가장 이해하기 쉬움
5. 개발자 가이드 영역
- 코드 Snippet 제공
- 복사 → 바로 사용 가능
- 설정 방법(Configuration) 정리
- 필요한 라이브러리 / 패키지 명시
6. 디자이너 가이드 영역
- Figma 파일 링크 제공
- 컴포넌트 사용 시:
- 마진
- 레이어 규칙
- 콘텐츠 가이드
- 버튼 라벨 최대 글자 수
- 문구 톤 & 매너
(UX Writing / Content Design과 연결)
7. 접근성 & 글로벌라이제이션
접근성 체크
- 키보드 탭 이동 순서
- 포커스 링 동작
- 스크린 리더가 읽는 방식
- 컴포넌트가 어떻게 읽히는지 명시
글로벌 대응
- 긴 언어 (예: 독일어)
- RTL 언어 (예: 아랍어)
- 다국어 환경에서 UI가 어떻게 동작하는지 정의
8. 거버넌스(Governance)
기여 가이드
- 새로운 컴포넌트 요청 방법
- 버그 제보 프로세스
- Git PR
- Slack 채널 등
책임자 명시
- 디자인 시스템 관리자
- 담당자 연락처
9. 유지보수 & 운영 프로세스
운영 방식 정의
- 전담 디자인 시스템 팀 vs 분산 관리
- 조직 규모에 맞는 방식 선택
기여에 대한 인정
- 기여자 보상 / 인정 체계 존재 여부
시스템 포함 기준
- 예시 기준:
- 3개 이상의 페이지에서 사용 → 시스템 등록
- 단일 페이지 전용 → 시스템 제외
- 무분별한 확장 방지
패스트캠퍼스, 환급챌린지, 습관챌린지, 패스트캠퍼스후기, 습관형성, 직장인자기계발
https://fastcampus.info/4oKQD6b
💙 2026 패캠구독제 LAST SALE : UP TO 98% 💙 | 패스트캠퍼스
(~12/14) 선착순 120명에게는 [1개월 무료 혜택 쿠폰]을, 신규 가입자에게는 [2개월 무료 혜택 쿠폰]도 드리니 서둘러 확인해보세요!
fastcampus.co.kr
