2026년형 AI 활용
1파일 웹페이지 제작 가이드

코딩을 몰라도 괜찮습니다. 마우스 클릭만으로 나만의 웹앱을 만드는 가장 직관적인 방법.

1단계: 내게 맞는 AI 플랫폼 진입하기

복잡한 프로그램 설치 없이, 브라우저에서 바로 접속하세요. 현재 모델명을 고를 필요 없이 안내대로만 진입하면 됩니다.

AI 플랫폼 초심자 추천 이유 핵심 기능 NotebookLM 연동
Claude 가장 직관적이며 결과물을 앱처럼 즉시 확인 가능 Artifacts (아티팩트) 보통 (텍스트 복사)
ChatGPT 원하는 부분만 마우스로 선택해 수정 요청 가능 Canvas (캔버스) 보통 (텍스트 복사)
Gemini Google 계정으로 편리한 공유 및 팩트체크 Tools / Canvas 매우 우수 (Native)

Claude 활성화 및 진입법

🚀 진입 순서

  1. 화면 왼쪽 아래 [내 이름] ➔ [Settings] 클릭
  2. [Capabilities] 메뉴에서 [Artifacts] ON으로 변경
  3. 대화창에 만들고 싶은 웹페이지 요청

NotebookLM 연동 팁

Claude에서 생성된 마크다운 리포트나 코드를 복사하여 NotebookLM의 소스로 붙여넣어 학습 자료를 풍성하게 만들 수 있습니다.

ChatGPT 활성화 및 진입법

🚀 진입 순서

  1. 대화창에 "~한 웹페이지 만들어줘" 요청
  2. 코드가 생성되면 화면 우측에 [Canvas] 창 자동 실행
  3. 편집창에서 직접 코드를 보거나 결과 확인

NotebookLM 활용

ChatGPT로 구조화한 학습 커리큘럼이나 퀴즈 데이터를 NotebookLM에 입력하여 나만의 1:1 튜터를 강화하세요.

Gemini 활성화 및 진입법

🚀 진입 순서

  1. 입력창 주변 [도구(Tools)] 탭 클릭
  2. 기능 목록 중 [Canvas(캔버스)] 선택
  3. Google Drive 연동 기능을 통해 결과물 저장

🔥 NotebookLM 최강 연동

Gemini는 NotebookLM과 같은 Google 생태계 도구입니다. Gemini가 분석한 자료나 생성한 웹앱 코드를 Google 문서를 통해 NotebookLM 소스로 즉시 연결할 수 있어 연동성이 가장 뛰어납니다.

2단계: AI에게 명령하기 (초심자 전용)

아래 프롬프트 양식을 복사하여 빈칸을 채우세요. "HTML 파일 하나에 다 넣어달라"고 명시하는 것이 핵심입니다.

"HTML 파일 하나에 모든 코드(HTML, CSS, JS)를 합쳐서 완성해주세요.

* 만들고 싶은 것: [주제를 선택하세요]
* 디자인 스타일: 애플 스타일처럼 아주 깔끔하게 해주세요. 배경은 하얗고 버튼은 둥글게, 마우스를 올리면 반짝이는 효과를 넣어주세요.
* 작동 방식: 슬라이더나 버튼을 조작할 때마다 화면의 숫자나 그래프가 실시간으로 움직이게 해주세요.
* 모든 안내 문구는 친절한 한글로 적어주세요."

삼각함수 단위원

각도에 따라 sin, cos 값이 어떻게 변하는지 보여주는 실시간 시뮬레이터

영어 단어 암기웹

플래시카드 형식으로 단어를 맞히고 진행률을 표시하는 학습 도구

국어 문법 외우기

복잡한 문법 규칙을 퀴즈 형태로 풀며 개념을 잡는 웹앱

3단계: 미리보고 채팅으로 수정하기

코딩 프로그램 없이도 AI 화면에서 즉시 실행하고 고칠 수 있습니다.

🔍 미리보기 확인

  1. 명령을 내리면 화면이 반으로 나뉘며 우측에 창이 열립니다.
  2. 우측 창 상단의 Preview 버튼을 클릭합니다.
  3. 웹페이지를 직접 조작하며 테스트합니다.

💬 채팅으로 수정

"배경색을 살짝 연한 회색으로 바꿔줘."

"슬라이더 반응을 좀 더 부드럽게 해줘."

"폰트 크기를 키우고 버튼 위치를 조정해줘."

4단계: 내 컴퓨터에 저장하고 실행하기

방법 A: Claude 사용 시

우측 화면 오른쪽 아래의 Download(화살표 아이콘) 버튼을 클릭하세요. 다운로드 폴더에 index.html이 자동 저장됩니다.

방법 B: 메모장 활용

  1. 코드 창 상단 Copy Code(📋 아이콘) 클릭
  2. 메모장 실행 후 붙여넣기(Ctrl+V)
  3. [파일] ➔ [다른 이름으로 저장]
  4. 이름: my_app.html로 저장

🚀 저장된 파일을 더블클릭하면 실행됩니다!

5단계: 전 세계에 웹앱 배포하기

최신 유저 피드백과 마이그레이션 후기를 바탕으로 한 호스팅 플랫폼 비교입니다.

특징 GitHub Pages Cloudflare Pages Netlify
핵심 포지션 저장소 부록 / 기본 호스팅 무료 플랜 가성비 최강 Jamstack의 원조 (고급 기능)
강점 GitHub와 완벽한 일체감 무제한 대역폭, Private 지원 편리한 폼, 리다이렉트 설정
약점 무료는 공개 레포 필수 파일당 25MB 용량 제한 대역폭 초과 시 요금 폭탄

GitHub Pages (전통의 기본기)

👍 강점

  • 저장소 설정에서 클릭 몇 번으로 주소 생성
  • Jekyll 네이티브 지원 (마크다운 최적화)

👎 약점

  • 무료 계정은 코드가 공개된(Public) 저장소만 가능
  • 저장소 1GB, 매월 100GB 대역폭 제한

🚀 배포 따라하기

  1. GitHub에 로그인 후 'New repository' 생성
  2. 코드 내용을 index.html 파일로 만들어 업로드
  3. Settings ➔ Pages에서 Branch를 main으로 설정 후 저장
  4. 상단에 나타나는 URL로 접속 확인

Cloudflare Pages (현재 대세 ⭐)

👍 강점

  • 무제한 대역폭: 트래픽 폭탄에도 안전
  • 비공개 레포 지원: 소스코드 숨기기 가능
  • 현대적 프레임워크(Next.js 등) 지원 우수

👎 약점

  • 파일당 최대 25MB 용량 제한
  • 초기 배포 시 지역 캐싱 지연 가능성

🚀 배포 따라하기

  1. Cloudflare 접속 후 'Workers 및 Pages' 메뉴 이동
  2. '에셋 직접 업로드' (Direct Upload) 선택
  3. 웹앱 파일이 담긴 폴더를 드래그 앤 드롭
  4. 배포 완료 후 제공되는 주소로 확인

Netlify (고급 기능과 편의성)

👍 강점

  • 최고의 편의성: 복잡한 설정 없이 배포
  • 사용자 폼(Form): 백엔드 없이 문의 접수 가능

👎 약점

  • 요금 폭탄 주의: 무료 대역폭(100GB) 초과 시 자동 과금 리스크가 큼

🚀 배포 따라하기

  1. Netlify 가입 후 'Sites' ➔ 'Add new site' 클릭
  2. 'Deploy manually' (또는 Netlify Drop) 선택
  3. 파일이 담긴 폴더를 원 안으로 드래그
  4. 사이트 주소가 생성되면 접속 확인

이제 무엇을 만들어볼까요?

원하는 주제를 선택하면 AI에 즉시 입력할 수 있는 맞춤형 프롬프트 예시가 나타납니다.

바이브코딩의 심화:
자율형 AI 코딩 에이전트

단순 자동완성을 넘어, 스스로 터미널을 조작하고 빌드하는 에이전트의 세계로 초대합니다.

비교 항목 Claude Code OpenAI Codex Google Antigravity
핵심 형태 터미널 중심 CLI 데스크톱 앱 완합형 IDE
추천 대상 리팩토링, 백엔드 대형 앱, 병렬 작업 UI/UX, 웹디자인
킬러 기능 CLAUDE.md 메모리 Plan Mode(계획) 내장 브라우저 검증

🛠️ Claude Code

장인급 추론: 복잡한 리팩토링과 아키텍처 설계에 최적화. 메모리 기능을 통해 실수를 반복하지 않습니다.

🚀 OpenAI Codex

미사일형 사령탑: 목표를 주면 계획을 세워 하위 에이전트들이 동시다발적으로 작업을 완수합니다.

🌌 Antigravity

시각적 IDE: 내장 브라우저로 디자인을 직접 테스트하며 수정. 초보자가 프론트엔드 입문하기에 최고.