이 챕터가 존재하는 이유: 50위안에 거의 심장마비가 올 뻔했다
이 챕터를 쓰게 된 이유는 간단합니다. 친구가 간단한 룰렛 웹페이지 하나 만드는 데 50위안을 썼다는 이야기를 들었기 때문입니다.
그 이야기를 듣고 저는 거의 심장마비가 올 뻔했습니다.
50위안이 비싸다는 게 아닙니다. 이런 건 무료 AI로 5분이면 만들 수 있거든요!
진심으로, 이런 필요가 있다면 저한테 직접 50위안을 팁으로 주고 단계별로 가르쳐 달라고 해도 그런 서비스에 돈을 주는 것보다 낫습니다. 적어도 제 튜토리얼은 무료이고, 모든 단계를 명확히 설명해 드리니까요.
그래서 이 챕터는 특별 추가편으로, 무료 AI를 사용해 간단하지만 실용적인 HTML 페이지를 만드는 방법을 구체적으로 알려드립니다.
중요 알림: 먼저 무료 웹 버전에 익숙해지세요
본격적으로 시작하기 전에 한 가지 강조하고 싶습니다.
현재 AI 웹 버전은 이미 매우 강력합니다. 프로그래밍 지식이 필요 없고, 소프트웨어를 설치할 필요도 없으며, 그냥 브라우저를 열어서 사용하면 됩니다.
AI 웹 버전으로 무엇을 할 수 있을까요?
- 대화하고 질문에 답하기
- 이미지 인식 및 내용 분석
- 코드 작성 및 웹페이지 제작
- PPT 및 보고서 만들기
- 문서 번역 및 요약
- 그 외에도 많습니다…
제 제안: 초보자는 먼저 무료 웹 기반 AI에 능숙해진 후에 API 같은 고급 도구를 고려하세요.
왜냐하면 웹 버전은:
- 완전 무료입니다 (또는 넉넉한 무료 할당량 제공)
- 사용법이 간단하고 배우기 쉽습니다
- 이미 충분히 강력합니다
- 문제가 생기면 AI에게 바로 물어볼 수 있습니다
이제 본론으로 들어갑니다: AI를 사용해 룰렛 웹페이지 만들기.
AI Studio를 사용해 HTML 웹페이지 만들기
1단계: Google AI Studio 접속
Google의 공식 무료 AI 플랫폼인 Google AI Studio를 사용합니다.
왜 이것을 선택했나요?
- 완전 무료
- Gemini 3 Pro가 강력함
- 웹페이지 제작 같은 복잡한 작업에 적합
단계:
- https://aistudio.google.com 열기
- Google 계정으로 로그인 (VPN/프록시 필요)
- 메인 인터페이스 진입
2단계: Playground 및 모델 선택
로그인하면 AI Studio의 메인 인터페이스가 보입니다.
단계:
- 왼쪽 메뉴에서 “Playground” 클릭
- 오른쪽 상단 모델 선택기에서 Gemini 3 Pro 선택
- Flash는 선택하지 마세요. Pro가 더 강력합니다.
- 특히 코드 작성 같은 복잡한 작업에 적합
- 왼쪽이 채팅 인터페이스이고 하단에 입력 상자가 있는지 확인
이제 AI와 대화할 준비가 되었습니다.
3단계: 프롬프트 입력하여 AI가 웹페이지 생성하도록 하기
이 단계가 핵심입니다: AI에게 원하는 것을 명확히 알려줘야 합니다.
구체적일수록 좋습니다! “룰렛 웹페이지 만들어 줘"라고만 하지 말고, 다음과 같이 구체적으로 말하세요:
- 어떻게 생겼는지
- 어떤 기능이 있는지
- 사용 방법
- 어떤 스타일인지
완전한 프롬프트 예시
아래 텍스트를 복사하여 AI Studio의 입력 상자에 붙여넣으세요:
Please help me generate a lottery wheel webpage.
If no prizes are specified, use default prizes: Grand Prize, First Prize, Second Prize, Third Prize, Lucky Prize, Try Again.
Functional requirements:
- Beautiful wheel design, supporting 6-8 sectors
- A "Start Lottery" button in the center
- Click the button to spin the wheel
- The spin should have acceleration and deceleration effects for realism
- After stopping, a popup shows the result
- Click the popup to close and spin again
Design requirements:
- Festive and grand style (mainly red and gold)
- The wheel border should have texture
- Each sector should have alternating colors
- A pointer indicating the current position
- Responsive for mobile and desktop
After completion, please explain:
1. How to open and use it
2. How to modify the prize names
3. How to adjust the winning probability
Use example prizes: iPhone 16, AirPods, 100 yuan red envelope, 50 yuan red envelope, Try Again
단계:
- 위 프롬프트를 복사하여 입력 상자에 붙여넣기
- “실행” 버튼을 클릭하거나 Enter 키 누르기
- AI가 생성할 때까지 기다리기 (보통 10~30초)
4단계: AI가 완전한 HTML 코드 반환
AI가 생성을 완료하면 큰 코드 블록이 표시됩니다.
AI의 응답에는 일반적으로 다음이 포함됩니다:
- HTML 코드: 완전한 웹페이지 파일
- 사용 설명: 여는 방법과 수정 방법
- 맞춤 가이드: 상품 변경 및 확률 조정 방법
코드는 다음과 같습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lottery Wheel</title>
<style>
/* Style code here */
</style>
</head>
<body>
<!-- Webpage content here -->
<script>
// Function code here
</script>
</body>
</html>
겁먹지 마세요! 웹페이지는 지금 바로 실행할 수 있습니다! 스크린샷을 따라 클릭만 하면 됩니다.
5단계: 웹페이지 내용 수정 (상품 변경, 확률 조정)
AI가 생성한 웹페이지는 보통 꽤 완성도가 높지만, 다음과 같은 부분을 수정하고 싶을 수 있습니다:
- 상품 이름 변경
- 당첨 확률 조정
- 색상 변경
걱정 마세요. 코드를 이해할 필요 없습니다. 계속 AI에게 물어보면 됩니다!
대화를 이어가며 AI가 수정하도록 하기
단계:
- AI Studio 채팅 창을 닫지 마세요
- AI가 이전 대화를 기억합니다
- 아래에 계속 질문할 수 있습니다
- 수정 요청 입력
예시 1: 상품 이름 변경
입력 상자에 다음을 입력:
Add a settings interface to this webpage to set the probabilities and specific prizes for different awards.
만족할 때까지 반복
이것이 AI로 무언가를 만드는 핵심 과정입니다:
- 원하는 것을 명확히 말하기
- AI가 첫 번째 버전 생성
- 사용해 보고 문제 찾기
- AI에게 문제를 알리고 수정 요청
- 3~4단계를 완벽할 때까지 반복
핵심 포인트:
- 번거로워하지 말고 여러 번 시도하세요
- 한 번에 하나씩만 변경하여 제어하기 쉽게 하세요
- AI가 잘못 변경하면 “아니요, 이전 버전으로 되돌려 주세요"라고 말하세요
6단계: 최종 웹페이지 다운로드
이제 완벽한 룰렛 웹페이지가 생겼습니다. 어떻게 다운로드하나요?
다운로드 버튼을 클릭하기만 하면 로컬에 다운로드되고, 열어서 사용할 수 있습니다!
HTML 웹페이지로 무엇을 할 수 있을까? 실용적인 미니 도구 10가지 추천
이쯤에서 이런 생각이 들 수 있습니다: 룰렛 말고도 AI로 어떤 웹페이지를 만들 수 있을까?
정답은: 거의 모든 간단한 미니 도구를 만들 수 있습니다!
다음은 바로 AI에게 만들어 달라고 요청할 수 있는 실용적인 예시 10가지입니다:
1. 온라인 번역 도구
프롬프트:
Make an online translation webpage that supports Chinese-English translation with a clean interface.
2. 이미지 텍스트 인식 (OCR)
프롬프트:
Make a webpage that can upload an image, recognize text in the image, and allow copying.
3. 할 일 목록
프롬프트:
Make a to-do list webpage that can add, delete, and mark tasks as complete, with data saved in the browser.
4. 카운트다운/타이머
프롬프트:
Make a multi-functional timer webpage: countdown, Pomodoro timer, stopwatch.
5. 랜덤 비밀번호 생성기
프롬프트:
Make a password generator that can set length and complexity, with one-click copy.
6. BMI 계산기
프롬프트:
Make a BMI health calculator that inputs height and weight and displays health advice.
7. QR 코드 생성기
프롬프트:
Make a QR code generation webpage that inputs text or URL, generates a QR code, and allows download.
8. 색상 선택기
프롬프트:
Make a color tool that can select colors, display RGB/HEX values, and provide color scheme suggestions.
9. Markdown 편집기
프롬프트:
Make a simple Markdown editor with input on the left and real-time preview on the right.
10. 지출 추적기
프롬프트:
Make a simple expense tracking webpage that can record income and expenses and display statistical charts.
이 도구들의 공통 특징:
- 모두 단일 HTML 파일
- 서버 불필요
- 브라우저에서 열기만 하면 됨
- 완전 무료
자주 묻는 질문
Q1: 코드를 전혀 모르는데 정말 할 수 있을까요?
A: 네, 가능합니다! 알아야 할 것은 다음 세 가지뿐입니다:
- 복사 및 붙여넣기
- 파일 저장
- 브라우저로 파일 열기
이 세 단계만 알면 어린이도 할 수 있습니다.
Q2: AI가 생성한 코드가 완벽하지 않으면 어떻게 하나요?
A: 정상입니다! AI와 계속 대화하세요:
- “여기 버그가 있어요. 버튼을 클릭해도 아무 일도 안 일어나요”
- “이 색상이 별로예요. 예쁜 색으로 바꿔 주세요”
- “효과음을 추가할 수 있나요?”
AI가 피드백에 따라 계속 개선해 줍니다.
Q3: AI로 만든 웹페이지를 상업적으로 사용할 수 있나요?
A: 기술적으로는 가능하지만, 다음 사항에 유의하세요:
- AI가 생성한 코드는 일반적으로 저작권 제한이 없습니다
- 하지만 고객 프로젝트에 사용할 경우 충분히 테스트하세요
- 복잡한 상업 프로젝트는 여전히 전문 개발자를 고용하는 것이 좋습니다
Q4: HTML 파일이 열리지 않는 이유는 무엇인가요?
A: 일반적인 이유:
- 파일 확장자 오류:
.html인지 확인하고,.html.txt가 아니어야 함 - 코드 불완전: 모든 코드를 복사했는지 확인
- 브라우저 문제: 다른 브라우저 시도
Q5: 모바일에서 사용할 수 있나요?
A: 네! 두 가지 방법:
- HTML 파일을 휴대폰으로 전송하고 모바일 브라우저로 열기
- Netlify 같은 플랫폼에 업로드하고 URL로 접속 (추천)
Q6: 코드를 수정하고 싶은데 방법을 모르겠어요?
A: 직접 수정하지 마세요! AI에게 물어보세요:
- “배경색을 파란색으로 바꾸고 싶어요”
- “제목 글꼴을 더 크게 만들고 싶어요”
- “배경 음악을 추가하고 싶어요”
AI가 수정해 주면 새 코드를 복사하세요.
요약
오늘 배운 내용:
- Google AI Studio를 사용해 HTML 웹페이지를 생성하는 방법
- 명확한 프롬프트를 작성하여 AI에게 요구사항을 전달하는 방법
- HTML 파일을 저장하고 브라우저에서 여는 방법
- 대화를 통해 웹페이지를 지속적으로 개선하는 방법
- 웹페이지를 공유하거나 배포하는 방법
핵심 아이디어:
- 프로그래밍 지식 불필요
- 돈 불필요
- AI와 소통하는 방법만 알면 됨
- 5분 만에 실용적인 도구 제작
다음에 누군가 간단한 웹페이지를 만들어 달라고 하면:
- AI를 사용해 5분 만에 만들기
- 그 50위안 받기 (농담입니다)
- 또는 스스로 만들 수 있도록 가르쳐 주기
진심으로, 돈 낭비하지 마세요!