패스트캠퍼스 환급챌린지 33일차 : AI 시대, UX/UI부터 프로덕트 디자인까지 한 번에 끝내는 초격차 패키지 강의 후기

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

---

1. 학습 인증샷 4장 이상 포함

1. 오늘자 날짜 + 공부 시작 시각이 보이는 사진 1장
2. 오늘자 날짜 + 공부 종료 시각이 보이는 사진 1장
3. 1개 클립 수강 인증 사진 1장 (강의 화면 내용은 보이지 않도록 / 목록 캡처 추천)
4. 학습 인증샷 1장 이상 (예: 필기, 작업물, Before/After 등)

2.학습 후기 700자 이상 (공백 제외)

오늘 배운 핵심 내용을 정리하고, 흥미로웠던 부분과 이를 내 업무에 어떻게 적용할 수 있을지 함께 기록해 주세요.

 

 오늘은 디자인시스템과 스타일가이드의 차이점에 대해서 공부를 했습니다. 공통점은 기업 또는 제품내에서 특정 가이드를 시각적요소로 규정한거라고 해요. 그리고 컬러시스템은 디자인시스템과의 부모 자식 관계를 취한다고 생각하면 될거같아요. 즉 디자인 시스템이 부모고 스타일가이드를 포함한 다양한 작은 구성요소들을 포함한다고 보시면 됩니다. 비교를 해보자면 디자인시스템은 재사용 가능한 컴포넌트와 패턴을 사용하여 대규모 디자인 관리를 위한 기준이 되는 세트입니다. 스타일가이드는 특정 가이드, 시각적 레퍼런스 및 디자인 원칙을 포함하는 문서입니다. 디자인시스템은 광범위하고 시각적 스타일부터 UI 패턴, 코드 구현까지 디자인과 개발의 모든 측면을 다룹니다. 반면에 스타일가이드는 좁고 집중된 범위로 UX 디자인의 특정 측면(시각 디자인, 콘텐츠, 브랜딩 등)에 집중하여 모든 요소가 일관된 스타일을 따르도록 하는거라고 하네요. 

 

다음은 디자인 라이브러리에 대해서 배웠습니다. 이 라이브러리는 디자인 시스템의 구성요소를 보관하고 접근이 용이하도록 만든건데 일반적으로 웹사이트 형태를 취한다고합니다. 그리고 피그마로 보면 google material design과 ios design kit가 라이브러리 있는걸 확인하실 수 있습니다. 현재 구글은 material design 3이라고 되어있는데 즉 버전이 업데이트가 된다는 것을 확인할 수 있습니다. 다음은 토스만의 디자인시스템은 TDS, lightning Design System 2이라고 되어있는데 이 사이트도 디자인시스템이 업ㅇ데이트 된걸 확인하실 수 있습니다. 디자인 라이브러리의 구성요소는 스타일가이드, 컴포넌트 라이브러리, 패턴 라이브러리, 추가 리소스 등이 있습니다. 스타일가이드는 브랜드, 콘텐츠, 시각 디자인 등 특정 스타일 요구사항에 대한 가이드를 제공한다고 합니다. 컴포넌트 라이브러리는 각 UI 속성(크기, 텍스트 등) 다양한 상태(활성화, 호버, 포커스, 비활성화) 정보 및 깔끔하고 간결한 재사용 코드 등 구체적인 디자인 및구현 세부 사항을 제공한다고합니다. 패턴 라이브러리는 페이지헤더, 제목, 브레드크럼, 검색, 주요 버튼 등 반복되는 패턴을 말합니다. 마지막으로 추가 리소스는 컴포넌트와 라이브러리를 실제로 사용하고 디자인하기 위해 필요한 피그마파일을 제공한다고 보시면 됩니다. 로고, 폰트, 아이콘 등 개발자와 함께 사용할 수 있게하는 것이라고 생각하시면 됩니다. 

 

다음은 이 디자인시스템을 관리하는 직무에대한 공고를 들여다봤는데 대부분 시니어 중에서도 8년차 이상을 원하고 토스에서는 platform designer로 쿠팡에서는 Staff  product designer로 모집했었네요. 마지막으로 스타일 가이드의 개념에 대해서 배웠는데 말 그대로 콘텐츠, 브랜드, 프론트엔드 스타일 가이드를 제공하는 것입니다. Wise라는 사이트의 Foundation을 참고하고 분석해보면 많은 도움을 받는다고 하셔서 참고해야겠습니다. 콘텐츠 스타일에는 어조, 문법 및 철자, 서식 스타일 등이 있습니다. 브랜드 스타일 컬러 팔레트, 타이포그래피, 로고, 이미지 등이 있습니다. 특히 타이포그래피에서 자주 헷갈렸었는데 특정 폰트, 권장 HTML 요소 (예: 소제목은 H2 요소로 작성해야 함)에 대한 가이드가 어려웠습니다. H1, H2, B1, B2이런식으로 세분화되게 나눠서 가이드를 지정했었는데 초반에 좀 헷갈렸어서 이번 기회에 개념을 확실히 알아서 다행이네요. 그리고 스타일가이드에서의 프론트엔드 스타일인데 UI 컴포넌트 등의 Spec을 이야기하는 겁니다. 패딩, 마진, 간격 등 수치화되어있는 걸 보는 부분이라고 생각하시면 됩니다.

 

방대한 개념을 배웠는데 제가 했던 작업들이 디자인시스템을 설계하는거라고 생각했었는데 스타일가이드에 대해서 제작하는 거였네요. 확실히 개념에 대해 확실히 알고나니 앞으로 헷갈리지 않고 프로젝트 진행을 할 수 있을 것 같습니다. 디자인시스템은 스타일가이드의 부모라고 생각하겠습니다.

---

https://fastcampus.info/4oKQD6b

💙 2026 패캠구독제 LAST SALE : UP TO 98% 💙 | 패스트캠퍼스