오늘 실습한 내용

AI와 함께 나만의 링크트리 페이지 만들기

Claude Code로 자기소개 페이지를 만들고, 그 과정을 스킬로 저장하기까지 코딩 몰라도 됩니다. 대화만 할 줄 알면 돼요.

이런 분께 추천해요

• 개인 링크트리나 소개 페이지가 갖고 싶은데 코딩이 어려운 분

• AI와 협업하는 방법 자체를 배우고 싶은 분

• 만들고 끝내는 게 아니라, 나중에 다시 쓸 수 있는 흐름을 남기고 싶은 분

완성 결과물

• index.html — 모바일 비율의 미니 링크트리 페이지 (한 파일로 완결)

• CLAUDE.md — AI가 이 폴더에서 어떻게 행동할지 정해두는 가이드

• .claude/skills/intro-page/SKILL.md — 다음에 /intro-page 한 줄로 재사용할 수 있는 스킬

준비물

• Claude Code 설치 (VS Code 익스텐션 또는 CLI)

• 작업할 폴더 하나 (예: Desktop/my-page)

• 인터넷 연결 (Google Fonts 로드용)

Step 1 — 작업 폴더에 CLAUDE.md 만들기

CLAUDE.md는 AI에게 "이 폴더에서는 이렇게 행동해" 라고 알려주는 파일이에요. 없어도 되지만, 있으면 매번 설명하지 않아도 AI가 일관되게 행동해요.

Claude Code에 이렇게 요청하세요:

이 폴더에 CLAUDE.md 파일을 만들어줘.
AI의 기본 태도는 가르치는 강사가 아니라 함께 만드는 학습 메이트야.
작업 방식은 PDCA 사이클 (Plan → Do → Check → Act) 로 진행해줘.

만들어지는 파일 내용 예시:

# Learning Guide

## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중

## 작업 방식 — PDCA 라이브코딩 사이클
1. Plan: 원하는 것 확인 + 큰 그림 설명 + 동의 받기
2. Do: 작은 투두로 쪼개서 진행 상황 보이면서 작업
3. Check: 결과 보여주고 피드백 받기
4. Act: 피드백 받은 부분만 정확히 수정

왜 이게 중요한가요? CLAUDE.md가 있으면 새 대화를 시작해도 AI가 같은 방식으로 일해요. 팀원에게 일하는 방식을 문서로 남겨두는 것과 같아요.

Step 2 — 자기소개 인터뷰

AI에게 바로 코드를 짜달라고 하지 말고, 먼저 인터뷰부터 요청하세요. AI가 한 번에 하나씩 질문하면서 필요한 정보를 수집해요.

Claude Code에 이렇게 요청하세요:

미니 링크트리 index.html을 만들고 싶어.
바로 코드 짜지 말고, 먼저 자기소개 인터뷰부터 해줘.
한 번에 하나씩 물어봐줘.

AI가 순서대로 묻는 것들:

링크가 여러 개면 다 알려줘도 돼요. URL이 없으면 "나중에 채울게" 해도 됩니다.

Step 3 — 디자인 인터뷰

자기소개 인터뷰가 끝나면 디자인 인터뷰를 요청하세요.

Claude Code에 이렇게 요청하세요:

이제 디자인 인터뷰 해줘.
요즘 트렌디한 스타일 6가지 리스트로 보여주고 고르게 해줘.
그 다음 색감 팔레트도 보여줘.

AI가 보여주는 스타일 예시:

번호로 고르거나 "3번인데 배경은 살짝 크림색으로" 같은 응용 답변도 됩니다.

색감 팔레트 예시:

팁: 참고하고 싶은 디자인 스크린샷이 있으면 폴더에 넣고 "이 스크린샷 참고해줘" 라고 하면 AI가 스타일을 분석해서 반영해줘요.

Step 4 — index.html 생성 (Do)

인터뷰가 끝나면 AI가 자동으로 코드를 작성해요. 기다리기만 하면 됩니다.

만들어지는 파일 구조:

index.html
└── <head>
│     Google Fonts (한국어 폰트)
│     <style> 인라인 CSS 전체
└── <body>
      원형 아바타 (이니셜)
      이름
      한 줄 소개
      링크 버튼 (세로 정렬)

코드에 적용되는 것들:

• max-width: 420px — 모바일 세로형 비율

• Google Fonts 한글 폰트 (스타일에 따라 자동 선택)

• box-shadow — 아바타와 버튼에 부드러운 그림자

• transition — hover 시 색상 변화 + 살짝 위로 뜨는 효과

• 외부 CSS 파일 없음 — index.html 한 파일로 완결

Step 5 — 결과 확인 (Check)

파일이 만들어지면 브라우저에서 열어보세요.

브라우저로 여는 방법:

방법 1. VS Code에서 index.html 우클릭 → "Open with Live Server"
방법 2. 파일 탐색기에서 index.html 더블클릭
방법 3. 터미널에서: start index.html (Windows)

모바일 화면 확인:

브라우저 개발자 도구 열기: F12
모바일 뷰 토글: Ctrl + Shift + M

열어보고 마음에 안 드는 부분이 있으면 바로 말하면 됩니다.

아바타를 이니셜 말고 이모지로 바꿔줘.
버튼 hover 색을 검정 말고 남색으로 바꿔줘.
폰트 크기를 조금 더 크게 해줘.

Step 6 — 스킬로 저장하기 (보너스)

이 흐름이 마음에 들면 스킬로 저장해두세요. 다음에 새 폴더에서 /intro-page 한 줄만 입력하면 똑같이 실행돼요.

Claude Code에 이렇게 요청하세요:

지금 우리가 한 흐름을 Claude Code 스킬로 저장해줘.
스킬 이름은 intro-page, 저장 위치는 .claude/skills/intro-page/SKILL.md

만들어지는 파일:

.claude/
└── skills/
    └── intro-page/
        └── SKILL.md   ← 스킬 정의 파일

다음에 쓸 때:

/intro-page

입력하면 인터뷰부터 파일 생성까지 자동으로 다시 실행돼요.

전체 흐름 요약

1. CLAUDE.md 생성       ← AI에게 행동 방식 알려주기
2. 자기소개 인터뷰       ← 이름 · 소개 · 링크
3. 디자인 인터뷰         ← 스타일 · 색감 · 참고 이미지
4. index.html 생성      ← 코드는 AI가 씀
5. 브라우저로 확인       ← 피드백 주고 수정
6. 스킬로 저장           ← 다음엔 한 줄로 재사용

배운 것

이 작업에서 코드 자체보다 중요한 것은 AI와 협업하는 방법이에요.

• 바로 결과물을 요청하는 것보다 인터뷰 → 확인 → 생성 순서가 훨씬 원하는 결과에 가까워요

• PDCA 사이클로 진행하면 중간에 방향을 바꾸기 쉬워요

• 한 번 잘 만든 흐름은 스킬로 저장해두면 재사용할 수 있어요

• CLAUDE.md로 AI의 행동 방식을 문서화해두면 다음 대화에서도 같은 방식이 유지돼요

이 사례글 자체도 Claude Code와 함께 작성했습니다.