한국어로 "이런 페이지 만들어줘" 한 줄이면 시작 — txt · word 자료를 함께 주면 더 정확
용어를 알면 결과가 한층 더 정교하고 세련해집니다
Google Drive에서 자료 다운로드 → 압축 해제 → 압축을 풀면 보이는 폴더를 그대로 실습(작업) 폴더 안에 넣으면 됩니다
모든 웹페이지는 HTML · CSS · JavaScript 세 가지로 만들어집니다
클로드코드는 이 세 가지를 자동으로 작성해 한 개의 .html 파일로 만들어 줍니다
| 언어 | 역할 |
|---|---|
HTML | 페이지의 구조·내용 (제목, 문단, 이미지, 버튼 등) |
CSS | 디자인·레이아웃 (색상, 폰트, 간격, 배치) |
JavaScript | 동작 (버튼 클릭, 애니메이션, 입력 처리) |
한국어로 "이런 페이지 만들어줘" 라고 부탁만 하면 클로드코드가 알아서 세 가지를 작성합니다.
참고 — React · Next.js 는?
이 외에 React · Next.js 같은 기술로도 웹페이지를 만들 수 있지만, 테스트·환경 설정 등이 복잡합니다. HTML · CSS · JavaScript 가 가장 핵심이고, AI 가 자유롭게 작성 가능해서, 최근에는 이걸로 웹페이지뿐 아니라 슬라이드·영상 화면 까지 다 만듭니다.
결론
단순 소개·홍보·정보 전달용 페이지라면 클로드코드로 충분히 만들 수 있습니다.
"비개발자를 위한 클로드코드 입문" 강의를 소개하는
간단한 웹페이지를 HTML/CSS/JS 로 만들어줘. 파일명은 index.html.txt · word 같은 자료 파일을 함께 주면 더 정확한 결과가 나옵니다
용어를 모르더라도 "이런 페이지 만들어줘" 한 줄로도 결과가 나옵니다
txt · word 같은 자료 파일을 함께 주면 클로드코드가 그 안의 내용을 읽어 페이지로 옮겨줍니다
본 절의 모든 예제 파일은 작업 폴더에 미리 준비돼 있음 (claude-landing/)
프롬프트 작성 시 주의 — 파일은 그냥 파일명만
파일을 가리킬 때 @경로/파일명 형태로 정확히 위치를 명시할 수도 있지만, 자동완성이 잘 안 되거나 경로 표기에 익숙하지 않은 입문자에게는 부담스러울 수 있습니다.
그냥 파일명만 적어도 클로드코드가 현재 작업 폴더 안에서 알아서 찾아줍니다 — 입문자라면 굳이 @를 쓰지 말고 event_info.txt 처럼 파일명만 쓰는 걸 추천합니다.
파일명 규칙 추천
한글 파일명은 프로그램과 OS에 따라 예상치 못한 문제를 일으킬 수 있으니, 가능하다면 영어 대소문자 + 숫자 + 언더바(_) 로 짓는 걸 추천합니다.
예) event_info.txt, resume_leeseonghyun.docx
프로젝트 폴더 정리 팁 💡 — 파일이 많으면 서브폴더로
입문자분들 컴퓨터를 보면 한 폴더에 파일이 잔뜩 섞여 있는 경우가 많은데, 그러면 본인도 헷갈리고 클로드코드도 잘못된 파일을 고를 가능성이 커집니다.
목적별 서브폴더로 정리하면 훨씬 안정적입니다:
claude-landing/
├─ img/ → 로고·사진·아이콘
└─ material/ → 텍스트·워드·엑셀 등 자료 파일클로드코드에게 부탁할 때도 "img 폴더의 로고를 헤더에 넣어줘" 처럼 폴더 단위로 명시하면 결과가 깔끔합니다.
event_info.txt) 활용가장 가벼운 형식. 이벤트 정보·회사 소개 같은 내용을 메모장에 적어두기만 하면 됨.
event_info.txt 의 내용을 그대로 활용해서
이벤트 안내 웹페이지(event.html)를 만들어줘.resume_leeseonghyun.docx) 활용이력서·회사 소개서 같이 이미 잘 정리된 워드 문서를 그대로 재료로.
resume_leeseonghyun.docx 이력서를 읽고,
1페이지 개인 포트폴리오 웹페이지(portfolio.html)를 만들어줘.이 시점에서
위 2개 프롬프트로도 페이지가 만들어지지만, 결과는 클로드코드가 알아서 정한 디자인·구조로 나옵니다. 더 정교하게 원하는 결과를 얻으려면 다음 절의 용어를 알아두면 큰 도움이 됩니다.
용어를 알면 클로드코드와의 소통이 정확해집니다
클로드코드와 원활하게 소통하려면 기본 웹 용어가 중요합니다
아래 용어들을 실제 동작·풀스크린 데모로 보여주는 인터랙티브 가이드를 함께 띄워두고 비교하면서 보세요. 새 탭에서 열립니다.
용어를 쓰면 결과가 달라집니다
"히어로 섹션의 CTA 버튼에 호버 효과 넣어줘" → 정확히 원하는 결과
"위쪽 제목 영역의 큰 버튼을 마우스 올리면 반응하게 해줘" → 의미는 통하지만 애매하게 전달
max-width: 1200px; margin: 0 auto)을 씀.좋은 프롬프트가 좋은 결과를 만듭니다
랜딩페이지: 방문자가 처음 도착하는 한 페이지짜리 웹사이트
보통 하나의 목표(신청·구매·문의·이벤트 응모)에 수렴하도록 구성
본 실습에서는 잔재미코딩 학습자 서베이 이벤트 페이지를 만들어 보며 익힘
| 항목 | 설명 | 예시 (잔재미코딩 서베이 이벤트) |
|---|---|---|
| 대상 | 누구를 위한 페이지인지 | 잔재미코딩 강의에 관심 있는 학습자 (입문자·기존 수강생) |
| 목표 행동 | 방문자가 하길 원하는 행동 | 구글 폼 서베이 응답 → 자동 응모 |
| 포함할 섹션 | 어떤 블록들로 구성할지 | 히어로, 혜택 안내, 참여 방법, FAQ |
| 디자인 방향 | 어떤 분위기·색상 | 다크 네이비 베이스 + 주황 포인트 |
| 이벤트 정보 | 이벤트명·혜택·기간·발표 | 무료 수강권 5명 추첨, 응모 4주, 마감 후 1주 이내 발표 |
| 외부 링크 / 자산 | 연결할 폼·사용할 로고 | 구글 폼 + 로고: logo2026_main.png |
이벤트·서베이 랜딩페이지는 보통 위에서 아래로 이 순서를 따릅니다.
헤더(Header) — 잔재미코딩 로고(logo2026_main.png)와 우측 상단 CTA 버튼
히어로(Hero) — 이벤트명 메인 카피 + 한 줄 설명 + 큰 CTA 버튼
혜택 안내 — 무료 수강권·할인 쿠폰을 카드 그리드로 (시각적 임팩트)
참여 방법 — 1) 페이지 둘러보기 → 2) 버튼 클릭 → 3) 폼 응답 → 4) 자동 응모
서베이 미리보기 — 어떤 질문이 나오는지·왜 응답이 필요한지 살짝 노출
응모 기간·당첨 발표 — 강조 박스로 큼직하게
FAQ — 응모 자격, 중복 응모, 개인정보, 당첨 안내 등 4~5개
최종 CTA — 다시 한 번 행동 유도 ("지금 응답하고 무료 수강권 받아가세요")
푸터(Footer) — 잔재미코딩 · 연락처 · 약관·개인정보 처리방침
CTA (Call To Action)
"서베이 참여하기", "지금 응답하기" 처럼 방문자의 행동을 유도하는 버튼·문구. 이벤트 페이지에서는 페이지 전체가 단 하나의 CTA(서베이 응답)에 수렴하도록 설계하는 게 핵심.
아래 정보를 바탕으로 한 페이지짜리 이벤트 랜딩페이지 HTML 을 만들어줘.
- 대상: 잔재미코딩 강의에 관심 있는 학습자 (입문자~기존 수강생)
- 브랜드명: 잔재미코딩 (입문자 친화 IT·AI 교육 플랫폼)
- 이벤트명: "다음 강의는 당신의 의견으로 만들어집니다"
- 목표 행동: "서베이 참여하기" 버튼 클릭 → 구글 폼 새 창 이동
- 혜택: 무료 수강권 5명 추첨 + 30% 할인 쿠폰 100명
- 응모 기간: 4주간 (placeholder), 마감 후 1주 이내 당첨자 발표
- 구글 폼 링크: https://forms.gle/example (placeholder)
- 로고 파일: logo2026_main.png (좌측 헤더에 사용)
- 섹션 순서: 헤더 → 히어로 → 혜택 안내 → 참여 방법 → 서베이 미리보기 → 응모 기간 → FAQ → 최종 CTA → 푸터
- 디자인: 다크 네이비 테마, 주황 포인트, 모든 CTA 버튼은 주황으로 통일
- 파일명: landing.html상세 + 추가 프롬프트로 단계별 다듬기
event_info.txt (이벤트 정보) + logo2026_main.png (잔재미코딩 로고)
두 파일을 그대로 활용해 단 한 줄의 목표(서베이 응답)에 수렴하는 페이지 만들기
잔재미코딩이 다음 강의 방향성을 정하기 위해 학습자 의견을 받는 서베이 이벤트 페이지를 제작합니다. 방문자가 구글 폼 서베이에 응답하면 추첨을 통해 무료 수강권을 증정. 페이지의 목표는 단 하나 — 구글 폼으로 이동해서 응답을 마치게 하는 것.
event_info.txt 의 정보와 logo2026_main.png 로고를 활용해서
잔재미코딩의 학습자 서베이 이벤트 랜딩페이지(landing.html)를 만들어줘.
구성:
1. 헤더: 좌측에 logo2026_main.png 로고 + 우측 상단 "서베이 참여하기" 버튼
2. 히어로:
- 메인 카피: "다음 강의는 당신의 의견으로 만들어집니다"
- 서브 카피: "5분 서베이 응답 → 무료 수강권 추첨"
- 큰 CTA 버튼: "지금 서베이 참여하기" (클릭 시 구글 폼 새 창 이동)
3. 혜택 안내: 카드 그리드로 (1등 무료 수강권 5명 / 2등 30% 할인 쿠폰 100명)
4. 참여 방법 4단계: 1) 페이지 둘러보기 → 2) 버튼 클릭 → 3) 5분 응답 → 4) 자동 응모
5. 응모 기간·당첨자 발표: 강조 박스로 크게
6. FAQ: 펼침·접힘 아코디언 4~5개 (응모 자격, 중복 응모, 개인정보, 당첨 안내 등)
7. 최종 CTA: "지금 서베이 참여하고 무료 수강권 받아가세요" + 구글 폼 링크 버튼
8. 푸터: 잔재미코딩 (fun-coding.org) · 연락처 · 이용약관·개인정보 처리방침 링크
디자인:
- 다크 테마 (네이비 배경)
- 포인트 색상 주황 (모든 CTA 버튼은 주황으로 통일해 시선 집중)
- 반응형 (모바일에서도 잘 보이게)
- 섹션 진입 시 페이드업 애니메이션아코디언 (Accordion)
제목을 클릭하면 내용이 펼쳐지고, 다시 클릭하면 접히는 UI. FAQ 에 자주 사용.
"서베이 참여하기" 버튼을 누르면 바로 구글 폼이 새 창으로 열리도록 하되,
중간에 모달로 안내 한 번을 띄워줘.
("서베이는 익명으로 진행됩니다. 참여하시겠습니까?" → 확인/취소)
또, 페이지 우측 하단에 항상 떠 있는 플로팅 CTA 버튼을 추가해줘.
스크롤 해도 사라지지 않고 계속 따라오는 동그란 주황 버튼,
호버 시 살짝 커지는 효과까지.모달 (Modal)
현재 화면 위에 겹쳐 뜨는 팝업 창. 신청·확인·경고 등에 자주 사용.
플로팅 CTA (Floating Button)
스크롤해도 화면에 고정돼 계속 따라오는 버튼. 페이지 어느 위치에서도 바로 행동 유도가 가능해 전환율(클릭률)을 끌어올리는 핵심 장치.
처음하는 클로드코드 Part2 · 랜딩페이지 만들기 비주얼 가이드
기본 → 파일 활용 → 용어 → 프롬프트 → 실전 예제