만드는 법
코딩 몰라도
5분이면 돼요
ChatGPT·Claude·Gemini 같은 AI에게 아래 문장을 붙여 넣으면 HTML 파일이 나와요. Heatml에 올리면 친구에게 카톡으로 바로 보낼 수 있는 링크가 생겨요.
세 단계
- 1. 프롬프트를 복사해 AI에 붙여 넣기
아래에서 마음에 드는 걸 골라 ‘복사’를 누르세요. [대괄호] 안은 원하는 내용으로 바꾸면 돼요.
- 2. 나온 코드를 .html 파일로 저장하기
- 컴퓨터: 코드 오른쪽 위 ‘복사’ → 메모장에 붙여 넣기 → 파일 이름을 game.html처럼 끝을 .html로 저장(인코딩은 UTF-8)
- Claude는 미리보기 화면의 다운로드 버튼으로 바로 받을 수 있어요
- 휴대폰: AI에게 “다운로드할 수 있는 html 파일로 줘”라고 하면 파일로 받을 수 있는 경우가 많아요
- 3. Heatml에 올리고 링크 보내기
‘업로드’에서 파일을 고르고 제목만 쓰면 끝이에요. 올리자마자 공유 링크와 카톡 미리보기 카드가 생겨요.
바로 쓰는 프롬프트
복사해서 그대로 써도 되고, 원하는 대로 고쳐도 돼요.
1분 미니게임
친구랑 점수 내기 하기 좋아요
[고양이가 떨어지는 생선을 받아 먹는] 미니게임을 만들어 줘. 터치와 키보드 둘 다로 조작하고, 점수와 남은 목숨, 갈수록 빨라지는 난이도, 게임 오버 화면과 '다시 하기' 버튼을 넣어 줘. 외부 라이브러리·이미지 파일 없이 HTML 파일 하나(CSS·JS 포함)로, 휴대폰 세로 화면과 PC 둘 다 잘 보이게 만들어 줘. 완성된 코드 전체를 한 번에 보여 줘.
퀴즈
시험 공부, 수업 복습, 친구 테스트
[한국사 근현대] 객관식 퀴즈 10문제를 만들어 줘. 한 문제씩 보여 주고, 고르면 바로 정답과 짧은 해설을 보여 주고, 마지막에 점수와 '다시 풀기' 버튼을 넣어 줘. 외부 라이브러리·이미지 파일 없이 HTML 파일 하나(CSS·JS 포함)로, 휴대폰 세로 화면과 PC 둘 다 잘 보이게 만들어 줘. 완성된 코드 전체를 한 번에 보여 줘.
축하 카드
생일·기념일에 링크로 보내기
[민지]의 [생일]을 축하하는 인터랙티브 카드를 만들어 줘. 화면을 누르면 폭죽이 터지고 메시지 [항상 고마워, 올해도 행복하자!]가 한 글자씩 나타나게 해 줘. 외부 라이브러리·이미지 파일 없이 HTML 파일 하나(CSS·JS 포함)로, 휴대폰 세로 화면과 PC 둘 다 잘 보이게 만들어 줘. 완성된 코드 전체를 한 번에 보여 줘.
나만의 도구
점심 메뉴 룰렛, 조 뽑기, 공부 타이머
[점심 메뉴 룰렛]을 만들어 줘. 항목을 추가·삭제할 수 있고, 버튼을 누르면 돌아가다가 하나가 뽑히는 애니메이션을 넣어 줘. 외부 라이브러리·이미지 파일 없이 HTML 파일 하나(CSS·JS 포함)로, 휴대폰 세로 화면과 PC 둘 다 잘 보이게 만들어 줘. 완성된 코드 전체를 한 번에 보여 줘.
수업·발표 자료
선생님·발표자에게 좋아요
[빛의 굴절]을 설명하는 인터랙티브 한 장짜리 웹페이지를 만들어 줘. 슬라이더로 [입사각]을 바꾸면 그림과 숫자가 바로 바뀌고, 아래에 짧은 설명을 넣어 줘. 외부 라이브러리·이미지 파일 없이 HTML 파일 하나(CSS·JS 포함)로, 휴대폰 세로 화면과 PC 둘 다 잘 보이게 만들어 줘. 완성된 코드 전체를 한 번에 보여 줘.
자기소개 페이지
포트폴리오·동아리 지원용
나를 소개하는 한 페이지 포트폴리오를 만들어 줘. 이름 [김민수], 한 줄 소개 [게임 만드는 걸 좋아하는 대학생], 프로젝트 카드 3개, 다크 모드 전환 버튼을 넣어 줘. 외부 라이브러리·이미지 파일 없이 HTML 파일 하나(CSS·JS 포함)로, 휴대폰 세로 화면과 PC 둘 다 잘 보이게 만들어 줘. 완성된 코드 전체를 한 번에 보여 줘.
잘 안 될 때
- 화면이 하얗게 나오면 AI에게 “오류 없이 동작하는지 다시 확인해서 고쳐 줘”라고 해 보세요.
- 바꾸고 싶은 건 이어서 말하면 돼요. “배경을 밤하늘로”, “버튼을 더 크게”처럼요.
- 소리는 화면을 한 번 누른 뒤부터 나와요(브라우저 규칙이에요).
- 이미지·소리 파일을 따로 쓰는 작품은 컴퓨터에서 폴더째 올려 주세요.
- 다른 사이트 로그인이나 개인 정보를 받는 작품은 올릴 수 없어요. 운영정책
다 만들었으면 올려 보세요
🎁 첫 작품을 올리면 100크레딧(커피 한 잔)을 받을 수 있어요.