진짜 바이브 코딩

30분 만에 나만의 링크 페이지 만들기

Linktree에 월 $5 내고 있나요? AI로 직접 만들면 무료입니다. 더 예쁘게요.

Ad Space — flow-top

01이게 뭔데?

인스타그램 프로필에 링크 하나밖에 못 넣잖아요. 그래서 Linktree 같은 서비스에 월 $5를 내고 여러 링크를 모아두죠.

우리가 만들 것 👇

🧑‍💼

김현서

디자이너 · 프리랜서

📂 포트폴리오
📸 인스타그램
✉️ 이메일 보내기
📝 블로그
🎨 Behance

$5/월

Linktree Pro

$0

직접 만들기

게다가: 디자인을 100% 내 맘대로 바꿀 수 있고, 애니메이션도 넣을 수 있고, 내 도메인을 쓸 수 있어요. DB도, 로그인도, 결제도 필요 없습니다. HTML/CSS만으로 끝.

02전체 흐름 한눈에 보기

총 30분

1

프로젝트 시작

5분

Claude Code로 링크 페이지 프로젝트를 생성합니다.

Claude Code
2

내 정보 넣기

5분

이름, 프로필 사진, 소개, 링크 목록을 내 것으로 바꿉니다.

Claude Code
3

디자인 꾸미기

10분

색상, 폰트, 레이아웃, 애니메이션을 내 취향대로 바꿉니다.

Claude CodeTailwind CSS
4

배포하기

5분

Vercel에 무료 배포. 전 세계 누구나 접속 가능한 URL을 받습니다.

VercelGitHub
5

인스타에 연결

1분

프로필 링크에 내 URL을 넣으면 끝!

💡 Tip: DB도, 인증도, 결제도 없습니다. 순수 HTML/CSS 페이지 하나. 가장 간단한 형태의 웹 개발이에요. 이것만 성공해도 "나 웹사이트 만들 줄 알아"라고 말할 수 있습니다.

03Step 1 — 프로젝트 시작

사전 준비: Claude Code가 설치되어 있어야 합니다. 아직이라면 먼저 설치하고 오세요.

# 터미널을 열고 한 줄씩 입력

$ mkdir my-links && cd my-links

$ claude

# Claude Code에게 말하기

> Linktree 같은 내 링크 모음 페이지를 만들어줘.

> Next.js + Tailwind CSS로 만들어줘.

> 프로필 사진, 이름, 한 줄 소개, 링크 버튼 5개가 있어야 해.

> 모바일에 최적화하고, 가운데 정렬이어야 해.

✅ 이 단계가 끝나면

  • • 브라우저에서 localhost:3000을 열면 링크 페이지가 보인다
  • • 아직 내 정보가 아니라 임시 데이터가 들어가 있다
  • • 이 상태가 정상이다 — 다음 단계에서 내 것으로 바꾼다

Ad Space — flow-mid-1

04Step 2 — 내 정보 넣기

임시 데이터를 내 정보로 바꿉니다. AI에게 그냥 말하면 됩니다.

> 프로필 정보를 이렇게 바꿔줘:

> 이름: 김현서

> 소개: 디자이너 · 프리랜서 · 커피 러버

> 링크들:

> 1. 포트폴리오 → https://myportfolio.com

> 2. 인스타그램 → https://instagram.com/myname

> 3. 이메일 → mailto:hello@email.com

> 4. 블로그 → https://blog.naver.com/myname

> 5. 유튜브 → https://youtube.com/@myname

# 프로필 사진 추가

> 프로필 사진을 추가하고 싶어. public 폴더에 profile.jpg를 넣으면 되게 해줘.

💡 프로필 사진: 좋아하는 사진을 프로젝트의 public 폴더에profile.jpg라는 이름으로 넣으면 됩니다. Finder(맥)나 파일 탐색기(윈도우)에서 드래그 앤 드롭으로 복사하세요.

05Step 3 — 디자인 꾸미기

여기가 제일 재미있는 파트. Linktree에서 못 했던 것들 — 그라데이션, 애니메이션, 커스텀 폰트 전부 가능합니다.

🎨 디자인 요청 예시들 (골라서 복사하세요)

그라데이션 배경
> 배경을 보라색에서 분홍색으로 그라데이션으로 바꿔줘. 다크 모드도 지원해줘.
글래스모피즘
> 링크 버튼들을 유리 느낌(glassmorphism)으로 바꿔줘. 반투명 배경에 블러 효과.
호버 애니메이션
> 링크 버튼에 마우스 올리면 살짝 위로 뜨면서 그림자가 생기는 애니메이션 추가해줘.
아이콘 추가
> 각 링크 앞에 아이콘을 넣어줘. 인스타는 인스타 아이콘, 유튜브는 유튜브 아이콘. lucide-react 사용해줘.
다크 모드
> 다크 모드를 추가해줘. 오른쪽 위에 해/달 토글 버튼으로 전환할 수 있게.
방문자 수 표시
> 페이지 하단에 '오늘 N명이 방문했어요'를 보여줘. 간단하게 localStorage로.
💡 Tip: 하나씩 적용하고 결과를 확인하세요. 마음에 안 들면 "원래대로 돌려줘"라고 하면 됩니다. 실험하는 게 핵심이에요 — 망쳐도 되니까 맘껏 시도하세요.

Ad Space — flow-mid-2

06Step 4 — 배포하기

내 컴퓨터에서만 보이던 페이지를 전 세계에 공개합니다. 무료예요.

⚠️ 먼저 확인: GitHub에 로그인되어 있나요?

터미널에 gh auth status를 입력해보세요.

✅ "Logged in to github.com"이 나오면 → 바로 아래 단계로 진행

❌ 에러가 나오거나 gh가 없다면 → GitHub 연결하기 가이드를 먼저 따라하세요 (5분)

GitHub에 올리기

2분

Claude Code에게 "GitHub에 올려줘"라고 하면 됩니다. 코드가 인터넷에 안전하게 백업됩니다.

Vercel에 연결

2분

vercel.com 가입 → "Import Project" → GitHub 레포 선택 → Deploy 클릭. 끝.

URL 받기

1분

https://my-links-abc123.vercel.app 같은 URL을 받습니다. 이 주소로 누구나 접속 가능!

# Claude Code에게 배포 요청

> 이 프로젝트를 GitHub에 올리고 Vercel에 배포해줘.

🌐 커스텀 도메인 (선택)

links.김현서.kr 같은 내 도메인을 쓰고 싶다면: Namecheap에서 도메인 구매 (연 ~$10) → Vercel Dashboard에서 연결. 없어도 Vercel이 주는 URL로 충분합니다.

07Step 5 — 인스타에 연결하기

URL 복사

Vercel이 준 URL (예: https://my-links.vercel.app) 을 복사합니다.

인스타그램 프로필 편집

인스타 앱 → 프로필 → "프로필 편집" → "웹사이트" 칸에 URL 붙여넣기.

완료! 🎉

누군가 당신의 프로필에서 링크를 누르면, 당신이 직접 만든 페이지가 열립니다.

축하합니다! 🎉

당신은 방금 웹사이트를 만들고, 배포하고, 실제로 사용하기 시작했습니다.
이제 "나 웹 개발할 줄 알아"라고 말할 수 있습니다.

Ad Space — flow-mid-3

08더 발전시키기

기본 링크 페이지가 완성됐으니, 여기서 더 발전시킬 수 있습니다. 난이도 순으로 정리했어요.

클릭 수 추적 (쉬움)

+10분

어떤 링크가 가장 많이 클릭되는지 확인. Vercel Analytics 무료 연동.

Vercel Analytics

SEO 최적화 (쉬움)

+10분

구글에 내 이름을 검색하면 이 페이지가 나오도록. meta 태그, OG 이미지 설정.

Next.js
⭐⭐

여러 테마 (중간)

+30분

시즌별 테마 전환. 크리스마스엔 빨강+초록, 여름엔 파랑+노랑. 토글 버튼으로 전환.

⭐⭐

링크 관리 페이지 (중간)

+1시간

코드를 수정하지 않고 대시보드에서 링크를 추가/삭제. Supabase DB 연결.

Supabase
⭐⭐⭐

다른 사람도 쓸 수 있게 (어려움)

+며칠

회원가입하면 누구나 자기 링크 페이지를 만들 수 있는 SaaS. Linktree와 동일.

SupabaseClerkStripe
💡 Tip: ⭐ 하나짜리부터 도전하세요. 하나씩 추가하다 보면 어느새 ⭐⭐⭐도 할 수 있게 됩니다. 마지막 단계(SaaS)까지 가면 실제로 돈을 벌 수 있는 서비스가 됩니다.

09비용 정리

항목Linktree직접 만들기
기본 사용무료 (기능 제한)무료 (제한 없음)
커스텀 디자인$5/월 (Pro)무료
커스텀 도메인$5/월 (Pro)~$10/년 (도메인 비용만)
애니메이션Pro만 가능무료 (무제한)
분석 (클릭 수)$5/월 (Pro)무료 (Vercel Analytics)
코드 소유권❌ Linktree 소유✅ 내가 100% 소유
연간 비용$60/년$0 ~ $10/년

💰 연 $60 절약 + 무한한 자유

그리고 "나 웹사이트 만들 줄 알아"라는 자신감은 프라이스리스.

다음에 도전해볼 것

Ad Space — flow-bottom