소개
시도하고자 했던 것과 그 이유
"AI에게 시키면 뭔가 뚝딱 만들어주겠지"라는 기대로 VS Code를 열었다가, 정작 어떻게 말을 꺼내야 할지 막막했던 경험이 있으신가요?
저도 그랬습니다. 이번에 시도한 건 단순히 링크트리 페이지를 만드는 것이 아니라, AI와 대화하는 방식 자체를 익히는 것이었습니다. 코드를 몰라도, 디자인을 몰라도 — 질문에 답하는 것만으로 나만의 자기소개 페이지가 완성되는 경험을 해보고 싶었습니다.
만든 것: index.html 파일 하나로 동작하는 미니 링크트리 페이지 대상: 코딩 경험이 없는 초보자 핵심 방법: PDCA 라이브코딩 사이클 + AI 인터뷰 방식
진행 방법
1단계 — AI 행동 가이드 파일 만들기 (CLAUDE.md)
가장 먼저 한 일은 AI가 어떻게 행동할지 규칙을 정하는 파일을 만드는 것이었습니다. 이 파일을 프로젝트 폴더에 넣어두면, 이후 대화할 때마다 AI가 이 규칙을 기억하고 따릅니다.
사용한 프롬프트:
이 폴더에 CLAUDE.md 파일을 만들어줘. 이 파일은 앞으로 이 폴더에서
작업할 때 너(AI)가 어떻게 행동할지 정해두는 학습 가이드야.
다음 내용을 담아줘:
## 이 폴더의 목적
사용자가 AI와 함께 학습하는 방식 자체를 익히는 곳.
## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 사용자가 막연한 부분을 질문으로 끌어낸다
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중
## 작업 방식 — PDCA 라이브코딩 사이클
어떤 요청이든 다음 4단계로 진행한다.
1. Plan (계획): 사용자가 원하는 걸 한두 줄로 다시 확인하고
큰 그림을 설명한 뒤 "이렇게 진행할게요" 동의 받기
2. Do (실행): 작은 투두로 쪼개서 진행 상황을 보이면서 작업
3. Check (점검): 결과를 사용자에게 보여주고 피드백 받기
4. Act (개선): 피드백 받은 부분만 정확히 수정
결과로 만들어진 CLAUDE.md:
# CLAUDE.md — AI 행동 가이드
## 이 폴더의 목적
사용자가 AI와 함께 학습하는 방식 자체를 익히는 곳.
## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 사용자가 막연한 부분을 질문으로 끌어낸다
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중
## 작업 방식 — PDCA 라이브코딩 사이클
1. Plan (계획): 큰 그림 설명 후 동의 받기
2. Do (실행): 작은 단위로 쪼개서 진행
3. Check (점검): 결과 공유 후 피드백 받기
4. Act (개선): 피드백 부분만 정확히 수정
2단계 — 링크트리 페이지 만들기 (인터뷰 방식)
두 번째 프롬프트가 핵심입니다. 바로 코드를 짜달라고 하지 않고, AI가 먼저 인터뷰를 하도록 요청했습니다.
사용한 프롬프트:
미니 링크트리(자기소개 페이지)를 index.html 한 개 파일로 만들고 싶어.
요구사항:
- 모바일 비율 (세로형, 최대 너비 420px)
- 구조: 원형 아바타(이모지 또는 이니셜) → 이름 → 한 줄 소개 → 링크 버튼 세로 정렬
- 디자인: Google Fonts 한글 폰트(Pretendard 등), 부드러운 그림자, hover 효과
- CSS는 inline (외부 파일 없이 한 파일로)
CLAUDE.md에 적힌 PDCA 라이브코딩 방식대로 진행해줘.
바로 코드 짜지 말고, 먼저 자기소개 인터뷰랑 디자인 인터뷰부터 해줘.
[자기소개 인터뷰] 한 번에 하나씩 물어봐줘 — 이름·닉네임,
한 줄 소개, 인스타·링크드인·이메일·블로그 등 연결할 곳.
[디자인 인터뷰] 다음 방식으로 진행해줘:
1. 요즘 트렌디한 웹/링크트리 디자인 스타일을 6개 정도 리스트로 보여줘.
2. 사용자가 번호로 고르거나 응용 답변할 수 있게 안내해줘.
3. 색감도 4~5개 팔레트 리스트로 보여주고 고르게 해줘.
4. 마지막으로 참고 스크린샷 안내도 해줘.
AI는 이 프롬프트를 받고 바로 코드를 짜는 대신, 아래처럼 단계적으로 인터뷰를 진행했습니다.
인터뷰 흐름 요약
단계
AI의 질문
나의 답변
Q1
이름 또는 닉네임이 뭔가요?
YEJI
Q2
한 줄 소개를 알려주세요
(3개 후보 중) 데이터 분석가 · AI와 함께 탐험 중 🌱
Q3
연결할 링크를 알려주세요
GPters 프로필 URL
스타일
6가지 스타일 중 선택
6번 네오 미니멀
색감
5가지 팔레트 중 선택
1번 크림 & 차콜
3단계 — 결과물
인터뷰가 끝나자 AI가 자동으로 index.html을 생성했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>YEJI</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css" />
<style>
:root {
--bg: #FAF8F5;
--surface: #FFFFFF;
--ink: #1C1C1E;
--ink-sub: #6B6B6E;
--border: #E8E6E1;
--radius: 14px;
--shadow: 0 2px 12px rgba(28,28,30,0.07);
--shadow-hover: 0 6px 24px rgba(28,28,30,0.13);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Pretendard', sans-serif;
background: var(--bg);
color: var(--ink);
min-height: 100dvh;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 60px 20px 80px;
}
.card {
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
align-items: center;
}
.avatar {
width: 88px; height: 88px;
border-radius: 50%;
background: var(--ink);
color: var(--bg);
font-size: 1.6rem; font-weight: 600;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow);
margin-bottom: 20px;
}
.name { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.12em; margin-bottom: 10px; }
.bio { font-size: 0.9rem; color: var(--ink-sub); text-align: center; margin-bottom: 36px; }
.links { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 16px 24px;
border-radius: var(--radius);
background: var(--surface); color: var(--ink);
font-family: inherit; font-size: 0.92rem; font-weight: 500;
text-decoration: none;
border: 1px solid var(--border);
box-shadow: var(--shadow);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
background: var(--ink); color: var(--bg);
}
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { background: #3a3a3c; }
.btn.disabled { opacity: 0.38; pointer-events: none; }
.footer { margin-top: 48px; font-size: 0.75rem; color: var(--border); letter-spacing: 0.06em; }
</style>
</head>
<body>
<div class="card">
<div class="avatar">YJ</div>
<h1 class="name">YEJI</h1>
<p class="bio">데이터 분석가 · AI와 함께 탐험 중 🌱</p>
<nav class="links">
<a class="btn primary" href="https://www.gpters.org/member/tXyGjWRglb"
target="_blank" rel="noopener noreferrer">
<span>🚀</span> GPters 프로필
</a>
<a class="btn disabled" href="#" aria-disabled="true">
<span>📷</span> 인스타그램 (준비 중)
</a>
<a class="btn disabled" href="#" aria-disabled="true">
<span>💼</span> 링크드인 (준비 중)
</a>
</nav>
<p class="footer">© 2026 YEJI</p>
</div>
</body>
</html>
결과와 배운 점
배운 점과 나만의 꿀팁
CLAUDE.md가 생각보다 강력합니다. AI에게 행동 방식을 미리 정해두면, 매번 "단계적으로 해줘", "인터뷰 먼저 해줘"라고 말하지 않아도 됩니다. 한 번 만들어두면 이후 대화에서 계속 적용됩니다.
"바로 코드 짜지 말고"가 핵심 문장이었습니다. 이 한 줄 덕분에 AI가 결과물을 던지는 대신 나의 취향과 정보를 먼저 물어봤고, 그 결과 내가 실제로 원하는 페이지가 만들어졌습니다.
선택지를 받으면 훨씬 쉽습니다. 디자인 스타일이나 색감을 "알아서 해줘"라고 하면 막막하지만, 6개 중 하나 고르는 방식으로 바꾸니 결정이 쉬웠습니다.
시행착오
처음에는 한 줄 소개를 뭐라고 써야 할지 몰라서 3개를 늘어놓았는데, AI가 "어떤 게 지금 가장 나에게 가깝게 느껴지나요?"라고 다시 물어봐 줘서 선택할 수 있었습니다. 막힐 때 답을 바로 얻으려 하기보다 여러 후보를 던지고 고르는 방식이 잘 통했습니다.
SNS 링크가 아직 없어서 일단 "준비 중" 버튼으로 채워뒀습니다. 나중에 링크가 생기면 코드에서
href="#"를 실제 주소로 바꾸고disabled클래스를 지우면 됩니다.
앞으로의 계획
SNS 계정이 생기면 링크 버튼 업데이트하기
배경에 은은한 패턴이나 그라디언트 추가해보기
GitHub Pages나 Netlify로 실제 인터넷에 배포해보기
도움 받은 글 (옵션)
지피터스 커뮤니티 — AI 활용 사례 참고
Pretendard 폰트 공식 CDN — 한글 폰트 설정 참고
