Claude Code로 회사 행사 상세페이지 30분 만에 만든 후기

# Claude Code로 회사 행사 상세페이지 30분 만에 만든 후기

---

## 소개

**시도하고자 했던 것:**
회사 길드(사내 커뮤니티)에서 운영하는 "길드하우스"라는 정기 행사의 상세 안내 페이지를 만들고 싶었습니다. 4일간 경남 하동에서 차밭 농활, 먹거리, DJ파티 등을 즐기는 행사인데, 슬랙으로 안내하기엔 정보가 너무 많고 흩어져서 한 페이지에 깔끔하게 정리할 필요가 있었어요.

**그 이유:**
- 슬랙 메시지로는 일정, 프로그램, FAQ, 교통, 신청 등을 한눈에 보여주기 어려움
- 디자이너/개발자 없이 빠르게 만들고 싶었음
- 링크 하나로 공유해서 누구든 바로 볼 수 있게 하고 싶었음

---

## 진행 방법

**사용 도구:** Claude Code (CLI)

### 1단계: 컨셉과 레퍼런스 공유

슬랙에서 동료들이 나눈 대화 내용(먹거리, 분위기)과 컨셉 메시지를 그대로 Claude Code에 붙여넣기 했습니다.

```
프로그램 상세페이지를 만들거야.
* 아래의 스레드 내용을 참고해줘.
* 컨셉 메세지도 참고해 디자인해줘. 길하 주민, 농활 이 컨셉이야.
* 봄 소풍 아니고 봄 길드하우스야.

[스레드 내용]
L**: 여기다 치차론 해서 먹으면서 하이네켄 캐그에서 콸콸콸...
P**: 마르게리따 말고 카이피리냐 가능합니까
K**: 카이피리냐 라임과 설탕만 있다면 어디서든 가능하죠

[컨셉 메세지]
S**: 📢 길하 주민 여러분께 안내 말씀 드립니데이
살랑 살랑 봄 바람도 불고~ 다 함께 길하 봄 소풍 한 번 떠나보려 합니데이이...
```

> 핵심: 정제된 기획서가 아니라 **슬랙 대화 원문 그대로** 넣었습니다. Claude Code가 알아서 컨셉을 파악합니다.

### 2단계: 대화하면서 방향 잡기

Claude Code가 먼저 계획(Plan Mode)을 세우고 질문을 던져줍니다:

- "기존 페이지를 업데이트할까요, 새로 만들까요?" → **새 페이지로 교체**
- "사투리 톤을 전체에 적용할까요?" → **전체 적용**
- "먹거리는 확정인가요?" → **확정, 구체적으로**
- "신청 버튼은 어떻게?" → **숙박/손님 초대 2개 분리**

> 핵심: 4개의 객관식 질문에 답하는 것만으로 방향이 잡혔습니다.

### 3단계: 피드백으로 다듬기

첫 계획서가 나오면 코멘트를 달아서 수정합니다:

```
- "먹거리보다 프로그램이 더 중요해"
- "자유 참여 구조 강조할 필요는 없어, 우리는 다 알아"
- "치차론, 카르니타스 — 모르는 사람 있을 것 같아" → 생소한 메뉴에 설명 추가
- "FAQ 추가해줘" → 이전 행사 FAQ 붙여넣기
```

그 외 추가 요청도 대화로 바로 반영:

```
"차량 확인하는 파트 넣어서, 차 있으면 언제 어디서 몇 시에 출발하는지,
몇 명 태울 수 있는지. 차 없으면 언제 어디서 몇 시에 출발하는지 확인"
```

→ 라디오 버튼 + 조건부 입력 필드가 있는 **인터랙티브 폼**이 바로 만들어졌습니다.

```
"날짜 어차피 4일이니까 선택할 수 있게 바꿔주고,
탑승 인원은 4명까지 옵션 주고 그 이상이면 작성할 수 있게 해줘"
```

→ 칩 버튼 UI로 변경, "그 이상" 선택 시 직접 입력 필드 표시

### 4단계: GitHub Pages로 즉시 배포

```
"동료들한테 공유해서 볼 수 있게 하려고. 어떻게 해야해?"
→ "깃헙으로 하자"
```

Claude Code가 알아서:
1. git 초기화
2. GitHub 레포 생성 (`gilha-spring-2026`)
3. push
4. GitHub Pages 활성화

**30초 만에 공개 URL 생성 완료.**

---

## 결과와 배운 점

### 결과물

완성된 페이지 구성:
- Hero (마을 방송 컨셉, 경상도 사투리 톤)
- 인트로 (농활 소개)
- 프로그램 6개 (아코디언 카드 — 클릭하면 세부 내용 펼쳐짐)
- 4일 일정 타임라인
- 교통 안내 + 숙소 정보
- FAQ 8개 (아코디언)
- 신청 CTA 2개 (숙박/손님 초대, 마감일 배지)
- 차량 확인 폼 (라디오 버튼 → 조건부 필드 → 칩 선택)

### 배운 점

1. **슬랙 대화를 그대로 넣어도 된다** — 정리된 기획서가 필요 없음. 대화의 맥락, 톤, 분위기까지 Claude Code가 파악해서 페이지에 반영함.

2. **계획 → 피드백 → 수정 루프가 빠르다** — "이건 빼줘", "이거 추가해줘" 같은 한 줄 피드백으로 즉시 반영됨. 디자이너/개발자에게 요청하고 기다리는 시간이 0.

3. **인터랙티브 요소도 대화로 만든다** — "차 있는 사람/없는 사람 나눠서 입력받게 해줘" 한 마디로 라디오 버튼 + 조건부 폼이 생김. 코드를 몰라도 됨.

4. **배포까지 원스톱** — "깃헙으로 하자" 한 마디로 레포 생성 → push → GitHub Pages 활성화 → URL 공유까지 완료.

### 시행착오

- 처음에 먹거리 섹션을 너무 강조했는데, 프로그램이 핵심이라는 피드백 후 구조를 재조정함
- 교통 안내 내용에 오류가 있었는데, 검색 후 수정함
- 그림일기 스타일 요소를 시도했다가 컨셉에 안 맞아서 제거 — 이런 시행착오도 대화 한 줄로 롤백 가능

### 앞으로의 계획

- 신청 폼을 Airtable이나 Google Form과 연동 예정
- 실제 사진이 나오면 프로그램 카드의 placeholder 교체
- 다음 길드하우스 때도 같은 방식으로 빠르게 페이지 생성할 계획