섹션3. 스타일가이드 다운받고 난후

작성한 질문수 9

0

안녕하세요, 미갱이님!

질문 남겨주셔서 감사합니다. 사소한 질문이라도 언제든지 편하게 남겨주세요. 시간이 나는대로 최대한 빠르게 답변드리겠습니다.

다운로드하신 파일은 섹션 3, 4에서 다루는 내용입니다.

제 강의는 크게 세 파트로 구성되어 있습니다.

1. 스타일 가이드 / 베리어블

2. 컴포넌트 제작

3. 페이지 만들기

세 파트 모두 직접 손으로 만들어보시는 걸 가장 추천드립니다. 다만 스타일 가이드/베리어블 파트를 어려워하셔서 다음 단계로 넘어가지 못하는 분들이 계셔서, 그런 분들을 위해 이 파일을 따로 만들어 두었습니다.

그리고 강의를 들으시면서 팁을 드리자면..

이전에 챌린지 프로그램에서 여러 수강생분들과 함께 공부해보니, 아래 순서로 진행하실 때 가장 효과가 좋았습니다.

1. 강의를 처음부터 끝까지 한 번 쭉 보기

2. 섹션 3, 4를 보면서 참고 파일(다운 받으신 스타일 가이드)을 함께 훑어보기

3. 빈 파일에서 하나씩 직접 만들어보기

4. 막히는 부분은 강의를 다시 보거나 참고 파일과 비교해보기

만약 컴포넌트 제작부터 바로 시작하고 싶으시다면, 제가 만들어 둔 파일을 출발점으로 삼아 진행하셔도 괜찮습니다. 궁금한 점 있으시면 언제든 말씀해주세요. 감사합니다!

0

안녕하세요, 인프런 AI 인턴입니다. 미갱이님!

스타일가이드 파일은 모든 값을 그대로 style과 variable로 등록하라는 의미가 아니라, 디자인 시스템의 구성 방식과 등록 기준을 이해하기 위한 참고·실습 자료입니다.

color, typography, grid, appearance 페이지를 살펴보면서 어떤 항목을 디자인 토큰이나 스타일로 관리하는지 확인하시고, 강의에서 설명하는 부분을 중심으로 따라 하시면 됩니다. 실제 업무에서는 프로젝트에 필요한 색상, 폰트, 간격, 그리드 등을 선별하여 등록하며 모든 항목을 반드시 등록할 필요는 없습니다.

특히 처음에는 다음처럼 이해하시면 좋습니다.

• Color: 색상 스타일 및 컬러 Variable 구성 참고
  
• Typography: 폰트, 크기, 행간 등의 텍스트 스타일 구성 참고
  
• Grid: 화면 레이아웃과 반응형 기준점 참고
  
• Appearance: 라이트·다크 모드 등 테마 구성 참고
  

유사한 질문에 대해 지식공유자님께서도 제공된 스타일 가이드는 업무에 맞게 수정하여 사용하되, 팀의 규모와 구성원의 필요에 맞춰 필요한 가이드만 작성하면 된다고 답변해 주셨습니다.

• 스타일 가이드 파일 관련 질문
  
• 섹션2, 색상 베리어블 등록하기
  

따라서 현재는 파일의 모든 값을 무작정 등록하기보다는, 강의에서 설명하는 Primitive → Theme → Semantic 구조를 이해하고 직접 따라 해보는 용도로 활용해 보시면 됩니다. 이후 본인의 프로젝트에 필요한 항목만 골라 디자인 시스템으로 정리하시면 됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.