AI와 함께 45분 만에 나만의 링크트리 만든 후기
코딩 몰라도 됩니다. 질문에 답하기만 했더니 완성됐어요.
들어가며
"나도 링크트리 같은 자기소개 페이지 하나 있으면 좋겠다"는 생각, 한 번쯤 해보셨죠?
근데 막상 만들려면 HTML이 뭔지, CSS가 뭔지부터 막막하잖아요.
저도 그랬어요. 그런데 Claude Code라는 AI 도구를 써서 45 분 만에 직접 만들었습니다. 코딩은 한 줄도 안 했어요. AI가 물어보는 것에 답만 했을 뿐인데요.
이 글은 그 과정을 그대로 따라 할 수 있게 정리한 스텝 바이 스텝 가이드예요.
준비물
VS Code (무료 코드 편집기)
Claude Code (AI 코딩 도구, 설치 필요)
45분의 시간
VS Code와 Claude Code 설치가 안 됐다면 각 공식 사이트에서 먼저 설치하세요.
STEP 1. 작업 폴더 만들고 Claude Code 실행하기
1-1. 새 폴더 만들기
바탕화면에 my-intro 같은 이름으로 폴더를 하나 만드세요. 이 폴더가 오늘 작업의 홈베이스가 됩니다.
1-2. VS Code에서 폴더 열기
VS Code 실행
메뉴 File > Open Folder...
방금 만든 폴더 선택
1-3. Claude Code 실행
VS Code 터미널(Ctrl + `)을 열고 입력:
claude
Welcome to Claude Code 메시지가 뜨면 준비 완료입니다.
STEP 2. CLAUDE.md — AI에게 일하는 방식 가르치기
이게 이번 실습의 핵심 포인트예요.
CLAUDE.md는 "AI야, 이 폴더에서는 이렇게 행동해" 라고 가르치는 지시서예요. 선생님한테 수업 방식을 미리 알려주는 것처럼요.
Claude Code에 이렇게 입력하세요:
이 폴더에 CLAUDE.md 파일을 만들어줘.
앞으로 이 폴더에서 작업할 때 AI가 어떻게 행동할지 정해두는 학습 가이드야.
다음 내용을 담아줘:
## 이 폴더의 목적
사용자가 AI와 함께 학습하는 방식 자체를 익히는 곳.
## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 사용자가 막연한 부분을 질문으로 끌어낸다
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중
- 모든 설명은 초등학생도 이해할 수 있는 쉬운 말로 한다
## 작업 방식 — PDCA 사이클
1. Plan: 큰 그림 확인하고 동의 받기
2. Do: 작은 단계로 쪼개서 진행
3. Check: 결과 보여주고 피드백 받기
4. Act: 피드백 받은 부분만 수정
이렇게 하면 뭐가 좋나요?
파일을 만들고 나면 AI가 알아서 이 원칙대로 움직여요.
바로 코드 짜는 게 아니라 먼저 계획을 확인해요
어려운 말 대신 쉬운 말로 설명해줘요
한 번에 다 하는 게 아니라 단계별로 진행해요
📸 스크린샷 포인트 — CLAUDE.md 파일을 열어둔 화면을 캡처해두세요! "AI한테 이렇게 일하는 방식을 가르쳤어요"로 쓸 수 있어요.
STEP 3. 자기소개 인터뷰 — AI가 먼저 물어봐요
이제 본격적으로 링크트리를 만들 차례예요.
아래 프롬프트를 입력하면 AI가 바로 코드를 짜는 게 아니라 먼저 여러분한테 질문을 시작해요.
미니 링크트리(자기소개 페이지)를 index.html 한 개 파일로 만들고 싶어.
요구사항:
- 모바일 비율 (최대 너비 420px)
- 원형 아바타 → 이름 → 한 줄 소개 → 링크 버튼 세로 정렬
- Google Fonts 한글 폰트, 그림자, hover 효과
- CSS는 파일 하나에 전부
CLAUDE.md 방식대로 진행해줘.
바로 코드 짜지 말고, 자기소개 인터뷰부터 해줘.
AI가 이런 순서로 물어봐요:
Q1. 이름 또는 닉네임이 뭐예요? → 저는 Minkyu KIM 이라고 답했어요.
Q2. 한 줄 소개를 알려주세요. → 마케 팅 에이전시를 운영하는 1인 사업가 | AI로 일하는 방식을 바꿉니다
Q3. 연결할 링크를 알려주세요. → LinkedIn 프로필 주소, 이메일 주소 등
팁: 링크드인 주소는 메시지함 URL이 아니라 프로필 URL이어야 해요.
https://www.linkedin.com/in/내닉네임/형태예요.
STEP 4. 디자인 인터뷰 — 선택지에서 고르기만 해요
자기소개 인터뷰가 끝나면 AI가 디자인을 물어봐요. 디자인 몰라도 괜찮아요. 번호로 고르기만 하면 되거든요.
4-1. 스타일 고르기
AI가 6가지 트렌디한 스타일을 보여줘요:
번호
스타일
느낌
비슷한 브랜드
1
글래스모피즘
반투명 유리 느낌
Apple, iOS
2
뉴 브루탈리즘
굵은 테두리, 강렬함
Gumroad
3
미니멀 화이트
깔끔하고 여백 넓음
Notion
4
다크 모드 프리미엄
검정+골드, 고급스러움
Vercel
5
소프트 파스텔
부드럽고 따뜻함
Framer
6
그라디언트 팝
화려하고 생동감
Spotify
→ 저는 1번 글래스모피즘 을 골랐어요.
4-2. 색감 고르기
스타일을 고르면 어울리는 색감 팔레트도 보여줘요:
번호
팔레트
분위기
1
딥 오션
남색→보라, 전문적이고 차가운 느낌
2
선셋 로즈
살구→핑크, 따뜻하고 감성적
3
포레스트 미스트
딥그린→청록, 자연스럽고 차분함
4
미드나잇 골드
검정+골드, 고급스러움
5
라벤더 드림
연보라→하늘, 부드럽고 모던함
→ 저는 1번 딥 오션 을 골랐어요.
4-3. 레퍼런스 (선택사항)
마음에 드는 디자인 스크린샷이 있으면 폴더에 넣고 알려주면 돼요. AI가 그 이미지를 보고 비슷하게 만들어줘요.
STEP 5. index.html 완성!
인터뷰가 끝나면 AI가 자동으로 index.html 파일을 만들어줘요.
파일을 더블클릭하면 브라우저에서 바로 열려요.
완성된 페이지에 들어간 것들:
남색→보라 그라디언트 배경
반투명 유리 카드 (글래스모피즘)
원형 프로필 사진
이름과 한 줄 소개
LinkedIn, 이메일 버튼 (hover 시 살짝 올라오는 효과)
📸 스크린샷 포인트 — 완성된 페이지를 캡처해두세요! 폰 비율(420px)이라 인스타 스토리로 올리기도 좋아요.
STEP 6. 마음에 안 드는 부분 수정하기
결과물이 마음에 안 들면 그냥 말로 알려주면 돼요. AI가 즉시 고쳐줘요.
이메일 버튼도 하나 추가해줘. 주소는 [email protected]
프로필 사진 넣고 싶어. 폴더에 profil.jpg 넣어뒀어.
색감을 더 밝게, 화이트 톤으로 바꿔줘.
이런 식으로 대화하듯 수정하면 돼요. 저는 이렇게 세 번 수정해서 완성했어요.
STEP 7. 이 흐름을 스킬로 저장하기 (보너스)
방금 한 작업이 마음에 든다면, 다음번에 한 줄로 다시 쓸 수 있게 저장해두세요.
방금 한 작업 흐름을 Claude Code 스킬로 저장해줘.
- 스킬 이름: intro-page
- 저장 위치: .claude/skills/intro-page/SKILL.md
- 다음에 /intro-page 라고 입력하면 인터뷰부터 다시 시작하게 해줘.
이렇게 하면 다음번엔 새 폴더에서 /intro-page 한 줄만 입력해도 인터뷰부터 페이지 생성까지 자동으로 진행돼요.
📸 스크린샷 포인트 — 스킬 파일(.claude/skills/intro-page/SKILL.md)을 열어둔 화면을 캡처해두세요!
이 실습에서 배운 것
1. CLAUDE.md = AI에게 일하는 방식을 가르치는 지시서
도구를 외우는 게 아니라 AI가 어떻게 행동할지를 내가 정의해요. 한 번 잘 써두면 그 다음부턴 알아서 움직여요.
2. 디자인 몰라도 만들 수 있어요
AI가 선택지를 보여주고 번호로 고르면 되니까요. "3번인데 좀 더 따뜻하게"처럼 말로 응용도 돼요.
3. 잘 된 흐름은 스킬로 저장해서 재사용
한 번 만든 흐름을 다음번엔 한 줄로 다시 쓸 수 있어요. 친구나 가족 페이지도 5분 만에 뚝딱 만들 수 있게 되는 거예요.
마치며
코딩을 배워야 한다는 부담 없이, AI와 대화하듯 만든 나만의 링크트리.
중요한 건 도구를 외우는 게 아니라 AI와 협업하는 방식을 익히는 거예요. CLAUDE.md로 AI에게 일하는 방식을 가르치고, PDCA 사이클로 함께 만들고, 잘 된 흐름은 스킬로 저장해서 자산으로 만드는 것.
이게 AI 시대의 새로운 학습 방식이에요.
총 소요시간: 약 45분 사용 도구: VS Code + Claude Code 코딩 지식 필요 여부: 없음
한국어 텍스트가 있는 검은 화면
[ 실제 실습화면 ]
맥 os x os x os x os x os x os
[ 결과물.... 허접하지만 퀄리티는 제껴두고, 일단 완성에 초점을 맞췄습니다...;]
■ 결과와 배운 점 (핵심) ■
역시 백문이 불여일견이라는 말이 딱 들어맞는 경험이었습니다.
오늘 첫 스터디에서 그 동안 해보고 싶었던 것을 많이 해결했습니다.
앞으로의 스터디가.. 더 기대 됩니다. (웬지... 다음 기수도 신청할 것 같은 느낌이 듭니다..)
다음 주 스터디는 물론이고, 이번주 토요일 오프라인 모임도 엄청 기대되네요~
감사합니다.