━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[제목]
AI랑 45분 만에 나만의 소개 페이지 만들었어요
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[소제목: 코딩 몰라도 괜찮아요 — AI가 다 물어봐줍니다]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
이게 뭔가요?
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
인터넷에서 링크트리(Linktree)라는 거 보신 적 있나요?
인스타그램 프로필에 링크 하나 걸어두면,
클릭했을 때 이름·소개·여러 링크가 쭉 나오는 그 페이지요.
저도 그런 페이지를 갖고 싶었는데 만드는 방법을 몰랐어요.
그래서 AI(Claude Code)한테 도움을 요청했더니 —
45분 만에 내 소개 페이지가 생겼어요.
코딩? 하나도 몰라도 됩니다.
AI가 먼저 물어봐줍니다. 저는 그냥 대답만 했어요.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
준비물
━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━
✔ 컴퓨터 (윈도우 또는 맥)
✔ VS Code 설치 (무료 / code.visualstudio.com)
✔ Claude Code 설치 (무료 / claude.ai/code)
✔ 약 45분
그게 전부예요.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1단계 — 새 폴더 만들고 AI 켜기
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
바탕화면에 새 폴더를 만들었어요. 이름은 my-intro 로 했어요.
VS Code를 열고 File > Open Folder 로 그 폴더를 열었어요.
그다음 화면 아래 터미널 창에 이렇게 입력했어요.
▶ claude
엔터를 누르면 이런 메시지가 나와요.
▶ Welcome to Claude Code
이게 나오면 AI가 켜진 거예요!
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2단계 — AI에게 일하는 방식 가르치기 (CLAUDE.md)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
이게 제일 신기한 부분이에요.
AI한테 "앞으로 이렇게 행동해" 라고 미리 규칙을 알려줄 수 있어요.
그 규칙 파일이 바로 CLAUDE.md 예요.
아래 내용을 그대로 복사해서 AI에게 붙여넣기 하면 돼요.
─────────────────────────────────
이 폴더에 CLAUDE.md 파일을 만들어줘.
앞으로 이 폴더에서 작업할 때 AI가 어떻게 행동할지 정해두는 학습 가이드야.
다음 내용을 담아줘:
## 이 폴더의 목적
사용자가 AI와 함께 학습하는 방식 자체를 익히는 곳.
## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중
## 작업 방식 — PDCA 사이클
1. Plan: 사용자가 원하는 걸 확인하고 동의 받기
2. Do: 작은 단계로 쪼개서 진행 상황 보이면서 작업
3. Check: 결과를 보여주고 피드백 받기
4. Act: 피드백 받은 부분만 수정
─────────────────────────────────
파일이 생기면 열어보세요.
AI한테 일하는 방식을 가르친 거예요. 신기하죠?
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
3단계 — 자기소개 인터뷰
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
이제 소개 페이지를 만들어달라고 했어요.
아래 내용을 복사해서 붙여넣기 하세요.
───────────────────────── ────────
미니 링크트리(자기소개 페이지)를 index.html 한 개 파일로 만들고 싶어.
PDCA 방식대로 진행해줘.
바로 코드 짜지 말고, 먼저 자기소개 인터뷰랑 디자인 인터뷰부터 해줘.
─────────────────────────────────
그러면 AI가 바로 코드를 짜는 게 아니라 저한테 물어봐요.
한 번에 하나씩요.
AI: 페이지에 표시할 이름 또는 닉네임이 뭔가요?
나: SIMSON
AI: 한 줄 소개가 뭔가요?
나: 참다운 체험은 한 사람의 미래를 바꾼다
AI: 연결할 링크가 있나요?
나: spolink.co.kr / [email protected] / @spo_link
딱 세 가지만 대답했어요. 쉽죠?
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
4단계 — 디자인 고르기
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
자기소개가 끝나면 AI가 디자인 스타일 6가지를 보여줘요.
1. 글래스모피즘 — 반투명, 애플 느낌
2. 뉴 브루탈리즘 — 굵고 강렬한 느낌
3. 미니멀 다크 — 검정 배경, 세련됨
4. 소프트 뉴모피즘 — 부드럽고 입체적
5. 그라디언트 비비드 — 화사하고 생동감 있음
6. 내추럴 미니멀 — 베이지, 감성적이고 따뜻함
저는 "6번, 코발트 블루 포인트로" 라고 답했어요.
그러면 색감 팔레트 4가지도 보여줘요.
A. 코발트 + 오프화이트 — 따뜻하고 클래식
B. 코발트 + 순백 — 선명하고 깔끔
C. 코발트 + 연크림 — 부드럽고 감성적
D. 다크 코발트 — 세련되고 강렬
저는 A를 골랐어요.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
5단계 — 완성!
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
선택이 끝나자마자 AI가 index.html 파일을 만들어줬어요.
파일을 더블클릭하면 브라우저에서 바로 열려요.
오프화이트 배경에 코발트 블루 동그라미 아바타가 뜨고,
버튼에 마우스를 올리면 파란색으로 바뀌는 효과도 있었어요.
수정도 간단해요.
처음에 링크 주소를 잘못 입력했는데, 그냥 이렇게 말했어요.
─────────────────────────────────
spolink.co.kr로 변경해줘
─────────────────────────────────
AI가 바로 고쳐줬어요.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
6단계 — 이 흐름을 스킬로 저장하기
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
이 과정이 마음에 들어서 다음에 또 쓸 수 있게 저장해뒀어요.
─────────────────────────────────
방금 우리가 한 작업을 Claude Code 스킬로 저장해줘.
스킬 이름: intro-page
─────────────────────────────────
이제 다음에 친구나 가족 소개 페이지를 만들 때는
이 한 줄만 입력하면 돼요.
▶ /intro-page 호출해서 진행해줘.
인터뷰부터 다시 시작해서 새 페이지를 만들어줘요.
심슨
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
이 경험에서 배운 것 3가지
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
하나. AI는 시키는 게 아니라 같이 하는 거예요
"소개 페이지 만들어줘" 했을 때 바로 코드를 만들지 않았어요.
먼저 저한테 물어봤어요. 이름이 뭔지, 어떤 느낌을 원하는지.
AI가 학습 메이트처럼 같이 만들어가는 느낌이었어요.
둘. AI를 내 스타일대로 만들 수 있어요
CLAUDE.md 파일로 AI가 어떻게 행동할지 미리 정해둘 수 있어요.
"한 번에 하나씩 물어봐" 라고 써두면 정말 그렇게 해요.
AI한테 일하는 방식을 가르치는 게 가능하다는 게 신기했어요.
셋. 한 번 한 작업은 자산이 돼요
스킬로 저장해두면 다음에 또 쓸 수 있어요.
코딩을 배운 게 아니라 흐름을 자산으로 만든 거예요.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
여러분도 할 수 있어요
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
이 글에서 회색 박스 안의 텍스트를 그대로 복사해서
AI에게 붙여넣기만 하면 똑같이 따라할 수 있어요.
코딩 지식? 필요 없어요.
디자인 감각? AI가 선택지를 줍니다.
필요한 건 내 이름과 내 링크뿐이에요.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
작성일: 2026년 5월
사용 도구: Claude Code (claude.ai/code)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
