📝 한줄 요약
AI 온보딩 스터디 실습으로 나만의 링크트리 페이지를 만들면서, 코드보다 중요한 것들 — CLAUDE.md 설정, 인터뷰 방식 요청, 스킬 저장 — 을 직접 익혔다.
바쁘시면 이것만 읽어도 돼요:
Claude Code로 모바일 링크트리 페이지를 코드 없이 만듦
"만들어줘" 대신 인터뷰 방식으로 요청하면 결과물이 훨씬 좋아짐
CLAUDE.md에 규칙을 정해두면 AI가 매번 일관되게 행동함
작업 흐름 전체를 스킬로 저장하면 다음엔 한 마디로 재사용 가능
막힌 부분 없이 처음부터 끝까지 순조롭게 완성
AI 도구의 기본기를 실습으로 배우는 게 핵심
🎯 이런 분들께 도움돼요
AI 코딩 도구를 처음 써보는 분
코드는 모르지만 결과물은 만들고 싶은 분
Claude Code를 제대로 활용하는 방법이 궁금한 분
😫 시작하게 된 계기
AI 온보딩 스터디에 참여했다. 실습 과제가 주어졌고, 주제는 직접 자기소개 페이지를 만들어보는 것.
단순히 "만들어줘"라고 요청하는 게 아니라, AI 도구를 제대로 세팅하고 제대로 활용하는 방법을 익히는 게 목표였다. CLAUDE.md가 뭔지, 스킬이 뭔지, 왜 이런 게 필요한지 — 직접 해보면서 배우는 실습이었다.
🛠️ 사용한 도구
도구: Claude Code (VS Code 확장)
모델: Claude Sonnet 4.6
추가 설치: VS Code Live Server 확장
🔧 작업 과정
여성의 얼굴 이미지가 있는 주황색 배경
AI에게 규칙을 정해주는 파일 — CLAUDE.md 만들기
실습의 첫 번째 과제는 CLAUDE.md 파일을 만드는 것이었다.
처음엔 "이게 왜 필요하지?" 싶었다. 그냥 요청하면 되는 거 아닌가?
알고 보니 CLAUDE.md는 AI가 이 폴더에서 일할 때 따라야 할 규칙을 적어두는 파일이었다. 매번 "이렇게 해줘, 저렇게 해줘" 설명 안 해도 되도록.
이 폴더에 CLAUDE.md 파일을 만들어줘.
AI의 기본 태도: 가르치는 강사가 아니라 함께 만드는 학습 메이트
작업 방식: PDCA 라이브코딩 사이클로 진행해줘
이렇게 요청했더니 AI가 파일을 뚝딱 만들어줬다. 그리고 한 가지 더 추가했다.
설명은 초등학생 수준으로 해줘. 이것도 CLAUDE.md에 추가
이제 이 폴더에서는 어떤 대화를 시작하든 AI가 이 규칙대로 행동한다. 한 번 설정하면 끝.
"만들어줘" 대신 인터뷰 먼저 — 링크트리 페이지 제작
CLAUDE.md를 만든 다음 본격적으로 링크트리 페이지를 만들었다.
그런데 여기서 중요한 걸 배웠다. 바로 "만들어줘"라고 하면 안 된다는 것.
미니 링크트리 페이지를 만들고 싶어.
바로 코드 짜지 말고, 먼저 자기소개 인터뷰랑 디자인 인터뷰부터 해줘.
이렇게 요청하자 AI가 질문을 하나씩 던졌다.
"이름이나 닉네임이 뭐예요?"
"한 줄 소개를 써줄 수 있어요?"
"연결할 링크들을 알려줘요!"
그 다음엔 디자인 스타일 6가지를 표로 보여주고 고르게 했다. 글래스모피즘, 뉴 브루탈리즘, 미니멀 화이트... 번호로 고르면 끝.
글래스모피즘
선셋핑크
이렇게 두 단어만 입력했는데, 그것만으로 분홍→주황→노랑 그라디언트 배경에 반투명 유리 카드 디자인이 완성됐다.
인터뷰 방식으로 요청하면 AI가 필요한 정보를 먼저 모으고 시작한다. 이게 훨씬 결과물이 좋다.
프로필 사진 색상을 AI가 직접 분석했다
페이지를 만들고 나서 프로필 사진을 바꿨다. 그런데 한 가지를 더 요청했다.
디자인을 프로필 사진에 있는 색상을 이용해서 바꿔줘
AI가 사진을 직접 보더니 연핑크, 복숭아, 연노랑, 딥 네이비를 뽑아냈다. 그리고 그 색들로 배경과 텍스트 색을 전부 바꿔줬다.
직접 색상 코드 찾아볼 필요도 없었다. 사진 하나 던져주고 "이 색으로 바꿔줘" 한 마디면 됐다.
오늘 한 작업을 다음에도 쓰게 — 스킬 저장
마지막 과제가 가장 인상 깊었다. 오늘 진행한 전체 흐름 — 자기소개 인터뷰 → 디자인 인터뷰 → 코드 생성 — 을 스킬 파일로 저장하는 것이었다.
방금 우리가 한 작업 흐름을 Claude Code 스킬로 저장해줘.
스킬 이름: intro-page
이제 .claude/skills/intro-page/SKILL.md 파일이 생겼다. 다음에 누군가 링크트리를 만들고 싶다면?
/intro-page
한 마디면 오늘과 똑같은 흐름이 자동으로 시작된다. 인터뷰부터 코드 생성까지.
✅ 결과
Before vs After
항목
Before
After
나만의 링크트리 페이지
없음
완성
AI 요청 방법
몰랐음
인터뷰 방식 습득
재사용 가능한 작업 흐름
없음
/intro-page 스킬 저장 완료
결과물
index.html— 모바일형 링크트리 페이지 (글래스모피즘 + 선셋 파스텔)CLAUDE.md— AI 행동 규칙 파일.claude/skills/intro-page/SKILL.md— 재사용 가능한 스킬
💬 AI 활용 팁 — 이번 실습에서 배운 것들
효과적이었던 것
CLAUDE.md 먼저 세팅하기: AI가 매번 같은 방식으로 행동하 도록 규칙을 정해두면 편하다. "설명은 쉽게 해줘", "PDCA 방식으로 진행해줘" 같은 것들.
"만들어줘" 대신 인터뷰 요청: 바로 결과물을 요청하지 말고 "인터뷰부터 해줘"라고 하면 AI가 필요한 정보를 먼저 모은다. 결과물 퀄리티가 다르다.
작업 흐름을 스킬로 저장: 잘 된 작업은 스킬 파일로 저장해두면 다음에 한 마디로 재사용할 수 있다.
알아두면 좋은 것
파일을 폴더에 넣고 "이 파일로 바꿔줘"라고 하면 AI가 알아서 파일명을 찾아준다.
VS Code에서 Live Server를 설치하면 저장할 때마다 브라우저가 자동으로 새로고침된다.
🌍 다른 상황에 적용한다면?
포트폴리오 페이지, 이벤트 소개 페이지 등 단순한 1페이지 사이트에 동일하게 적용 가능
CLAUDE.md와 스킬 개념은 어떤 반복 작업에도 쓸 수 있음 — 문서 작성, 데이터 정리, 콘텐츠 제작 등
🚀 앞으로의 계획
스킬을 더 다양하게 만들어서 자주 쓰는 작업 흐름을 쌓아가기
CLAUDE.md를 다듬어서 AI와 더 일관된 협업 환경 만들기
📋 바로 따라 해볼 수 있는 프롬프트
프롬프트 1: CLAUDE.md 만들기
이 폴더에 CLAUDE.md 파일을 만들어줘. AI의 기본 태도: [원하는 태도] 작업 방식: [원하는 방식] 설명 수준: [원하는 수준]
프롬프트 2: 인터뷰 방식으로 결과물 요청하기
[결과물]을 만들고 싶어. 바로 만들지 말고, 먼저 필요한 정보를 인터뷰 방식으로 하나씩 물어봐줘. 그 다음 디자인 선택지를 보여주고 내가 고른 뒤에 작업해줘.
프롬프트 3: 작업 흐름을 스킬로 저장하기
방금 진행한 작업 흐름을 Claude Code 스킬로 저장해줘. 스킬 이름: [이름] 저장 위치: .claude/skills/[이름]/SKILL.md 호출 시 동작: [원하는 흐름 설명]
