소개 : 상담교사 선생님의 의뢰가 들어와서
Claude + Antigravity = 랜딩페이지 제작해서 드렸습니다.
방 병국 선생님의 1004 상담실
https://b-counseling1004.netlify.app/
안녕하세요! GPTers 스터디장 이지영입니다 😊
얼마 전 지인이신 방병국 선생님께서 조심스럽게 연락을 주셨어요.
"선생님, 제가 초등학교에서 상담 교사로 일하고 있는데… 혹시 학생들이 쉽게 접근할 수 있는 상담 페이지 같은 걸 만들 수 있을까요?"
방병국 선생님은 35년 교육 경력을 가진 분으로, 효문중학교 교장까지 역임하신 후 지금은 호성동 북초등학교에서 기간제 전문 상담 교사로 재직 중이세요. 아이들의 마음을 돌봐주고 싶은 마음은 크신데, 정작 아이들이 선생님께 쉽게 다가올 수 있는 창구가 없으셨던 거죠.
"초등학생들이 부담 없이 클릭할 수 있는 따뜻한 페이지" 를 목표로 바로 작업에 들어갔습니다!
진행 방법
🛠️ 사용한 도구
도구
역할
Claude (claude.ai)
기획, 콘텐츠 구성, 프롬프트 설계, HTML 코드 1차 생성 및 반복 수정
Antigravity 브라우저
사진 파일과 함께 최종 HTML 완성
GitHub
코드 버전 관리
Netlify
무료 배포 및 도메인 설정
💡 작업 흐름
① Claude에게 선생님 정보·디자인 방향 전달
↓
② Claude가 HTML 초안 생성 (사진 base64 포함)
↓
③ 반복 수정 (사진 교체, 이름 수정, 레이아웃 조정)
↓
④ Antigravity용 프롬프트 완성 (사진 파일 경로 참조 방식)
↓
⑤ GitHub 업로드 → Netlify 자동 배포
↓
⑥ 완성! 🎉📋 Claude에게 준 핵심 프롬프트
Claude와의 대화에서 가장 효과적이었던 지시 방식이에요!
[디자인 방향 지시]
초등학생이 친근하게 느낄 수 있는 밝고 따뜻한 분위기로 만들어줘.
선생님 사진의 스카이블루 넥타이, 차콜 수트 컬러에서
영감받은 컬러 팔레트를 사용해줘.
폰트: Jua(제목) + Nanum Gothic(본문) — Google Fonts
이모지를 적극 활용한 친근한 UI로 구성해줘.[사진 적용 지시]
사진 파일 2장을 HTML과 같은 폴더에 넣을 거야.
① 1bbk-body.jpg → 첫 페이지 오른쪽 전신 사진 (직사각형)
② 1bbk_logo.jpg → 네비게이션 로고 + 소개 섹션 원형 프로필
절대로 base64로 변환하지 말고 src 경로로만 참조해줘.[카카오톡 버튼 지시]
맨 마지막 섹션에 카카오톡 오픈채팅 버튼을 만들어줘.
href: "https://open.kakao.com/o/svREZxni"
배경색: #FEE500 (카카오 공식 노란색)
텍스트: "💬 카카오톡으로 상담 신청하기"
hover 시 위로 살짝 올라오는 애니메이션 효과 포함-사실 프롬프트는 아래와 같이 한번에 지시했다 ^^
Claude 프롬프트 :
박병국 전문 상담 교사로 재직 중이신 선생님의 랜딩페이지를 만들어줘/현재 호성동 북초등학교에 기간제 전문 상담 교사로 재직 중이시고, 학생들의 상담을 효과적으로 받을 수 있는 랜딩 페이지를 제작하고 싶다고 의뢰하셨어/초등학교 학생들이 좋아하는 분위기로 만들어 주되 '방병국 선생님'의 사진 컬러와 이미지에 맞는 컬러로 상담 랜딩 페이지를 만들고 싶어/Antigravity 브라우저를 활용하여 학생 대상 학교 생활 적응과 심리 상담용 랜딩 페이지를 만들려고 해/구성을 상세하게 만들고 맨 마지막 랜딩페이지에는 상담 링크(카카오톡 오픈 프로필로 연결할 수 있는, 링크: https://open.kakao.com/o/svREZxni)가 들어가도록 구성해줘/이러한 주문 내용을 앤티그래피티 브라우저에 주문할 수 있는 프롬프트를 만들어줘/선생님의 사진을 첨부파일로 줄께🔄 Claude와 주고받은 수정 과정
총 15회 이상 대화를 주고받으며 완성했어요!
주요 수정 사항들:
이름 오류 수정:
박병국 → 방병국(처음에 틀렸어요 😅)사진 위치 조정: 첫 페이지 오른쪽에 전신 사진 배치
2번째 페이지 사진 제거 (원형 프로필만 유지)
어두운 사진 → 밝고 화사한 사진으로 교체
근무시간 수정:
09:00~17:00 → 08:30~16:30글자체·디자인 전면 재작업 (초등학생 친화적으로 변경)
📐 최종 페이지 구성 (8섹션)
① Hero — 선생님 전신 사진 + 상담 신청 버튼
② 소개 — 원형 프로필 + 35년 경력 통계 + 인용문
③ 고민 유형 — 초등학생 공감 6가지 카드
④ 상담 서비스 — 4가지 상담 영역 안내
⑤ 경력 — 35년 타임라인 시각화
⑥ 상담 철학 — 4가지 핵심 철학
⑦ 프로세스 — 4단 계 상담 흐름
⑧ CTA — 카카오톡 상담 신청 버튼 🟡결과와 배운 점
✅ 결과
제작 기간: 약 2시간 (Claude와 대화 포함)
비용: 무료 (Claude 무료 플랜 + Netlify 무료 플랜)
방병국 선생님께서 완성된 페이지를 보시고 매우 만족해하셨어요! 특히 카카오톡 버튼을 보시고 "이제 아이들이 편하게 연락할 수 있겠네요!" 하시며 기뻐하셨습니다 🥹
💡 나만의 꿀팁
1️⃣ 사진 처리는 파일 경로 방식이 최고! 처음엔 Claude가 사진을 base64로 변환해서 HTML 안에 넣었는데, 파일 크기가 엄청나게 커졌어요.
Antigravity로 넘어갈 때는 src="파일명.jpg" 경로 방식으로 지시하는 게 훨씬 깔끔해요!
2️⃣ 컬러는 사진에서 뽑아라! 선생님 사진 속 스카이블루 넥타이 컬러(#5BA8D4)를 메인 컬러로 잡았더니 디자인이 훨씬 자연스럽고 통일감 있어 보였어요.
3️⃣ 수정은 구체적으로 지시하라! "디자인이 마음에 안 들어" 보다 "초등학생이 좋아하는 분위기, Jua 폰트, 이모지 적극 활용, 파스텔 컬러" 처럼 구체적으로 말할수록 원하는 결과가 빨리 나왔어요.
4️⃣ GitHub + Netlify 연결의 힘! : 코드 수정 후 GitHub에 push만 하면 자동 배포! 처음엔 어렵게 느껴졌지만 한번 연결해두니 정말 편했어요.
🚧 시행착오
이름 오타:
박병국으로 계속 생성돼서 전체 교체 작업 필요했어요(이건 제 첫 오타 실수 때문에 벌어진 일)사진 파일 형식: PNG → JPG로 바꿔야 Antigravity에서 제대로 인식됐어요
배포 키 공포증: Netlify 배포 키가 무서워서 삭제했다가 수동 배포로 전환 😂
사진 좌우 반전: 처음엔
transform:scaleX(-1)적용했다가 원본이 더 자연스러워서 다시 되돌림사진은 나노바나나로 수정해서 해상도 높이고 피부 밝게 조정, 좌우 반전하고 수정
🔭 앞으로의 계획
카카오톡 오픈채팅 링크가 잘 작동하는지 선생님과 함께 테스트
학부모 대상 버전도 별도 제작 예정
AI 도구로 교육 현장의 선생님들을 돕는 사례 계속 만들어갈게요!
다음엔 상담 예약 폼 기능도 추가해볼 예정입니다 📅
도움 받은 글
GPTers 커뮤니티 랜딩페이지 제작 관련 선배님들 사례들
Netlify 공식 문서 (무료 배포 가이드)
Claude 공식 프롬프트 엔지니어링 가이드
