사례 따라하기 — 이 템플릿은 어떻게 태어났나

이 사례, 어디서 왔나

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

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

무엇을 만들었나

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

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

따라 써볼 프롬프트 4가지

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

1. 처음 방향을 잡을 때

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

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

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

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

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

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

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

막혔다 푼 이야기

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

개념 풀이

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

개념 테이블

오늘 챙긴 것

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