shaula / 샤울라AI LITERACY LAB · 50 MIN

샘플 교안 · 실제 운영 결과물이 아닙니다

첫 API 요청
작은 미션 가져오기

목표: 서버에 있던 미션이 내 화면에 표시되는 과정을 확인하고, 실패와 성공을 구분한다.

나의 버튼사용자의 요청
서버의 미션주소로 요청 → 응답
도착한 미션 카드제목 · 설명 · 확인 기준

버튼은 미션을 새로 만들지 않습니다. 이 사이트에 저장된 JSON을 실제 HTTP 요청으로 가져옵니다.

50분의 흐름

5분결과 체험5분요청 구조25분작은 구현10분성공·실패 시험5분저장·회고
수업 전 준비

시작 HTML 파일과 실행 주소를 제공합니다. 설치·계정 준비는 사전에 확인합니다. 이번 요청은 교육용 정적 JSON으로, 외부 AI나 유료 API를 호출하지 않습니다.

작동 예시: /examples/api-lab.html

작은 미션

  1. ‘미션 가져오기’ 버튼을 눌러 빈 카드에 미션을 표시합니다.
  2. 아래 주소로 요청하고 title, description, check를 꺼냅니다.
  3. 응답이 실패하면 오류 안내를 보여줍니다.

완료 기준

  • 미션 제목·설명·확인 기준이 원본과 같다.
  • 없는 주소는 성공으로 표시하지 않는다.
  • 응답을 기다리는 중임을 알 수 있다.
AI와 구현할 요청문 초안

버튼으로 아래 JSON을 fetch하고 title·description·check를 카드에 표시해 줘. 기다리는 중에는 버튼을 잠그고, 실패하면 이전 결과를 지우고 다시 요청할 수 있게 해 줘. 실제 요청 상태를 보여주고 성공·404·재시도를 시험해 줘.

/examples/lesson-menu.json
{ "title": "웹페이지의 제목을 바꿔보세요",
  "description": "나를 설명하는 한 문장으로 바꿔보세요.",
  "check": "모바일에서도 잘 읽히는지 확인하세요." }

내가 직접 확인한 것

정상 주소 / 없는 주소 / 다시 요청 — 세 상황을 시험하세요.

상황 → 예상 → 실제 결과:

한 문장으로 설명하기

내 버튼이 요청한 것은 ______이고, 응답에서 꺼낸 값은 ______이다.

교육 페이지로