디자인 시스템이란?
"재사용 가능한 컴포넌트들이 명확한 표준과 함께 조직되어,
대규모로 디자인을 관리할 수 있게 하는 시스템"
디자인 시스템의 주요 이점
1. 일관성 (Constantly Evolving)
a. 진화하는 시스템
b. 버전 관리
c. 지속적 개선
2. 효율성 증가
a. 의사결정 시간 단축
b. 반복 작업 제거
c. 빠른 프로토타이핑
3. 확장성 (Scalability)
a. 대규모 팀 협업
b. 다중 플랫폼 대응
c. 제품군 확장
4. 품질 향상
a. 검증된 패턴 사용
b. 접근성 기본 탑재
c. 일관된 사용자 경험
If 디자인 시스템이 없으면
1. 매일 반복되는 질문 ("이거 어떤 버튼 써요?")
∙ 개발자: "회원가입 버튼은 어떤 스타일로 만들어요?"
∙ 디자이너: "음... 로그인 화면에 있는 거랑 똑같이 하면 돼요"
∙ 개발자: "그게 어떤 건데요? 코드 보니까 버튼이 15종류나 있는데..."
2. 플랫폼 간 경험 파편화 ("모바일이랑 웹이 왜 달라요?")
∙ 웹: 송금 확인 버튼이 오른쪽 하단
∙ 모바일: 송금 확인 버튼이 화면 중앙
∙ 사용자: "같은 앱 맞아요? 가짜 앱 아니에요?"
3. 중복 작업의 늪 ("그거 이미 만들어둔 거 있는데")
∙ PM: "이번에 새로운 알림 컴포넌트 필요해요"
∙ 개발자A: "제가 지난달에 만들어뒀어요"
∙ 개발자B: "어? 저도 만들었는데..."
∙ 개발자C: "저는 더 좋은 걸로 만들었어요"
→ 같은 알림 컴포넌트가 3개 존재, 각각 다른 페이지에서 사용 중
Color System - 색상의 언어
Level 1: Primitive Palette (원시 팔레트)
모든 색상의 재료가 되는 기본 팔레트
특징:
∙ 브랜드와 무관한 순수 색상
∙ 50-900으로 명도 표현
∙ 모든 색상군에 동일 적용
Level 2: Semantic Palette (의미 팔레트)
색상에 우리 제품의 의미를 부여
특징:
∙ 용도가 명확한 이름
∙ 제품 전체에서 일관된 의미
∙ 브랜드 변경 시 쉽게 교체
Level 3: Component Palette (컴포넌트 팔레트)
각 컴포넌트의 구체적 사용 정의
특징:
∙ 컴포넌트별 명확한 규칙
∙ 상태별 색상 정의
∙ 개발자가 고민할 필요 없음
실전 적용: 다크 모드 대응
👎🏻
잘못된 접근: 단순 반전
∙ 라이트: 흰 배경 + 검은 글씨
∙ 다크: 검은 배경 + 흰 글씨
문제점:
∙ 눈이 아픔 (대비 너무 강함)
∙ 색상 의미 왜곡
∙ 브랜드 정체성 상실
👍🏻
올바른 접근: 체계적 조정
라이트 모드:
∙ Background: Gray-50 (#FAFAFA)
∙ Text: Gray-900 (#111827)
∙ Primary: Blue-600 (#2563EB)
다크 모드:
∙ Background: Gray-900 (#111827)
∙ Text: Gray-100 (#F3F4F6)
∙ Primary: Blue-500 (#3B82F6) ← 채도 낮춤
핵심:
∙ 순수 검정/흰색 피하기
∙ 채도 조정으로 편안함 확보
∙ 의미는 유지, 톤만 조정
Typography System - 정보의 위계
일관된 타입 스케일:
∙ Page Title: 32px (모든 주요 페이지)
∙ Section Title: 24px (모든 섹션)
∙ Card Title: 20px (모든 카드)
사용자 반응:
∙ "아, 이게 페이지 제목이구나"
∙ "이건 하위 섹션이구나"
∙ (의식하지 않고 자연스럽게 이해)
Spacing System - 공간의 리듬
Padding (안쪽 여백): "이 요소가 숨 쉴 공간"
∙ 버튼 내부: 클릭 영역 확보
∙ 카드 내부: 내용물 보호
∙ 모달 내부: 답답함 방지
Margin (바깥 여백): "다른 요소와의 거리"
∙ 버튼 사이: 구분 명확히
∙ 섹션 사이: 내용 분리
∙ 카드 사이: 개별성 강조
정렬 (Alignment)
Edge Alignment (가장자리 정렬)
∙ 왼쪽 정렬: 읽기 시작점 통일
∙ 오른쪽 정렬: 숫자, 금액 표시
∙ 상단 정렬: 카드 UI
∙ 하단 정렬: 바닥글 요소
Center Alignment (중앙 정렬)
∙ 수평 중앙: 제목, CTA
∙ 수직 중앙: 아이콘과 텍스트
Optical Alignment (시각적 정렬)
"수학적으로 맞아도 눈에는 틀려 보인다"
원과 사각형의 크기:
∙ □ = 16x16px
∙ ○ = 18x18px (시각적으로 동일하게 보임)
∙ 이유: 원은 면적이 작아 보임
텍스트와 아이콘 정렬:
∙ Baseline 정렬 ❌ (아이콘이 너무 낮아 보임)
∙ 시각적 중앙 정렬 ✅ (x-height 기준)
Button Component
1. Default (기본)
∙ 외관: 평상시 모습
∙ 목적: 클릭 가능함을 암시
∙ 디자인
∙ 명확한 경계
∙ 충분한 대비
∙ 클릭 유도
2. Hover (호버)
∙ 외관: 마우스 올렸을 때
∙ 목적: 인터랙티브함 강조
∙ 디자인
∙ 살짝 밝아지거나 어두워짐
∙ 그림자 추가
∙ 커서 변경 (pointer)
3. Active/Pressed (활성/누름)
∙ 외관: 클릭하는 순간
∙ 목적: 즉각적 피드백
∙ 디자인
∙ 눌린 느낌 (그림자 감소)
∙ 색상 더 진하게
∙ 크기 미세하게 축소 (선택적)
4. Disabled (비활성)
∙ 외관: 사용 불가 상태
∙ 목적: 조건 미충족 알림
∙ 디자인
∙ 채도 낮춤 (회색조)
∙ 투명도 적용 (opacity: 0.5)
∙ 커서 변경 (not-allowed)
5. Loading (로딩)
∙ 외관: 처리 중
∙ 목적: 진행 중임을 알림
∙ 디자인
∙ 스피너 표시
∙ 텍스트 변경 ("저장 중...")
∙ 클릭 방지
Form Components - 입력의 과학
Input Field의 구조
Label (라벨)
┌──────┐
Placeholder Text
└──────┘
Helper Text (도움말)
Navigation Patterns - 길찾기의 디자인
모바일 네비게이션
1. Hamburger Menu
∙ 장점: 공간 절약, 많은 메뉴 수용
∙ 단점: 발견성 낮음 (숨겨짐), 추가 탭 필요
∙ 사용: 보조 메뉴, 설정 등 자주 안 쓰는 기능
2. Tab Bar (하단 탭)
∙ 장점: 항상 보임, 한 손 조작 용이, 빠른 전환
∙ 단점: 3-5개 제한, 화면 공간 차지
∙ 사용: 주요 섹션 이동, 핵심 기능 접근
3. Navigation Drawer
∙ 장점: 계층 구조 표현, 풍부한 정보
∙ 단점: 화면 전환 필요, 컨텍스트 상실
∙ 사용: 복잡한 앱, 많은 카테고리
데스크톱 네비게이션 패턴
1. Top Navigation
∙ 구조: [Logo][Menu1] [Menu2][Menu3] [Search][User]
∙ 장점: 전통적, 익숙함, 브랜딩 공간
∙ 단점: 수직 공간 차지, 메뉴 개수 제한
2. Side Navigation
∙ 구조
∙ ├─ Menu1
∙ ├─ Menu2
∙ │ ├─ Submenu1
∙ │ └─ Submenu2
∙ └─ Menu3
∙ 장점: 많은 메뉴 수용, 계층 구조 명확
∙ 단점: 수평 공간 차지 모바일 어려움
Modal & Overlay System
모달 사용 사례
1. 중요한 정보 전달
a. 사용자에게 피드백을 요청하는 경우
b. 사용자 행동 수정을 위한 정보 제공
2. 최근 사용자 행동 확인
a. 옵션 수정 확인
3. 레이저 포커싱
a. 하나의 특정 작업에 집중
b. 자체 포함된 프로세스
c. 사용자를 일반적인 흐름에서 벗어나게 함
d. 제한된 시간 동안
4. 예시: 업로드된 이미지 편집, 상태 업데이트
Modal (모달)
∙ 용도: 중요한 작업, 확인 필요
∙ 특징
∙ 배경 dim (overlay)
∙ Focus trap
∙ ESC로 닫기
Popover (팝오버)
∙ 용도: 간단한 정보, 도구
∙ 특징
∙ 특정 요소 기준 위치
∙ 작은 크기
∙ 클릭 outside 닫기
개인 과제
-
인터넷에서 공개된 디자인 시스템 웹사이트를 하나 선택해 방문합니다.
-
사이트에 정의된 디자인 시스템의 구성 요소들을 살펴보고, 어떤 방식으로 정리되고 설명되어 있는지 학습한 내용을 바탕으로 확인해 봅니다.
-
더 효과적인 제품 디자인 및 개발을 위해 특별히 고려된 요소들을 발견하고, 이것이 어떻게 팀의 협업과 개발 속도를 높이는지 분석해 봅니다.
-
해당 제품의 핵심 사용자나 사용 맥락에 맞춰 특별히 설계된 고유 요소들을 발견하고, 왜 이 제품에만 이런 특별한 규칙이 필요했는지 분석해 봅니다.
