여러 장 뽑아보고, 내 하네스로 변형하기

여기서는 6-2 마지막에 받아둔 폴더를 들고 실제로 페이지를 뽑아봅니다. 한 장으로 시작해서 같은 폴더로 세 장을 더 뽑고, 네 장을 나란히 놓고 비교한 다음, 마지막에는 같은 구조로 자기 하네스를 만들어 봅니다.

전체 코드 링크: https://github.com/weniv/landing-harness-student

1. 자연어로 한 번 부탁하기

Claude Code에서 landing-harness-student/ 폴더를 엽니다. 그리고 채팅창에 다음과 같이 입력합니다.

제주 사계에서 4박 5일 동안 AI 바이브 코딩 캠프 모객 랜딩 페이지를 만들고 싶어.
타겟은 코딩 경험이 적은 30대 직장인이나 창업 희망자.
프로그램은 첫째 날 도착·아이디어 정리, 둘째 날부터 넷째 날까지
설계·기능 개발·다듬기·배포, 마지막 날 발표와 회고.
참가 유형은 숙박형(85만원), 비숙박형(55만원), 학부모 동반(+30만원).
1기 후기 두세 개와 자주 묻는 질문 네 개 정도, 디스코드 참여 안내도 넣어줘.

이게 전부입니다. CLAUDE.md의 자연어 라우팅에 의해, Claude Code는 이 요청을 보고 landing 스킬을 자동으로 호출합니다. 직접 호출하고 싶다면 /landing이라고만 입력해도 됩니다.

이때 우리가 채팅에 적지 않아도 자동으로 같이 들어가는 정보가 다섯 가지 있습니다.

CLAUDE.md의 자연어 라우팅과 품질 기준
style/ 폴더의 디자인 토큰과 컴포넌트 클래스
components.md의 섹션 시퀀스와 마크업 패턴
brand.md의 톤·금지 어휘
SKILL.md의 작업 6단계

이 정보들이 매번 채팅에 다시 적지 않아도 알아서 깔리는 것, 이게 우리가 폴더로 옮긴 가장 큰 이득입니다. 한 번 잘 적어둔 안내가 다음 페이지를 만들 때도, 한 달 뒤 다른 페이지를 만들 때도 그대로 따라옵니다.

2. 모델이 한 일들

landing 스킬은 매뉴얼대로 6단계를 차례로 밟습니다. 채팅창에는 보통 다음 비슷한 흐름이 보입니다.

2.1 1단계, 브리프 분해 보고

브리프를 다음과 같이 정리했어요.

- 페이지 목적: 모객 (캠프 신청 유도)
- 핵심 CTA: 신청하기
- 메인 헤드라인 후보: "4박 5일, 제주에서의 몰입.
                       AI와 함께 만드는 나만의 서비스"
- 서브 카피 후보: "바이브 코딩으로 서비스 기획부터 개발, 배포까지.
                  코딩을 몰라도 괜찮습니다."
- 추가 정보: 5일 커리큘럼, 참가 유형 3개, 후기, FAQ, 디스코드

여기서 모델은 한 번 사용자에게 보여주고 다음으로 갑니다. 빠뜨린 항목이 있으면 한 번만 짧게 되묻습니다 (예: "추천 대상이 명확히 안 드러나는데, 더 좁히실래요?"). 한 번 이상 묻지 않는 게 SKILL.md의 규칙입니다.

2.2 2단계, 섹션 시퀀스 제안

모객형 랜딩의 표준 시퀀스를 따라가면 좋겠어요. 다음 순서로 갈게요.

1. Top Nav
2. Hero  - 메인 헤드 + 서브 카피 + CTA 2개
3. Highlight  - 추천 대상 6개
4. Curriculum  - Day 1~5
5. Testimonial  - 1기 후기 2개
6. Pricing  - 참가 유형 3개 카드
7. FAQ  - 4개
8. Community CTA  - 디스코드
9. Footer

다른 섹션을 빼거나 더하시려면 알려주세요. 그렇지 않으면 그대로 진행할게요.

components.md의 "캠프 모객용" 가이드를 그대로 적용한 결과입니다. 이 자리에서 사용자가 "추천 대상 섹션은 빼" 같은 말 한 마디로 시퀀스를 조정할 수 있습니다. 페이지 한 장이 만들어진 다음에 빼는 것보다 훨씬 싸게 끝납니다.

이게 5장에서 본 사람 승인 지점을 얇게 두는 자리의 실제 모양입니다.

2.3 3단계, HTML 생성과 저장

시퀀스가 확정되면 모델은 template.html을 복사한 뒤 components.md의 각 섹션 패턴을 가져다가 브리프로 채웁니다. 카피는 brand.md의 톤을 따라 짧고 동사 종결로. 색은 style/tokens.css의 변수만 사용. 결과를 output/vibe-sagye.html로 저장하고 절대 경로를 안내합니다.

output/vibe-sagye.html 생성 완료.

브라우저로 다음 경로를 열어보시면 미리보기 가능합니다.
file:///.../landing-harness-student/output/vibe-sagye.html

화면 폭은 1190px 기준입니다. 좁은 화면에서는 그리드가 자동으로
한 컬럼으로 접힙니다. 톤이 어색한 자리 있으면 알려주세요.

3. 결과물 확인하기

output/vibe-sagye.html을 브라우저로 열고 페이지가 제대로 나왔는지 확인합니다. 아홉 개 섹션이 순서대로 흘러야 합니다. 색은 브랜드 블루(--primary #2e6ff2)와 옅은 회색(--grayLv1 #f3f5fa)이 번갈아 깔리고, 본문 텍스트는 어두운 grayscale(--surface #121314), 보조 설명은 중간 회색(--grayLv3 #8d9299)으로 차분하게 잡혔습니다. 위니브 운영 사이트들의 톤 그대로입니다.

생성된 HTML의 일부를 그대로 옮겨 보면 이렇습니다.

<section id="intro" style="padding: 10rem 0 12rem;">
  <div class="max-width" style="display:flex; gap:6rem; align-items:center;">
    <div style="flex:1;">
      <p style="display:inline-block; padding:.8rem 1.6rem;
                background:var(--activation); color:var(--primary);
                font-size:1.4rem; font-weight:600; border-radius:5rem;">
        제주 사계 · 4박 5일
      </p>
      <h1 style="margin-top:2rem;">
        4박 5일, 제주에서의 몰입.<br/>
        <span class="txt-highlight">AI와 함께</span> 만드는 나만의 서비스
      </h1>
      <p style="font-size:1.8rem; color:var(--grayLv3); margin-top:2.4rem;">
        바이브 코딩으로 서비스 기획부터 개발, 배포까지.<br/>
        코딩을 몰라도 괜찮습니다. 아이디어만 가져오세요.
      </p>
      <div style="display:flex; gap:1.2rem; margin-top:3.6rem;">
        <a href="#apply" class="btn btn--medium btn--primary">신청하기</a>
        <a href="#curriculum" class="btn btn--medium btn--outline">
          커리큘럼 보기
        </a>
      </div>
    </div>
    ...
  </div>
</section>

눈에 띄는 점 몇 가지를 짚어봅니다.

모든 색이 var(--primary), var(--grayLv3), var(--activation) 같이 변수로만 들어가 있습니다. 임의 hex 코드가 한 자리도 없습니다.
컨테이너는 .max-width로 1190px 안에 묶여 있습니다.
메인 CTA는 .btn.btn--medium.btn--primary 표준 클래스 그대로. 보조 CTA는 .btn--outline.
본문 강조에는 .txt-highlight 유틸 클래스 사용. 이건 style/base.css에 정의되어 있어서 자동으로 브랜드 블루 + bold가 됩니다.

페이지 한 장이 위니브 디자인 시스템의 어휘로만 짜였습니다. 어디 한 자리도 흔들리지 않습니다.

4. 같은 폴더로 세 장 더 뽑기

이제 같은 폴더에서 브리프만 바꿔 가며 페이지를 더 뽑아 봅니다. components.md에 정리된 네 가지 페이지 유형 중 나머지 세 가지를 차례로 시험해 봅니다. 폴더 안의 무엇도 손대지 않습니다. 채팅창에 새 브리프만 한 덩어리씩 던집니다.

4.1 신규 서비스 출시

새로 만든 'AI 코드 리뷰' 도구의 출시 페이지를 만들어줘.
타겟은 주니어 개발자. PR 단위로 자동 리뷰가 달리고,
컨벤션 위반과 잠재 버그를 짚어줘.
무료 베타 신청 받는 중. 가격은 정식 출시 후 공개.

모델은 components.md의 "신규 서비스 출시" 시퀀스(1 → 2 → 3 → 5(특징) → 7 → 8)를 따라 다섯 섹션짜리 페이지를 만들고, output/code-review-launch.html로 저장합니다. CTA는 "베타 신청하기" 하나로 단순해집니다. Hero 다음에는 추천 대상 대신 "이런 분께 추천"의 자리에 작동 흐름 3단계 카드가 들어옵니다.

4.2 회사 메인 페이지

위니브 회사 메인 페이지. 사업 영역 세 가지(교육·콘텐츠·커뮤니티)와
대표 서비스들을 한눈에 보여주고, 채용·문의는 푸터로 연결.
캐러셀이 하나 들어가면 좋겠어.

모델은 가장 단순한 시퀀스(1 → 2(캐러셀) → 5(사업 영역) → 8)를 골라 네 섹션짜리 페이지를 만듭니다. output/weniv-main.html로 저장. 캠프 모객 페이지가 아홉 섹션으로 길게 늘어졌던 것과 달리, 메인은 스크롤 두 번이면 끝납니다.

4.3 카탈로그형

위니북스 도서 목록 페이지. 책 12권 정도를 카드 그리드로.
난이도(입문·중급·심화) 필터, 검색창 한 칸. 클릭하면 책 페이지로.

모델은 카탈로그형 시퀀스(1 → 2 → 5(그리드) → 8)를 따라가고, .card와 .search-input 컴포넌트로 그리드와 검색창을 채웁니다. output/wenibooks-catalog.html로 저장. Hero는 헤드라인 한 줄 + 검색창으로 가볍게 처리되고, 본문 대부분이 카드 그리드입니다.

5. 네 장을 나란히 놓고 보면

이제 output/ 폴더에 네 개의 HTML 파일이 있습니다. 모두 새 탭에 띄워두고 한 줄로 나열해 봅니다. 한눈에 드러나는 것이 두 가지입니다.

같은 것

헤더와 푸터가 네 페이지에서 똑같음
색감(브랜드 블루, 옅은 회색 배경, 어두운 surface 텍스트)이 네 페이지에서 똑같음
폰트와 헤드라인 위계가 똑같음
섹션 사이 간격이 똑같음
CTA 버튼 모양이 똑같음
카피 톤이 똑같음 (짧고 동사형, 자뻑 없음)

다른 것

섹션 개수가 9 / 5 / 4 / 4로 브리프 성격에 맞춰 달라짐
Hero 섹션의 메인 헤드라인 카피가 페이지 목적에 맞춰 달라짐
어떤 컴포넌트(카드, 캐러셀, 그리드, 가격표)가 등장하는지가 달라짐

이게 하네스가 하는 일입니다. 흔들리지 않아야 할 자리는 흔들리지 않고, 달라져야 할 자리는 자연스럽게 달라집니다.

6-1에서 본 흔들린 페이지들을 다시 떠올려 봅니다. 같은 회사, 같은 디자인 시스템, 같은 정도의 시간을 들였는데도 결과 페이지의 일관성이 무너졌던 자리들입니다. 그 자리들이 이 하네스에서 어떻게 다뤄지는지 한 표로 정리하면 이렇게 됩니다.

흔들렸던 자리	이 하네스의 대응
페이지마다 색이 조금씩 다름	`style/tokens.css`의 CSS 변수만 사용 강제
버튼 모양이 페이지마다 다름	`.btn.btn--primary` 등 표준 클래스만 허용
섹션 간격이 어색함	`template.html`의 `section { padding: 8rem 0; }` 일괄 적용
컨테이너 폭이 들쑥날쑥	항상 `.max-width` (1190px)
헤드라인 위계가 일관 안 됨	`template.html`의 h1/h2/h3 스타일 일괄
CTA 카피의 형식이 다 다름	`brand.md`의 동사형·5글자 이내 규칙
자뻑 표현이 종종 들어감	`brand.md`의 금지 어휘 명시
푸터 회사 정보 누락	`brand.md`에 표기 블록 박아둠

각 자리를 따로 보면 사소한 규칙들입니다. 그런데 이 사소한 규칙 여덟 가지가 동시에 깔리는 자리(=하네스)가 만들어지면, 그 자리에서 나오는 페이지는 흔들릴 곳이 사라집니다.

6. 한 줄 고치면 어디까지 따라 바뀌나

페이지 네 장을 만들고 나면 하네스의 또 한 가지 효용이 보입니다. 변경할 자리가 한 곳에 모입니다. 흔한 수정 세 가지를 봅니다.

6.1 토큰 한 줄 바꾸면

브랜드 컬러를 한시적으로 위니브 그린(#15bf70)으로 가는 이벤트성 페이지가 필요하다고 합시다. style/tokens.css의 한 줄만 고치면 됩니다.

:root {
  --primary: #15bf70;        /* 기존 #2e6ff2 → 그린으로 */
  --primary-darken: #0e9c5b;
  ...
}

브라우저를 새로고침하면 네 페이지의 모든 CTA 버튼, 강조 텍스트, 링크가 한 번에 그린으로 바뀝니다. 페이지 어느 한 자리도 따로 손댈 필요가 없습니다.

이게 디자인 시스템을 토큰으로 굳혀두는 핵심 효용입니다.

6.2 카피 톤 한 줄 바꾸면

brand.md의 톤 줄을 한 줄 고치면 다음에 만드는 모든 페이지의 톤이 따라옵니다.

- 친근하면서 차분한 설명체     ← 기존
+ 차분하고 격식 있는 설명체     ← 변경

이 한 줄의 영향력이 어디까지 가는지는 페이지를 한 장 더 뽑아보면 드러납니다. 디자인 토큰과 컴포넌트는 그대로. 헤드라인, CTA, 본문 카피만 톤이 바뀐 채로 다시 만들어집니다.

6.3 섹션 빼면

"Hero + Footer만, 다른 거 다 빼고" 식으로 부탁하면, 모델은 components.md의 시퀀스 가이드를 본 뒤 같은 골격에서 일부 섹션을 빼고 다시 저장합니다. 채팅창에서 만든 페이지를 손으로 잘라내는 것보다 훨씬 깔끔합니다. 어디서 어디까지 잘라야 일관성이 깨지지 않을지를 components.md의 시퀀스 가이드가 미리 결정해두었기 때문입니다.

이 세 가지 수정에서 공통적인 것은 어디를 고치면 어디가 따라 바뀌는지가 명확하다는 점입니다. 페이지 한 장 한 장을 따로 손대지 않아도, 폴더 안의 한 자리만 손대면 모든 페이지가 그에 따라 움직입니다.

7. 내 하네스로 변형하기

여기까지는 위니브가 만들어둔 하네스를 그대로 사용하면서, 그 안의 한 줄을 살짝 고쳐보는 자리였습니다. 이제 한 발 더 가서, 같은 구조로 자기 하네스를 만들어 봅니다. 자기 브랜드, 자기 서비스가 있다면 그쪽으로요.

복사할 자리는 명확합니다. 6-2에서 본 일곱 자리를 자기 것으로 바꿔주면 됩니다. 폴더를 통째로 복사한 다음, 다음 다섯 자리를 차례로 손봅니다.

7.1 style/ 자기 브랜드로

style/tokens.css의 색 변수를 자기 브랜드 색으로 바꿉니다.

:root {
  --primary: #자기_브랜드_컬러;
  --primary-darken: #자기_조금_더_어두운_컬러;
  --grayLv1: ...
  /* ... */
}

폰트도 마찬가지입니다. fonts.css의 Pretendard를 자기가 쓰는 폰트로 교체하고, fonts/ 폴더의 woff2 파일을 갈아 끼웁니다.

components.css의 버튼·카드 모양도 자기 디자인 시스템에 맞게 손봅니다. 브랜드에 따라 둥근 정도(border-radius)나 그림자 강도가 다를 수 있습니다. 다만 클래스 이름(.btn--primary 같은 것)은 그대로 두는 게 좋습니다. 이름을 바꾸면 components.md의 마크업 패턴도 다 따라 바꿔야 합니다.

7.2 brand.md 갈아 끼우기

이 한 페이지를 정성껏 채우는 것이 결과 페이지 카피의 인상을 결정합니다.

## 톤
- (당신 회사의 톤 한 줄. 친근·격식·신뢰·발랄 중 하나)

## 메인 헤드라인
- (당신 회사가 자주 쓰는 헤드라인 패턴, 좋은 예 2~3개)

## CTA 버튼 카피
- (당신 회사가 자주 쓰는 CTA 어휘들)

## 자주 쓰는 키워드
- (당신 도메인의 고유 어휘, 서비스 이름들)

## 금지
- (당신이 페이지에서 보면 거슬리는 표현들. 자뻑·과장·영어 남발 등)

## 푸터 회사 정보
(주)당신회사 | 대표: ... | 사업자 번호: ... | 주소: ...

좋은 예와 금지를 같은 자리에 적어두는 게 핵심이라는 점은 위니브 brand.md와 같습니다. 좋은 예만 적어두면 모델이 자기식으로 해석할 자리가 너무 많이 남습니다. 금지를 함께 적어두면 빗나갈 자리가 좁아집니다.

7.3 components.md의 시퀀스 자기 사이트에 맞추기

자기 회사 사이트에서 자주 등장하는 페이지 유형을 관찰해서 적습니다. 위니브에서는 모객·출시·메인·카탈로그 네 종류였지만, 다른 회사는 다른 종류가 있을 수 있습니다.

SaaS 회사라면: 메인 / 기능 상세 / 가격 / 블로그 / 고객 사례
커머스라면: 메인 / 상품 카테고리 / 상품 상세 / 이벤트
미디어라면: 메인 / 기획 시리즈 / 뉴스레터 가입

각 유형별로 어떤 섹션이 어떤 순서로 등장하는지를 한 줄로 정리하면 됩니다. 정확하지 않아도 됩니다. 자기 사이트 두세 페이지를 펼쳐놓고 관찰해서 옮겨 적기만 하면, 모델이 그 가이드대로 출력의 큰 모양을 잡습니다.

7.4 SKILL.md와 CLAUDE.md 자기 어휘로

SKILL.md의 작업 6단계와 품질 기준은 거의 그대로 가져가도 됩니다. 다만 description의 자동 검색 키워드를 자기 사이트 용어로 바꿔야 자연어 라우팅이 작동합니다.

description: (당신 회사) 디자인 시스템을 따르는 정적 HTML 랜딩 페이지를
  자연어 브리프 한 덩어리로 만들어내는 스킬.
  "(당신 회사에서 자주 쓰는 요청 표현들)" 같은 요청에서 사용한다.

CLAUDE.md의 자연어 라우팅 키워드도 같은 자리에서 자기 표현으로 바꿉니다.

7.5 한 번 돌려보고 어색한 자리 다듬기

이렇게 자기 폴더가 만들어지면, 자기 브리프 한 줄로 한 페이지를 뽑아 봅니다. 첫 페이지의 결과가 어색하면 어느 파일을 고쳐야 할지가 명확합니다.

색이 어색 → style/tokens.css
폰트가 어색 → style/fonts.css
버튼·카드 모양이 어색 → style/components.css
카피 톤이 어색 → brand.md
섹션이 빠지거나 너무 많이 들어감 → components.md의 시퀀스
작업 흐름이 어색 → .claude/skills/landing/SKILL.md

이 자리들을 한두 번 다듬는 동안 하네스가 자기 회사 용도로 굳어집니다. 그리고 한 번 굳어지면, 이후에 만드는 모든 페이지가 같은 자리에서 흔들리지 않고 나옵니다.

여기서부터는 페이지 한 장을 만드는 일이 아니라 하네스를 한 번 만들어두면 페이지가 알아서 나오는 일이 됩니다. 다음 페이지를 만들 때도, 한 달 뒤 동료가 페이지를 만들 때도, 같은 폴더가 같은 자리에서 깔립니다.