[
  {
    "courseSlug": "layout",
    "question": "코스에서 소개한 8pt 그리드의 핵심 규칙은 무엇인가요?",
    "option1": "모든 요소를 화면 가운데에 정렬한다",
    "option2": "한 화면에 카드를 8개 이하로만 배치한다",
    "option3": "모든 간격과 크기를 8의 배수로만 쓴다",
    "option4": "글꼴 크기를 항상 8pt로 고정한다",
    "answerIndex": 2,
    "explanation": "8pt 그리드의 규칙은 딱 하나, 모든 간격·크기를 8의 배수(8, 16, 24, 32...)로만 쓰는 것입니다. 13, 18, 37 같은 어중간한 숫자가 사라지면 화면 전체가 같은 박자로 정돈돼 보입니다."
  },
  {
    "courseSlug": "layout",
    "question": "코스에서 설명한 '근접성'의 원리로 옳은 것은?",
    "option1": "관련 있는 요소일수록 서로 다른 색으로 칠해 구분한다",
    "option2": "관련 있는 것은 가깝게, 관련 없는 것은 멀게 배치한다",
    "option3": "모든 요소 사이 간격을 16px로 똑같이 통일한다",
    "option4": "그룹마다 반드시 선이나 박스를 그려 경계를 표시한다",
    "answerIndex": 1,
    "explanation": "근접성은 '붙어 있으면 한 팀, 떨어져 있으면 남남'이라는 원리입니다. 선이나 박스를 긋지 않아도 간격 차이만으로 그룹 관계가 보이며, 모든 간격이 똑같으면 오히려 어디서 끊어 읽을지 알 수 없게 됩니다."
  },
  {
    "courseSlug": "layout",
    "question": "그림과 여백이 많은 랜딩 페이지에서 가장 중요한 '시작하기' 버튼을 놓기 좋은 자리는 어디인가요?",
    "option1": "화면 왼쪽 위, 로고 바로 옆",
    "option2": "화면 정중앙, 제목 바로 아래",
    "option3": "본문 첫 줄이 시작되는 왼쪽 끝",
    "option4": "화면 오른쪽 아래, 시선이 끝나는 지점",
    "answerIndex": 3,
    "explanation": "그림과 여백이 많은 화면에서 시선은 Z 모양으로 움직이며, Z의 끝인 오른쪽 아래가 시선의 종착역입니다. 코스에서 랜딩 페이지의 시작하기 버튼이 대부분 오른쪽 아래에 있는 이유로 든 내용입니다."
  },
  {
    "courseSlug": "layout",
    "question": "화면이 좁아질 때 반응형 레이아웃에서 12칸 그리드가 '접히는' 방식으로 옳은 설명은?",
    "option1": "컬럼 수는 12개 그대로 두고, 각 요소가 차지하는 칸 수를 늘린다",
    "option2": "컬럼 수 자체를 12개에서 6개, 1개로 점점 줄여 나간다",
    "option3": "데스크톱용과 모바일용 화면을 두 벌 만들어 바꿔 끼운다",
    "option4": "요소 크기는 그대로 두고 화면을 좌우로 스크롤하게 만든다",
    "answerIndex": 0,
    "explanation": "칸(컬럼) 수는 12개 그대로이고, 카드가 차지하는 칸 수만 4칸에서 6칸, 12칸으로 바뀌면서 요소가 아래로 쌓입니다. 이렇게 접히는 기준이 되는 화면 폭을 브레이크포인트라고 부릅니다."
  },
  {
    "courseSlug": "layout",
    "question": "동아리 소개 카드에 제목, 설명, 버튼을 넣었는데 세 요소 사이 간격을 전부 16px로 똑같이 줬더니 어디까지가 한 묶음인지 안 보입니다. 코스에서 배운 대로 고치는 방법은?",
    "option1": "모든 간격을 8px로 더 좁혀 세 요소를 한 덩어리로 만든다",
    "option2": "제목과 설명 사이에 굵은 구분선을 먼저 그어 경계를 만든다",
    "option3": "한 팀인 제목과 설명 사이는 좁히고, 버튼과의 간격은 확실히 넓힌다",
    "option4": "세 요소를 모두 가운데 정렬해서 새로운 기준선을 만든다",
    "answerIndex": 2,
    "explanation": "근접성의 포인트는 간격의 '차이'입니다. 피그마 실습에서도 제목과 설명 간격은 8, 설명과 버튼 간격은 24로 두어 팀 안은 좁게, 팀 사이는 넓게 만들었습니다. 선을 긋기 전에 간격 차이로 먼저 그룹을 만드는 것이 코스의 핵심입니다."
  }
]
