Claude Code로 나만의 링크트리 만들기

Claude Code로 나만의 링크트리 만들기

• SNS 프로필에 링크를 하나만 넣을 수 있어서 고민이신 분

• Linktree 같은 서비스를 쓰고 싶은데 내 스타일로 꾸미고 싶은 분

• 코딩을 전혀 몰라도 AI와 대화해서 결과물을 만들어보고 싶은 분

준비물

• Claude Code 접속 (설치 또는 웹 버전)

• 5~10분의 시간

• 넣고 싶은 링크 목록

1단계 — 일단 만들어달라고 한다

처음엔 복잡하게 생각하지 않아도 됩니다. 그냥 원하는 것을 짧게 말하면 됩니다.

내가 한 말:

"현재 상황에서 링크트리를 만들어줘"

Claude Code가 만든 것:

단 한 줄의 요청으로 아래가 자동으로 생성되었습니다.

test/
├── index.html   ← 링크트리 페이지 (전체 코드)
└── CLAUDE.md    ← 프로젝트 설명서

index.html 파일 하나에 모든 것이 담겨 있습니다. 브라우저에서 파일을 열면 바로 링크트리가 보입니다.

이때 자동으로 포함된 것들:

• 프로필 영역 (아바타 + 이름 + 소개)

• 링크 버튼 5개 (GitHub, Instagram, YouTube, 블로그, 이메일)

• 다크 그라디언트 배경 + 글래스모피즘 버튼 디자인

• 호버 애니메이션 (마우스를 올리면 버튼이 살짝 떠오름)

• 모바일 반응형

포인트: Claude Code는 "어떻게 만들어야 할지"를 내가 설명하지 않아도 됩니다. "무엇을 원하는지"만 말하면 됩니다.

2단계 — 디자인을 내 취향으로 바꾼다

기본 디자인(어두운 다크 테마)이 마음에 들지 않아 따뜻하고 부드러운 느낌을 원했습니다.

내가 한 말:

"색상을 베이지톤으로 바꿔줘. 아이콘은 귀여운 중년 여성 캐릭터로 수정해주고 머리는 세련된 단발머리로 수정하고"

Claude Code가 바꾼 것:

아이콘은 외부 이미지 파일을 사용하지 않고, SVG 코드로 직접 캐릭터를 그려 index.html 안에 넣었습니다. 파일이 하나라서 어디서든 그냥 열 수 있습니다.

포인트: 디자인 용어를 몰라도 됩니다. "베이지톤", "귀여운 중년 여성", "세련된 단발머리" 같은 일상 언어로 설명하면 됩니다.

3단계 — 나만의 텍스트를 넣는다

캐릭터와 색상이 마음에 들었습니다. 이제 실제 이름과 소개 문구를 넣을 차례입니다.

내가 한 말:

"이름에는 [경] 으로 넣어주고
한줄소개에는 그림은 보이는 것만 그리는 것이 아닌, 보이지 않는 감정도 그릴 수 있다."

Claude Code가 바꾼 것:

이름: 경
소개: 그림은 보이는 것만 그리는 것이 아닌,
      보이지 않는 감정도 그릴 수 있다.

딱 두 줄의 요청으로 텍스트가 바뀌었습니다.

포인트: 작은 수정도 직접 파일을 열어서 편집할 필요가 없습니다. 대화창에서 말하면 됩니다.

4단계 — 나만의 스킬(명령어)로 저장한다

여기서 한 단계 더 나아갔습니다. 이번에 만든 과정을 재사용 가능한 명령어로 저장하는 것입니다.

내가 한 말:

"지금까지 한 작업을 skill로 만들어줘"

결과:

~/.claude/commands/linktree.md

이 파일 하나가 생성되었고, 이제부터 어느 프로젝트에서든 채팅창에 /linktree 라고 입력하면 같은 작업을 자동으로 실행할 수 있게 되었습니다.

스킬이 자동으로 해주는 것:

1. 이름, 소개, 링크, 색상, 아바타 스타일을 물어봄

2. 답변에 맞게 index.html 생성

3. CLAUDE.md 프로젝트 가이드 생성

4. 완료 후 수정 방법 안내

포인트: Claude Code는 반복 작업을 명령어로 저장할 수 있습니다. 한 번 만들어두면 다음번엔 /linktree 한 줄로 끝납니다.

최종 결과물

test/
├── index.html       ← 링크트리 페이지 (단일 파일, 외부 의존성 없음)
└── CLAUDE.md        ← 프로젝트 설명서 및 수정 가이드

~/.claude/commands/
└── linktree.md      ← 재사용 가능한 /linktree 스킬

index.html 특징 요약

직접 따라하기

가장 빠른 방법 (3단계)

Step 1. Claude Code를 열고 작업 폴더로 이동합니다.

Step 2. 채팅창에 입력합니다:

index.html 단일 파일로 링크트리 페이지 만들어줘

Step 3. 생성된 후, 원하는 대로 수정 요청합니다:

색상을 [원하는 분위기]로 바꿔줘
이름은 [이름], 소개는 [소개 문구]로 넣어줘
아이콘을 [원하는 캐릭터/스타일]로 바꿔줘

커스터마이즈 예시 문구 모음

색상을 민트 + 화이트 톤으로 바꿔줘
아이콘을 귀여운 강아지 캐릭터로 만들어줘
링크에 네이버 블로그랑 카카오채널 추가해줘
버튼 모양을 둥글둥글하게 바꿔줘
배경에 별이 반짝이는 애니메이션 넣어줘(내용 입력)

ALT

한국 소셜 미디어 앱의 스크린샷

과정 중에 어떤 시행착오를 겪었나요?화면이 익숙하지 않아 클로드코드까는 데 시간이 걸림