모듈 1⏱️ 예상 소요 시간: 30분📊 난이도: 초급

모듈 1: 클로드 AI로 간단한 웹사이트 개발하기

반응형 랜딩 페이지 제작부터 Vercel/GitHub Pages 1분 무료 배포까지

🎯 학습 목표 및 개요

클로드 AI의 코드 생성 능력을 활용하여 현대적이고 반응형 스타일의 랜딩 페이지를 작성하고, 실제 인터넷 주소를 가진 웹사이트로 배포합니다.

✅ HTML/CSS/JS 프롬프트 작성 -> 실시간 코드 수정 피드백 -> 무료 웹 호스팅(Vercel) 배포 실습완료

클로드에게 HTML/CSS/JS 생성 프롬프트 작성하기

스타일리시한 서비스 랜딩페이지 모듈 코드를 요청하는 완성형 프롬프트입니다.

클로드_입력_프롬프트.txttext

1	당신은 전문 웹 디자이너입니다. "AI 가계부 서비스"를 홍보하는 모던한 단일 페이지 랜딩페이지를 제작해주세요.
2
3	[요구사항]
4	1. Header: 서비스 로고, 메뉴(기능소개, 요금제, 후기), 무료 시작하기 버튼
5	2. Hero Section: 강력한 메인 카피, 서브 설명, CTA 버튼, 가상의 앱 화면 카드
6	3. Features Section: 3개의 주요 기능 카드가 가로 배치(모바일에서는 세로 배치)
7	4. Interactive Utility: 간단한 월 지출 계산기 인터랙션 기능 (JavaScript 구현)
8	5. Footer: 저작권 표시 및 연락처 (ju9896012@gmail.com)
9
10	Tailwind CSS CDN을 사용하고 깔끔하고 현대적인 디자인으로 만들어주세요.

복사 버튼을 누른 후 claude.ai 입력창에 그대로 붙여넣으세요.

index.htmlhtml

1	<!DOCTYPE html>
2	<html lang="ko">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>AI 스마트 가계부</title>
7	<script src="https://cdn.tailwindcss.com"></script>
8	</head>
9	<body class="bg-slate-50 text-slate-900 font-sans">
10	<header class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
11	<div class="font-bold text-xl text-amber-600">SmartBudget AI</div>
12	<button class="bg-amber-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-amber-700 transition">시작하기</button>
13	</header>
14	<main class="max-w-5xl mx-auto px-6 py-16 text-center">
15	<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight">클로드 AI가 관리하는<br/><span class="text-amber-600">스마트 지출 관리</span></h1>
16	<p class="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">AI 분석을 통해 매월 지출 패턴을 파악하고 자동으로 저축 플랜을 제안받으세요.</p>
17	</main>
18	</body>
19	</html>

클로드가 생성한 단일 파일 랜딩페이지 기본 뼈대 코드 예시입니다.

💡 디자인 수정 요청 팁

클로드에게 "버튼 색상을 주황색 계열로 바꾸고 모서리를 조금 더 둥글게 만들어줘" 또는 "폰트를 더 굵게 지정해줘"와 같이 구체적으로 지시해보세요.

📸 실습 스크린샷 가이드라인

16:9

클로드에서 작성된 HTML 코드가 브라우저 라이브 뷰어에서 렌더링된 화면

[이미지 영역: 1920x1080 (16:9)]

🎯 스크린샷 필수 포함 요소:

Hero 섹션 타이틀반응형 버튼Tailwind CSS 적용 UI

생성된 코드 실시간 테스트 및 오류 수정 요청

버그가 발생하거나 디자인을 변경하고 싶을 때 클로드에게 재요청(Re-prompting)하는 노하우를 배웁니다.

클로드_입력_프롬프트.txttext

1	현재 작성해준 코드에서 지출 계산기 버튼을 누르면 계산 결과가 뜨지 않고 콘솔 에러가 발생해.
2	JavaScript의 eventListener 부분에서 DOM ID 매칭을 확인해서 수정한 전체 코드를 다시 작성해줘.

복사 버튼을 누른 후 claude.ai 입력창에 그대로 붙여넣으세요.

⚠️ 수정 요청 시 유의사항

일부 코드 조각만 요구하면 기존 코드가 빠지는 경우가 있습니다. 반드시 "전체 코드를 유지한 상태로 수정해줘"라고 명시하는 것이 안전합니다.

Vercel / GitHub Pages를 통한 1분 배포 실습

만든 웹사이트를 누구나 접속할 수 있는 실제 URL로 배포해봅니다.

🚀 Vercel 드래그 앤 드롭 배포 가이드

1. 만든 index.html 파일을 폴더 하나에 저장합니다. 2. vercel.com 프로젝트에 로그인 후 해당 폴더를 드래그 앤 드롭하면 10초 만에 무료 https://주소가 생성됩니다.