바이브코딩으로 나만의 랜딩페이지 만들기 기초 가이드

LIVE PROJECT · ISSUE №9

아이디어 한 줄에서
라이브 사이트까지.

시리즈 1~8의 모든 도구를 한 프로젝트에 — Claude Code로 본인의 랜딩 페이지를 90분 안에 라이브 URL까지. 초보자를 위한 완전 가이드.

소요 시간

⏱️ 약 90분

난이도

⭐ 입문

결과물

🌐 라이브 URL

바이브 코딩 시리즈 · 09 · 봄내AI해적단

📌 IN THIS PROJECT

"시리즈 다 봤는데 정작 뭘 만들지 막막해요" — 단톡방 단골 질문입니다. 가장 빠르고, 가장 실용적이고, 가장 유용한 답이 "본인의 랜딩 페이지"예요. 포트폴리오, 사이드 프로젝트, 봄내AI해적단 모집 페이지 — 무엇이든 가능. 이 글은 처음부터 끝까지 손 잡고 갑니다.

안녕하세요, 봄내AI해적단 선장 이장환입니다. 시리즈 아홉 번째 글이에요.

지금까지 우리가 익힌 도구들을 정리해볼까요?

✓ Skills로 워크플로우 박제 (№1)

✓ Claude Design으로 디자인 끌어올리기 (№2)

✓ Claude Code 자유자재로 (№3)

✓ Agent Teams로 병렬 협업 (№4)

✓ 6단계 메서드 워크플로우 (№5)

✓ SQL로 데이터 다루기 (№6)

✓ 디버깅 탐정 사고 (№7)

✓ GitHub + Vercel 배포 (№8)

이 모든 걸 한 프로젝트에서 활용하는 가장 좋은 입문 과제가 바로 "본인의 랜딩 페이지"입니다. 왜냐하면:

🚀

가장 빠른 성취감

90분 안에 진짜 사이트가 나와요. 첫 라이브 URL의 짜릿함.

📈

실용성 최강

포트폴리오, 강의 소개, 모임 모집 — 평생 활용.

🎨

디자인 감각 훈련

시리즈 №2의 frontend-design을 본격적으로 써먹는 첫 무대.

💼

취업·창업 자산

"본인 사이트 있나요?"라는 질문에 URL 하나로 답.

⊙ 가이드 구조

9개 챕터. 1~3장은 기획, 4~7장은 만들기, 8~9장은 배포와 실전 시뮬레이션입니다.

01   랜딩 페이지의 7가지 핵심 요소↓ 02   기획 10분 — 4가지 질문↓ 03   디자인 톤 결정↓ 04   프로젝트 셋업 — 5분 코스↓ 05   7개 섹션 구현 ★↓ 06   인터랙션과 디테일↓ 07   SEO와 메타데이터↓ 08   GitHub + Vercel 배포↓ 09   실전 시뮬레이션 — 90분 따라하기↓

01

CHAPTER ONE

랜딩 페이지의 7가지 핵심 요소.

랜딩 페이지란 "방문자를 한 가지 행동(전환)으로 유도하는 페이지"입니다. 정보를 주는 페이지가 아니라 설득하는 페이지예요. 그래서 구조가 매우 명확합니다.

좋은 랜딩 페이지는 거의 모두 다음 7개 섹션을 가집니다. 순서까지 비슷해요.

1

🎯 Hero (히어로) — 첫 5초의 운명

큰 헤드라인 + 한 줄 소개 + 메인 CTA 버튼. 방문자가 5초 안에 "이게 뭔지" 알아야 함.

2

😣 Problem — "당신의 고민, 압니다"

방문자가 겪는 문제를 짚어줍니다. "이게 내 얘기네" 싶으면 계속 읽어요.

3

💡 Solution — "이렇게 풉니다"

문제를 해결하는 본인의 방법. 구체적이고 명확하게.

4

⚡ Features — "이런 기능들이 있어요"

핵심 기능/혜택 3개. 그 이상은 오히려 산만해짐. 아이콘 + 짧은 설명이 효과적.

5

⭐ Social Proof — "다른 사람들도 좋아해요"

후기, 사용자 수, 사용 기업 로고 등. 신뢰감 형성의 핵심. 없으면 빈약해 보임.

6

💰 Pricing / Benefits — "이만큼 가치 있어요"

유료 서비스면 가격, 무료면 가입 시 받는 혜택. "이거 신청하면 뭘 받는지" 명확히.

7

🚀 Final CTA — 마지막 행동 유도

스크롤 끝에 다시 한 번 CTA. "여기까지 읽었으면 지금 신청하세요". 가장 강력한 버튼.

💡 황금 비율 · 화면 위에서 아래로 "호기심 → 공감 → 신뢰 → 행동"의 흐름. 이 순서가 깨지면 방문자가 떠납니다. 7개 섹션의 순서는 절대 바꾸지 마세요.

02

CHAPTER TWO

기획 10분 — 4가지 질문.

코드 짜기 전에 10분만 투자하세요. 노트에 답을 적으면서. 이 10분이 90분의 결과물 퀄리티를 결정합니다.

Q1

이 페이지는 누구를 위한 것인가? (페르소나)

막연히 "사람들"이 아니라 구체적인 한 명을 떠올리세요.

예: "32세 프리랜서 디자이너. 1인 사업을 시작하려고 함. 본인 포트폴리오 사이트가 필요한데 코딩은 모름."

Q2

그 사람의 가장 큰 고민은 무엇인가? (Problem)

2장의 Problem 섹션에 들어갈 내용. 구체적이고 감정적으로.

예: "포트폴리오를 만들고 싶지만 코딩은 어렵고, 외주 맡기자니 비싸고, 결국 인스타에만 작품을 올리고 있다."

Q3

본인이 제안하는 것은? (Solution + 핵심 메시지 한 줄)

Hero의 헤드라인이 될 한 줄. "이게 뭐다"를 5초 안에.

예: "AI와 함께 30분 안에 본인의 포트폴리오 사이트를 만드는 봄내AI해적단 모임."

Q4

방문자에게 시키고 싶은 단 한 가지 행동은? (CTA)

버튼에 들어갈 액션. 딱 하나만. 둘 이상이면 둘 다 안 함.

예: "단톡방 참여하기 [버튼]" · 또는 "이번 모임 신청하기 [버튼]"

📝 4가지 답을 노트에 적었나요? · 이 답들을 다음 4장에서 CLAUDE.md에 옮겨 적을 거예요. 답이 모호하면 결과물도 모호합니다. 구체적일수록 좋은 페이지가 나옵니다.

03

CHAPTER THREE

디자인 톤 결정 — 5분.

시리즈 №2(Claude Design)에서 다룬 11가지 미적 방향 중 본인 페이지에 맞는 것을 고르세요. 페르소나에 따라 답이 달라집니다.

B2B SaaS

⚡ 모던 미니멀

짙은 파랑/검정 + 흰 배경 + 한 가지 액센트 컬러. 신뢰감 우선.

크리에이터·강의

🎨 그라디언트 모던

보라→핑크→오렌지 그라디언트 + 활기. 이 글이 쓰는 톤.

친환경·웰니스

🌿 자연 톤

크림 베이지 + 짙은 녹색 + 손글씨 폰트. 따뜻함.

럭셔리·디자이너

✨ 에디토리얼

큰 세리프 폰트 + 흑백 + 골드 액센트. 매거진 톤.

테크·개발자

💻 다크 모드

짙은 차콜 + 네온 그린/파랑. 코드 에디터 느낌.

캐주얼·재밌는

🎈 플레이풀

코랄 + 노랑 + 둥근 모서리 + 이모지. 친근함.

🎨 시리즈 №2 활용 강력 추천

frontend-design 플러그인을 깔아두면 이 모든 게 자동화됩니다. 클로드가 톤에 맞는 폰트, 컬러, 레이아웃을 한 번에 잡아줘요. 아직 안 깔았다면 시리즈 №2를 먼저 보세요 — 30분 투자로 결과물 퀄리티가 2배.

04

CHAPTER FOUR

프로젝트 셋업 — 5분 코스.

이제 진짜 만들기 시작입니다. 5단계로 끝나요.

1

폴더 생성 + Git 초기화

$ mkdir my-landing && cd my-landing
$ git init

2

Claude Code 실행 + /init

$ claude
> /init

CLAUDE.md가 자동 생성됩니다.

3

CLAUDE.md에 기획 + 톤 옮기기

2장의 4가지 답과 3장의 디자인 톤을 CLAUDE.md에 그대로 적습니다:

# 봄내AI해적단 랜딩 페이지

## 페르소나
30~40대 직장인. AI 도구로 부업을 시작하고 싶지만 어디서 시작할지 모름.

## 핵심 메시지
"AI와 함께 30분 안에 본인의 사이트를 만드는 춘천 모임"

## CTA
단톡방 참여 신청

## 디자인 톤
그라디언트 모던 (보라→핑크→오렌지). 활기차고 친근한 분위기.
Inter, Roboto 폰트 금지.

4

프로젝트 스캐폴딩 요청

"CLAUDE.md대로 Next.js 14 + Tailwind 랜딩 페이지 프로젝트 초기 세팅해줘. 빈 페이지 하나만."

✓

첫 커밋 — 안전망 만들기

npm run dev로 빈 페이지 확인 → git add . && git commit -m "초기 셋업". 매 섹션 끝마다 커밋하는 습관을 여기서부터.

05

CHAPTER FIVE · 메인

7개 섹션 구현 — 한 번에 하나씩.

이 장이 글의 핵심입니다. 한 섹션 = 한 사이클 = 약 10분. 7개 섹션을 차례대로. 절대 한 번에 다 만들어달라고 하지 마세요.

SECTION 01

🎯 Hero — 첫인상이 모든 것

구성 요소: 큰 헤드라인 + 한 줄 부제 + CTA 버튼 + (선택) 배경 이미지/그라디언트

[프롬프트] 랜딩 페이지의 Hero 섹션을 만들어줘. [헤드라인] "AI와 함께, 30분 안에 본인의 사이트" [부제] "춘천에서 시작하는 바이브 코딩 커뮤니티. 매주 모입니다." [CTA 버튼] "단톡방 참여하기" [디자인] - 화면 전체 (100vh) 사용 - 헤드라인은 크게 (모바일 36px, 데스크톱 64px+) - 배경: CLAUDE.md의 그라디언트 톤 - 텍스트는 가운데 정렬 - CTA 버튼은 호버 효과 포함

⚠️ 흔한 함정: 헤드라인이 너무 길어서 두 줄 넘기지 말 것. 10단어 이내가 이상적. "이게 뭔지" 5초 안에 파악 가능해야 함.

SECTION 02

😣 Problem — "내 얘기네"

구성 요소: 큰 질문 한 줄 + 3가지 문제점 (아이콘 + 짧은 설명)

[프롬프트] Problem 섹션을 추가해줘. [큰 질문] "이런 고민, 익숙하지 않으세요?" [3가지 문제점] 1. 😟 "AI 강의 봐도 막상 뭘 만들지 막막함" 2. 😟 "혼자 하다 막히면 물어볼 곳이 없음" 3. 😟 "춘천에는 이런 모임이 거의 없음" [디자인] - 3개 카드를 가로로 (모바일은 세로) - 각 카드 배경: 옅은 회색 또는 다른 톤 한 가지 - 아이콘은 lucide-react 사용 - Hero 섹션 다음, 자연스러운 스크롤

SECTION 03

💡 Solution — 해결책

구성 요소: 큰 선언 한 줄 + 본인이 어떻게 푸는지 + (선택) 데모 이미지

[프롬프트] Solution 섹션을 추가해줘. [큰 선언] "매주 모여서, 함께 만듭니다." [설명 단락] 봄내AI해적단은 매주 토요일 춘천에서 모이는 바이브 코딩 커뮤니티입니다. 혼자 막히는 그 순간, 옆에 누군가가 있어요. [디자인] - 텍스트 + 이미지 2단 레이아웃 - 이미지 자리는 placeholder로 (나중에 진짜 사진 넣을 거) - Problem 섹션과 톤 차이 (어둠→밝음 같은 대비)

SECTION 04

⚡ Features — 핵심 혜택 3가지

구성 요소: 헤딩 + 3가지 혜택 (아이콘 + 제목 + 짧은 설명)

[프롬프트] Features 섹션을 추가해줘. [3가지 혜택] 1. 🎯 매주 토요일 정기 모임 — 같은 시간, 같은 장소 2. 🤝 1:1 멘토링 가능 — 막히면 즉시 도움 3. 📚 무료 가이드 시리즈 — 8편의 체계적인 글 [디자인] - 3개 카드 그리드 (모바일은 1열) - 각 카드: 큰 아이콘 + 제목 + 1-2줄 설명 - 카드 호버 시 살짝 떠오르는 효과

⚠️ 3개 룰: 혜택은 정확히 3개. 5개면 산만, 2개면 빈약. 3은 마법의 숫자입니다.

SECTION 05

⭐ Social Proof — 신뢰의 증거

구성 요소: 통계 숫자 또는 후기 카드 3개

[프롬프트] Social Proof 섹션을 추가해줘. [옵션 A — 통계로] - "30+" 활동 멤버 - "20+" 만든 프로젝트 - "100%" 만족도 [옵션 B — 후기로] 멤버 3명의 후기 카드. 이름, 직업, 한 마디. [디자인] - 옵션 A: 큰 숫자 강조 (60px+) - 옵션 B: 둥근 카드 + 그림자 - 신뢰감 있는 톤 (너무 화려하지 않게)

💡 처음이라면 옵션 A 추천 · 후기는 시간이 지나야 모아짐. 일단 통계 숫자로 시작하고, 나중에 진짜 후기가 쌓이면 옵션 B로 업그레이드.

SECTION 06

💰 Benefits — 받게 될 것들

구성 요소: 명확한 약속 5-7개 (체크리스트)

[프롬프트] Benefits 섹션을 추가해줘. "신청하면 받게 되는 것" 체크리스트. [5가지 약속] ✓ 매주 토요일 오프라인 모임 참여권 ✓ 단톡방 평일 24시간 질문 답변 ✓ 시리즈 8편 PDF 모음집 ✓ 멘토 1:1 30분 무료 상담 (월 1회) ✓ 봄내AI해적단 GitHub 클러스터 멤버십 [디자인] - 큰 체크 아이콘 + 굵은 텍스트 - 배경은 옅은 녹색 또는 흰색 - 가독성 우선

⭐ 가장 중요

SECTION 07

🚀 Final CTA — 마지막 한 방

구성 요소: 큰 헤딩 + 짧은 부제 + 거대한 CTA 버튼

[프롬프트] 마지막 Final CTA 섹션을 추가해줘. [헤딩] "이제 시작할 시간입니다." [부제] "다음 모임은 이번 주 토요일 오후 2시. 늦지 않게." [버튼] "단톡방 참여하기 →" [디자인] - 화면 전체에 가까운 큰 섹션 - 강렬한 그라디언트 배경 - 버튼은 가장 크고 가장 눈에 띄게 - 클릭 시 단톡방 링크로 이동 (target="_blank")

🚨 핵심 원칙: 한 페이지에 같은 CTA를 최소 3번 노출 (Hero, 중간 어딘가, Final). 그래야 어디서 결정하든 즉시 행동 가능. 버튼 텍스트는 모두 동일해야 함.

🎉 7개 섹션 다 만들었다면

진심으로 축하해요. 본인의 첫 랜딩 페이지가 거의 다 됐습니다. npm run dev로 확인 → 마음에 들면 git 커밋. 다음은 디테일과 배포입니다.

06

CHAPTER SIX

인터랙션과 디테일 — 차원 다른 임팩트.

기본 7개 섹션이 완성됐다면, 마이크로 디테일로 한 단계 위로. 평범한 페이지를 "프로처럼 보이는" 페이지로 만드는 5가지.

📜

스크롤 애니메이션

섹션이 화면에 들어올 때 부드럽게 페이드인. Framer Motion 또는 CSS의 @keyframes.

🖱️

호버 효과

버튼 위에 마우스 올릴 때 색 변화 + 살짝 떠오름. 카드도 마찬가지.

📱

모바일 최적화

F12 → 모바일 뷰로 확인. 글씨 크기, 버튼 크기, 간격 조정. 방문자 70%가 모바일.

🎨

그라디언트 + 텍스처

단색 배경 대신 살짝의 그라디언트 + 노이즈 텍스처. 깊이감 추가.

⚡

로딩 상태 + 클릭 피드백

CTA 버튼 클릭 시 로딩 스피너 (외부 링크라도 짧게). 클릭이 "반영됐다"는 느낌. 이 한 디테일이 신뢰감을 결정합니다.

📝 일괄 요청 프롬프트 · "랜딩 페이지에 다음 디테일을 추가해줘: ① 섹션마다 스크롤 시 부드러운 페이드인 ② 모든 버튼에 호버 효과 ③ 모바일 뷰 점검 ④ 배경에 살짝의 그라디언트 메시. Framer Motion 사용."

07

CHAPTER SEVEN

SEO와 메타데이터 — 검색에 잡히기.

본인 사이트를 만들었으면 검색에서 찾아지게 해야죠. 그리고 카톡/페이스북에 링크 공유했을 때 예쁘게 미리보기가 떠야죠. 둘 다 5분 안에 해결됩니다.

📋 클로드한테 한 번에 시키기

[프롬프트] 랜딩 페이지의 SEO와 메타데이터를 설정해줘. [페이지 제목] "봄내AI해적단 — 춘천 바이브 코딩 모임" [메타 설명] "AI와 함께 30분 안에 본인의 사이트를 만드는 춘천의 모임. 매주 토요일 정기 모임 + 1:1 멘토링 + 무료 가이드 시리즈." [Open Graph 이미지] public/og-image.png 사용 (1200x630 권장) 없으면 placeholder URL로 [키워드] 바이브코딩, AI개발, 클로드코드, 춘천, 봄내AI해적단 Next.js 14 App Router의 metadata 객체로 설정.

파비콘 (탭 아이콘) 만들기

브라우저 탭에 보이는 작은 아이콘. 이거 없으면 디폴트 Next.js 로고가 떠서 어색해요.

가장 빠른 방법:
① favicon.io 접속 → "Text" 또는 "Emoji" 선택
② 본인 브랜드 첫 글자 또는 이모지 입력 (예: 🏴‍☠️)
③ Download → app/favicon.ico에 넣기
④ 클로드한테 "favicon.ico 잘 들어갔는지 확인하고 metadata에 연결" 시키기

08

CHAPTER EIGHT · 발사

배포 — 라이브 URL 발사.

사이트가 거의 다 됐으면, 이제 전 세계 누구나 볼 수 있는 URL을 만들 시간입니다. 시리즈 №8의 GitHub + Vercel 자동 배포를 활용합니다.

1

GitHub에 push

$ git add .
$ git commit -m "랜딩 페이지 완성"
$ gh repo create my-landing --public --source=. --push

2

Vercel 가입 + 임포트

vercel.com → "Continue with GitHub" → "Import Project" → 방금 만든 my-landing 레포 선택.

3

"Deploy" 클릭

2~3분 기다리면 my-landing-xxx.vercel.app URL 발급. 클릭하면 본인 사이트가 라이브!

✓

자동 배포 활성화 완료

이제 git push 할 때마다 Vercel이 자동으로 새 버전 배포합니다. 본인은 코드만 바꾸면 됩니다.

[옵션] 본인 도메인 연결

.vercel.app 대신 본인만의 도메인 (예: bomnae-ai.com) 쓰고 싶다면:

1. 도메인 구입: Namecheap (해외, $10~) 또는 가비아 (국내, 2만원~)
2. Vercel 대시보드 → 프로젝트 → Settings → Domains → 도메인 입력
3. 안내된 DNS 설정을 구입한 사이트에 입력
4. 10~30분 기다리면 본인 도메인으로 접속 가능

09

CHAPTER NINE · 실전

90분 시뮬레이션 — 함께 만들어봅시다.

위 8장의 내용을 진짜로 굴려본 실전 시뮬레이션입니다. 토요일 오후 카페에서, 봄내AI해적단 랜딩 페이지를 처음부터 만드는 과정.

📅 토요일 14:00 — 춘천의 한 카페에서 시작

14:00

기획 — 4가지 질문에 답

노트에 적기: 페르소나(30~40대 직장인) / 문제(AI 시작점 모름) / 해결책(춘천 모임) / CTA(단톡방 참여). 10분 투자.

14:10

디자인 톤 결정

"활기 + 친근 + 모던"이라 그라디언트 모던 톤(보라→핑크→오렌지) 선택. 3분.

14:13

셋업 + CLAUDE.md 작성

$ mkdir bomnae-ai && cd bomnae-ai
$ git init && claude
> /init
> "CLAUDE.md에 기획 + 디자인 톤 옮겨줘"
> "Next.js 14 + Tailwind 초기 세팅, 빈 페이지만"

✅ 14:25: 빈 페이지가 localhost:3000에 뜸. 첫 커밋.

14:25~15:25

7개 섹션 차례대로 구현

14:25 — Hero (그라디언트 배경, 큰 헤드라인, CTA) → 검증 → 커밋
14:35 — Problem (3가지 고민 카드) → 검증 → 커밋
14:45 — Solution (선언 + 설명) → 검증 → 커밋
14:55 — Features (3가지 혜택) → 검증 → 커밋
15:05 — Social Proof (통계 숫자) → 검증 → 커밋
15:15 — Benefits (5가지 약속 체크리스트) → 검증 → 커밋
15:25 — Final CTA (큰 그라디언트 + 거대 버튼) → 검증 → 커밋

15:25

디테일 추가 + 모바일 점검

스크롤 페이드인, 호버 효과, 모바일 뷰 조정을 한 번에 요청. 10분 소요.

15:35

SEO + 메타데이터 + 파비콘

favicon.io에서 🏴‍☠️ 이모지 파비콘 생성 → metadata 설정. 10분 소요.

15:45

🚀 GitHub + Vercel 배포

✓ 15:46: gh repo create bomnae-ai --public --source=. --push
✓ 15:48: Vercel에 import → Deploy
✓ 15:52: bomnae-ai.vercel.app 라이브!

⏱️ 총 소요 시간: 1시간 52분

14:00 시작 → 15:52 라이브 URL. 2시간 안에 본인의 첫 프로페셔널 랜딩 페이지가 인터넷에 뜨는 것 — 이게 바이브 코딩의 진짜 힘입니다.

FINAL THOUGHTS

"본인의 URL을 가지세요."

랜딩 페이지 하나가 본인의 디지털 명함이 됩니다. 이력서에 한 줄, 인스타 프로필에 한 줄, 명함에 한 줄 — URL 하나가 본인을 24시간 대신 소개합니다.

바이브 코딩의 진짜 힘은 "이런 게 2시간이면 만들어진다는 것"입니다. 옛날에는 며칠 걸렸을 작업이 오후 한 번이면 끝나요. 이걸 모르고 사는 사람들이 정말 많아요. 본인은 알게 됐으니, 이제 만들 시간입니다.

🏴‍☠️ 봄내AI해적단 멘티들에게

이번 주말 미션 — 본인의 첫 랜딩 페이지를 만드세요. 주제는 자유:

• 본인 포트폴리오 (가장 추천 — 평생 활용)
• 본인이 하고 있는 부업/사이드 프로젝트 소개
• 가족·친구를 위한 페이지 (결혼식 안내, 강의 소개 등)
• 모임/커뮤니티 모집 페이지

완성된 라이브 URL을 단톡방에 공유해주세요. 다음 모임 때 "랜딩 페이지 자랑 시간" 가질게요. 가장 빠른 사람부터, 가장 창의적인 사람까지 모두 박수.

막힐 때 단톡방에 스크린샷 올리면 같이 풀어요. 혼자 하지 마세요. 그게 봄내AI해적단의 의미입니다.

— 바이브 코딩 시리즈 전체 인덱스

№1   Skills 만드는 법 — 반복 패턴 박제 학술

№2   Claude Design — AI 슬롭 디자인 탈출 매거진

№3   Claude Code 입문 — 설치 + IDE/터미널 워크북

№4   Agent Teams — 멀티 에이전트 협업 랩 노트북

№5   계획부터 구현까지 — 6단계 워크플로우 메서드

№6   SQL 기초 강의 — 데이터 다루기 참고서

№7   디버깅 기초 — 탐정처럼 추적하기 탐정 노트

№8   GitHub 기초 — 클라우드 저장소 핸드북

№9   실전 프로젝트: 나만의 랜딩 페이지 ← 현재 글 라이브 프로젝트

→ 다음 회차 예고

MCP (Model Context Protocol) 입문 · Claude Code를 본인의 Notion, Slack, GitHub, Supabase와 직접 연결. 시리즈 №9의 랜딩 페이지에서 만든 신청 양식이 자동으로 본인의 Notion DB에 저장되거나, 단톡방에 실시간 알림이 가는 단계로.

---

Issue №9 · Live Project · Landing Page from Zero

이장환 · 봄내AI해적단 선장 · 춘천 · 2026

참고: Next.js · Tailwind · Vercel · favicon.io