여기서는 6-1에서 본 폴더 구조를 한 파일씩 펼쳐 봅니다. 각 파일은 한 페이지를 넘지 않는 짧은 안내문이지만, 그 안에 무엇이 들어가느냐가 결과 페이지의 일관성을 좌우합니다.

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

1. CLAUDE.md, 책상 위 안내판

폴더 루트에 CLAUDE.md 파일을 둡니다. Claude Code는 매번 작업을 시작할 때 이 파일을 자동으로 먼저 읽습니다. 즉, 채팅창에 매번 다시 적지 않아도 이 내용이 깔립니다.

# 위니브 랜딩 페이지 하네스

이 폴더는 자연어 브리프 한 줄로 위니브 디자인 시스템(vanilla CSS + CSS 변수)을 따르는 정적 랜딩 페이지를 만드는 하네스다.

## 무엇을 만드는가

- 입력: 한 덩어리 자연어 브리프
- 출력: `output/{slug}.html` 단일 파일. 같은 폴더의 `style/` 디자인 시스템을
  `../style/index.css`로 link해서 사용. 브라우저로 그대로 열어 미리보기 가능.

## 자연어 라우팅

사용자가 "랜딩 페이지 만들어줘", "랜딩 한 장 뽑아", "캠프 페이지",
"이런 이벤트 랜딩 좀" 같은 요청을 하면 `landing` 스킬을 먼저 사용한다.
직접 호출은 `/landing`.

## 주요 위치

- 작업 매뉴얼: `.claude/skills/landing/SKILL.md`
- 출력 골격: `.claude/skills/landing/template.html`
- 디자인 시스템: `style/`
- 컴포넌트 카탈로그: `components.md`
- 카피 컨벤션: `brand.md`
- 산출물: `output/{slug}.html`

## 사람 승인 지점

- 얇게: 섹션 시퀀스 제안, 본문 초안 - AI가 만들고 사람이 검토
- 두껍게: 외부 공개·배포 - AI는 진행하지 않는다.
         마케팅·디자인 담당자가 결정.

## 품질 기준

- 모든 색은 `style/tokens.css`의 CSS 변수만 사용. 임의 hex 금지.
- 컨테이너는 `.max-width` (1190px) 사용.
- 섹션 사이 세로 간격: 8rem (80px) 또는 12rem (120px). 일관성 유지.
- 1rem = 10px 규칙. 디자인 시안의 px 값을 그대로 rem으로.
- 모든 CTA 버튼은 `.btn.btn--primary` 또는 `.btn--white/outline` 사용.
- 푸터에는 항상 `brand.md`의 회사 정보 표기 포함.

이 안내문이 하는 일을 정리하면 네 가지입니다.

• 무엇을 만드는지 한 문장으로 정의 (자연어 입력 → 정적 HTML 출력)
• 어떤 단어가 들어오면 무엇을 보는지 라우팅 규칙 명시
• 어디에 무엇이 있는지 폴더 위치 한 번에 정리
• 품질의 잣대 명시 (CSS 변수만 쓴다, 컨테이너는 .max-width다 등)

2장과 4장에서 본 CLAUDE.md의 역할이 그대로입니다. 다만 위니브 디자인 시스템에 맞는 구체적 규칙이 들어갔다는 차이뿐입니다.

2. style 폴더, 자체완결 디자인 시스템

style/ 폴더는 6-1에서 말씀드린 대로 위니브가 이미 만들어둔 것을 그대로 가져온 것입니다. 다섯 개의 CSS 파일이 정해진 순서로 import 되도록 짜여 있습니다.

style/
├── tokens.css      CSS 변수 (색·그림자)
├── fonts.css       Pretendard 폰트 정의
├── reset.css       브라우저 기본 스타일 초기화
├── base.css        body 기본값, .max-width 같은 유틸 클래스
├── components.css  .btn, .card, .nav-pill 등 재사용 컴포넌트
├── index.css       위 다섯 개를 한 번에 import 하는 진입점
└── fonts/
    └── pretendard.woff2

가장 중요한 두 파일을 짧게 봅니다.

2.1 tokens.css

:root {
  /* base */
  --background: #fff;
  --primary: #2e6ff2;          /* 위니브 브랜드 블루 */
  --primary-darken: #145df0;

  /* surface (텍스트·어두운 패널) */
  --surface: #121314;

  /* gray scale: Lv1(가장 옅음) → Lv4(가장 진함) */
  --grayLv1: #f3f5fa;
  --grayLv2: #d9dbe0;
  --grayLv3: #8d9299;
  --grayLv4: #47494d;

  /* status */
  --error: #ff3440;
  --warn: #ffc533;

  /* highlight 배경 */
  --activation: #dee8ff;

  /* effects */
  --effect-shadow: 0px 4px 20px 0px rgba(0, 0, 0, .04);
}

/* OS가 다크 모드면 자동 전환 */
@media (prefers-color-scheme: dark) { :root { ... } }

페이지 안에서 색을 쓸 때는 항상 이 변수를 참조합니다. 예를 들면 본문 텍스트는 color: var(--surface), 옅은 회색 배경은 background: var(--grayLv1) 식입니다. #ffffff나 #2e6ff2 같은 hex를 직접 쓰지 않는 게 규칙입니다.

이 작은 규칙 하나가 큰 효과를 냅니다. 페이지를 만들 때 색이 흔들릴 자리가 사라집니다. 다크 모드 지원도 한 번에 따라옵니다.

2.2 components.css

자주 쓰는 컴포넌트의 클래스가 정의되어 있습니다. 가장 흔한 버튼만 살펴보면:

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 500;
}

.btn--medium {
  width: clamp(18rem, 16.47vw, 19.6rem);
  height: clamp(5.2rem, 5.04vw, 6rem);
  border-radius: 1.6rem;
}

.btn--primary {
  color: var(--background);
  background: var(--primary);
}
.btn--primary:hover {
  background: var(--primary-darken);
}

.btn--outline {
  color: var(--grayLv3);
  background: var(--background);
  border: 1px solid var(--grayLv2);
}

<button class="btn btn--medium btn--primary">신청하기</button>라고 쓰면 위니브 표준 메인 버튼이 그대로 나옵니다. 페이지마다 새로 스타일을 짤 필요가 없습니다.

이 외에 .card(그림자가 있는 카드 컨테이너), .nav-pill(알약형 네비), .arrow-btn(캐러셀 이동 버튼), .quote(좌측 보더가 있는 인용 블록), .search-input(검색창)이 들어 있습니다. 그 이상의 컴포넌트가 필요하면 인라인 style로 처리하되 색은 반드시 CSS 변수만 사용합니다.

3. components.md, 랜딩 조립 방법

style/components.css에는 버튼·카드·네비 같은 기본 컴포넌트만 있습니다. 그런데 랜딩 페이지 한 장은 여러 섹션의 조립입니다. Hero 섹션, 추천 대상 섹션, 커리큘럼 섹션, 가격 섹션, FAQ 섹션. 이런 섹션 단위의 조립 방법은 디자인 시스템에 정의되어 있지 않습니다.

그래서 components.md가 이 자리를 채웁니다. 이 문서가 하는 일은 두 가지입니다.

• 표준 섹션 시퀀스 정리 (위니브 랜딩 페이지의 골격)
• 각 섹션의 마크업 패턴 한 묶음

3.1 표준 섹션 시퀀스

위니브 운영 사이트들에서 관찰된 공통 골격은 이렇습니다.

1. Top Nav        - 항상 들어감
2. Hero           - 항상 들어감 (캐러셀 또는 단일)
3. Highlight      - 선택 (프로그램 한눈에, 강사진 등)
4. Testimonials   - 선택 (후기)
5. Content Block  - 선택 (커리큘럼, 결과물 전시, 가격 등 반복 등장)
6. FAQ            - 선택
7. Community CTA  - 선택 (디스코드 등)
8. Footer         - 항상 들어감

브리프 종류에 따라 어떤 섹션을 골라 쓸지 가이드도 함께 정리합니다.

- 이벤트·캠프 모객: 1 → 2 → 3 → 4 → 5(커리큘럼) → 5(가격)
                  → 6 → 7 → 8
- 신규 서비스 출시: 1 → 2 → 3 → 5(특징) → 7 → 8
- 회사 메인 페이지: 1 → 2(캐러셀) → 8 (단순)
- 카탈로그형: 1 → 2 → 5(콘텐츠 그리드) → 8

이 가이드 덕분에 모델은 "이번 브리프는 캠프 모객이니 8개 섹션, 회사 메인이면 3개 섹션"처럼 출력의 큰 모양을 빠르게 결정할 수 있습니다.

3.2 각 섹션의 마크업 패턴

각 섹션별로 "이렇게 쓰면 위니브 톤이 된다"는 마크업 예시를 박아둡니다. 예를 들어 Hero 섹션:

<section style="padding: 8rem 0 12rem;">
  <div class="max-width" style="display:flex; gap:6rem; align-items:center;">
    <div style="flex:1;">
      <h1>메인 헤드라인<br/>두 줄까지</h1>
      <p style="font-size:1.8rem; color:var(--grayLv3); margin-top:2rem;">
        서브 카피 한두 줄
      </p>
      <div style="display:flex; gap:1.2rem; margin-top:3.2rem;">
        <a href="#cta" class="btn btn--medium btn--primary">신청하기</a>
        <a href="#more" class="btn btn--medium btn--outline">자세히 보기</a>
      </div>
    </div>
    <div style="flex:1; aspect-ratio:646/400;
                background:var(--grayLv1); border-radius:2rem;">
      <!-- 히어로 이미지 자리 -->
    </div>
  </div>
</section>

이런 마크업 예시가 8개 섹션 각각에 있습니다. 모델은 결정한 시퀀스대로 이 예시들을 가져다가 브리프 내용으로 채워 넣기만 하면 됩니다. "어떤 클래스를 쓸지", "여백이 얼마나 들어가야 자연스러운지", "텍스트 위계는 어떻게 잡는지"가 매번 새로 결정되지 않습니다.

이게 컴포넌트 카탈로그의 정확한 효용입니다. 결정해야 할 자리를 줄여줍니다.

4. brand.md, 카피 컨벤션

색과 컴포넌트가 일관되어도 카피의 톤이 흔들리면 결과 페이지의 인상이 달라집니다. brand.md는 카피의 톤을 한 페이지짜리로 정리합니다.

## 톤

- 친근하면서 차분한 설명체
- 과한 강조 어구 없이 사실 위주
- 영어는 필요한 곳에만, 한국어 우선

## 메인 헤드라인

- 짧은 한 문장 + 줄바꿈으로 강조
- 종결: 명사형보다 동사형이 자연스러움
- 좋은 예
  - "당신이 ICT 각 분야의 전문가로 성장할 수 있도록 /
     모든 지식과 서비스를 제공"
  - "제주 사계에서 바이브 코딩을 시작하세요"

## CTA 버튼 카피

- 동사형으로 짧게
- 5글자 이내 권장
- 사용 어휘
  - 신청 유도: "무료 신청하기", "지금 신청"
  - 콘텐츠 탐색: "자세히 보기", "더 알아보기"
  - 가입 유도: "지금 시작하기", "회원가입"
  - 외부 링크: "디스코드 참여", "유튜브 보기"

## 자주 쓰는 키워드

- ICT, 교육, 콘텐츠, 강의, 커뮤니티, 바이브 코딩, AI, 제주
- 서비스 고유명: 위니버시티, 위니북스, 위니빌리지(디스코드), 위니브
- 인물: 이호준 대표

## 금지

- 자뻑 단어: "업계 최고", "유일한", "혁신적", "압도적"
- 과장된 수식: "놀라운", "엄청난", "최강"
- 영어 남발: 한국어로 충분한데 영어 단어를 끼우는 것
- 외부 인물·기업 비교 표현

## 푸터 회사 정보 (필수 표기)

(주)위니브 | 대표: 이호준 | 사업자 번호: 546-86-01737 | 정보통신업
주소: 제주 제주시 첨단로 330 세미양빌딩 A동 1층 106호
© WENIV All rights reserved

핵심은 "좋은 예"와 "금지"가 같은 자리에 적혀 있다는 것입니다. 좋은 예만 적어두면 모델이 자기식으로 해석할 자리가 너무 많이 남습니다. 금지를 함께 적어두면 빗나갈 자리가 좁아집니다.

푸터 회사 정보는 매 페이지에 똑같이 들어가야 하는 내용이라 통째로 박아뒀습니다. 이것도 "결정해야 할 자리를 줄이는" 역할입니다.

5. SKILL.md, 작업 매뉴얼

이제 .claude/skills/landing/SKILL.md. 폴더 이름이 곧 스킬 이름이 됩니다. 우리는 landing이라는 이름으로 두었기 때문에 /landing이라고 입력하면 이 스킬이 실행됩니다.

---
name: landing
description: 위니브 디자인 시스템을 따르는 정적 HTML 랜딩 페이지를
  자연어 브리프 한 덩어리로 만들어내는 스킬.
  "랜딩 만들어줘", "랜딩 한 장 뽑아", "캠프 페이지",
  "이벤트 랜딩" 같은 요청에서 사용한다.
---

# Landing

## 작업 순서

1. 브리프 받기. 핵심이 빠져 있으면 한 번만 짧게 되묻는다.

2. 브리프 분해. 다음을 추출한다.
   - 페이지 목적: 모객 / 신규 출시 / 회사 메인 / 카탈로그
   - 핵심 CTA 한 가지
   - 메인 헤드라인 후보 한두 줄
   - 서브 카피 후보 한 줄
   - 추가 정보 (날짜·장소·가격·혜택 등)

3. 섹션 시퀀스 결정. `components.md`의 가이드를 본다.
   결정한 시퀀스를 한 줄로 사용자에게 보여주고 진행.

4. 카피 작성. `brand.md`의 톤·금지 어휘 따름.

5. HTML 생성. `template.html` 골격에 채워 넣음.
   - 색은 `style/tokens.css`의 변수만 사용
   - 컴포넌트는 `style/components.css`의 클래스만 사용
   - 추가 마크업은 `components.md`의 패턴 따름

6. `output/{slug}.html`로 저장하고 절대 경로 안내.

## 사람 승인 지점

- 섹션 시퀀스 결정 직후 (3단계 끝)
- 본문 초안 저장 직후 (6단계 끝). 배포는 사람이 결정.

## 품질 기준

- 모든 색은 CSS 변수만 사용
- 1rem = 10px 규칙 유지
- 컨테이너는 `.max-width`
- 섹션 패딩: 데스크톱 기본 8rem
- CTA 버튼: `.btn.btn--primary` 등 표준 클래스만
- 헤드라인 위계: h1 4rem/700, h2 3.2rem/700, h3 2.4rem/600

## 금지

- 토큰에 없는 색·폰트 임의 추가
- Tailwind, Bootstrap 같은 외부 프레임워크 도입
- 영어 카피 자의로 끼우기
- 자뻑 표현 사용
- 한 페이지가 너무 길어지면 (스크롤 5번 초과) 섹션 줄일지 한 번 물음

이 매뉴얼이 하는 일은 다음 세 가지입니다.

• 언제 이 스킬을 쓰는지 (description의 자동 검색 키워드)
• 무엇을 어떤 순서로 하는지 (6단계 흐름)
• 어디서 사람이 개입하는지 (승인 지점 2곳)

작업 순서를 6단계로 길게 풀어둔 것은 의도적입니다. 모델이 "브리프 받자마자 HTML로 직행"하지 않게 하는 장치입니다. 브리프를 한 번 분해하고, 시퀀스를 사용자에게 한 번 보여주고, 카피를 한 번 정리한 다음에야 HTML 생성으로 들어갑니다. 이 중간 자리들이 결과 품질을 결정합니다.

6. template.html, 출력 골격

마지막으로 .claude/skills/landing/template.html. 페이지 한 장의 기본 뼈대입니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{TITLE}}</title>
<link rel="stylesheet" href="../style/index.css" />
<style>
  section { padding: 8rem 0; }
  section + section { border-top: 1px solid var(--grayLv1); }
  h1 { font-size: 4rem; font-weight: 700; line-height: 1.4; }
  h2 { font-size: 3.2rem; font-weight: 700; line-height: 1.4; }
  h3 { font-size: 2rem; font-weight: 600; line-height: 1.4; }
  p { line-height: 1.6; }
</style>
</head>
<body>

<!-- 1. Top Nav (필수) -->
<header style="border-bottom: 1px solid var(--grayLv2);">
  ...
</header>

<!-- 2. Hero (필수) -->
<section>
  ...
</section>

<!-- 3~7. 선택 섹션들 -->
<!-- {{CONTENT_BLOCKS}} -->

<!-- 8. Footer (필수) -->
<footer style="background: var(--grayLv1); padding: 6rem 0 4rem;">
  ...
</footer>

</body>
</html>

골격이 하는 일은 다음 두 가지입니다.

• 항상 들어가는 자리 (Top Nav, Hero, Footer)는 미리 깔아둠
• 선택 섹션이 들어갈 자리는 마커({{CONTENT_BLOCKS}})로 표시

<link rel="stylesheet" href="../style/index.css" /> 한 줄이 디자인 시스템 전체를 끌어옵니다. 별도의 빌드 도구나 번들러 없이, 브라우저로 이 HTML 파일을 그냥 열기만 하면 위니브 톤이 적용된 페이지가 보입니다.

7. 일곱 개 파일이 함께 할 때

여기까지 일곱 개 파일의 내용을 봤습니다. 정리하면 각 파일이 한 가지 역할에 집중하고 있습니다.

이 일곱 자리가 합쳐지면, "랜딩 페이지를 만드는 일"에서 매번 새로 결정해야 하던 자리들이 거의 다 한 번씩 결정되어 있는 상태가 됩니다. 결과 페이지가 흔들릴 자리가 좁아집니다.

이 폴더 전체는 GitHub 저장소에 그대로 올려두었습니다. 이어지는 실습을 따라가려면 미리 받아두세요.

git clone https://github.com/weniv/landing-harness-student.git

또는 GitHub 페이지에서 Code → Download ZIP으로 받아도 됩니다.

6-3에서는 이 폴더를 들고 자연어 브리프로 페이지를 네 장 뽑아 나란히 비교해보고, 같은 구조로 자기 하네스를 만드는 자리까지 가봅니다.