나의 첫번째 vs code 체험기 - AI와 함께 45분 만에 나만의 링크트리 만든 후기

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에서 폴더 열기

1. VS Code 실행

2. 메뉴 File > Open Folder...

3. 방금 만든 폴더 선택

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번 글래스모피즘 을 골랐어요.

4-2. 색감 고르기

스타일을 고르면 어울리는 색감 팔레트도 보여줘요:

→ 저는 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 코딩 지식 필요 여부: 없음

ALT

한국어 텍스트가 있는 검은 화면

[ 실제 실습화면 ]

ALT

맥 os x os x os x os x os x os

[ 결과물.... 허접하지만 퀄리티는 제껴두고, 일단 완성에 초점을 맞췄습니다...;]

■ 결과와 배운 점 (핵심) ■

역시 백문이 불여일견이라는 말이 딱 들어맞는 경험이었습니다.

오늘 첫 스터디에서 그 동안 해보고 싶었던 것을 많이 해결했습니다.

앞으로의 스터디가.. 더 기대 됩니다. (웬지... 다음 기수도 신청할 것 같은 느낌이 듭니다..)

다음 주 스터디는 물론이고, 이번주 토요일 오프라인 모임도 엄청 기대되네요~

감사합니다.