LESSON 11

문의 폼과 앞으로의 관리

완성이 아니라 시작입니다

오늘의 목표

서버 없이 동작하는 문의 폼을 붙이고, 혼자서 홈페이지를 수정·백업·확장하는 루틴을 만듭니다.

예상 소요 시간 약 45분

문의 받기 ① 링크 버튼 — 가장 쉬운 방법 (★ 쉬움 · 약 10분)

방문자가 문의할 수 있는 가장 쉬운 길은 이미 쓰고 있는 채널로 가는 버튼입니다. 서버도, 계정 연동도 필요 없습니다.

  • 카카오톡 채널 링크: 가게라면 폼보다 응답률이 높습니다
  • 전화 걸기 버튼: 5강에서 만든 tel: 링크 그대로
  • 네이버 예약 / 캐치테이블 링크: 예약이 핵심이라면 이것이 정답입니다
#49 프롬프트 11-0🟢 초급

contact.html에 "카카오톡으로 문의하기" 버튼을 크게 넣어줘. 누르면 [채널 링크]가 새 탭으로 열리게. 그 아래에 전화 걸기 버튼도.

🧪 실습

  • 문의 페이지에 카카오톡(또는 전화) 버튼이 크게 보인다
  • 버튼을 눌렀을 때 카카오톡 채널(또는 전화 앱)이 실제로 열린다

문의 받기 ② 문의 폼: 서버 없이 (★★★ 어려움 · 약 30분 · 선택)

"이름, 연락처, 내용"을 받아 내 이메일로 보내주는 폼. 외부 서비스 가입이 필요해 어렵습니다. 링크 버튼으로 충분하다면 건너뛰어도 됩니다. 원래는 서버가 필요하지만, 폼 전송 서비스를 쓰면 HTML만으로 됩니다. Formspree, Web3Forms, Getform 같은 서비스가 있고 소량은 무료입니다.

  1. 서비스 가입 → 새 폼 만들기 → 폼 주소(endpoint) 또는 키를 복사
  2. Claude Code에게 먼저 간단하게:
#50 프롬프트 11-1🔴 고급

contact.html에 문의 폼을 넣어줘. 항목은 이름, 연락처, 문의 내용 세 개. 전송은 [서비스 이름]을 쓰고 주소는 [복사한 endpoint]. DESIGN.md 규칙대로 스타일.

  1. 커밋 → push → 실제 도메인에서 직접 테스트 전송 → 내 이메일에 도착하는지 확인
  2. 잘 되면 이어서 다듬기:
#51 프롬프트 11-1b🟡 중급

폼을 보내면 "접수됐습니다. 하루 안에 연락드릴게요"가 보이게 하고, 필수 항목이 비어 있으면 빨간 안내를 보여줘.

스팸이 걱정되면 "폼에 [서비스]의 스팸 방지(honeypot 또는 captcha)를 켜줘".

  • 구글 폼: 설문·신청서 형태라면 구글 폼을 만들어 링크나 삽입 (폼 전송 서비스보다 쉬움)

혼자서 관리하는 루틴

수정할 때 (5분)

1. Claude 데스크탑 앱 실행 → Code 탭 → my-site 폴더 선택 → 입력창
2. "메뉴 페이지에서 라떼 가격을 5,500으로 바꿔줘"
3. 미리보기에서 확인
4. 대화창에서 "커밋하고 push해줘" → 권한 요청을 읽고 수락 (터미널로도 가능: `git add .` → `git commit -m "메시지"` → `git push`)
5. 1분 뒤 실제 주소에서 확인

망쳤을 때

  • 아직 커밋 전: "아직 커밋 안 한 변경을 전부 취소해줘" (터미널로는 git checkout .)
  • 커밋했는데 이상함: "마지막 커밋 취소해줘" (Claude가 git revert를 해줍니다)
  • 뭐가 뭔지 모르겠음: GitHub에서 이전 버전을 볼 수 있습니다. Vercel에서도 Deployments 목록의 이전 배포를 Promote하면 즉시 그 버전으로 돌아갑니다

백업

이미 되어 있습니다. GitHub에 전부 있고, 노트북이 고장 나면 새 컴퓨터에서 git clone https://github.com/내아이디/my-site로 통째로 내려받으면 됩니다. 사진 원본만 따로 클라우드에 두세요.

한 달에 한 번

  • 폰에서 전 페이지 한 번씩 눌러보기 (링크 깨짐, 지도, 전화)
  • Search Console에서 "어떤 검색어로 들어오는지" 보기 → 그 단어를 첫 화면 소개에 넣기
  • 사진 한 장 바꾸기. 살아 있는 홈페이지로 보입니다

자주 오는 요청 모음

앞으로 이런 것들을 하게 됩니다. 전부 Claude Code에게 한 문장이면 됩니다.

하고 싶은 것요청
공지 띄우기"첫 화면 맨 위에 '[문구]' 공지 띠를 넣어줘. 닫기 버튼 포함"
새 페이지"events.html을 만들어줘. 상단 메뉴에도 추가. 내용은 [..]"
인스타 피드"인스타그램 최근 게시물 6개를 보여주는 섹션. [삽입 서비스] 사용"
방문자 수 확인"Vercel Analytics 켜줘" 또는 "Google Analytics 태그 넣어줘: [ID]"
영어 페이지"index.html의 영어 버전 en/index.html을 만들고 언어 전환 링크 추가"
속도 점검"PageSpeed Insights 결과야 [붙여넣기]. 빨간 항목 고쳐줘"

이 과정을 마치며

11일 전엔 터미널을 열어본 적이 없었습니다. 지금은:

  • 내 도메인으로 공개된 4페이지 홈페이지
  • 사진, 지도, 문의 폼, 검색 노출까지
  • 수정 → 확인 → 커밋 → push라는 혼자 굴릴 수 있는 루틴
  • CLAUDE.md, DESIGN.md — 다음 홈페이지에 그대로 복사해 쓸 자산

다음 단계

  • 홈페이지를 하나 더: 지인 가게 하나를 만들어주세요. 두 번째는 사흘이면 됩니다.
  • 로그인·예약·데이터가 필요해졌다면: 이 사이트의 웹 서비스 만들기 20강으로. 여러분은 이미 1~5강 내용을 알고 있으니 6강 기획부터 시작해도 됩니다.
  • 막힐 때: 짧은 팁, 프롬프트 모음, 바이브 스킬 메뉴가 있습니다.

마지막 실습 체크

🧪 실습

  • 문의 페이지의 버튼(또는 폼)이 실제 주소에서 동작하는 것을 눈으로 확인했다 (폼이면 테스트 메시지가 내 이메일에 도착)
  • 수정 루틴 5단계를 혼자 한 번 돌려봤다
  • 이전 배포로 되돌리는 방법을 알고 있다
  • 다음에 만들 홈페이지 하나를 정했다

수고하셨습니다. 이제 여러분은 홈페이지를 직접 만들고 고칠 수 있는 사람입니다.