■ 소개
코딩을 전혀 모르는 제가, AI랑 대화만 해서 나만의 자기소개 페이지를 만들어보고 싶었어요. 링크트리처럼 생긴 페이지인데, 내 이름·소개·이메일을 담은 딱 하나짜리 페이지예요. "코딩 없이도 진짜 되나?" 를 직접 확인해보고 싶었습니다.
■ 진행 방법
사용 도구: Claude Code (VS Code 확장)
[ STEP 1. Claude Code 설치 및 실행 ]
claude.ai/code 에서 설치
VS Code 열기
터미널에서 claude 입력 후 엔터
로그인하면 준비 완료
[ STEP 2. CLAUDE.md — AI한테 일 하는 방식 가르치기 ]
AI한테 "앞으로 이렇게 행동해줘" 라고 적어두는 파일이에요. 아래 프롬프트를 그대로 붙여넣으면 파일이 자동으로 만들어집니다.
이 폴더에 CLAUDE.md 파일을 만들어줘. 이 파일은 앞으로 이 폴더에서
작업할 때 너(AI)가 어떻게 행동할지 정해두는 학습 가이드야.
다음 내용을 담아줘:
## 이 폴더의 목적
사용자가 AI와 함께 학습하는 방식 자체를 익히는 곳.
## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 사용자가 막연한 부분을 질문으로 끌어낸다
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중
## 작업 방식 — PDCA 라이브코딩 사이클
1. Plan: 원하는 걸 확인하고 동의 받기
2. Do: 작은 단위로 나눠서 진행
3. Check: 결과 보 여주고 피드백 받기
4. Act: 피드백 받은 부분만 수정
[ STEP 3. 미니 링크트리 만들기 — 자기소개 + 디자인 인터뷰 ]
아래 프롬프트를 붙여넣으면 AI가 인터뷰를 시작해요. 바로 코드를 짜는 게 아니라, 이름·소개·링크·디자인 스타일·색감을 하나씩 물어봐요.
미니 링크트리(자기소개 페이지)를 index.html 한 개 파일로 만들고 싶어.
CLAUDE.md에 적힌 PDCA 방식대로 진행해줘.
바로 코드 짜지 말고, 먼저 자기소개 인터뷰랑 디자인 인터뷰부터 해줘.
[자기소개 인터뷰] 한 번에 하나씩 물어봐줘 — 이름·닉네임,
한 줄 소개, 연결할 링크(인스타·이메일·블로그 등).
[디자인 인터뷰] 트렌디한 스타일 6개를 번호 리스트로 보여주고,
색감 팔레트도 4~5개 보여줘서 고르게 해줘.
AI가 디자인 스타일 6가지를 번호로 제안해줬어요. 저는 그냥 골랐어요. "6번, 근데 촌스럽지 않게. 고급이고 활동적인 느낌으로." 그게 전부였어요. 품을 들인 게 아니라 선택만 했는데 완성됐습니다.
[ STEP 4. 결과 확인 & 수정 ]
인터뷰가 끝나면 폴더에 index.html 파일이 생겨요. 더블클릭하면 브라우저에서 바로 열려요.
수정하고 싶은 부분은 그냥 말로 하면 돼요. AI가 그 부분만 딱 고쳐줍니다.
[ STEP 5. 스킬로 저장하기 ]
아래 프롬프트로 이 흐름을 저장해두면, 다음에 한 줄로 재사용할 수 있어요.
방금 우리가 한 작업 흐름을 Claude Code 스킬로 저장해줘.
스킬 이름: intro-page
저장 위치: .claude/skills/intro-page/SKILL.md
다음부터는 /intro-page 한 마디면 인터뷰부터 다시 시작돼요.
■ 결과와 배운 점
코딩을 배운 게 아니에요. AI랑 일하는 방법을 배운 거예요.
가장 인상 깊었던 건 디자인 인터뷰였어요. AI가 먼저 스타일을 제안해주고, 저는 번호만 골랐어요. 시간도 안 걸리고, 결과는 제 취향 그대로였어요.
꿀팁
CLAUDE.md를 먼저 만들면 AI가 알아서 인터뷰부터 시작해요.
마음에 드는 디자인 스크린샷을 폴더에 넣고 "이런 느낌으로" 하면 퀄리티가 훨씬 올라가요.
잘 된 작업은 스킬로 저장해두세요. 나중에 친구 페이지도 한 줄로 만들 수 있어요.
앞으로는 이 방식으로 다른 페이지들도 만들어볼 생각이에요.
— 메밀
한국어 문자가 적힌 전화기
