📝 학습 목표

디자인 시스템 이해
- 피그마 안에서 색상, 타이포, 그림자, 컴포넌트 같은 디자인 토큰을 찾아내고 읽을 수 있다.
- 디자이너가 정리한 스타일 가이드를 코드 토큰(index.css, tailwind.config) 으로 옮길 수 있다.
UI → 코드 매핑 능력
- 피그마에서 px 단위/auto layout/constraints를 확인하고, 이를 CSS grid/flex, rem, Tailwind 브레이크포인트로 변환할 수 있다.
- 버튼, 카드, 레이아웃 등 기본 컴포넌트를 피그마 명세와 동일하게 구현할 수 있다.
협업 환경에서의 실전 감각
- 팀 프로젝트에서 한 명이 디자인 시스템을 정리하고, 팀 전체가 동일한 규칙을 적용할 수 있도록 한다.
- 디자이너와 같은 용어(Primary-500, h1, caption 등) 로 소통하며 QA를 진행할 수 있다.
워크북 학습과 연계
- 워크북에서 배운 기능(상태관리, 모달, 필터링 등)을 디자인된 UI에 통합할 수 있다.
- 단순 기능 구현이 아니라, UI와 기능이 연결된 결과물을 만들 수 있다.
QA 및 개선 능력
- 피그마와 결과물을 비교하며 픽셀 퍼펙트(Pixel Perfect) 검수 경험을 쌓는다.
- 반응형 레이아웃, hover/active/focus 상태까지 확인하여 실제 서비스 품질 수준으로 구현한다.

<aside> 💡 이번 주차는 피그마 디자인을 보고 웹에서 구현하는 과정을 배우는 시간입니다.

단순히 눈으로 보이는 UI를 따라 그리는 데서 그치지 않고, 디자인 시스템에 담긴 색상·타이포·컴포넌트 정보를 코드로 옮겨오는 과정을 경험합니다.

이번 워크북은 주제 특성상 따로 미션이 존재하지 않고 워크북 흐름에 따라 실습을 진행하는 방식으로 진행됩니다.

완벽하게 맞추려 하기보다는, 피그마와 코드를 번갈아 보며 차이를 줄여가는 과정 자체를 실습을 통해 느껴봅시다!

해당 워크북은 양이 적지 않지만, 스페셜 주차이니만큼 부담을 덜 가지시고 진행하시면 좋을 것 같습니다.

마지막에 첨부된 예시 답안은 어디까지나 예시 답안이니 제 코드가 정답이다! 라고 생각하고 학습하시기보단, 이런 방법도 있구나~ 정도로 활용해주시면 감사하겠습니다.

</aside>

⚠️ 스터디 진행 방법

워크북 완료 후 스터디 참여
- 스터디 전, 워크북 내용을 모두 작성하고 이해되지 않은 부분을 준비합니다.
스터디 미션 수행
- 워크북 완료 후 미션을 수행합니다.
- 진행 내용과 문제점을 스터디 시간에 공유합니다.
- 코드 리뷰는 GitHub PR에서 상시 진행합니다.
스터디 시간 구성
1. 각자 진행한 미션 중 해결하지 못한 이슈 공유
2. 해당 문제를 스터디원과 함께 해결 방법 공유, 필요 시 같이 해결
3. 미션 후 피드백 공유 및 개선
주차별 미션 제출
- 매주 워크북과 미션을 제출합니다. (디자인은 개인 보완 가능)
- 워크북 완료 후 워크북 피드백 폼 제출
  - 특정 주제에 많은 피드백 요청이 들어올 경우, 피드백 이후 해당 내용을 바탕으로 추가 강의 영상 제공 예정 (유튜브 구독)
- 🍠 코드 리뷰 제출 기준
  - 본인이 리뷰한 코드 최소 1개
  - 본인이 받은 리뷰를 코드에 실제 반영한 것 최소 1개
스터디 인증샷
- 매주 대표 사진 1장 남기기
- 이미지 임베드 또는 복사·붙여넣기 가능