[
  {
    "courseSlug": "design-system",
    "question": "코스에서는 디자인 시스템을 색·글꼴·간격·부품·사용 규칙을 모아 둔 것이라고 소개합니다. 이를 한마디로 무엇에 비유했나요?",
    "option1": "제품의 설계 도면",
    "option2": "제품의 부품 창고",
    "option3": "제품의 문법책",
    "option4": "제품의 사용 설명 영상",
    "answerIndex": 2,
    "explanation": "섹션 1에서 디자인 시스템을 '제품의 문법책'에 비유합니다. 문법이 있어야 여러 사람이 써도 한 사람이 쓴 글처럼 읽히듯, 약속이 있어야 열 명이 만들어도 한 사람이 만든 화면처럼 보이기 때문이에요."
  },
  {
    "courseSlug": "design-system",
    "question": "코스에서 말하는 '디자인 토큰(token)'의 뜻으로 가장 알맞은 것은 무엇인가요?",
    "option1": "색·간격·글꼴 같은 디자인 결정에 이름을 붙인 변수",
    "option2": "피그마 파일에 접근할 때 쓰는 인증 키",
    "option3": "컴포넌트의 버전을 관리하는 고유 번호",
    "option4": "버튼의 상태를 저장해 두는 자바스크립트 객체",
    "answerIndex": 0,
    "explanation": "섹션 2에서 토큰은 '디자인 결정에 이름을 붙인 변수'라고 정의합니다. #3B82F6 같은 값 대신 --color-primary라는 이름으로 부르기로 약속하는 것으로, global.css의 :root에 실물이 살고 있어요."
  },
  {
    "courseSlug": "design-system",
    "question": "피그마 컴포넌트와 React 컴포넌트의 짝이 어긋나기 시작하는 것을 막기 위해 코스가 제시한 규칙은 무엇인가요?",
    "option1": "부품 변경은 디자이너가 먼저 끝낸 뒤 개발자에게 문서로 전달한다",
    "option2": "React props 이름은 피그마 variant와 다르게 지어 역할을 구분한다",
    "option3": "variant 추가는 분기별로 모아 두었다가 한꺼번에 코드에 반영한다",
    "option4": "부품을 바꿀 땐 피그마와 코드를 같은 PR·같은 티켓에서 함께 바꾼다",
    "answerIndex": 3,
    "explanation": "섹션 4의 경고 박스에서, 피그마에만 variant가 추가되고 코드에는 없으면 두 세계가 갈라지기 시작하므로 '피그마와 코드를 같은 PR·같은 티켓에서 함께 바꾸는 것'이 규칙이라고 설명합니다."
  },
  {
    "courseSlug": "design-system",
    "question": "코스에서 소개한 '좋은 컴포넌트 문서에 꼭 들어가는 4가지'에 해당하지 않는 것은 무엇인가요?",
    "option1": "언제 쓰는 부품인지 알려 주는 When",
    "option2": "누가 언제 만들었는지 적는 제작자·날짜",
    "option3": "하지 말아야 할 사용법을 적는 Don't",
    "option4": "복사해서 바로 쓰는 예제 코드인 How",
    "answerIndex": 1,
    "explanation": "섹션 5에서 좋은 문서의 4요소는 When(언제 쓰나), How(예제 코드), Don't(하지 말 것), 그리고 상태·변형 전체 목록입니다. 제작자와 날짜는 이 목록에 없어요."
  },
  {
    "courseSlug": "design-system",
    "question": "수습 A가 과제 제출 버튼을 눌렀는데, 서버가 처리하는 동안에도 버튼이 그대로 눌려서 과제가 두 번 제출되는 사고가 났습니다. 버튼의 다섯 상태 중 어떤 설계가 빠진 걸까요?",
    "option1": "hover — 마우스를 올리면 살짝 어두워지는 상태",
    "option2": "loading — 스피너를 보여 주고 다시 못 누르게 잠그는 상태",
    "option3": "active — 누르는 순간 꺼진 느낌을 주는 상태",
    "option4": "default — 평소의 또렷한 기본 모습",
    "answerIndex": 1,
    "explanation": "섹션 3의 상태표에서 loading은 '처리 중(제출 직후 등)에 스피너를 띄우고 다시 못 누르게 잠그는 상태'입니다. 이 상태가 빠지면 제출 직후 버튼이 두 번 눌려 과제가 중복 제출되는 사고로 이어져요."
  }
]
