부록 E. 보너스 실습 — 나만의 미니 링크트리 만들기

이 실습의 목적

미니 링크트리(자기소개 페이지)를 만들면서 AI 시대의 학습 워크플로우 3가지를 한 번에 익힙니다.

1. CLAUDE.md 작성 — AI에게 일하는 방식을 가르치는 지시서
2. PDCA 바이브코딩 워크플로우 — 계획 → 실행 → 점검 → 개선 사이클로 AI와 협업하기
3. 스킬화 — 실습한 작업을 다음에 또 쓸 수 있게 재사용 가능한 자산으로 저장

약 45분 소요. VS Code와 Claude Code가 이미 깔려 있어야 합니다.

준비 — VS Code에서 작업 폴더 열고 Claude Code 실행

1. 작업 폴더 만들기 — 컴퓨터 아무 곳에나 새 폴더를 하나 만드세요. (예: 바탕화면에 my-intro 같은 이름으로)
2. VS Code에서 그 폴더 열기 — VS Code 실행 → 메뉴 File > Open Folder... → 방금 만든 폴더 선택
3. 터미널 열기 — VS Code 메뉴 Terminal > New Terminal (또는 단축키 Ctrl + `)
4. Claude Code 실행 — 터미널에 아래 명령어 입력 후 엔터

claude

처음 실행이면 로그인 안내가 뜨고 브라우저가 자동으로 열립니다. 로그인 끝나면 터미널로 돌아와서 Welcome to Claude Code 메시지가 나오면 준비 완료입니다.

에러가 난다면? claude 명령어가 안 먹히면 Claude Code가 제대로 설치 안 됐을 수 있어요. Claude Code 설치 페이지로 돌아가서 설치 확인부터 해주세요.

STEP 1. CLAUDE.md를 학습 가이드로 만들기

아래 프롬프트를 그대로 Claude Code에 붙여넣어 보세요. AI에게 **“앞으로 이 폴더에서 일할 때는 이렇게 행동해라”**고 가르치는 작업입니다.

이 폴더에 CLAUDE.md 파일을 만들어줘. 이 파일은 앞으로 이 폴더에서
작업할 때 너(AI)가 어떻게 행동할지 정해두는 학습 가이드야.

다음 내용을 담아줘:

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

## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 사용자가 막연한 부분을 질문으로 끌어낸다
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중

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

1. Plan (계획): 사용자가 원하는 걸 한두 줄로 다시 확인하고
   큰 그림을 설명한 뒤 "이렇게 진행할게요" 동의 받기
2. Do (실행): 작은 투두로 쪼개서 진행 상황을 보이면서 작업
3. Check (점검): 결과를 사용자에게 보여주고 피드백 받기
4. Act (개선): 피드백 받은 부분만 정확히 수정

작성이 끝나면 파일 내용을 한번 보여주고
이 원칙대로 일할 준비가 됐다고 알려줘.

파일이 만들어지면 한 번 열어보세요. 5초만 훑어도 됩니다. **“AI한테 일하는 방식을 가르치는 게 가능하다”**는 걸 눈으로 확인하는 게 중요해요.

📸 스크린샷 타임 1 — 생성된 CLAUDE.md 파일을 열어둔 화면을 캡처해두세요. 나중에 사례글에 *“AI한테 이렇게 일하는 방식을 가르쳤어요”*로 쓸 수 있어요.

더 알아보기: CLAUDE.md를 더 잘 쓰고 싶다면 → 부록 C. CLAUDE.md 잘 쓰는 법

STEP 2. 미니 링크트리 만들기 — AI와 PDCA 협업

이제 본격 작업을 시작합니다. CLAUDE.md를 만들었으니 AI가 알아서 Plan부터 시작합니다.

미니 링크트리(자기소개 페이지)를 index.html 한 개 파일로 만들고 싶어.

요구사항:
- 모바일 비율 (세로형, 최대 너비 420px)
- 구조: 원형 아바타(이모지 또는 이니셜) → 이름 → 한 줄 소개 → 링크 버튼 세로 정렬
- 디자인: Google Fonts 한글 폰트(Pretendard 등), 부드러운 그림자, hover 효과
- CSS는 inline (외부 파일 없이 한 파일로)

CLAUDE.md에 적힌 PDCA 라이브코딩 방식대로 진행해줘.
바로 코드 짜지 말고, 먼저 자기소개 인터뷰랑 디자인 인터뷰부터 해줘.

[자기소개 인터뷰] 한 번에 하나씩 물어봐줘 — 이름·닉네임,
한 줄 소개, 인스타·링크드인·이메일·블로그 등 연결할 곳.

[디자인 인터뷰] 다음 방식으로 진행해줘:
1. 먼저 요즘 트렌디한 웹/링크트리 디자인 스타일을 6개 정도
   리스트로 보여줘. 각 스타일마다 이름, 한 줄 특징,
   참고할 만한 실제 사이트나 브랜드 예시를 같이 알려줘.
   (예: "1. 글래스모피즘 — 반투명·블러 효과, Apple/iOS 스타일",
        "2. 뉴 브루탈리즘 — 굵은 테두리·강한 색 대비, Gumroad 스타일" 등)
2. 사용자가 번호로 고르거나 "이런 거 비슷한데 살짝 다르게"
   식으로 응용 답변할 수 있게 안내해줘.
3. 그 다음 색감도 비슷한 방식으로 4~5개 팔레트 리스트로
   보여주고 고르게 해줘.
4. 마지막으로 "혹시 직접 참고하고 싶은 디자인이 있으면
   스크린샷을 폴더에 넣고 알려줘도 좋아요"라고 안내해줘.

이제 AI가 인터뷰를 시작할 거예요. 선택지 형태로 보여주니까 디자인을 잘 모르는 사람도 고르기 쉬워요.

인터뷰는 이런 식으로 진행돼요

• 자기소개: AI가 한 번에 하나씩 물어봅니다 (이름·소개·SNS 링크 등)
• 디자인 스타일: AI가 트렌디한 스타일 6개를 리스트로 보여줘요. 번호로 고르거나 “3번 비슷한데 좀 더 부드럽게” 식으로 응용 답변 가능
• 색감 팔레트: AI가 추천 팔레트 4~5개를 보여줘요. 마찬가지로 골라서 답변
• 레퍼런스 (선택): 직접 가진 디자인 스크린샷이 있으면 폴더에 넣고 알려주기

스크린샷 활용 팁 — Claude Code는 폴더 안 이미지 파일을 읽을 수 있어요. 마음에 드는 인스타그램 프로필, 웹사이트 등을 캡처해서 폴더에 넣고 *“이런 느낌으로”*라고 알려주면 디자인 퀄리티가 훨씬 올라갑니다.

인터뷰가 끝나면 AI가 index.html을 생성합니다. 파일을 더블클릭하면 브라우저에서 결과를 볼 수 있어요.

결과 보고 수정하기 (Check → Act)

마음에 안 드는 부분이 있으면 그대로 알려주세요. AI가 즉시 반영합니다.

색감이 너무 진해. 좀 더 부드러운 베이지 톤으로 바꿔줘.
그리고 버튼들 사이 간격을 조금 더 넓혀줘.

📸 스크린샷 타임 2 — 최종 완성된 링크트리 화면을 캡처해두세요. 사례글의 메인 사진이 됩니다. 폰 비율(420px)이라 인스타 스토리로 바로 올리기도 좋아요.

STEP 3. 이 흐름을 스킬로 저장하기

방금 진행한 작업이 마음에 든다면, 그 흐름을 재사용 가능한 스킬로 저장해봅시다. 다음번엔 한 줄 호출로 똑같은 결과를 만들 수 있어요.

방금 우리가 한 작업 — "자기소개 인터뷰 → 디자인 인터뷰 →
미니 링크트리 index.html 생성" 흐름 — 을 Claude Code 스킬로 저장해줘.

- 스킬 이름: intro-page
- 저장 위치: .claude/skills/intro-page/SKILL.md
- 호출 시 동작:
  1. 사용자에게 자기소개 인터뷰 (이름·소개·SNS 링크)
  2. 디자인 인터뷰 (분위기·색감·참고 스크린샷)
  3. index.html 미니 링크트리 페이지 생성 (모바일 비율, inline CSS,
     Google Fonts 한글 폰트, 그림자·hover 효과)
  4. 브라우저로 여는 방법 안내

만든 후 어떻게 호출하는지 사용법도 알려줘.

📸 스크린샷 타임 3 — 생성된 스킬 파일(.claude/skills/intro-page/SKILL.md)을 열어둔 화면을 캡처해두세요. 사례글에 *“한 번 한 작업을 이렇게 자산으로 만들었어요”*로 쓸 수 있어요.

STEP 4. (선택) 스킬 테스트 — “진짜 한 줄로 되나?”

새 폴더를 만들고 스킬을 호출해서 친구·가족용 페이지를 즉석 생성해보세요.

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

스킬이 잘 만들어졌다면 다시 인터뷰부터 시작해서 새 페이지를 만들어줄 거예요. **“오, 진짜 한 줄로 되네”**를 체험하는 순간이에요.

이 실습이 가르치는 것

1. CLAUDE.md = AI에게 일하는 방식을 가르치는 지시서 — 도구를 외우는 게 아니라 AI의 행동을 정의합니다
2. AI는 도구가 아니라 학습 메이트 — 먼저 묻고, 디자인 인터뷰도 같이 하고, PDCA로 협업합니다
3. 잘 풀린 작업은 스킬로 자산화 — 한 번 만든 흐름은 평생 한 줄로 재사용됩니다

이게 매뉴얼 따라하기가 아니라 AI와 함께 학습하는 메타학습의 실제 모습입니다.

마지막 단계 — 지금 바로 사례글 쓰기

기억이 가장 생생한 지금, 같은 Claude 채팅창에서 바로 사례글까지 완성하세요. AI가 인터뷰로 끌어내주고, 본인 SNS 정보까지 같이 정리해서 사례글이 본인 브랜딩 자산이 됩니다.

→ 부록 K. 사례글 작성하는 법

찍어둔 스크린샷 3장과 함께, AI 채팅창에서 인터뷰만 하면 사례글 초안이 완성돼요.