AI 온보딩 OT 세션에 배운 내용입니다.
# AI와 45분 만에 나만의 링크트리 만든 방법 (Claude Code 실전 사례)
> "디자인 못해도 됩니다. 코딩 몰라도 됩니다. 인터뷰에 답하기만 했어요."
---
## 이 글을 쓴 이유
Claude Code를 처음 써보면서 느낀 게 있었어요.
단순히 "코드 짜줘"가 아니라, AI에게 일하는 방식을 가르치고, 같이 인터뷰하고, 결과물을 자산으로 저장하는 흐름이 가능하다는 것.
그 흐름을 직접 경험하면서 만든 게 바로 이 링크트리예요. 누구나 따라할 수 있도록 실제 과정을 그대로 정리했습니다.
---
## 준비물
- VS Code (설치 안 됐으면 [code.visualstudio.com](https://code.visualstudio.com))
- Claude Code CLI (터미널에서 claude 입력했을 때 실행되면 OK)
- 작업 폴더 하나 (바탕화면에 my-intro 같은 이름으로 새 폴더 생성)
- 소요 시간: 약 45분
---
## STEP 1. AI에게 일하는 방식 가르치기 — CLAUDE.md 만들기
폴더를 열고 Claude Code를 실행한 뒤, 첫 번째로 한 일은 CLAUDE.md 파일을 만드는 것이었어요.
CLAUDE.md는 "이 폴더에서 AI가 어떻게 행동할지" 정의하는 지시서예요. 한 번 만들어두면 이 폴더에서 작업할 때마다 AI가 자동으로 이 원칙을 따릅니다.
### 사용한 프롬프트
```
이 폴더에 CLAUDE.md 파일을 만들어줘. 이 파일은 앞으로 이 폴더에서
작업할 때 너(AI)가 어떻게 행동할지 정해두는 학습 가이드야.
다음 내용을 담아줘:
## 이 폴더의 목적
사용자가 AI와 함께 학습하는 방식 자체를 익히는 곳.
## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 사용자가 막연한 부분을 질문으로 끌어낸다
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중
## 작업 방식 — PDCA 라이브코딩 사이클
어떤 요청이든 다음 4단계로 진행한다.
1. Plan: 요청 확인 후 동의 받기
2. Do: 작은 단위로 쪼개서 진행
3. Check: 결과 보여주고 피드백 받기
4. Act: 피드백 반영해서 수정
```
### 결과
AI가 CLAUDE.md 파일을 생성하고, "이 원칙대로 일할 준비가 됐다"고 알려줬어요.
핵심 포인트: 이제 이 폴더에서는 AI가 항상 Plan부터 시작하고, 결과를 보여준 뒤 피드백을 받는 흐름으로 움직입니다. 매번 설명하지 않아도 돼요.
---
## STEP 2. 자기소개 인터뷰 — AI가 먼저 물어봐요
링크트리 만들기를 시작했는데, AI가 바로 코드를 짜지 않고 인터뷰부터 시작했어요.
### 사용한 프롬프트
```
미니 링크트리(자기소개 페이지)를 index.html 한 개 파일로 만들고 싶어.
요구사항:
- 모바일 비율 (세로형, 최대 너비 420px)
- 구조: 원형 아바타 → 이름 → 한 줄 소개 → 링크 버튼 세로 정렬
- CSS는 inline (한 파일로)
CLAUDE.md의 PDCA 방식대로 진행해줘.
바로 코드 짜지 말고, 자기소개 인터뷰랑 디자인 인터뷰부터 해줘.
```
### 자기소개 인터뷰 진행 과정
AI가 한 번에 하나씩 질문했어요.
| 질문 | 내 답변 |
| ------------------- | --------------------- |
| 이름 또는 닉네임은? | Vic |
| 한 줄 소개는? | 매일 성장하는 열정녀! |
| 연결할 링크는? | 내 이메일 주소 |
| 아바타 스타일은? | Vic 이니셜 원형 |
| 페이지 제목은? | Vic's Links |
좋았던 점: 한꺼번에 묻지 않고 하나씩 물어봐서 생각할 시간이 생겼어요. "뭘 써야 하지?"라는 막막함 없이 자연스럽게 답할 수 있었습니다.
---
## STEP 3. 디자인 인터뷰 — 선택지를 주니까 쉬웠어요
디자인을 잘 모르는 사람도 고를 수 있게, AI가 먼저 스타일 6가지를 리스트로 보여줬어요.
### 스타일 선택 (6가지 중 선택)
| # | 스타일 | 특징 |
| ----------- | ----------------------- | ------------------------------------------------ |
| 1 | 글래스모피즘 | 반투명 유리, 블러 효과 (Apple 스타일) |
| 2 | 뉴 브루탈리즘 | 굵은 테두리, 강한 색 대비 |
| 3 | 소프트 미니멀 | 파스텔, 여백 넉넉, 조용한 느낌 |
| 4 | 그라디언트 팝 | 선명한 그라디언트, 에너지 넘침 ← 선택 |
| 5 | 다크 네온 | 어두운 배경, 형광 포인트 |
| 6 | Y2K 레트로 | 픽셀감, 2000년대 감성 |
### 색감 팔레트 선택 (5가지 중 선택)
| # | 팔레트 | 조합 |
| ----------- | ----------------- | ---------------------------------------- |
| 1 | 선셋 바이브 | 주황 → 핑크 → 보라 |
| 2 | 오션 팝 | 하늘색 → 파랑 → 민트 |
| 3 | 베리 퀸 | 핑크 → 자주 → 딥퍼플 ← 선택 |
| 4 | 그린 에너지 | 라임 → 에메랄드 → 청록 |
| 5 | 골든 아워 | 노랑 → 주황 → 코랄 |
인터뷰가 끝나자 AI가 바로 index.html을 생성했어요.
---
## STEP 4. LinkedIn 스크린샷으로 정보 업그레이드
처음엔 기본 정보만 넣었는데, 링크드인 프로필을 더 잘 반영하고 싶었어요.
### 방법
1. 링크드인 프로필 화면을 캡처
2. 작업 폴더에 linkedin.jpg로 저장
3. Claude에게 한 줄로 요청
```
내 링크드인 페이지야.
링크드인 URL 제시
이 페이지를 참고해서 index.html을 수정해줄 수 있을까?
```
AI가 스크린샷을 읽어서 직접 이름, 직함, 소속을 추출했고 자동으로 페이지에 반영했어요.
### 업데이트된 내용
| 항목 | 이전 | 이후 |
| ------ | -------- | ------------------------------------ |
| 아바타 | Vic | VK (Victoria Kim) |
| 이름 | Vic | Victoria Kim |
| 부제 | - | Jinyoung Kim |
| 직함 | - | Director of Venue Strategy & Revenue |
| 소속 | - | 회사명 |
| 링크 | 이메일만 | LinkedIn + 이메일 |
핵심 포인트: Claude Code는 폴더 안 이미지 파일을 직접 읽을 수 있어요. 말로 설명하는 것보다 스크린샷 하나가 훨씬 빠릅니다.
이렇게 만든 결과물입니다.
링크드인에 있는 빅토리아 김의 프로필
---
## STEP 5. 이 흐름을 스킬로 저장하기
가장 마음에 들었던 부분이에요. 방금 한 작업 흐름을 재사용 가능한 스킬로 저장했어요.
### 사용한 프롬프트
```
방금 우리가 한 작업 흐름을 Claude Code 스킬로 저장해줘.
- 스킬 이름: intro-page
- 저장 위치: .claude/skills/intro-page/SKILL.md
- 호출 시 동작:
1. 자기소개 인터뷰
2. 디자인 인터뷰
3. index.html 생성
4. 브라우저로 여는 방법 안내
```
### 결과
.claude/skills/intro-page/SKILL.md 파일이 생성됐어요.
이제 다음에 새 폴더에서 Claude Code를 열고 이렇게만 입력하면 됩니다:
```
/intro-page
```
인터뷰부터 다시 시작해서 완전히 새로운 페이지를 만들어줘요. 친구, 가족, 팀원 누구든 1분 안에 시작 가능합니다.
---
## 최종 결과물 구조
```
my-intro/
├── CLAUDE.md ← AI 행동 지침서
├── index.html ← 완성된 링크트리 페이지
├── linkedin.jpg ← 참고용 스크린샷
└── .claude/
└── skills/
└── intro-page/
└── SKILL.md ← 재사용 가능한 스킬
```
---
## 이 실습에서 배운 것 3가지
### 1. CLAUDE.md = AI에게 일하는 방식을 가르치는 지시서
매번 "PDCA로 해줘", "먼저 물어봐줘" 같은 말 안 해도 됩니다. 한 번 정의해두면 그 폴더에서는 항상 그렇게 움직여요.
### 2. AI는 도구가 아니라 학습 메이트
"코드 짜줘"가 아니라 인터뷰하고, 선택지 주고, 스크린샷 읽어서 반영하는 협업 방식이 가능해요. 디자인 몰라도 결과물이 나옵니다.
### 3. 잘 풀린 작업은 스킬로 자산화
한 번 만든 흐름은 /intro-page 한 줄로 영원히 재사용 가능해요. 이게 바로 AI 시대의 학습 자산입니다.
---
## 직접 해보려면
1. VS Code + Claude Code 설치
2. 새 폴더 만들고 claude 실행
3. 이 글의 프롬프트를 순서대로 붙여넣기
디자인도, 코딩도 몰라도 됩니다. 인터뷰에 답하기만 하면 돼요.
여기까지가 어제 OT 시간에 배우면서 실습한 내용입니다.
첫 시간이라서 정신이 없긴 했지만 직접해 보면서 배우니 확실히 그냥 강의 듣는 것 보다 효율이 훨씬 좋은거 같습니다. 이제 막 시작이긴 하지만 배운 걸 토대로 이제부터 제가 하고 싶은 것들을 어쩌면 해볼수도 있지 않을까라는 작은 희망을 가져봅니다!😀
