Claude Code로 뉴스레터 랜딩페이지 만들고 배포까지!

소개

뉴스레터를 모아놓은 깔끔한 랜딩페이지를 만들고 싶었어요. Claude Code를 활용해 시작해봤습니다.

단순히 만들어보기만 한 게 아니라, 만든 결과물을 GitHub에 업로드하고 Vercel로 배포까지 해보며 전체 흐름을 경험했습니다. 😎

진행 방법

🛠️ 사용한 도구

Claude Code (Anthropic)
Chat-GPT
GitHub
Vercel

🧾 작업 순서

Chat-GPT를 활용하여 브랜딩을 진행
(Rhim님의 컨셉 기획부터 브랜딩 시스템 : OSMU 세트 만들기 청강을 통해 받은 자료 활용)

# 🌟 KOMKI 브랜드 요약

---

## 🧁 브랜드명: **KOMKI (콤키)**
**의미**: *Key Information + 한 입(Bite)*  
**형태**: 짧고, 실용적이며, 기억에 남는 정보 브랜드

---

## 🎯 브랜드 한 줄 정의
**“사장님을 위한 귀여운 정보 스낵 큐레이터”**

---

## 💎 핵심 가치

1. **정확성** – 검증된 정보만 전달  
2. **관심 기반 큐레이션** – 타깃 맞춤형 선별  
3. **재미/가독성** – 짧고 귀여워서 읽고 싶어지는 콘텐츠

---

## 👥 타깃

- 20~40대 창업자 및 실무자  
- 바쁜 일정 속에서도 *핵심만 알고 싶은 사람*  
- 귀여운 콘텐츠에도 반응하는 디지털 네이티브 세대

---

## 🎨 비주얼 톤 & 캐릭터

- **캐릭터**: 쿠키처럼 생긴 정보 요정 "콤키"  
- **색감**: 따뜻한 크림 바탕 + 생동감 있는 포인트 컬러  
- **톤**: 귀엽지만 똑똑하고, 캐주얼하지만 정확함  
- **말투**: “콤키 왔어요~ 오늘 정보 한 입 드셔보실래요?”

---

## 📬 콘텐츠 포맷 구조 (뉴스레터 기준)

1. **콤키 인사말** 🍪  
2. **오늘의 핵심 요약** 🎯  
3. **콤키픽 정보 3개** 🧩  
4. **CTA 클릭 유도** 📎  
5. **보너스 쿠키 콘텐츠** 🎁  
6. **마무리 인사 + 공유 유도** 💌

---

## 💬 슬로건

> **“Today’s key information, a bite with KOMKI!”**  
> (*오늘의 핵심 정보, 콤키로 한 입!*)

---

## 🔗 브랜딩 포인트

| 요소 | 스타일 |
|------|--------|
| **톤** | 반말+존댓말 혼용 / 리듬감 있는 문장 / 이모지 활용 |
| **포지셔닝** | “지루한 뉴스레터를 대체할 정보 스낵” |
| **확장성** | 카드뉴스 / SNS / 굿즈 / 알림봇 / 캐릭터 IP |

---

## 🧭 KOMKI는 이런 브랜드입니다:

> ✅ 귀엽지만 핵심은 명확하게 전달하고  
> ✅ 읽지 않아도 보고 싶게 만들고  
> ✅ 정보와 감성을 동시에 전하는 콘텐츠

Claude Code에게 PRD(기획 문서)를 입력해서 랜딩페이지 초안 코드 생성
- 클로드에게 브랜딩 페이지를 주고 개발지식이 부족한 저의 상황을 설명해준뒤 가장 좋은 방법을 제안해달라고 하였고 클로드가 제안해준 방법을 바탕으로 PRD 문서를 작성해 달라고 요청

# KOMKI Newsletter & Landing Page PRD

## 1. 목적

-   브랜드 **KOMKI**의 이메일 뉴스레터 발행 및 랜딩 페이지 구축
-   구독자는 뉴스레터 클릭 시 랜딩으로 유입, 다른 기사 탐색 가능

## 2. 중요포인트
 -   깔끔한 그리드 카드 레이아웃
 -   상단 카테고리 네비게이션
 -   Newsletter 메뉴 존재

## 3. 주요 기능

### 프론트엔드 (Next.js)

-   **탑 네비게이션**
    -   카테고리 메뉴: AI, 마케팅, 꿀팁, 지원사업&교육
    -   Newsletter 구독, 구독을 위한 이메일 주소 입력 폼
-   **랜딩 페이지**
    -   Hero 섹션: 오늘의 KOMKI 픽(기사 카드)
    -   추천 기사 카드: 이미지, 제목, 요약
    -   카테고리별 카드 리스트
    -   Footer: SNS 링크, 저작권
-   **반응형 디자인**
    -   모바일 우선, 이미지 카드 1열 → 데스크탑 3열

### 뉴스레터 구독 흐름

1.  구독 폼에서 이메일 입력
2.  Apps Script Web App 호출 → Google Sheet `Subscribers`에 저장
    (status=pending)
3.  확인 메일 발송 (더블 옵트인)
4.  사용자가 확인 링크 클릭 시 status=active 업데이트
5.  뉴스레터 발송 시 active 구독자 대상 발송

### 백엔드 (Apps Script + Sheets + Gmail)

-   **Sheets**: `Subscribers(email,status,createdAt,verifiedAt,token)`
-   **Apps Script Web App**
    -   `POST /subscribe`: 이메일 저장, 확인 메일 발송
    -   `GET /confirm`: 토큰 검증 후 status=active 업데이트
-   **메일 발송**
    -   초기: Gmail API 사용
    -   확장: Mailchimp/Resend 등 외부 서비스 연동

## 4. 디자인 가이드

-   색상: 크림 배경 + 포인트 오렌지, 카테고리별 색상구분
-   버튼: 높이 48px, border-radius 16px
-   폰트: Sans-serif, 제목 Bold, 본문 Regular
-   레이아웃: 여백 최소화, 카드 기반

## 5. KPI

-   구독 전환율 5% 이상
-   뉴스레터 클릭→랜딩 체류율 70% 이상
-   Lighthouse 점수 90+ (LCP \< 2.5s, CLS \< 0.1)

## 6. 개발 단계

1.  Next.js 기본 구조 생성
2.  Navigation + Hero + Footer 구현
3.  카드 레이아웃 기사 리스트 구현
4.  구독 폼 → Apps Script 연동
5.  더블 옵트인 메일 발송 확인
6.  배포 (Vercel + Google Apps Script)

## 7. 운영

-   데이터 보호: RLS, 개인정보 고지, unsubscribe 링크
-   로깅: Apps Script → Cloud Logs
-   전환 추적: UTM 파라미터 수집

------------------------------------------------------------------------

**문서 목적**: Claude Code + MCP 활용 개발을 위한 요구사항 정의서

Claude가 만들어준 HTML/CSS 코드를 복사해 로컬에서 확인하고 수정
랜딩페이지: KOMKI - 사장님을 위한 정보 스낵
최초만들어진 버전에서 다양하게 수정 해보면서 효율적인 수정방법을 연습
GitHub 저장소에 업로드
클로드 코드에서 GitHub 저장소에 업로드 하는 방법을 물어봐서 진행
처음에 Git hub CLI를 알려줘서 시도 해봤지만 잘 안되서 쉬운 방법으로 진행
Vercel에서 해당 GitHub 저장소를 연결해 바로 배포 🎉
이것도 역시 Claude 에게 물어봐서 진행
앞으로의 워크플로우도 알려주는 친절한 Claude