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

AI 도구로 한 파일짜리 웹앱을 만들고 실행·배포하는 과정을 안내합니다.

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 소스로 활용할 수 있습니다.

Gemini 활성화 및 진입법

진입 순서

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

NotebookLM 연동

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

2단계: AI 요청 작성하기

아래 프롬프트의 주제만 바꿔 사용해 보세요. HTML·CSS·JavaScript를 파일 하나에 담아 달라는 조건이 포함되어 있습니다.

"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: 내장 브라우저에서 디자인을 테스트하고 수정할 수 있습니다.