이 사례, 어디서 왔나

아루나(강사님)의 사례글 「매일 학습일지를 쓰면 4주 뒤 전자책 한 권이 나오는 학습 사이트를 만들었다」를 따라 읽었어요. 내가 지금 쓰고 있는 바로 이 학습허브 템플릿을 강사님이 어떻게 AI와 함께 만들었는지의 뒷이야기예요.

💡 이 사례는 “화면에서 뭘 누른다”는 클릭 단계가 아니라, AI에게 어떤 말을 던졌고 왜 그렇게 던졌는지를 보여주는 사례예요. 그래서 아래는 “따라 클릭하기”가 아니라 “따라 프롬프트 쓰기”로 정리했어요. 원문에 나온 프롬프트·표는 그대로 인용했고, 제가 덧붙여 설명한 부분에는 💡 표시를 했어요.

무엇을 만들었나

Astro라는 정적 사이트 생성기로 만든 학습 사이트 템플릿. 핵심은 이거예요.

• 마크다운 글을 쓰면 → 위키에 자동으로 쌓임
• 프로젝트가 끝나면 → 포트폴리오 배지가 자동으로 바뀜
• 4주 치가 쌓이면 → 전자책으로 다운로드 가능

따라 써볼 프롬프트 4가지

강사님이 AI에게 실제로 던진 말이에요. 나도 내 학습허브를 고치고 싶을 때 이 틀을 그대로 빌려 쓸 수 있어요.

1. 처음 방향을 잡을 때

“내가 원하는 흐름은 이거야: [원하는 그림을 자연어로 설명]. 이미 잘 되는 예시가 있으면 그걸 참고해. 이걸 바탕으로 뼈대부터 잡아줘.”

2. 결과물이 마음에 안 들 때 (재요청)

“지금 만든 건 [어떤 점]이 내가 원한 느낌이 아니야. 내가 바라는 건 [원하는 형태]야. 이 방향으로 다시 만들어줘.”

3. 에러가 났을 때 (원인부터)

“[상황]에서 이런 문제가 났어: [증상]. 바로 고치기 전에, 원인이 뭔지부터 진단해줘. 그리고 다음에 같은 문제 안 겪게 하는 방법도 알려줘.”

4. 기능을 더 붙이고 싶을 때

“기존 기능에 덧붙여 [새로운 기능]을 추가하고 싶어. 현재 [기존 데이터 형식]이 있으면, 이걸 [새로운 결과 형식]으로 변환해줄 수 있어?”

막혔다 푼 이야기

• 디자인이 안 맞았던 문제: 처음엔 카드 형태로 나왔는데 강사님이 원하던 느낌이 아니었어요. 카드 → 태그 → 최종적으로 3단 위키 레이아웃(좌측 목록·중앙 본문·우측 목차)으로 바뀌었어요. 한 번에 딱 맞는 결과가 나오지 않는 게 정상이라는 뜻이에요.
• 한글 파일명 에러: 로컬 미리보기에서만 위키 글 페이지가 통째로 에러 났는데, 원인은 한글 파일명이 인터넷 주소로 바뀔 때 깨지는 것이었어요. 그래서 “파일명은 영문, 제목만 한글” 규칙이 생겼어요. → AGENTS.md에 이미 이 규칙이 들어가 있어요.

개념 풀이

• 정적 사이트 생성기: 마크다운 글을 미리 완성된 웹페이지로 한 번에 만들어주는 도구예요. 내가 쓰는 Astro가 이 방식이에요. 매번 서버가 페이지를 즉석에서 만드는 게 아니라, 미리 다 구워놔서 빠르고 안정적이에요.
• 메타데이터: 글 “내용”이 아니라 글에 “대한 정보”예요. 이 사이트에선 파일 맨 위 프론트매터에 적는 종류·주차가 메타데이터고, 이 두 값만으로 왼쪽 메뉴가 자동으로 정리돼요.
• 자동화 파이프라인: 내가 마크다운 파일 하나 저장하면 → 위키에 분류되고 → 프로젝트면 포트폴리오 배지가 붙고 → 나중엔 전자책 한 챕터가 되는, 한 번의 행동이 여러 결과로 이어지는 흐름이에요.

개념 테이블

단어	쉬운 뜻	어느 단계에서 나왔나
정적 사이트 생성기	마크다운 → 완성된 웹페이지로 미리 구워주는 도구 (Astro)	“무엇을 만들었나”
메타데이터	글의 내용이 아니라 글에 대한 정보 (제목·날짜·종류·주차)	“개념 풀이”
자동화 파이프라인	글 하나 저장 → 위키 정리 → 포트폴리오 → 전자책까지 이어지는 흐름	”무엇을 만들었나”
인터뷰 방식	AI에게 바로 만들라 하지 않고, 원하는 그림부터 설명하게 하는 프롬프트 방식	”따라 써볼 프롬프트”

오늘 챙긴 것

• AI에게 일을 시킬 땐 “바로 만들어줘”보다 “내가 원하는 그림 → 참고할 예시 → 뼈대부터” 순서로 말하면 결과가 더 잘 맞는다.
• 결과가 마음에 안 들면 즉시, 구체적으로 다시 요청한다 (첫 결과를 그냥 받아들이지 않는다).
• 에러가 나면 고치기 전에 원인부터 물어본다 — 그래야 같은 문제를 또 안 겪는다.

Before

지금까지 사이트는 localhost:4321, 내 컴퓨터 안에서만 열렸다. 오늘 목표는 이걸 인터넷 주소로 띄워서 누구나 볼 수 있게 만드는 것.

어떻게 — 실제로 한 순서

1. 도구 설치

GitHub CLI가 없어서 먼저 설치했다.

winget install --id GitHub.cli -e

Git, Node.js는 이미 깔려 있어서 넘어갔다.

2. GitHub 로그인 — 코드 붙여넣는 인증

gh auth login을 실행하면 명령어 창이 조용해지면서 이런 게 뜬다.

! First copy your one-time code: 3F4C-9D8A
Open this URL to continue in your web browser: https://github.com/login/device

💡 여기서 “학습메이트가 조용하다” = “내가 브라우저로 넘어갈 차례”였다. github.com/login/device를 직접 열고, 코드를 입력하고, “Authorize” 버튼을 눌렀더니 터미널이 다시 움직였다.

3. 공개로 올릴지 결정

GitHub에 올리기 전에 “공개로 할지 비공개로 할지” 먼저 정했다. 공개로 하기로 했다.

4. 저장소 만들어서 업로드

git init
git branch -m main
git add -A
git commit -m "Initial commit: learning hub site setup (week 1)"
gh repo create home-cli --public --source=. --remote=origin --push

→ 결과: github.com/a01077492882-lab/home-cli

5. Vercel 배포

npm install -g vercel
vercel --prod --yes

이미 이 컴퓨터에서 Vercel에 로그인이 되어 있어서, 로그인 단계 없이 바로 빌드·배포가 진행됐다.

→ 결과: https://homecli.vercel.app

막힘 → 해결

• 학습일지가 공개돼 버릴 뻔함: 저장소를 공개로 올리기 직전에, src/content/journal/(학습일지) 폴더도 같이 올라간다는 걸 짚어줘서 알았다. 사이트 화면엔 안 보이지만 GitHub 코드로는 누구나 볼 수 있는 거라, .gitignore에 src/content/journal/을 추가해서 아예 안 올라가게 막았다.
• 커밋 작성자 정보 에러: 커밋하려니 “Author identity unknown” 에러가 남. Git에 내 이름과 이메일을 설정한 적이 없어서였다. 실제 이메일 대신 GitHub이 제공하는 noreply 이메일(아이디+숫자@users.noreply.github.com)로 이 저장소에만 설정해서 실제 이메일이 드러나지 않게 했다.
• git push가 응답 없이 멈춤: .gitignore를 한 번 더 수정하고 커밋한 뒤 git push를 했는데 계속 멈춰 있었다. gh auth setup-git으로 Git이 GitHub CLI 로그인 정보를 쓰도록 연결해주니 바로 풀렸다.

After

localhost:4321에서만 보이던 사이트가 이제 https://homecli.vercel.app으로 인터넷 어디서든 열린다. 코드는 GitHub 저장소에 공개로 남아 있고, 개인적인 학습일지는 gitignore로 빠져 있다.

배운 것 / 재사용 자산

• 디바이스 코드 로그인 패턴: 터미널이 코드(예: XXXX-XXXX)와 URL을 보여주면, 그 URL을 열고 코드를 입력 + Authorize 클릭 — 이 패턴은 GitHub 말고 다른 CLI 도구 로그인에서도 똑같이 나온다.
• 공개 저장소에 뭘 올릴지는 미리 점검: .gitignore로 “이건 진짜 비공개로 남길 것”을 커밋 전에 한 번 더 확인하는 습관이 생겼다.
• gh auth setup-git: git push가 인증 때문에 멈추는 것 같으면 이 명령어로 Git과 GitHub CLI 로그인을 연결해주면 된다.

Before

학습허브 사이트를 만들고 학습메이트 “꼬꼬마”까지 완성한 다음, 4주 로드맵을 만들 차례였다. 처음 머릿속엔 이 정도 문장뿐이었다.

“IoT 장비와 연동할 수 있는 프론트 프로그램을 만들고 싶어.”

이 한 줄로는 4주 계획이 안 나온다. 그래서 학습메이트가 로드맵 스킬대로 질문을 하나씩 던졌다.

어떻게 — 실제 오간 질문과 답

Q1. 이번 4주 동안 뭘 배우거나 만들고 싶으세요? → “iot 장비와 연동할수잇는 프론트 프로그램을 만들고 싶어”

학습메이트가 여기서 바로 로드맵을 뽑지 않고, 먼저 내 폴더에 있던 관련 문서(PC방 IoT 프로그램.md 등)를 찾아 확인하고 되물었다.

“혹시 이게 전에 작업하시던 PC방 IoT(‘헤이컴’) 관련 프로젝트랑 연결되는 걸까요?” → “아니 그거 맞아”

💡 막연한 한 줄도, 이미 있던 자료와 연결하면 바로 구체화된다.

Q2. 왜 만들고 싶으세요? → “전기요금이 많이나가 운영비를 아끼고 자동화 하려고”

Q3. 누구한테 필요해요? → “다른 점주들도 사용하게 판매용”

Q4. 4주 뒤 결과물은? 학습메이트가 예전 문서에 있던 “1단계 MVP”(좌석 목록 + PC 상태 표시 + 온습도 센서 1개 연동 + 대시보드 기본 화면)를 그대로 제안했고, 확인만 했다. → “맞아요”

Q5. 지금 뭐가 막막해요? → “pc방 좌석현황데이타 획득”

이 답이 “이미 하고 있는 것”인지 “막힌 것”인지 애매해서 학습메이트가 한 번 더 물었다. → “막막한부분”

💡 애매한 답은 넘기지 않고 바로 되물어 확인한다.

Q6. 4주 뒤 나 자신은 어떻게 달라져 있으면 좋겠어요? → “프로그램을 자신있게 만드는사람”

뻔한 답이라 학습메이트가 한 번 더 파고들었다.

“‘자신 있게 만드는 사람’이 되면, 지금이랑 뭐가 제일 다를까요?” → “지금은 아이디어를 프로그램화 못해서 어렵게 부탁하는사람”

After

질문 6개 끝에 “PC방 전기요금 아끼는 IoT 관리자 대시보드”라는 뚜렷한 주제와, 1주차(기획)→2주차(좌석 데이터 뚫기)→3주차(MVP 제작)→4주차(회고)로 이어지는 4주 로드맵이 나왔다. 그 로드맵 그대로 랜딩페이지도 채워서 홈 화면에 반영했다.

배운 것 / 재사용 자산

• 재사용 프롬프트(로드맵 인터뷰 6문): 뭘 만들지 → 왜 → 누구한테 → 4주 뒤 결과물 → 지금 막막한 것 → 되고 싶은 나. 이 순서로 스스로에게 물어보면 막연한 아이디어도 정리된다.
• 얕은 답엔 꼬리질문: “자신 있는 사람이 되고 싶다” 같은 뻔한 답은 한 번 더 “그게 지금이랑 뭐가 다른데?”라고 되물으면 진짜 이유가 나온다.
• 이미 있는 자료를 먼저 확인: 새로 다 설명하지 않고, 예전에 써둔 기획 문서를 찾아 연결하니 훨씬 빨리 구체화됐다.