[
  {
    "courseSlug": "mobile-design",
    "question": "코스에서 제시한 '눌리는 모든 요소'의 터치 타깃 최소 크기는 얼마인가?",
    "option1": "24×24px — 아이콘 표준 크기에 맞춰서",
    "option2": "44×44px — 어른 엄지 접촉면(약 10mm)을 기준으로",
    "option3": "16×16px — 본문 최소 글자 크기와 통일해서",
    "option4": "60×60px — 태블릿 화면까지 고려한 여유 크기",
    "answerIndex": 1,
    "explanation": "섹션 1 '엄지의 법칙'에서 마우스 커서는 바늘 끝이지만 엄지는 도장이라며, 눌리는 요소는 최소 44×44px을 확보해야 한다고 설명한다. 어른 엄지 접촉면 약 10mm가 화면에서 대략 44px 이상에 해당하기 때문이다."
  },
  {
    "courseSlug": "mobile-design",
    "question": "모바일 우선(Mobile First) 방식의 CSS 작성 순서로 옳은 것은?",
    "option1": "큰 화면 스타일을 기본값으로 두고 max-width 미디어 쿼리로 좁은 화면에서 덜어낸다",
    "option2": "화면 크기별로 CSS 파일을 따로 만들어 기기마다 다른 파일을 불러온다",
    "option3": "좁은 화면 스타일을 기본값으로 두고 min-width 미디어 쿼리로 넓은 화면에서 더한다",
    "option4": "JS로 화면 폭을 감지해 데스크톱용과 모바일용 컴포넌트를 통째로 교체한다",
    "answerIndex": 2,
    "explanation": "섹션 2에서 모바일 우선은 좁은 화면용 CSS를 기본값으로 쓰고 화면이 넓어질 때 min-width로 스타일을 '더해 가는' 방식이라고 설명한다. max-width로 '빼며' 내려가는 데스크톱 우선과 정반대 순서다."
  },
  {
    "courseSlug": "mobile-design",
    "question": "index.html에 viewport 메타 태그가 없으면 모바일 브라우저는 어떻게 동작하는가?",
    "option1": "PC용 페이지로 가정하고 980px짜리 가상 화면에 그린 뒤 축소해서 보여준다",
    "option2": "페이지 렌더링을 중단하고 데스크톱 전용 화면으로 리다이렉트한다",
    "option3": "기기의 실제 폭을 자동으로 감지해 처음부터 1:1 크기로 그려 준다",
    "option4": "화면을 가로 모드로 강제 회전시켜 부족한 폭을 확보한다",
    "answerIndex": 0,
    "explanation": "섹션 3에서 viewport 태그가 없으면 모바일 브라우저가 '이건 PC용 페이지겠지' 하고 980px 가상 화면에 그린 뒤 축소해 보여줘서 글씨가 개미만 해진다고 설명한다. 그래서 width=device-width, initial-scale=1 한 줄이 필요하다."
  },
  {
    "courseSlug": "mobile-design",
    "question": "코스가 말하는 모바일 제스처 설계의 '정석'에 가장 가까운 것은?",
    "option1": "다른 앱과 차별화되도록 우리 서비스만의 새로운 제스처를 발명한다",
    "option2": "화면을 깔끔하게 만들기 위해 버튼을 없애고 스와이프로만 기능을 제공한다",
    "option3": "제스처는 배우기 어려우므로 모바일 웹에서는 아예 사용하지 않는다",
    "option4": "기존 관습을 따르되, 제스처는 보이는 버튼과 짝을 이루는 지름길로만 제공한다",
    "answerIndex": 3,
    "explanation": "섹션 4의 두 규칙이다 — 사용자의 근육 기억인 관습을 따를 것, 그리고 제스처는 눈에 보이지 않으니 반드시 보이는 버튼과 짝을 이뤄 '아는 사람의 지름길'로만 쓸 것. 스와이프로만 가능한 기능은 없는 거나 마찬가지라고 설명한다."
  },
  {
    "courseSlug": "mobile-design",
    "question": "수습 A가 개발자 도구 기기 툴바(375px)로 플랫폼을 점검하다가, 넓은 표 하나 때문에 페이지 전체가 좌우로 덜렁거리는 것을 발견했다(FE-06 티켓과 같은 증상). 코스에서 배운 정석 해결법은?",
    "option1": "표의 글자 크기를 확 줄여 375px 폭 안에 표 전체가 들어가게 만든다",
    "option2": "표를 이미지로 캡처해 넣어서 폭이 넘치는 문제 자체를 없앤다",
    "option3": "overflow-x: auto를 준 컨테이너 안에 표를 가둬 그 안에서만 스크롤되게 한다",
    "option4": "body에 width: 600px을 고정해 모든 기기에서 같은 폭으로 보이게 한다",
    "answerIndex": 2,
    "explanation": "섹션 5에서 표처럼 원래 넓은 콘텐츠는 페이지를 늘리는 대신 overflow-x: auto를 준 컨테이너 안에서만 스크롤되게 가두는 것이 정석이라고 설명한다. 범인 요소 하나가 페이지 전체를 덜렁거리게 만드는 '의도치 않은 가로 스크롤'의 표준 처방이다."
  }
]
