코딩 몰라도 괜찮아 — AI랑 같이 내 링크트리 페이지 만든 아저씨 이야기

# 코딩 몰라도 괜찮아 — AI랑 같이 내 링크트리 페이지 만든 아저씨 이야기

> "AI가 다 해주는 거 아니야?" 라고 생각했는데,  
> 막상 해보니 **내가 이해하면서 만드는 게 진짜 재미**였다.

---

## 이 글을 읽으면 뭘 얻나요?

Claude Code(AI 코딩 도우미)를 처음 써보는 분도 이 글을 따라하면
**자기 이름, 소개, SNS 링크가 담긴 미니 링크트리 페이지**를 직접 만들 수 있어요.

완성하면 이런 페이지가 생겨요:

```
┌─────────────────────┐
│        YJ           │  ← 이니셜 아바타
│    영달 _YJ LEE      │  ← 이름
│  AI배워서 남들에게    │  ← 한 줄 소개
│  가르치는 아빠       │
│  ─────────────────  │
│  📸 인스타그램       │  ← 링크 버튼들
│  ▶️ 유튜브           │
│  📝 블로그           │
└─────────────────────┘
```

---

## 준비물

| 필요한 것 | 설치 링크 | 비용 |
|-----------|-----------|------|
| VS Code | code.visualstudio.com | 무료 |
| Claude Code (VS Code 확장) | VS Code 확장 탭에서 "Claude Code" 검색 | 무료 |
| Claude 계정 | claude.ai | 무료 플랜 있음 |

> 설치가 처음이라면? VS Code를 열고 왼쪽 블록 아이콘(확장) → "Claude Code" 검색 → 설치 → 로그인 순서로 진행하면 돼요.

---

## 전체 흐름 한눈에 보기

```
STEP 1. 작업 폴더 만들기
   ↓
STEP 2. AI에게 일하는 방식 알려주기 (CLAUDE.md 작성)
   ↓
STEP 3. AI 용어집 만들어 두기 (나중에 헷갈릴 때 쓸 사전)
   ↓
STEP 4. "자동 인터뷰 → 페이지 생성" 스킬 만들기
   ↓
STEP 5. 스킬 불러서 내 페이지 만들기
   ↓
STEP 6. 브라우저에서 확인하고 수정하기
```

---

## STEP 1. 작업 폴더 만들기

바탕화면에 `onborde-study` 폴더를 만들고 VS Code로 열어요.

```
바탕화면 → 우클릭 → 새 폴더 → 이름: onborde-study
VS Code → 파일 → 폴더 열기 → onborde-study 선택
```

> **왜 폴더를 먼저 만드나요?**  
> AI와 작업할 때 "어디에 파일을 저장할지" 기준이 있어야 해요.  
> 폴더가 곧 우리 작업실이에요.

---

## STEP 2. AI에게 일하는 방식 알려주기 — CLAUDE.md 작성

### CLAUDE.md가 뭐예요?

AI한테 보내는 **행동 수칙 쪽지**예요.  
"나는 이렇게 일하고 싶어요"라고 써두면, 이 프로젝트에서 Claude는 항상 그 방식대로 행동해요.

### 직접 해보기

VS Code에서 `onborde-study` 폴더 안에 `CLAUDE.md` 파일을 새로 만들어요.  
아래 내용을 그대로 붙여넣기 해요.

```markdown
# CLAUDE.md — 학습 가이드

## 이 폴더의 목적
사용자가 AI와 함께 학습하는 방식 자체를 익히는 곳.

## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중
- 설명은 항상 초등학생도 이해할 수 있는 말로

## 작업 방식 — PDCA 사이클
어떤 요청이든 다음 4단계로 진행한다.

1. Plan: 원하는 걸 한두 줄로 확인하고 큰 그림 설명 후 동의 받기
2. Do: 작은 투두로 쪼개서 진행 상황을 보이면서 작업
3. Check: 결과를 보여주고 피드백 받기
4. Act: 피드백 받은 부분만 정확히 수정
```

> **PDCA가 뭐예요?**  
> Plan(계획) → Do(실행) → Check(점검) → Act(개선)의 앞글자예요.  
> 그냥 "해보고 고치고 또 해보고 또 고치는 것"이에요.  
> AI한테 한 번에 다 시키려다 실패하는 것보다, 이렇게 조금씩 확인하면서 가는 게 훨씬 빨라요.

---

## STEP 3. AI 용어집 만들기

### 왜 용어집이 필요해요?

AI와 작업하다 보면 낯선 단어들이 튀어나와요.  
`HTML`, `CSS`, `hover 효과`, `Google Fonts`...  
이걸 그때그때 찾는 것보다, **처음에 한 번 정리해두면** 훨씬 편해요.

### 직접 해보기

Claude에게 이렇게 말해요:

```
이번 작업에서 자주 쓸 AI/코딩 용어들을
CSV 파일로 정리해줘.
컬럼은: 용어 / 간단한 설명 (한 줄) / 쉬운 표현 (초등학생용)
파일 이름은 AI용어집.csv로 저장해줘.
```

그러면 Claude가 아래처럼 정리된 파일을 만들어줘요:

| 용어 | 간단한 설명 | 쉬운 표현 |
|------|------------|-----------|
| VS Code | 마이크로소프트가 만든 코드 편집 프로그램 | 코딩할 때 쓰는 메모장인데 엄청 스마트한 버전 |
| Claude Code | 터미널에서 쓰는 AI 코딩 도우미 | 컴퓨터 안에서 같이 일해주는 AI 친구 |
| CLAUDE.md | AI한테 일하는 방식을 알려주는 지시서 파일 | AI한테 보내는 행동 수칙 쪽지 |
| HTML | 웹페이지의 뼈대를 만드는 언어 | 웹페이지에 뭘 놓을지 알려주는 설명서 |
| CSS | 웹페이지의 디자인을 담당하는 언어 | 웹페이지를 예쁘게 꾸미는 옷 입히기 |
| 뉴 브루탈리즘 | 굵은 테두리와 강한 색 대비가 특징인 디자인 | 만화책처럼 테두리가 굵고 색이 강렬한 디자인 |

> **포인트:** 용어집은 완벽하게 만들려고 하지 말고,  
> 작업하다가 모르는 게 생기면 Claude에게 "이거 용어집에 추가해줘"라고 하면 돼요.

---

## STEP 4. 자동 인터뷰 스킬 만들기

### 스킬이 뭐예요?

**나만의 버튼**이에요.  
자주 하는 작업을 저장해두면, 다음에 `/intro-page`라고만 입력해도  
AI가 알아서 인터뷰 → 디자인 선택 → 페이지 생성을 쭉 해줘요.

### 폴더 구조 만들기

```
onborde-study/
  .claude/
    skills/
      intro-page/
        SKILL.md    ← 여기에 스킬 내용을 써요
```

VS Code에서 이 폴더들을 순서대로 만들면 돼요.

### SKILL.md 내용 작성하기

Claude에게 이렇게 말해요:

```
자기소개 링크트리 페이지를 자동으로 만들어주는 스킬을 만들어줘.
경로: .claude/skills/intro-page/SKILL.md

스킬이 해야 할 일:
1. 이름, 한 줄 소개, 연결할 링크를 한 번에 하나씩 물어보기
2. 디자인 스타일 선택지 6개 보여주고 고르게 하기
3. 색감 팔레트 선택하게 하기
4. index.html 파일로 만들기 (모바일 비율, 인라인 CSS)
```

> **왜 한 번에 하나씩 물어봐야 해요?**  
> 한꺼번에 "이름, 소개, 링크 다 알려줘"라고 하면 사람들이 당황해요.  
> 한 번에 하나씩 물어보면 부담 없이 대답할 수 있어요.

---

## STEP 5. 스킬 불러서 내 페이지 만들기

이제 실제로 사용할 차례예요!  
Claude 채팅창에 이렇게 입력해요:

```
/intro-page 호출해서 진행해줘.
```

그러면 Claude가 아래 순서로 진행해요:

### 5-1. 자기소개 인터뷰 (한 번에 하나씩)

```
Claude: 이름 또는 닉네임을 알려주세요!
나: 영달 _YJ LEE

Claude: 한 줄 소개를 부탁드려요. 
        막막하면 하는 일이나 관심사를 말씀해 주시면 
        제가 문장으로 만들어드릴게요!
나: AI 배워서 남들에게 가르치는 아빠

Claude: 연결할 SNS나 링크를 알려주세요.
        없는 건 빼도 되고, 주소 모르면 임시 처리할게요.
나: 인스타그램, 유튜브, 블로그, 링크드인, 이메일, 카카오 오픈채팅
```

### 5-2. 디자인 스타일 선택

Claude가 이런 표를 보여줘요:

| # | 스타일 | 특징 | 참고 브랜드 |
|---|--------|------|------------|
| 1 | 글래스모피즘 | 반투명 유리 + 블러 효과 | Apple iOS |
| 2 | **뉴 브루탈리즘** | 굵은 테두리, 강한 색 대비 | Gumroad |
| 3 | 소프트 미니멀 | 여백 넉넉, 파스텔 톤 | Notion |
| 4 | 다크 네온 | 어두운 배경 + 형광 포인트 | Vercel |
| 5 | 그라데이션 팝 | 선명한 그라데이션, MZ 감성 | Instagram |
| 6 | 한국 감성 클린 | 깔끔한 흰 배경, 한글 타이포 | 토스 |

```
나: 2번 (뉴 브루탈리즘)
```

### 5-3. 색감 팔레트 선택

```
Claude: 뉴 브루탈리즘에 어울리는 팔레트예요:
        1. 민트 + 검정  2. 노랑 + 검정
        3. 핑크 + 검정  4. 하늘 + 검정

나: 1번 (민트 + 검정)
```

### 5-4. 페이지 자동 생성!

Claude가 `index.html`을 만들어줘요.

---

## STEP 6. 브라우저에서 확인하고 수정하기

`onborde-study` 폴더에 `index.html`이 생성됐어요!  
파일을 **더블클릭**하면 브라우저가 열리면서 페이지를 볼 수 있어요.

### 마음에 안 드는 부분 수정하기

그냥 Claude에게 말하면 돼요:

```
버튼 색이 너무 진한 것 같아. 조금 밝게 해줘.
아바타 크기를 좀 더 크게 해줘.
폰트가 너무 작아. 제목 폰트 키워줘.
```

Claude가 정확히 그 부분만 수정해줘요.  
이게 바로 **PDCA의 Act(개선) 단계**예요.

---

## 핵심 배운 것들 정리

### 1. CLAUDE.md로 AI 길들이기
AI한테 처음부터 "이렇게 일하자"고 규칙을 정해두면,  
매번 말 안 해도 원하는 방식으로 작업해줘요.

### 2. PDCA 사이클
- ❌ "AI야 링크트리 만들어줘" → 원하는 게 아닌 결과물 나옴
- ✅ 계획 확인 → 작게 실행 → 피드백 → 수정 반복

### 3. 스킬 만들기
자주 하는 작업은 스킬로 저장해두면 `/이름` 한 번으로 불러쓸 수 있어요.  
이 스킬 하나로 나뿐 아니라 친구, 가족, 팀원 페이지도 5분 만에 만들어줄 수 있어요.

### 4. 용어집 먼저 만들기
AI와 작업하면서 나오는 단어들을 정리해두면  
다음 작업이 훨씬 수월해요.

---

## 이 사례를 만든 사람

**영달 _YJ LEE**  
AI배워서 남들에게 가르치는 아빠, **AI배남가빠**

> "코딩을 배운 게 아니라, AI와 함께 만드는 법을 배웠어요.  
> 그게 훨씬 더 중요한 것 같아요."

---

## 따라하기 체크리스트

- [ ] VS Code + Claude Code 설치 완료
- [ ] `onborde-study` 폴더 생성
- [ ] `CLAUDE.md` 작성 (AI 행동 수칙)
- [ ] `AI용어집.csv` 생성
- [ ] `.claude/skills/intro-page/SKILL.md` 작성
- [ ] `/intro-page` 스킬로 인터뷰 진행
- [ ] `index.html` 생성 확인
- [ ] 브라우저에서 열어서 결과 확인
- [ ] 마음에 안 드는 부분 수정 요청

모두 체크됐으면 완성이에요! 🎉

---

*작성일: 2026년 5월 23일*  
*사용 도구: VS Code + Claude Code (Claude Sonnet 4.6)*