Appearance

Design System Implementation Guide ​

💡 디자인 시스템이란? ​

참고 ) https://pixso.net/kr/skills/design-system/

참고 ) ( 배민 방문 이후 느꼈던 걸 기반으로 작성 했던 birggs 블로그 글 ) https://www.notion.so/irontrain/1c433fc5e9a5806e9190e382310581a1?pvs=4

디자인 시스템(Design System)은 일관된 UI/UX를 위한 규칙, 컴포넌트, 가이드를 모아둔 체계적인 도구입니다.

디자인뿐만 아니라 개발자, 기획자, 모든 조직 구성원이 함께 사용하는 협업 도구입니다.

쉽게 말해, 제품을 만들 때 쓰는 부품 모음집이라고 생각하면 됩니다.

✨ 왜 디자인 시스템이 필요한가? ​

  • ✅ 일관성 있는 사용자 경험 제공
    • 화면마다 다른 스타일, 패턴으로 인한 혼란 방지
  • ✅ 커뮤니케이션 비용 절감
    • 디자이너 없이도 개발자, 기획자가 공통된 기준으로 작업 가능
  • ✅ 개발 효율성 향상
    • 재사용 가능한 컴포넌트를 통해 빠른 개발 가능
  • ✅ 유지보수 용이
    • 수정사항이 발생할 때 한 곳에서 수정하면 여러 곳에 자동 반영

🔥 우리 조직의 상황 ​

현재 우리 조직은 전담 디자이너가 없는 환경으로, 개발자와 오 이사님께서 직접 디자인 요소를 결정하고 있습니다.

문제점 ​

  • 기능마다 디자인이 다름
  • 버튼, 폼, 색상 등의 기준 없음
  • 새로 만드는 화면마다 스타일을 새로 정의해야 함

🎯 디자인 시스템 도입 목표 ​

  1. 디자인 기준 정리
    • 색상, 폰트, 버튼, 폼, 레이아웃 등
  2. 컴포넌트화
    • 실제 코드로 재사용 가능한 UI 컴포넌트 제작
  3. 공통 가이드 문서화
    • 누구나 보고 따라할 수 있는 가이드 제공

📦 일반적인 디자인 시스템 구성 요소 ​

구성 요소설명
색상(Color)브랜드 색상, 상태 색상(성공, 실패, 경고 등)
타이포그래피폰트 종류, 크기, 굵기, 줄간격 등
버튼(Button)기본, 강조, 비활성, 로딩 상태
입력(Input)텍스트필드, 드롭다운, 체크박스, 라디오 버튼 등
레이아웃그리드 시스템, 여백 규칙, 반응형 가이드
아이콘공통으로 사용하는 아이콘 모음

✅ 도입 절차 ​

  1. 디자인 시스템 초안 작성
    • 조직 내 사용중인 UI, 디자인 패턴 분석
    • 디자인 시스템 베이스 문서 및 코드 작성
  2. 공유 및 피드백
    • 조직 구성원에게 디자인 시스템 초안 공유
    • 개선사항 피드백 수집 및 반영
  3. 정식 도입
    • 신규 개발 시 디자인 시스템 준수
    • 기존 화면도 점진적으로 시스템 적용
  4. 지속적인 관리 및 업데이트
    • 신규 컴포넌트, UI 패턴 발견 시 디자인 시스템에 반영

📚 디자인 시스템 규칙 (필수 준수) ​

  • 색상, 폰트, 여백, 컴포넌트는 디자인 시스템을 반드시 참고
  • 새로운 컴포넌트가 필요하면 시스템에 등록 후 사용
  • 기획서, 개발 작업 시 디자인 시스템 링크 및 스펙 명시
  • 피그마, 스케치 대신 시스템에 정의된 정보 우선 사용
  • 유지보수 시, 기존 시스템을 먼저 확인하고 수정 적용

🟣 컴포넌트 예시 ​

색상 (Color) ​

이름HEX설명
Primary#4F46E5주요 브랜드 색상
Success#22C55E성공 알림 색상
Error#EF4444에러 및 경고 색상
Background#F9FAFB기본 배경 색상

버튼 (Button) ​

  • 기본 버튼
  • 강조 버튼
  • 비활성 버튼
  • 로딩 버튼

폼 (Input) ​

  • 텍스트 입력창
  • 드롭다운
  • 체크박스
  • 라디오 버튼

타이포그래피 (Typography) ​

Text StyleFont SizeWeight사용처
Heading 124pxBold페이지 제목
Heading 220pxSemi-Bold섹션 제목
Body16pxRegular본문
Caption12pxRegular부가 설명

🛠️ 디자인 시스템 활용 방법 ​

  • [ ] 공통 디자인 가이드 문서 확인
  • [ ] 개발 시 반드시 컴포넌트 확인 후 적용
  • [ ] 기획서, 업무정의서에도 디자인 시스템 언급
  • [ ] 개선사항 발견 시 슬랙 또는 Notion에 공유

👩‍🏭 Example ​

🟣 디자인 시스템 v0.1 ​

1️⃣ Design Tokens ​

json
{
  "color": {
    "primary": "#4F46E5",
    "secondary": "#6D28D9",
    "success": "#22C55E",
    "error": "#EF4444",
    "warning": "#FACC15",
    "background": "#F9FAFB",
    "text-primary": "#111827",
    "text-secondary": "#6B7280"
  },
  "font": {
    "family": "Pretendard, sans-serif",
    "size": {
      "h1": "24px",
      "h2": "20px",
      "body": "16px",
      "caption": "12px"
    },
    "weight": {
      "regular": "400",
      "medium": "500",
      "bold": "700"
    }
  },
  "radius": "8px",
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px"
  }
}

2️⃣ Foundations (기초 디자인) ​

항목값
Primary Color#4F46E5
Secondary Color#6D28D9
Success Color#22C55E
Error Color#EF4444
Warning Color#FACC15
Background#F9FAFB
Text Primary#111827
Text Secondary#6B7280
FontPretendard, sans-serif
Border Radius8px
Spacing Scale4 / 8 / 16 / 24 / 32 px

3️⃣ Components ​

✅ Button ​

상태설명
Default기본 버튼 (Primary Color)
Secondary서브 버튼 (Secondary Color)
Disabled비활성 버튼 (opacity 0.5)
Loading로딩 중 버튼 (스피너 포함)

스펙 ​

  • padding: 12px 16px
  • border-radius: 8px
  • font-size: 16px
  • height: 40px
  • hover: 색상 90% 어두움
  • disabled: opacity 50%, cursor: not-allowed

✅ Input ​

상태설명
Default기본 입력창
Focusfocus 상태 (border 강조)
Error에러 표시 (border: error color)
Disabled비활성화 (opacity 0.5)

스펙 ​

  • padding: 10px 14px
  • border: 1px solid #D1D5DB
  • border-radius: 8px
  • height: 40px

✅ Checkbox ​

  • 기본 크기: 16px
  • border: 1px solid #D1D5DB
  • 체크 시: background: primary color
  • disabled 시 opacity: 0.5

4️⃣ Patterns ​

✅ Form Pattern ​

  • Label + Input + Error Text + Helper Text
  • Button은 항상 Form의 마지막에 위치
  • Error 발생 시 Input과 Text 동시에 강조

✅ Modal Pattern ​

  • Header + Body + Footer 구조
  • Footer에는 무조건 Button Group 사용
  • 배경 Dimmed (#000000, opacity 0.5)
  • border-radius: 16px

5️⃣ 추천 적용 방법 ​

  1. 이 시스템을 공통 컴포넌트로 구현

    (React, Vue, Vanilla 가능)

  2. Storybook으로 컴포넌트 테스트 및 관리

  3. 신규 개발 시

    → 반드시 이 시스템 기반으로 개발

  4. Notion에

    → 디자인 시스템 문서화

    → 사용 가이드 / 변경 이력 관리

1️⃣ Button (버튼) ​

▶ Button 종류 ​

  • Primary
  • Secondary
  • Disabled
  • Loading

▶ Button States ​

상태설명
Normal기본 상태
Hover마우스 오버 시
Active클릭 시
Disabled비활성화
Loading로딩 중

▶ Button Spec ​

속성값
height40px
padding12px 16px
border-radius8px
font-size16px
font-weight500
color#FFFFFF
background-colorPrimary
hoverbackground-color 90% 어두움
disabledopacity: 0.5, cursor: not-allowed

▶ HTML / CSS 예시 ​

html
html 복사편집
<button class="btn primary">Primary Button</button>
<button class="btn secondary">Secondary Button</button>
<button
  class="btn disabled"
  disabled
>
  Disabled Button
</button>
<button class="btn loading">Loading...</button>
css
css 복사편집 .btn {
  height: 40px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  color: #ffffff;
  cursor: pointer;
}
.btn.primary {
  background: #4f46e5;
}
.btn.primary:hover {
  background: #4338ca;
}
.btn.secondary {
  background: #6d28d9;
}
.btn.secondary:hover {
  background: #5b21b6;
}
.btn.disabled {
  background: #d1d5db;
  cursor: not-allowed;
  opacity: 0.5;
}
.btn.loading {
  background: #4f46e5;
  opacity: 0.7;
}

2️⃣ Input (입력창) ​

▶ Input States ​

  • Normal
  • Focus
  • Error
  • Disabled

▶ Input Spec ​

속성값
height40px
padding10px 14px
border-radius8px
font-size16px
border1px solid #D1D5DB
focusborder-color: Primary
errorborder-color: Error
disabledopacity: 0.5, cursor: not-allowed

▶ HTML / CSS 예시 ​

html
html 복사편집
<input
  class="input"
  placeholder="기본 입력"
/>
<input
  class="input error"
  placeholder="에러 입력"
/>
<input
  class="input"
  disabled
  placeholder="비활성 입력"
/>
css
css 복사편집 .input {
  height: 40px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 16px;
}
.input:focus {
  border-color: #4f46e5;
}
.input.error {
  border-color: #ef4444;
}
.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

3️⃣ Checkbox ​

▶ Checkbox Spec ​

속성값
size16px
border1px solid #D1D5DB
checkedbackground: Primary
disabledopacity: 0.5

▶ HTML / CSS 예시 ​

html
html 복사편집
<label
  ><input
    type="checkbox"
    class="checkbox"
  />
  체크박스</label
>
<label
  ><input
    type="checkbox"
    class="checkbox"
    disabled
  />
  비활성 체크박스</label
>
css
css 복사편집 .checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
.checkbox:checked {
  background: #4f46e5;
}
.checkbox:disabled {
  opacity: 0.5;
}

4️⃣ Modal (모달) ​

▶ Modal Spec ​

구조설명
Header제목 및 닫기 버튼
Body내용
Footer액션 버튼 영역
  • 배경 Dim: rgba(0,0,0,0.5)
  • border-radius: 16px
  • padding: 24px

▶ HTML 구조 예시 ​

html
html 복사편집
<div class="modal-overlay">
  <div class="modal">
    <div class="modal-header">
      <h2>모달 제목</h2>
      <button class="close">X</button>
    </div>
    <div class="modal-body">모달 내용 영역</div>
    <div class="modal-footer">
      <button class="btn primary">확인</button>
      <button class="btn secondary">취소</button>
    </div>
  </div>
</div>
css
css 복사편집 .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  width: 400px;
}
.modal-header,
.modal-footer {
  margin-bottom: 16px;
}
.close {
  background: none;
  border: none;
  cursor: pointer;
}

5️⃣ 패턴 예시 ​

Form 패턴 ​

csharp
복사편집
[Label]
[Input]
[Helper Text]
[Error Text]
[Button]

규칙

  • Label → 항상 위
  • Input → 필수 여백 8px
  • Error Text → 빨간색, Input 하단
  • Button → Form의 마지막에

✅ 마무리 팁 ​

  • 이 구조 그대로 공통 컴포넌트로 만들기
  • 디자이너 없이도 기획자 / 개발자가 바로 사용 가능
  • 추후 Storybook 연결 추천

IronTrain Tech Blog

Copyright © 2025 IronTrain