제휴 고지 제휴 링크가 있습니다. 구매·가입 시 운영자가 수수료를 받습니다. 자세히

목록 · 스페셜 · 바이브코딩 실습실

스페셜 · 바이브코딩 실습실

써 보고, 똑같이 만들어 봅니다

도도리 AI연구소가 클로드와 만든 게임·웹페이지·사주 도구를 과제 네 개로 묶었습니다. 완성작을 먼저 써 보고, 첫 부탁문을 복사해 클로드에게 넣으면 실습이 시작됩니다. 혼자 따라 해도 되고, 반나절 해커톤의 과제로 써도 됩니다.

실습 과제 4개 과제마다 첫 부탁문 1개 · 다음 부탁 2개 해커톤 진행표 3시간

실습 과제 4개

과제마다 완성작, 첫 부탁문, 다음 부탁 두 개를 실었습니다. 첫 부탁문을 복사해 클로드에 넣고, 화면이 뜨면 다음 부탁으로 넘어갑니다.

도도리 타워 게임 화면. 초록 블록이 30층까지 쌓여 있습니다 과제 1
게임입문반나절

원터치 쌓기 게임

완성작 · 도도리 타워

부탁 세 번으로 만든 HTML 파일 하나입니다. 혼자 하는 두 모드와 2~6명이 각자 폰으로 들어오는 온라인 방이 있습니다.

첫 부탁문

휴대폰 브라우저에서 도는 원터치 쌓기 게임을 HTML 파일 하나로 만들어 주십시오. 블록이 좌우로 오가고, 화면을 탭하면 그 자리에 내려놓습니다. 아래 블록과 어긋난 만큼 잘려 나가고, 전부 어긋나면 게임이 끝납니다. 점수는 쌓은 층 수입니다. 외부 라이브러리 없이 캔버스로 그려 주십시오.

  1. 다음 1딱 맞추면 '퍼펙트'로 치고, 소리와 진동을 넣어 주십시오.
  2. 다음 2날짜가 같으면 누구에게나 같은 탑이 나오는 '오늘의 탑' 모드를 넣어 주십시오.

요령. 첫 부탁에서 규칙을 전부 적습니다. 무엇을 누르면 무엇이 되는지, 언제 끝나는지, 점수는 무엇인지가 빠지면 클로드가 빈칸을 제멋대로 채웁니다.

보름꽃 원페이지 첫 화면. 꽃다발 사진 옆에 '보름마다 집에 꽃이 있습니다' 제목이 있습니다 과제 2
웹페이지입문반나절

가게 원페이지 사이트

완성작 · 보름꽃 (예시로 만든 꽃 구독 가게)

부탁문 여덟 개로 손님 정하기부터 HTML 까지 만듭니다. 사진과 시안은 힉스필드 MCP 로 만든 예시이고, 크레딧 23.75 가 들었습니다.

첫 부탁문

동네 꽃 구독 가게의 소개 페이지를 한 장짜리 HTML 로 만들려고 합니다. 아직 만들지 말고, 이 페이지를 볼 손님이 누구인지, 그 손님이 첫 화면에서 무엇을 알아야 하는지 세 줄로 정리해 주십시오.

  1. 다음 1첫 화면에 넣을 핵심 문장을 세 가지 안으로 주십시오. 각 안이 누구에게 먹히는지도 적어 주십시오.
  2. 다음 2색 둘과 글꼴 둘을 정하고, 정한 까닭을 한 줄씩 적어 주십시오.

요령. 바로 만들라고 하지 않습니다. 누구에게 무엇을 말할지 먼저 정하게 하면, 같은 HTML 이라도 글이 달라집니다.

운명 설계서 결과 화면. 타고난 기운과 10년 단위 점수 막대가 보입니다 과제 3
사주 도구중급하루

생년월일 입력 도구

완성작 · 운명 설계서

생년월일을 넣으면 열두 항목이 바로 나옵니다. 계산은 만세력·음력·신살·점수 계산기 네 개가 맡고, 네 파일을 합치면 1,224줄입니다. 이 계산기 코드는 공개합니다.

첫 부탁문

생년월일을 넣으면 띠와 별자리를 보여 주는 한 장짜리 HTML 을 만들어 주십시오. 띠는 1월 1일이 아니라 입춘(2월 4일 무렵)에 바뀐다는 점을 반영하고, 계산 규칙은 코드 주석으로 적어 주십시오.

  1. 다음 1양력과 음력 중에서 고를 수 있게 해 주십시오.
  2. 다음 2답을 아는 날짜 다섯 개로 계산이 맞는지 시험하는 코드를 같이 주십시오.

요령. AI 에게 간지를 외워서 쓰게 하면 그럴듯한 글자를 지어냅니다. 계산은 코드로 하게 하고, 답을 아는 날짜로 시험하게 합니다. 운명 설계서도 같은 방식으로 만들었습니다.

도도리 놀이터 마스코트. 로봇이 지구본과 상자를 들고 있습니다 과제 4
생활 계산기입문두 시간

한 화면 계산기

완성작 · 도도리 놀이터 (계산기·테스트 12종)

점심값, 구독료, 수면 주기 같은 생활 계산기와 테스트 12종이 있습니다. 수면 주기 계산기는 90분 주기와 잠드는 데 14분을 기준으로 잠들 시각 네 개를 보여 줍니다.

첫 부탁문

일어날 시각을 넣으면 잠들면 좋은 시각 네 개를 보여 주는 수면 주기 계산기를 HTML 파일 하나로 만들어 주십시오. 수면 주기는 90분, 잠드는 데 14분이 걸린다고 두고, 이 가정을 화면 아래에 적어 주십시오.

  1. 다음 1'지금 자면 몇 시에 일어나야 하는지' 도 한 번에 보이게 해 주십시오.
  2. 다음 2결과를 친구에게 보낼 수 있게 공유 단추를 넣어 주십시오.

요령. 숫자가 나오는 도구는 가정을 화면에 적게 합니다. 90분이 어디서 나왔는지 적혀 있어야 쓰는 사람이 결과를 믿습니다.

실습 규칙 3가지

과제가 달라도 규칙은 같습니다.

  1. 1
    한 번에 하나만 부탁합니다

    두 가지를 섞어 부탁하면 화면이 깨졌을 때 어느 쪽 탓인지 알 수 없습니다.

  2. 2
    부탁할 때마다 직접 눌러 봅니다

    클로드가 '고쳤습니다' 라고 답해도 화면에서 확인하기 전에는 고친 것이 아닙니다. 휴대폰에서도 한 번 엽니다.

  3. 3
    부탁문을 적어 둡니다

    무엇을 부탁했고 무엇이 바뀌었는지 한 줄씩 적습니다. 적어 두면 다음 사람이 그대로 따라 할 수 있습니다.

반나절 해커톤으로 쓰는 법

세 시간이면 과제 하나를 끝까지 만들고 발표까지 합니다. 아래는 도도리 AI연구소가 권하는 진행안이고, 팀 수와 시간에 맞춰 줄이거나 늘리면 됩니다.

  1. 0:00
    과제 고르기15분

    팀마다 과제 하나를 고르고, 완성작을 5분 동안 직접 써 봅니다.

  2. 0:15
    첫 화면 띄우기30분

    첫 부탁문을 넣고 화면이 뜰 때까지 갑니다. 이 단계에서는 모양보다 규칙이 맞는지만 봅니다.

  3. 0:45
    한 번에 하나씩 고치기60분

    부탁 하나, 직접 눌러 보기, 기록 한 줄. 이 순서를 되풀이합니다.

  4. 1:45
    남에게 써 보게 하기30분

    옆 팀이 설명 없이 써 봅니다. 만든 팀은 옆에서 보기만 하고, 막힌 곳을 받아 적습니다.

  5. 2:15
    발표와 심사45분

    팀마다 3분 동안 시연하고 부탁문 기록을 보여 줍니다.

심사 기준 4가지

항목마다 5점, 합계 20점으로 매깁니다.

  1. 처음 쓰는 사람이 끝까지 쓰는가설명 없이 써 본 옆 팀이 막힌 곳이 몇 군데였는지 봅니다.
  2. 다시 쓰고 싶게 만드는가점수, 오늘의 기록, 공유 단추처럼 한 번 더 열 까닭이 있는지 봅니다.
  3. 부탁문 기록이 남아 있는가몇 번 부탁했고 무엇을 고쳤는지 다른 사람이 따라 할 수 있게 적었는지 봅니다.
  4. 주소로 열리는가휴대폰에서 주소 하나로 열 수 있으면 만점입니다. 파일로만 있으면 절반입니다.
준비물
팀마다 노트북 한 대클로드 계정화면을 확인할 휴대폰부탁문을 적을 메모장

여럿이 모여 하는 파티 게임 9종(사다리 타기, 눈치게임, 가위바위보 서바이벌 등)은 도도리 플레이에 있습니다.게임 모음 보기 →

자주 묻는 질문

코딩을 몰라도 할 수 있습니까?

할 수 있습니다. 네 과제 모두 코드를 직접 쓰지 않고 부탁문으로 만듭니다. 다만 결과를 눌러 보고 무엇이 이상한지 말로 설명하는 일은 직접 해야 합니다. 실습에서 가장 많이 느는 것도 이 설명하는 힘입니다.

클로드의 어느 화면에서 합니까?

대화 옆 창에 HTML 이 바로 뜨는 아티팩트로 시작할 수 있습니다. 파일을 여러 개 다루거나 사이트에 올리려면 클로드 코드가 편합니다. 두 화면의 차이는 '클로드 코워크·코드·아티팩트·디스패치 사용법' 글에 정리했습니다.

만든 것을 인터넷에 올리려면 어떻게 합니까?

도도리 타워 제작기의 여섯째 단계 '올리기' 에 GitHub 에 올리고 Vercel 에 연결한 과정이 있습니다. 붙인 도구는 Vercel MCP, GitHub MCP, Playwright MCP 입니다.

학교 수업이나 사내 해커톤에 써도 됩니까?

이 페이지의 글과 진행표는 CC BY-NC 4.0 입니다. 출처를 밝히면 비영리 수업과 행사에 쓸 수 있습니다. 유료 강의나 기업 교육에 쓰시려면 문의 페이지로 연락해 주십시오.

완성작과 똑같이 나오지 않습니다.

정상입니다. 같은 부탁문을 넣어도 클로드는 매번 조금씩 다른 코드를 씁니다. 완성작은 정답이 아니라 방향입니다. 규칙이 맞게 돌아가면 첫 단계는 통과입니다.

이어 읽을 글

회원이 되면 가이드의 부탁문 전체를 복사할 수 있습니다.

도도리 타워와 원페이지 가이드의 부탁문 전체는 회원에게 열립니다. 가입은 무료이고 비밀번호 없이 메일 링크로 들어옵니다.

회원가입로그인

찾는 것이 더 있으십니까

“노션” 두 글자만 치십시오. 스킬·플러그인·MCP 가 나란히 올라옵니다.