Claude Code로 모바일 링크트리(자기소개페이지) 만들기

"AI한테 그냥 만들어달라고 하면 안 되나요?"

됩니다. 근데 더 잘 되는 방법이 있어요.

오늘은 제가 Claude Code를 쓰면서 발견한 패턴 하나를 공유하려고 합니다. 결과물은 모바일 링크트리 페이지((자기소개페이지) 인데, 진짜 핵심은 AI와 협업하는 방식 이에요.

먼저 이것부터 — CLAUDE.md

Claude Code에는 CLAUDE.md라는 파일이 있어요. 프로젝트 폴더에 넣으면 AI가 매번 대화를 시작할 때 이걸 먼저 읽고 행동 방식을 맞춥니다.

저는 이렇게 써뒀어요.

## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중

## 작업 방식 — PDCA 사이클
1. Plan: 큰 그림 확인 후 동의 받기
2. Do: 작은 단계로 쪼개서 진행
3. Check: 결과 보여주고 피드백 받기
4. Act: 피드백 받은 부분만 수정

이게 왜 중요하냐면, 이걸 안 하면 AI가 질문도 없이 코드부터 뚝딱 만들어버려요. 결과물은 나오는데 내가 뭘 선택한 건지 모르게 됩니다.

1단계 — 코드 전에 인터뷰 먼저

저는 AI한테 "바로 코드 짜지 말고, 인터뷰부터 해줘"라고 했어요.

AI가 한 번에 하나씩 물어봤습니다.

Q1. 페이지에 표시될 이름 또는 닉네임이 뭔가요? → 비케이

Q2. 한 줄 소개를 알려주세요. → 후보를 세 개 드렸더니 합쳐줬어요 → "조직, 리더, 성과의 솔루션을 AI와 함께 만듭니다."

Q3. 연결할 링크를 알려주세요. → 이메일 + 노션 포트폴리오(링크는 나중에 연결 예정)

포인트는 질문이 하나씩 왔다는 것입니다. 한꺼번에 "다 알려주세요"가 아니라요. 덕분에 생각할 틈이 생겼어요.

2단계 — 디자인도 고르면서 배웠어요

AI가 요즘 트렌디한 디자인 스타일 6개를 표로 보여줬습니다.

저는 1번 글래스모피즘 골랐고, 이어서 색감 팔레트도 골랐어요 (선셋 로즈 → 이후 민트로 변경).

이 과정에서 얻은 것: 디자인 용어를 자연스럽게 익혔다는 거예요. 글래스모피즘이 뭔지 몰랐는데, 이제 압니다.

3단계 — 코드 생성은 빠릅니다

인터뷰가 끝나고 나서야 코드를 짰어요. AI가 진행 상황을 단계별로 보여줬습니다.

✅ HTML 기본 구조 + 뷰포트 설정
✅ 선셋 로즈 그라디언트 배경 + 글래스모피즘 카드
✅ 아바타(BK 이니셜) + 이름 + 한 줄 소개
✅ 링크 버튼 + hover 효과

결과물 스펙:

• index.html 단일 파일 (외부 파일 없음)

• 모바일 세로형 (max-width 420px)

• Google Fonts 한글 폰트 적용

• 버튼 hover 시 살짝 떠오르는 효과

• 노션 버튼은 "준비 중" 뱃지 달아서 비활성 처리

4단계 — 수정은 말로 합니다

나: 배경색을 민트로 해주세요.
    카드 색상 포함 나머지는 민트와 어울리는 색으로 직접 정해주세요.

AI가 색상 선택 이유를 설명해줬어요.

"배경: 연민트 → 딥 틸 그라디언트 그림자: 검정 대신 딥 틸 계열로 통일해 전체 색감 맞췄어요"

이유를 들으니 납득이 됩니다. 그냥 바꿔주는 게 아니라 왜 이 색을 골랐는지 를 같이 배우게 되는 구조예요.

5단계 — 스킬로 저장해서 다음에도 씁니다

이 전체 흐름을 Claude Code 스킬로 저장했어요.

.claude/skills/intro-page/SKILL.md

다음번에 /intro-page 라고 치면 인터뷰부터 다시 시작합니다. 팀원 소개 페이지, 행사 페이지, 스터디 소개 페이지 — 어디든 쓸 수 있어요.

요약하면

AI는 빠르게 만들어주는 도구가 맞아요. 근데 거기에 인터뷰 → 선택 → 이유 설명 을 얹으면 배우면서 만드는 도구가 됩니다.

코드 몰라도 됩니다. 질문할 줄 알면 됩니다.