패스트캠퍼스 환급챌린지 17일차 : 성공하는 UX/UI 디자이너의 필수 스킬셋 : 실무에서 인정받는 5가지 핵심역량 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

성공하는 UX/UI 디자이너의 필수 스킬셋
: 실무에서 인정받는 5가지 핵심역량

오늘은 디자인 시스템이 무엇인지에 대해 배웠다. 디자인 시스템은 계속되는 화두이다. 

실제로 잘 설계된 디자인 시스템을 살펴보는 것이 많은 도움이 될 것 같다. 

 

디자인 시스템의 이해와 실무 적용

1. 디자인 시스템의 등장 배경

• 스타트업 증가 → 디자이너의 역할이 단순 스타일링에서 비즈니스 문제 해결 중심으로 변화
• 초기 제품 개발 단계부터 디자이너가 투입되면서 디자인 시스템의 필요성 증가
• 디자인 조직 규모 확대에 따라 내부 커뮤니케이션의 효율성 확보가 중요해짐

2. 디자인 시스템의 기대 효과

1. 내부 커뮤니케이션 효율화
   • 디자이너, 기획자, 프론트엔드 개발자 간 협업 효율↑
2. 컴팩트한 UI 구축
   • UI 요소의 재사용성↑, 불필요한 변형↓
   • 예: 버튼이 있는 타이틀바 하나만 만들고, 버튼이 없는 경우는 숨김 처리
3. 일관성 있는 UX 제공
   • 사용자 경험의 통일성 확보

3. 디자인 시스템이 디자이너에게 주는 변화

• 반복 작업 감소 → 더 넓은 문제 정의 및 솔루션 탐색 가능
• 디자이너는 스타일링에서 벗어나 문제 정의, 측정, 개선까지의 전과정에 참여
• 작은 조직일수록 디자인 시스템의 효과는 더 큼

4. 디자인 시스템의 역사적 맥락

• 1900년대 바우하우스 운동: “형태는 기능을 따른다”
• 인터내셔널 타이포그래픽 스타일: 그리드, 컬러, 폰트 등의 시스템화 시도
• 현재 디자인 시스템은 이러한 맥락 위에 구축됨

5. 디자인 시스템의 6가지 구성 요소

구성 요소설명

1. 레이아웃	간격, 그리드 시스템, 위치 규칙
2. 스타일	컬러, 아이콘 스타일, 타이포그래피
3. 컴포넌트	버튼, 인풋 필드 등 UI 요소
4. 패턴	내비게이션, 검색바 등 구조적 조합
5. 콘텐츠	UX 라이팅, 보이스 톤, 글로벌 지침
6. 사용성	접근성, 국제화, 디바이스 대응성

6. 스타일 가이드 vs 컴포넌트 라이브러리 vs 디자인 시스템

• 스타일 가이드: 브랜드 아이덴티티를 UI에 적용하는 지침
• 컴포넌트 라이브러리: 자주 쓰이는 UI를 재사용 가능한 상태로 정리
• 디자인 시스템: 위 두 가지 포함 + 언제/어떻게 써야 하는지 문서화 + 개발자와 연결된 코드 제공

※ 문서화 예시: 프라이머리 버튼은 언제 사용하는가, 세컨더리는 언제 쓰는가

7. 디자인 시스템의 완성 조건

• 단순히 컴포넌트만 정리되어 있으면 미완성
• 상황별 사용 가이드, 사용 규칙 문서화, 디자인 토큰, 개발 코드 연동까지 포함되어야 함
• 디자이너, 개발자 모두가 실시간으로 쓰고, 수정하면 동기화되는 시스템이 이상적

8. 해외 사례 분석 – https://adele.uxpin.com/

• 다양한 글로벌 기업의 디자인 시스템을 모아놓은 웹사이트 존재
• 각 항목별로 제공되는 구성 요소 확인 가능 (예: 컴포넌트, 코드, 토큰, UI킷 등)

예시: 드롭박스

• HTML/CSS 기반 코드 제공
• 컴포넌트 문서화
• 디자인 토큰 제공 (예: 프라이머리 컬러 상태 자동 반영)
• 스케치/포토샵 UI 키트 제공 여부도 명시

9. Storybook & IBM Carbon Design System 소개

• Storybook: 컴포넌트 시각화 + 상태 확인 + 개발 코드 연동
• 디자이너가 직접 Storybook에서 컴포넌트 상태 확인 및 디버깅 가능
• Carbon (IBM):
  • 각 컴포넌트 사용 목적과 상황이 명확히 문서화
  • 다양한 프레임워크(React, Vue, Angular 등)용 코드 제공
  • 스타일 가이드, 디자인 토큰, 접근성 기준 포함

10. 결론 및 실무 적용 방향

• 디자인 시스템은 디자인 조직과 제품의 성장 기반
• 구성 요소(레이아웃~사용성)를 바탕으로,
  컴포넌트 > 패턴 > 문서화 > 코드 연동까지 순차적으로 구축 필요
• 시작은 작게, 그러나 문서화 + 팀 공유 + 지속 가능한 구조로 점차 확장해 나가는 것이 중요함

 

 

너무나 유용한 디자인 시스템을 잘 정리해놓은 사이트!

https://adele.uxpin.com/

Adele – Design Systems and Pattern Libraries Repository

https://storybook.js.org/

Storybook: Frontend workshop for UI development

Storybook의 주요 특징 (추가 공부 내용)

1. 컴포넌트 개발의 분리

• 실제 앱 환경과 분리하여 UI 컴포넌트를 독립적으로 제작 및 테스트 가능
• 디자이너와 개발자가 같은 화면을 보며 협업하기 좋음

2. 문서화 자동화

• 각 컴포넌트에 대한 사용법, 상태별 렌더링, Props 정보 등 자동 문서화
• 팀 내 디자인 시스템을 정리하거나, 외부 공유용 UI 가이드로도 사용 가능

3. 실시간 인터랙션과 상태 테스트

• Knobs, Controls 등 Addon을 통해 props 변경과 상태 실험 가능
• 디자인 QA나 UX 테스트에도 유용

 

학습 인증샷

학습 시작 시간

학습 종료 시간

학습 진도

학습 통계

학습 인증샷

 

https://abit.ly/lisbva

 

패스트캠퍼스, 환급챌린지, 패스트캠퍼스후기, 습관형성, 직장인자기계발, 오공완