[
  {
    "courseSlug": "figma",
    "question": "피그마 화면은 크게 세 부분으로 나뉩니다. 지금 선택한 요소의 크기·색·글꼴 같은 세부 정보를 보고 고치는 곳은 어디인가요?",
    "option1": "왼쪽 레이어 패널",
    "option2": "가운데 캔버스",
    "option3": "오른쪽 속성 패널",
    "option4": "상단 메뉴 바",
    "answerIndex": 2,
    "explanation": "섹션 2에서 배운 3분할 구조입니다. \"왼쪽에서 찾고, 가운데서 그리고, 오른쪽에서 다듬는다\" — 선택한 요소의 세부 속성은 오른쪽 속성 패널에서 고칩니다."
  },
  {
    "courseSlug": "figma",
    "question": "코스에서 \"섹션 4의 주인공\"이라고 소개한 단축키 Shift + A는 무엇을 하는 키인가요?",
    "option1": "선택한 것들을 그룹으로 묶는다",
    "option2": "선택한 것에 오토레이아웃을 씌운다",
    "option3": "방금 만든 요소를 하나 더 복제한다",
    "option4": "새 프레임(화면)을 하나 만든다",
    "answerIndex": 1,
    "explanation": "단축키 표에서 Shift+A는 오토레이아웃 씌우기입니다. 그룹 묶기는 Ctrl+G, 복제는 Ctrl+D, 프레임은 F가 맡습니다."
  },
  {
    "courseSlug": "figma",
    "question": "코스는 오토레이아웃을 \"피그마의 flexbox\"라고 설명하며 CSS와 짝지어 줍니다. 다음 중 옳게 짝지어진 것은 무엇인가요?",
    "option1": "간격(Spacing) ↔ gap",
    "option2": "패딩(Padding) ↔ flex-direction",
    "option3": "방향(가로/세로) ↔ justify-content",
    "option4": "정렬(Alignment) ↔ padding",
    "answerIndex": 0,
    "explanation": "섹션 4의 대응표에 따르면 간격(Spacing)은 CSS의 gap과 같은 개념입니다. 방향은 flex-direction, 패딩은 padding, 정렬은 justify-content/align-items와 짝을 이룹니다."
  },
  {
    "courseSlug": "figma",
    "question": "로그인 버튼을 Ctrl+Alt+K로 컴포넌트로 만들고 인스턴스를 여러 화면에 배치했습니다. 코스가 말하는 컴포넌트의 가장 큰 이점은 무엇인가요?",
    "option1": "인스턴스마다 서로 다른 색을 자동으로 입혀 준다",
    "option2": "버튼이 자동으로 CSS 코드 파일로 저장된다",
    "option3": "인스턴스를 복제할 때마다 이름이 자동으로 정리된다",
    "option4": "원본 하나만 고치면 모든 인스턴스가 한꺼번에 바뀐다",
    "answerIndex": 3,
    "explanation": "섹션 5의 \"마법 도장\" 비유처럼, 컴포넌트는 복사본(인스턴스)이 원본과 연결되어 원본만 수정하면 이미 찍힌 모든 자국이 함께 바뀝니다."
  },
  {
    "courseSlug": "figma",
    "question": "개발 수습생이 디자이너의 시안을 구현하다가 버튼의 정확한 파란색 색상 코드가 필요해졌습니다. 코스가 \"협업 매너이자 여러분의 속도\"라고 권한 행동은 무엇인가요?",
    "option1": "디자이너에게 바로 메시지를 보내 색상 값을 물어본다",
    "option2": "화면을 캡처해서 눈으로 가장 비슷한 색을 골라 쓴다",
    "option3": "우측 상단 </> 토글로 Dev Mode를 켜고 요소를 클릭해 값을 직접 읽는다",
    "option4": "버튼 이미지를 PNG로 내보내서 그대로 프로젝트에 붙여 넣는다",
    "answerIndex": 2,
    "explanation": "섹션 7 핸드오프에서 배운 내용입니다. Dev Mode를 켜고 요소를 클릭하면 색상 코드·글꼴·간격이 숫자와 CSS 형태로 표시되므로, 물어보기 전에 직접 읽는 것이 협업 매너입니다."
  }
]
