학생 실습 워크북

따라하면 하나 만들어집니다

학년에 맞는 미션 하나를 고르세요. 각 단계에 “이렇게 말해 보세요” 예시가 있고, 복사 버튼으로 그대로 가져다 쓸 수 있습니다. 체크는 이 기기에만 저장되니 다음 시간에 이어서 할 수 있습니다.

누가 보나요?
학년을 고르면 그 미션만 보입니다
시작 전 약속 5가지 ① AI 서비스는 나이 제한이 있습니다. 만 14세 미만은 보호자 동의가 필요하므로 초등학생은 선생님 계정으로 선생님이 대신 입력하고, 학생은 “무엇을 어떻게 말할지”를 정합니다. 개인 계정으로 로그인하지 않습니다.
② 실명·학교·전화번호·주소를 쓰지 않습니다. 별명을 씁니다.
③ AI가 준 링크와 숫자는 직접 확인합니다. 확인 못 하면 쓰지 않습니다.
④ 수행평가·대회·공모전에 낼 때는 AI를 써도 되는지 먼저 확인하고, 써도 된다면 어느 부분을 AI가 만들었는지 적습니다. 안 된다고 하면 내지 않습니다.
⑤ 완성한 작품에 “AI와 함께 만들었습니다”를 적습니다.

미션 3종

내 학년의 미션

초등 탐험가20분6단계

말로 만드는 나만의 소개 페이지

목표 · 말을 바꾸면 결과가 바뀐다는 것을 직접 느껴 봅니다. 완성보다 발견이 목표예요.

0 / 6
  1. 화면을 켜기 전에 먼저 씁니다. 순서를 바꾸면 아무 말도 떠오르지 않아요.

  2. 내 이름 대신 별명을 씁니다. 실명·학교·전화번호는 쓰지 않기로 약속했지요.

    💬 이렇게 말해 보세요 (선생님 화면에 함께 입력)
    내 별명은 ‘별똥이’야. 내가 좋아하는 것은 우주, 그림 그리기, 고양이 세 가지야.
    이 세 가지를 소개하는 짧은 글을 초등학생이 읽기 쉽게 3문장으로 써 줘.
  3. ‘무엇을 몇 개’ 넣을지 말해 주면 원하는 모양에 가까워집니다.

    💬 이렇게 말해 보세요 (선생님 화면에 함께 입력)
    위 내용으로 소개 페이지를 HTML 한 파일로 만들어 줘.
    제목 1개, 카드 3개를 넣어 줘. 카드마다 그림 대신 이모지 1개를 크게 넣어 줘.
    한 문장은 40자 안쪽으로 짧게 써 줘.
  4. 한 번에 다 바꾸지 말고 한 곳씩 바꿉니다. 무엇 때문에 달라졌는지 알 수 있어요.

    💬 이렇게 말해 보세요 (선생님 화면에 함께 입력)
    배경을 밤하늘 색으로 바꿔 줘. 글자는 더 크고 잘 보이게 해 줘.
    글자색과 배경색이 잘 구별되는지도 확인해 줘.
  5. 다른 사람이 보면 내가 못 본 것이 보입니다. 이게 ‘검수’예요.

    💬 이렇게 말해 보세요 (선생님 화면에 함께 입력)
    친구가 ‘두 번째 카드 글씨가 너무 길어서 안 읽힌다’고 했어.
    그 카드만 더 짧게 고쳐 줘. 다른 곳은 그대로 둬.
  6. AI와 만든 것은 밝힙니다. 부끄러운 일이 아니라 정직한 일이에요.

    💬 이렇게 말해 보세요 (선생님 화면에 함께 입력)
    페이지 맨 아래에 ‘이 페이지는 AI와 함께 만들었습니다’ 한 줄을 작게 넣어 줘.

모두 체크하면 뱃지를 받습니다

남은 단계를 하나씩 체크하세요. 체크는 이 기기에만 저장됩니다.

중등 정찰대30분7단계

우리 반 미래직업 카드 사이트

목표 · 카드 하나를 잘 만들고 그 틀을 반복합니다. 이 사이트를 만든 ‘생성기’ 원리를 작게 체험해요.

0 / 7
  1. 12개 행성 중 하나를 고릅니다. 관심이 있는 곳이 조사도 잘 됩니다.

  2. 행성 페이지의 직업 목록과 수치 옆 출처 링크를 그대로 확인합니다. 출처를 못 찾으면 카드에 ‘확인 못 함’이라고 씁니다.

  3. 여기서 시간을 가장 많이 씁니다. 카드 하나가 좋아야 나머지도 좋아집니다.

    💬 이렇게 말해 보세요
    중학생이 볼 ‘미래 직업 카드’ 1개를 HTML+CSS 한 파일로 만들어 줘.
    [구성] 직업 이름 / 한 줄 설명(50자 이내) / 필요한 능력 2개 / 출처 링크 1개
    [조건] 카드 하나만 만들고, 같은 모양을 복사해서 늘릴 수 있게 만들어 줘.
    [하지 말 것] 출처 없는 숫자는 넣지 마.
  4. 모양을 새로 만들지 않고 내용만 바꿉니다. 이게 ‘틀 재사용’입니다.

    💬 이렇게 말해 보세요
    이 카드와 똑같은 모양으로 카드 2개를 더 만들어 줘.
    내용만 아래로 바꿔 줘. (직업/설명/능력/출처를 여기에 붙여넣기)
    모양이 서로 다르면 안 돼.
  5. 점검 항목을 3개로 제한하면 시간 안에 끝납니다. 링크 / 오타 / 읽기 쉬움.

    💬 이렇게 말해 보세요
    아래 페이지에서 (1) 안 열리는 링크, (2) 오타, (3) 한 문장이 50자를 넘는 곳을
    각각 목록으로 알려 줘. 고치지는 말고 목록만 줘.
  6. 무엇을 왜 고쳤는지 남기면 다음에 같은 실수를 줄일 수 있습니다.

  7. 틀이 잘 만들어졌다면 새 카드를 넣는 데 1분이면 됩니다. 오래 걸리면 틀이 문제예요.

모두 체크하면 뱃지를 받습니다

남은 단계를 하나씩 체크하세요. 체크는 이 기기에만 저장됩니다.

고등 개척자45분7단계

JSON 데이터와 생성기로 페이지 찍기

목표 · 이 사이트가 만들어진 방식을 축소해 재현합니다. 목표는 예쁜 페이지가 아니라 ‘한 곳을 고치면 전체가 바뀌는 구조’입니다.

0 / 7
  1. 먼저 종이에 표를 그립니다. 어떤 칸이 반드시 있어야 하는지부터 정합니다.

    💬 이렇게 말해 보세요
    ‘우리 학교 동아리 소개 페이지’를 데이터로 만들려고 해.
    어떤 필드가 필요할지 후보를 10개 제안하고, 그중 꼭 필요한 5개를 골라 이유를 붙여 줘.
    각 필드의 자료형(문자열/숫자/배열)도 같이 적어 줘.
  2. 이 사이트처럼 신뢰등급(검증/확인필요/구성)을 항목마다 넣습니다. 출처를 못 찾은 값은 넣지 않고 비워 둡니다.

    💬 이렇게 말해 보세요
    아래 스키마로 JSON 배열을 만들어 줘. 항목은 3개.
    { "name":"", "summary":"", "skills":[], "source":"", "url":"", "confidence":"verified|headline|editorial" }
    [규칙] 출처를 확인할 수 없는 값은 빈 문자열로 두고 confidence 를 editorial 로 표시해.
    숫자를 지어내지 마.
  3. 값을 넣으면 HTML이 나오는 함수 하나를 만듭니다. 페이지를 직접 쓰지 않습니다.

    💬 이렇게 말해 보세요
    위 JSON을 읽어 항목마다 HTML 파일 1개를 만드는 파이썬 스크립트를 써 줘.
    [조건] 템플릿은 함수 하나(render(item) -> str)에만 두고, 반복은 for 문으로 처리해.
    출력 폴더는 out/ 이고 파일명은 항목 이름을 영문 슬러그로 바꿔서 써.
    HTML 이스케이프를 반드시 적용해.
  4. Google Colab 을 쓰면 설치 없이 파이썬을 돌릴 수 있습니다. 한 번에 여러 장이 나오는지 확인합니다.

    💬 이렇게 말해 보세요
    실행했더니 아래 오류가 났어. 원인과 고칠 부분을 알려 줘.
    (오류 메시지를 그대로 붙여넣기)
  5. 이 단계에 성공하면 개념을 이해한 것입니다. 실패하면 템플릿이 여러 곳에 흩어져 있다는 뜻입니다.

    💬 이렇게 말해 보세요
    모든 페이지 아래에 출처 표기 영역을 추가하고 싶어.
    render() 함수만 고쳐서 전체 페이지에 반영되게 해 줘. 개별 파일을 직접 수정하지 마.
  6. 링크 / 접근성 / 색 대비 / 모바일 / 사실관계. 이 사이트가 쓴 항목과 같습니다.

    💬 이렇게 말해 보세요
    아래 HTML을 다음 5가지로 점검해서 문제 목록만 알려 줘. 고치지는 마.
    (1) 안 열리는 링크 (2) 대체 텍스트 없는 이미지 (3) 배경과 글자 대비 부족
    (4) 좁은 화면에서 넘치는 요소 (5) 출처 없이 적힌 숫자
  7. JSON에 한 덩이를 더 넣고 다시 실행합니다. 코드를 안 고치고 페이지가 늘어나면 성공입니다.

모두 체크하면 뱃지를 받습니다

남은 단계를 하나씩 체크하세요. 체크는 이 기기에만 저장됩니다.

막혔을 때

이럴 때는 이렇게

실습에서 실제로 자주 나오는 상황입니다. 제목을 눌러 펼쳐 보세요.

AI가 엉뚱한 걸 만들어 줬어요

한 번에 다 고치려 하지 말고 한 곳만 지목하세요. “두 번째 카드의 글씨만 더 짧게, 나머지는 그대로”처럼 바꿀 곳과 그대로 둘 곳을 함께 말하면 훨씬 잘 됩니다.

같은 말을 했는데 결과가 계속 달라요

AI는 매번 조금씩 다르게 답합니다. 그래서 ‘확인 기준’을 프롬프트에 넣어야 합니다. “문장은 40자 이내”처럼 셀 수 있는 조건을 넣으면 결과의 폭이 좁아집니다.

오류 메시지가 떠서 멈췄어요

오류 메시지를 지우지 말고 그대로 복사해서 AI에게 붙여 주세요. “이 오류가 났어. 원인과 고칠 부분을 알려 줘”라고 물으면 대부분 해결됩니다. 메시지를 요약하지 말고 원문 그대로 주는 것이 중요합니다.

AI가 알려 준 숫자를 써도 될까요

출처를 찾지 못하면 쓰지 않습니다. 이 사이트의 규칙이 그랬습니다. 기관명·발표연도·원문 링크 세 가지가 확인되면 쓰고, 하나라도 없으면 비워 두고 ‘확인 못 함’이라고 적으세요.

링크를 넣었는데 안 열려요

AI가 링크를 지어낸 경우가 많습니다(환각). 넣기 전에 반드시 한 번 눌러 보세요. 열리지 않으면 그 링크가 들어간 문장 전체를 다시 확인해야 합니다.

내 이름이나 사진을 넣어도 될까요

넣지 않습니다. 별명과 이모지로 대신하세요. 친구의 이름·사진은 본인 허락 없이 절대 쓰지 않습니다. 이 사이트도 같은 이유로 개인정보를 아예 받지 않습니다.

시간이 부족해서 다 못 끝냈어요

끝까지 못 가도 괜찮습니다. 다만 마지막에 ‘무엇을 알게 되었는지’ 한 줄은 꼭 쓰세요. 체크는 이 기기에 저장되니 다음 시간에 이어서 할 수 있습니다.

완성한 것을 친구에게 보여 주고 싶어요

파일을 직접 주는 것이 가장 안전합니다. 인터넷에 올릴 때는 개인정보가 들어 있지 않은지 먼저 확인하고, ‘AI와 함께 만들었습니다’ 표시를 남기세요.

끝냈다면 마지막 한 줄

오늘 알게 된 것을 한 줄로 쓰세요. 만든 결과물보다 이 한 줄이 오래 남습니다.

예시 — “같은 부탁을 다르게 말하면 결과가 완전히 달라진다는 것을 알았다.”

예시 — “AI가 알려 준 링크 3개 중 1개가 열리지 않아서, 확인이 왜 필요한지 알았다.”

나의 행성 찾기 12개 행성 보기 바이브코딩 설명으로