바이브 코딩이 어렵게 느껴지는 이유는 코드를 많이 알아야 할 것 같아서다. 근데 비전공자 입장에서는 첫 결과물이 화려한 앱일 필요가 없다. 실제로는 수업 소개, 강의 신청 안내, 자주 묻는 질문 페이지 같은 단일 목적 페이지가 훨씬 좋다. 오늘은 Claude Code와 AntiGravity를 같이 써서 수업 FAQ 페이지를 만드는 흐름을 실습형으로 정리한다. 핵심은 복잡한 프레임워크보다, 질문을 구조화하고 결과물을 빠르게 수정하는 감각을 익히는 것이다.

왜 FAQ 페이지를 먼저 만드는가

FAQ 페이지는 비전공자에게 딱 맞는 연습 과제다. 이유는 세 가지다. 첫째, 정보 구조가 단순하다. 둘째, 제목, 질문, 답변, 버튼 정도만 잘 배치해도 완성도가 높아 보인다. 셋째, 실제 업무에 바로 쓰기 좋다. 학원, 연구소, 강사 개인 브랜딩, 강의 랜딩페이지 어디에 붙여도 바로 활용된다.

특히 Claude Code는 파일 생성과 구조 설계에 강하고, AntiGravity는 문구를 더 읽기 쉽게 다듬는 데 유용하다. 하나는 뼈대를 만들고, 다른 하나는 사람이 읽기 좋은 톤으로 정리한다고 생각하면 이해가 쉽다.

오늘 실습 목표

• 로컬 폴더 하나를 만들고 HTML 파일을 생성한다
• Claude Code로 FAQ 초안을 만든다
• AntiGravity로 질문과 답변 문장을 더 자연스럽게 고친다
• 브라우저에서 바로 열어 확인한다
• 강의 소개 페이지나 블로그 부속 페이지로 재활용할 수 있게 저장한다

준비물과 폴더 구성

운영체제는 macOS, Windows, Linux 아무거나 가능하다. 오늘 예시는 터미널 기준으로 적지만, 핵심은 명령어 자체보다 순서다. 아직 Git이나 Node.js가 낯설어도 겁먹을 필요 없다. 파일 하나 만들고, 텍스트를 넣고, 브라우저로 확인하는 최소 루프만 경험하면 된다.

1단계. 작업 폴더 만들기

mkdir class-faq-page
cd class-faq-page
mkdir assets
touch index.html

이렇게 하면 아주 단순한 프로젝트가 생긴다. 여기서 index.html 하나만 잘 만들어도 결과가 나온다.

2단계. 초기 요구사항 메모

Claude Code에 바로 던질 요구사항을 먼저 짧게 메모해 두면 결과가 훨씬 좋아진다.

목표: 비전공자 대상 AI 수업 FAQ 페이지
섹션: 헤더, 강의 소개, 자주 묻는 질문 6개, 신청 버튼
톤: 친절하지만 짧고 명확하게
색감: 보라색 포인트, 흰 배경, 모바일 대응
파일: index.html 하나로 완성

이 메모가 프롬프트의 씨앗이다. 바이브 코딩에서 가장 중요한 건 완벽한 문장이 아니라, 원하는 결과를 압축해서 전달하는 능력이다.

Claude Code로 초안 만들기

이제 Claude Code를 열고 현재 폴더에서 작업을 시작한다. 환경에 따라 실행 명령은 다를 수 있지만, 흐름은 비슷하다. 아래 예시는 가장 단순한 형태다.

cd class-faq-page
claude

대화가 시작되면 아래처럼 요청한다.

index.html 파일 하나로 완성되는 FAQ 페이지를 만들어줘.
주제는 AI 수업 소개다.
반드시 포함할 것:
1. 상단 헤더와 짧은 소개 문구
2. 수강 대상 설명
3. 자주 묻는 질문 6개
4. 신청 버튼
5. 모바일에서도 읽기 쉬운 간격과 버튼 크기
색상은 보라색 포인트, 흰 배경, 깔끔한 카드 스타일

Claude Code가 파일을 직접 생성하거나 수정 가능한 환경이라면 바로 index.html에 초안을 넣어준다. 만약 코드 블록으로만 출력한다면 내용을 복사해서 파일에 저장하면 된다.

Claude Code 결과에서 꼭 볼 포인트

• 질문이 너무 길지 않은가
• 버튼 문구가 애매하지 않은가
• 모바일에서 줄바꿈이 과한가
• 강의 대상, 시간, 준비물 같은 실무 정보가 빠지지 않았는가

초안 단계에서는 100점짜리 결과를 기대하지 말고, 60점 뼈대를 빠르게 받는 게 맞다. 여기서 시간을 아끼는 게 바이브 코딩의 맛이다.

AntiGravity로 문구 다듬기

초안이 만들어졌다면 이제 AntiGravity 차례다. 여기서 할 일은 코드 전체를 다시 짜는 게 아니라, 사람이 읽었을 때 어색한 부분을 개선하는 것이다. 특히 FAQ 문장은 짧고 즉답형이어야 전환율이 올라간다.

예시, 다듬기 전후 비교

다듬기 전 문장:

이 강의는 AI 도구를 배우고 싶은 초보자에게 적합하며 실습 중심으로 진행됩니다.

다듬기 후 문장:

AI가 처음이어도 따라올 수 있게, 설명보다 실습 비중을 높여 진행합니다.

두 번째 문장이 더 짧고 장면이 보인다. AntiGravity에는 이런 식으로 요청하면 된다.

아래 FAQ 문장을 비전공자가 읽기 쉽게 바꿔줘.
조건:
- 한 문장은 짧게
- 추상어 줄이기
- 바로 이해되는 표현 사용
- 영업 멘트처럼 과장하지 않기

이 단계에서 문장 톤이 정리되면 페이지 인상이 확 달라진다. 디자인보다 카피가 먼저 먹히는 이유다.

질문 세트 예시

• 코딩을 하나도 몰라도 수강 가능한가요
• Claude Code와 AntiGravity를 꼭 둘 다 써야 하나요
• 실습은 개인 노트북으로 진행하나요
• 수업 후 결과물을 바로 써먹을 수 있나요
• 사업자나 강사에게도 도움이 되나요
• 수강 전에 설치해야 할 프로그램이 있나요

이 질문들은 실제 문의에서 자주 나오는 패턴이다. 그래서 FAQ 페이지가 단순 연습이 아니라, 바로 현업 재사용 가능한 자산이 된다.

HTML 저장과 배포 체크

문구 정리가 끝나면 파일을 저장하고 브라우저에서 확인한다. 가장 단순한 방법은 파일을 직접 여는 것이다.

open index.html

또는 간단한 로컬 서버를 띄워도 된다.

python3 -m http.server 8080

브라우저에서 http://localhost:8080으로 접속하면 된다. 이 방식이 좋은 이유는 이미지 경로나 버튼 동작을 확인하기 쉽기 때문이다.

완성도 높이는 체크리스트

• 첫 화면에서 수업 정체성이 바로 보이는가
• 버튼이 눈에 띄는가
• FAQ 카드 간격이 답답하지 않은가
• 모바일 화면에서 글자가 너무 작지 않은가
• 신청 링크나 문의 번호 자리가 확보되어 있는가

여기까지 되면 이미 실습 하나 끝난 거다. 많은 초보자가 여기서 깨닫는다. 코드를 다 외우는 게 아니라, 도구에게 제대로 시키고 결과를 판단하는 감각이 더 중요하다는 걸.

Q&A

이 섹션은 전체 글의 약 30퍼센트를 차지하도록 넉넉하게 잡았다. 실전에서 가장 많이 막히는 지점을 먼저 풀어주는 게 훨씬 도움이 되기 때문이다.

Q1. Claude Code가 만든 HTML이 너무 길고 복잡하면 어떻게 하지

A. 한 번에 완벽하게 만들려 하지 말고 범위를 줄이면 된다. 예를 들어 section 3개만 먼저, FAQ 4개만 먼저, CSS는 심플하게처럼 제한을 주면 구조가 단순해진다. 초보자일수록 큰 요청보다 작은 요청 여러 번이 낫다.

Q2. AntiGravity는 정확히 어디에 쓰는 게 좋나

A. 문구 압축, 제목 개선, 질문 순서 재배치 같은 작업에서 강하다. 코드 전체를 갈아엎는 용도보다, 사람이 읽는 감각을 살리는 편집자로 쓰는 게 효율적이다. 특히 강의 소개 문구, CTA 버튼 문장, FAQ 답변 길이 조절에 좋다.

Q3. 비전공자는 HTML부터 배워야 하나

A. 순서는 반대다. 먼저 결과물을 하나 만들고, 그다음 HTML 구조를 읽어보는 편이 훨씬 빠르다. 예를 들어 <h2>, <p>, <button> 정도만 알아도 수정이 가능하다. 처음부터 문법책처럼 접근하면 오래 못 간다.

Q4. FAQ 페이지 다음에는 뭘 만들면 좋나

A. 다음 단계는 신청 폼 연결 페이지, 강의 소개 랜딩페이지, 후기 모음 페이지 순서가 좋다. 이유는 지금 만든 FAQ 구조를 거의 그대로 재활용할 수 있기 때문이다. 바이브 코딩은 새로 만드는 능력보다, 잘 복제하고 변형하는 능력이 더 중요하다.

Q5. 도구가 준 결과가 마음에 안 들면 내가 못 하는 건가

A. 전혀 아니다. 오히려 정상이다. AI 도구는 첫 결과보다 수정 라운드에서 진가가 나온다. 원하는 톤, 삭제할 요소, 강조할 요소를 짧게 다시 말하면 품질이 빠르게 올라간다. 사람도 초안은 거칠다. AI도 똑같다.

Q6. 실제 강의 현장에서는 어떻게 응용하나

A. 수업 소개 페이지 제작 과제로 바로 쓸 수 있다. 팀별로 같은 구조를 주고, 각자 다른 대상층에 맞게 문구와 색상만 바꾸게 하면 실습 난도가 적당하다. 결과물도 바로 비교 가능해서 교육 효과가 좋다.

오늘 5분 실습

1. 새 폴더를 만든다
2. index.html 파일 하나 생성한다
3. Claude Code에 FAQ 페이지 초안 요청을 넣는다
4. 질문 3개, 답변 3개만 먼저 만든다
5. AntiGravity로 문장만 짧게 다듬는다
6. 브라우저에서 열어 본다

딱 여기까지만 해도 충분하다. 오늘 목표는 거창한 서비스 출시가 아니라, 바이브 코딩의 리듬을 몸에 익히는 것이다. 작은 결과를 빨리 보고, 바로 고치고, 바로 다시 보는 루프. 그게 핵심이다.

마무리

Claude Code와 AntiGravity를 같이 쓰면 비전공자도 훨씬 덜 막힌다. Claude Code로 구조를 만들고, AntiGravity로 읽히는 문장을 다듬으면 된다. 오늘처럼 FAQ 페이지부터 시작하면 부담은 낮고 활용도는 높다. 두온교육 main.duonedu.net과 미래이음연구소 lab.duonedu.net처럼 실제 교육 현장에서도 바로 응용 가능한 방식이다. 바이브 코딩은 거창한 개발자 놀이가 아니라, 생각을 빠르게 페이지로 바꾸는 실전 기술이다.