30분 만에 나만의 링크 페이지 만들기
Linktree에 월 $5 내고 있나요? AI로 직접 만들면 무료입니다. 더 예쁘게요.
📋 따라하려면 이것만 준비하세요
아래 내용을 먼저 읽으면 이 가이드를 더 쉽게 따라할 수 있습니다.
Ad Space — flow-top
01이게 뭔데?
인스타그램 프로필에 링크 하나밖에 못 넣잖아요. 그래서 Linktree 같은 서비스에 월 $5를 내고 여러 링크를 모아두죠.
우리가 만들 것 👇
김현서
디자이너 · 프리랜서
$5/월
Linktree Pro
$0
직접 만들기
게다가: 디자인을 100% 내 맘대로 바꿀 수 있고, 애니메이션도 넣을 수 있고, 내 도메인을 쓸 수 있어요. DB도, 로그인도, 결제도 필요 없습니다. HTML/CSS만으로 끝.
솔직히 개발자 입장에서 Linktree에 돈 내는 거 보면 좀 아까워요. 저 페이지 만드는 데 코드 50줄이면 충분하거든요. 이 가이드 따라하면 여러분도 "이걸 왜 돈 내고 썼지?" 하게 됩니다.
02전체 흐름 한눈에 보기
총 30분
프로젝트 시작
5분Claude Code로 링크 페이지 프로젝트를 생성합니다.
내 정보 넣기
5분이름, 프로필 사진, 소개, 링크 목록을 내 것으로 바꿉니다.
디자인 꾸미기
10분색상, 폰트, 레이아웃, 애니메이션을 내 취향대로 바꿉니다.
배포하기
5분Vercel에 무료 배포. 전 세계 누구나 접속 가능한 URL을 받습니다.
인스타에 연결
1분프로필 링크에 내 URL을 넣으면 끝!
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에서 못 했던 것들 — 그라데이션, 애니메이션, 커스텀 폰트 전부 가능합니다.
🎨 디자인 요청 예시들 (골라서 복사하세요)
이 단계에서 비개발자분들이 제일 신나해요. "그라데이션으로 바꿔줘" 한 마디에 3초 만에 바뀌니까요. 개발자인 저도 이 순간은 항상 짜릿합니다. AI 시대의 마법이에요.
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로 충분합니다.
"배포"가 거창하게 느껴지지만, 실제로 하는 건 버튼 3번 클릭입니다. 개발자들이 Vercel을 좋아하는 이유가 이거예요 — 배포가 너무 쉬워서 생각할 게 없습니다.
07Step 5 — 인스타에 연결하기
URL 복사
Vercel이 준 URL (예: https://my-links.vercel.app) 을 복사합니다.
인스타그램 프로필 편집
인스타 앱 → 프로필 → "프로필 편집" → "웹사이트" 칸에 URL 붙여넣기.
완료! 🎉
누군가 당신의 프로필에서 링크를 누르면, 당신이 직접 만든 페이지가 열립니다.
축하합니다! 🎉
당신은 방금 웹사이트를 만들고, 배포하고, 실제로 사용하기 시작했습니다.
이제 "나 웹 개발할 줄 알아"라고 말할 수 있습니다.
이 순간이 제가 코딩을 계속하는 이유예요. "내가 만든 걸 다른 사람이 실제로 쓴다"는 감동. 친구한테 링크 보내고 "이거 내가 만들었어"라고 하면 반응이 진짜 좋을 거예요.
Ad Space — flow-mid-3
08더 발전시키기
기본 링크 페이지가 완성됐으니, 여기서 더 발전시킬 수 있습니다. 난이도 순으로 정리했어요.
클릭 수 추적 (쉬움)
+10분어떤 링크가 가장 많이 클릭되는지 확인. Vercel Analytics 무료 연동.
SEO 최적화 (쉬움)
+10분구글에 내 이름을 검색하면 이 페이지가 나오도록. meta 태그, OG 이미지 설정.
여러 테마 (중간)
+30분시즌별 테마 전환. 크리스마스엔 빨강+초록, 여름엔 파랑+노랑. 토글 버튼으로 전환.
링크 관리 페이지 (중간)
+1시간코드를 수정하지 않고 대시보드에서 링크를 추가/삭제. Supabase DB 연결.
다른 사람도 쓸 수 있게 (어려움)
+며칠회원가입하면 누구나 자기 링크 페이지를 만들 수 있는 SaaS. Linktree와 동일.
사실 Linktree도 이렇게 시작했어요. 누군가가 자기 링크 페이지를 만들었고 → 주변에서 "나도 만들어줘" 요청이 왔고 → 그래서 누구나 만들 수 있는 서비스로 발전시킨 거예요. 여러분도 같은 경로를 밟을 수 있습니다.
09비용 정리
| 항목 | Linktree | 직접 만들기 |
|---|---|---|
| 기본 사용 | 무료 (기능 제한) | 무료 (제한 없음) |
| 커스텀 디자인 | $5/월 (Pro) | 무료 |
| 커스텀 도메인 | $5/월 (Pro) | ~$10/년 (도메인 비용만) |
| 애니메이션 | Pro만 가능 | 무료 (무제한) |
| 분석 (클릭 수) | $5/월 (Pro) | 무료 (Vercel Analytics) |
| 코드 소유권 | ❌ Linktree 소유 | ✅ 내가 100% 소유 |
| 연간 비용 | $60/년 | $0 ~ $10/년 |
💰 연 $60 절약 + 무한한 자유
그리고 "나 웹사이트 만들 줄 알아"라는 자신감은 프라이스리스.
이 링크 페이지를 만들어본 경험이 다음 프로젝트의 기초가 됩니다. "터미널 열기 → AI에게 말하기 → 배포하기" 이 3단계를 한 번 경험하면, 다음에 "쇼핑몰 만들어야지" 할 때도 같은 패턴으로 시작할 수 있어요.
다음에 도전해볼 것
Ad Space — flow-bottom