L1 입문 / 6회
6회 · 바이브코딩 홈페이지 공개
3h 오늘의 산출물 — 공개된 브랜드 홈페이지
6회차 실습 시트
실습 1 — 디자인 기준 만들기 (25분)
- 마음에 드는 회사 홈페이지 2곳을 고른다(업종 무관).
assets/design_reference_checklist.md표에 두 사이트의 색·글꼴 크기·줄 간격·여백·이미지 비율·버튼 모양을 적는다. 모르는 값은 "느낌"으로 적어도 된다.- Claude에게 표를 주고 "이 분석과 5회차 제작 기준을 합쳐 우리 사이트 디자인 기준을 숫자로 정해줘"라고 요청한다.
- 결과를
design_rules.md로 저장한다.
실습 2 — 홈페이지 초안 (40분)
- 새 대화에
homepage_brief.md,design_rules.md,starter_index.html을 첨부한다. - "시작 템플릿을 바탕으로 첫 화면과 서비스 영역만 만들어줘. 디자인 기준을 지켜줘."라고 요청한다.
- 결과 화면을 확인하고 이용 방법 영역을 추가로 요청한다.
- 후기 영역: 5회차
customer_reviews.csv에서 3개를 골라 "문장을 바꾸지 말고 그대로 넣어줘"라고 요청한다. - FAQ 영역:
faq_copy.md를 첨부하고 "질문을 누르면 답이 펼쳐지는 방식으로 넣어줘"라고 요청한다. - 문의 영역: 대표 메일 버튼을 넣는다(가상 주소 sales@example.com).
실습 3 — 다듬기와 모바일 확인 (35분)
- 결과 HTML을 내려받아 휴대폰으로 열거나, 브라우저 창을 좁혀 모바일 화면을 확인한다.
- 잘리거나 겹치는 곳을 캡처해 Claude에게 보여주고 "모바일에서 이 부분이 겹쳐. 제목 크기를 28px로 줄이고 줄바꿈을 고쳐줘"처럼 숫자로 수정한다.
- 버튼에 마우스를 올리면 색이 바뀌는지, FAQ가 펼쳐지는지 확인한다.
- "페이지 제목(title)과 설명(description) 문구를 우리 서비스에 맞게 고치고, FAQ에 schema.org FAQPage 구조화 데이터를 추가해줘"라고 요청한다.
실습 4 — 공개와 점검 (15분)
- 강사가 안내한 공개 방법(Claude 결과물 공유 기능 또는 정적 호스팅) 중 하나로 공개한다.
- 공개 링크를 휴대폰으로 열어 문의 버튼·FAQ·링크를 모두 눌러 본다.
- 문제가 있으면 수정 후 다시 공개하고, 수정 전후를 한 줄로 기록한다.
예상 결과
- 6개 영역(첫 화면, 서비스, 이용 방법, 후기, FAQ, 문의)이 있는 한 페이지 홈페이지
- 모바일에서 가로 스크롤 없이 읽힘, FAQ 펼치기 동작
막힐 때 체크포인트
- 수정할수록 다른 곳이 깨진다 → "방금 수정 전 버전으로 돌아가서 ○○만 바꿔줘"라고 요청한다. 잘 된 버전은 파일로 저장해 둔다.
- 화면이 코드로만 보인다 → "미리 보기로 보여줘"라고 요청하거나 HTML 파일을 브라우저로 연다.
- 공유 메뉴가 안 보인다 → 계정·플랜에 따라 메뉴가 다를 수 있다. 화면 캡처를 조교에게 보내고, 정적 호스팅 방법으로 전환한다.
- 문의 버튼을 눌러도 아무 일이 없다 → 버튼 링크가
mailto:로 시작하는지 확인하고, 휴대폰 기본 메일 앱이 설정됐는지 확인한다. - 후기 문장이 바뀌어 있다 → 원문 그대로 다시 넣어달라고 요청한다.
← → 이동 · Esc 종료
6회차 과제 — 공개 홈페이지 + 수료 포트폴리오
제출물
- 공개된 홈페이지 링크(모바일 화면 캡처 2장 포함)
- 디자인 기준 문서(
design_rules.md) - 공개 후 점검 기록: 점검 항목, 발견한 문제, 수정 내용
- 수료 포트폴리오: 1~6회차 산출물을 한 페이지 목록 또는 링크로 정리
작성 조건
- 개인 휴대전화·개인 메일·내부 가격표·거래처 목록을 넣지 않는다.
- 근거 없는 수치(만족도, 순위)를 쓰지 않는다.
- 실제 회사 홈페이지로 공개하는 경우 회사 승인 후 공개한다.
제출 기한
수료식 3일 전까지
루브릭 (4점 척도)
| 항목 | 1점 | 2점 | 3점 | 4점 |
|---|---|---|---|---|
| 구성 | 3개 영역 이하 | 4~5개 영역 | 6개 영역 모두 | 동선이 상담 버튼으로 자연스럽게 이어짐 |
| 모바일 | 깨짐 다수 | 일부 깨짐 | 깨짐 없음 | 수정 전후 기록까지 |
| 검색·AI 친화 | 없음 | 제목·설명 문구만 | FAQ 질문-답 구성 | 구조화 데이터까지 적용 |
| 정확성·보안 | 근거 없는 수치·개인정보 | 1건 포함 | 모두 회사 정보와 일치 | 대조 기록을 남김 |
6회차 자주 묻는 질문
Q1 코드를 전혀 몰라도 홈페이지를 만들 수 있나요?
오늘 실습 범위(한 페이지 소개 사이트)는 가능합니다. 다만 결과를 직접 눌러 보고 확인하는 일은 사람이 해야 합니다.
Q2 만든 홈페이지에 도메인(회사 주소)을 연결할 수 있나요?
정적 호스팅 서비스 대부분이 개인 도메인 연결을 지원합니다. 절차와 비용은 해당 서비스와 도메인 업체 문서로 확인하세요.
Q3 검색에 바로 나오나요?
공개 직후 바로 나오지 않을 수 있고, 노출은 보장되지 않습니다. 오늘 한 작업은 검색과 AI 답변이 정보를 이해하기 쉽게 만드는 기초입니다.
Q4 SEO, AEO, GEO는 각각 다른 작업인가요?
목표 대상이 다를 뿐 기본은 같습니다. 명확한 제목, 질문-답 형식, 정확한 회사 정보가 세 가지 모두의 출발점입니다.
Q5 나중에 내용을 고치려면 어떻게 하나요?
저장해 둔 최종 HTML을 다시 첨부하고 바꿀 부분만 요청한 뒤 다시 공개합니다. 버전별 파일을 남겨 두면 되돌리기 쉽습니다.
Q6 문의 폼(이름·연락처 입력)을 넣어도 되나요?
입력받은 개인정보를 어디에 저장하는지, 개인정보 처리 안내가 필요한지부터 확인해야 합니다. L1에서는 메일 버튼만 씁니다.
Q7 이미지를 넣고 싶습니다.
직접 촬영했거나 사용 허가가 확인된 이미지만 씁니다. 이미지 비율은 디자인 기준에 정한 값으로 지시하세요.
Q8 공개한 링크를 지우고 싶습니다.
사용한 공개 방법(공유 기능 또는 호스팅 서비스)에서 공개를 해제하거나 삭제합니다. 이미 공유된 링크를 받은 사람이 저장한 사본은 회수할 수 없으니 공개 전에 내용을 점검하세요.
Q9 수료 기준을 다시 알려주세요.
라이브 출석 13시간 이상과 산출물 5건 이상 Pass입니다. 다시보기만으로는 출석으로 인정되지 않습니다.
파일을 눌러 미리보기하거나 다운로드하세요. 모든 데이터는 교육용 가상 정보입니다.
design_reference_checklist.md
참고 디자인 분석표
참고 사이트 2곳을 보고 아래 칸을 채운 뒤, 이 표를 Claude에게 "디자인 기준"으로 준다.
| 항목 | 참고 사이트 A | 참고 사이트 B | 우리 사이트 기준 |
|---|---|---|---|
| 주 색상 | |||
| 보조 색상 | |||
| 제목 글꼴 크기(PC/모바일) | |||
| 본문 줄 간격 | |||
| 여백 느낌(넓음·보통·좁음) | |||
| 이미지 비율 | |||
| 버튼 모양 |
faq_copy.md
홈페이지 FAQ 원고
- 언제 받을 수 있나요? — 오전 11시까지 주문하면 당일 출고하며, 수도권은 보통 다음 날 도착합니다.
- 배송비가 있나요? — 수도권은 공급가 5만 원 이상 무료이며, 그 외 지역은 택배비가 별도입니다.
- 정기 납품 할인은 얼마인가요? — 월 1회 정기 납품 계약 시 5% 할인합니다.
- 결제는 어떻게 하나요? — 월말 마감 후 익월 10일 계좌 이체입니다. 신규 거래처는 첫 3회 선결제입니다.
- 반품이 되나요? — 미개봉 상품은 수령 후 7일 이내 반품 가능하며, 파손·오배송은 무상 교환합니다.
homepage_brief.md
홈페이지 기획 브리프 — 모락오피스(가상)
목적
정기 납품 상담 문의를 월 10건 이상 받는 소개 홈페이지
방문자
중소기업 총무 담당자, 학원·병원 행정실. 모바일로 처음 보고 PC로 문의하는 경우가 많다.
페이지 구성 (한 페이지 스크롤)
- 첫 화면: 한 줄 가치 제안 + "정기 납품 상담" 버튼
- 서비스: 당일 출고, 정기 납품 5% 할인, 전담 담당자
- 이용 방법: 상담 → 품목 확정 → 시범 1개월 → 정기 계약
- 고객 후기 3개 (customer_reviews.csv에서 선택)
- FAQ 5개 (펼치기 방식)
- 문의: 메일 링크(sales@example.com, 가상)
금지
- 확인되지 않은 수치("거래처 만족도 99%" 등)를 쓰지 않는다.