[
  {
    "courseSlug": "icons-images",
    "question": "비트맵과 벡터의 가장 근본적인 차이는 무엇인가요?",
    "option1": "비트맵은 색을 적게 쓰고, 벡터는 수백만 가지 색을 쓴다",
    "option2": "비트맵은 웹 전용 포맷이고, 벡터는 인쇄 전용 포맷이다",
    "option3": "비트맵은 픽셀마다 색을 전부 기록하고, 벡터는 '어떻게 그리는지'를 기록한다",
    "option4": "비트맵은 압축이 불가능하고, 벡터는 항상 자동으로 압축된다",
    "answerIndex": 2,
    "explanation": "코스 1섹션의 핵심입니다. 비트맵(PNG·JPG)은 칸(픽셀)마다 무슨 색인지 전부 기록하고, 벡터(SVG)는 '중심에 반지름 40 원을 그려' 같은 설계도를 기록해서 확대해도 항상 매끈합니다."
  },
  {
    "courseSlug": "icons-images",
    "question": "코스의 포맷 선택 기준표에 따르면, 아이콘과 로고에 가장 알맞은 포맷은 무엇인가요?",
    "option1": "JPG — 색이 많은 이미지에 최적이라서",
    "option2": "SVG — 벡터라 어떤 크기에서도 매끈해서",
    "option3": "PNG — 투명 배경을 지원하는 비트맵이라서",
    "option4": "WebP — 같은 품질에 용량이 더 작아서",
    "answerIndex": 1,
    "explanation": "기준표에서 사진은 JPG(또는 WebP), 아이콘·로고는 SVG, '투명 배경 + 비트맵'이면 PNG로 정리했습니다. 아이콘·로고는 도형 몇 개로 이루어져 벡터인 SVG가 최적입니다."
  },
  {
    "courseSlug": "icons-images",
    "question": "비트맵 아이콘은 @2x 버전을 따로 만들어야 하는데, SVG는 그럴 필요가 없습니다. 그 이유는 무엇인가요?",
    "option1": "SVG는 파일 용량이 항상 1KB 이하로 작기 때문에",
    "option2": "브라우저가 SVG를 미리 2배 크기로 확대해 저장해 두기 때문에",
    "option3": "SVG는 고해상도 화면에서 자동으로 비트맵으로 변환되기 때문에",
    "option4": "SVG는 '그리는 법'의 기록이라 어떤 화면 밀도에서도 다시 계산해 매끈하게 그려지기 때문에",
    "answerIndex": 3,
    "explanation": "2섹션 '해상도와 @2x'의 내용입니다. 고해상도 화면은 CSS 1px을 화소 2~3개로 그리므로 비트맵은 2배 크기 파일이 필요하지만, SVG는 설계도라 어떤 밀도에서도 스스로 매끈하게 그려집니다."
  },
  {
    "courseSlug": "icons-images",
    "question": "'개인/비상업용 무료'라고 표시된 이미지를 우리 회사 서비스에 쓰면 안 되는 이유는 무엇인가요?",
    "option1": "회사 서비스에 쓰는 것은 전부 상업적 이용에 해당하기 때문에",
    "option2": "무료 이미지는 해상도가 낮아 서비스 품질을 떨어뜨리기 때문에",
    "option3": "개인용 이미지는 파일 형식이 회사 시스템과 호환되지 않기 때문에",
    "option4": "무료 이미지는 색을 바꾸는 등 수정이 기술적으로 불가능하기 때문에",
    "answerIndex": 0,
    "explanation": "4섹션 '무료 소스와 저작권'에서 강조한 첫 번째 확인 사항입니다. 회사 서비스에 쓰는 건 전부 상업적 이용이므로 '개인/비상업용 무료' 이미지는 쓸 수 없고, 어기면 저작권 침해로 손해배상까지 이어질 수 있습니다."
  },
  {
    "courseSlug": "icons-images",
    "question": "수습 개발자가 화면에 200px로 보일 프로필 사진 자리에 폰 카메라 원본(4000px, 약 5MB)을 그대로 올렸습니다. 코스의 최적화 순서에 따라 가장 먼저 해야 할 일은 무엇인가요?",
    "option1": "F12의 Network 탭을 열어 실제 전송 용량부터 확인한다",
    "option2": "압축 도구에 넣어 눈에 안 띄는 수준으로 용량을 줄인다",
    "option3": "보여줄 크기에 맞게 이미지를 리사이즈한다",
    "option4": "파일 확장자만 WebP로 바꿔서 다시 저장한다",
    "answerIndex": 2,
    "explanation": "5섹션 '이미지 최적화'의 순서는 1) 리사이즈 → 2) 포맷 선택 → 3) 압축 → 4) 확인입니다. 보여줄 크기보다 큰 이미지를 올리지 않는 리사이즈가 첫 단계로, 200px 자리에 4000px 원본을 올리면 쓰지도 않을 픽셀 수백만 개를 내려받게 됩니다."
  }
]
