매일 학습일지를 쓰면 4주 뒤 전자책 한 권이 나오는 학습 사이트를 만들었다

📝 한줄 요약

코딩을 모르는 제가 AI(Claude Code)랑 함께, 공부한 게 하나도 안 버려지고 저절로 쌓이는 학습 사이트 템플릿을 만들었어요. 마크다운 글만 쓰면 위키로 쌓이고, 프로젝트는 자동으로 포트폴리오가 되고, 4주 뒤엔 그게 전자책 한 권으로 묶여요.

바쁘시면 이것만 읽어도 돼요:

• 스터디 수강생이 30일 동안 배운 게 정리 안 해도 실시간으로 쌓이는 사이트가 목표였어요
• 매일 쓴 학습일지 → 사례글 → 위키 → 포트폴리오 → 전자책까지 자동으로 이어져요
• 비개발자는 마크다운 글만 쓰고, 레이아웃·목차·배지는 사이트가 알아서 처리해요
• AI가 처음 만든 걸 그대로 안 받고 3번 뒤엎으며 더 좋은 구조(위키 3단)로 다듬었어요
• 마지막에 "전자책으로 묶자"는 아이디어를 덧붙였더니, 흩어진 기록이 물성 있는 결과물 하나로 응축됐어요

🎯 이런 분들께 도움돼요

• 스터디·강의를 운영하는데, 수강생 결과물이 실용적으로 남았으면 하는 분
• 공부하거나 작업한 게 자꾸 흩어지고 "정리할 엄두가 안 나는" 분
• AI로 뭔가 만들고 싶은데 코딩이 막막한 비개발자
• 진행 과정이 저절로 포트폴리오가 됐으면 하는 분

😫 문제 상황 (Before)

저는 곧 스터디(지피터스 23기)를 여는데, 수강생이 30일 챌린지를 하며 배운 게 실용적으로 손에 남았으면 했어요.

그런데 보통은 이래요. 열심히 공부하고 프로젝트도 만드는데, 그 과정이 여기저기 흩어져요. 나중에 "포트폴리오 정리해야지", "배운 거 정리해야지" 하면 그게 또 큰 일이라 미루게 되고요. 하는 과정은 분명 값진데, 정리를 따로 안 하면 다 날아가는 느낌이었어요.

제가 진짜 원했던 건 이거예요.

내가 하는 모든 과정이 하나도 낭비되지 않고, 일부러 정리하지 않아도 실시간으로 차곡차곡 쌓여서, 그대로 포트폴리오가 되고 결과물이 되는 것.

사실 이건 제 개인 사이트에도 만들고 싶던 뷰였어요. 프로젝트를 진행하면 그게 알아서 포트폴리오가 되는 것. 그걸 이번에 수강생용 학습 사이트로 먼저 구현하게 된 거죠.

🛠️ 사용한 도구

• 도구: Claude Code (Opus)
• 결과물: Astro 정적 사이트 템플릿 (수강생이 복사해서 자기 걸로 씀)
• 특이사항: 저는 코딩을 못 해요. 전부 대화로 만들었어요.

🔧 작업 과정

그냥 "만들어줘"가 아니라, 내가 원하는 흐름부터 설명했어요

먼저 제가 원하는 그림을 AI에게 설명하고, 이미 잘 돌아가는 제 기존 사이트를 참고하게 했어요.

course-renewal/docs/03 읽고 정적 템플릿부터 만들자

AI는 제 설계 문서를 읽고, 제 기존 사이트(아루나 사이트) 구조까지 살펴본 뒤에 뼈대를 잡았어요. 마크다운 파일을 폴더에 넣으면 자동으로 페이지가 되는 구조로요. 수강생은 글만 쓰고, 화면 디자인은 신경 안 써도 되게.

여기서 좋았던 건, AI가 제로에서 상상으로 만든 게 아니라 이미 검증된 제 사이트의 방식을 가져와서 안전하게 옮겼다는 거예요.

AI가 만든 걸 그대로 안 받고, "이건 위키처럼 됐으면 좋겠어"라고 다시 요청했어요

처음엔 배운 자료들이 그냥 카드로 나왔어요. 나쁘진 않았는데, 제가 원한 느낌이 아니었어요.

사례 글이나 학습 자료는 위키 같은 형식으로 나오길 바라거든.
공부를 하면 할수록 학습위키로 쌓이는 거고, 최종적으로 회고 챌린지를 하면서 전자책으로 만들어지는

이 한 마디로 방향이 확 바뀌었어요. AI가 태그로 묶는 방식을 제안했는데, 그것도 제가 "중복되고 불편해 보인다"고 하니까, 결국 왼쪽에 목록 / 가운데 본문 / 오른쪽에 세부 목차가 있는 진짜 위키 형태로 다시 만들었어요.

그리고 여기서 제일 마음에 든 건, 글마다 "몇 주차인지, 어떤 종류인지(개념/사례/회고)"만 적으면 사이트가 알아서 주차별로 정리해준다는 거였어요. 공부할수록 왼쪽 목록이 주르륵 길어지면서 "아, 내가 이만큼 했구나"가 눈에 보이는 거죠.

한 번에 원하는 게 안 나와도, 다시 요청하는 것 자체가 협업이더라고요. 오히려 뒤엎으면서 더 좋은 구조가 나왔어요.

"전자책은 뷰어 말고, 진짜 다운로드가 됐으면 좋겠어"

작업하다 문득 아이디어가 떠올랐어요. 위키에 쌓인 걸 그냥 화면으로 보는 것도 좋지만, 한 권으로 딱 묶여서 손에 잡히면 훨씬 뿌듯하겠다 싶었어요.

전자책은 뷰어 말고 실제로 다운로드 받을 수 있었으면 좋겠어.
그게 더 훨씬 뿌듯할 거 같거든.

그래서 4주 동안 쌓인 위키를 순서대로 묶어 전자책 파일로 내려받는 기능을 넣었어요. 로드맵이 책의 서문이 되고, 주차별 기록이 챕터가 되고요. 처음부터 일관되게 쌓았으니 순서대로 묶기만 하면 책이 되는 거예요. 억지로 짜맞출 필요 없이.

이게 마지막에 덧붙인 건데, 개인적으로 제일 잘한 것 같아요. 흩어진 기록이 물성 있는 결과물 하나로 응축되는 느낌이거든요.

빌드는 되는데 화면만 깨지는, 숨은 버그도 같이 잡았어요

중간에 위키 글 페이지가 전부 에러가 났어요. 이상한 건, 배포용으로 만들 때는 멀쩡한데 미리보기에서만 깨지는 거예요.

AI가 원인을 찾아줬어요. 파일 이름을 한글로 지으면 인터넷 주소로 바뀔 때 깨진다는 거였어요. 그래서 파일 이름은 영어로, 제목만 한글로 쓰게 규칙을 정하고, 그걸 안내문에도 박아놨어요. 나중에 수강생이 똑같이 안 겪게요.

혼자였으면 "왜 안 되지" 하고 한참 헤맸을 텐데, 원인부터 해결까지 금방이었어요.

홈 화면도 "1주차에 직접 만들 랜딩페이지" 자리로 바꿨어요

처음엔 홈이 제 개인 사이트랑 거의 똑같았어요. 근데 생각해보니, 수강생은 1주차에 스스로를 소개하는 랜딩페이지를 만들 예정이었거든요.

1주차에 아이데이션·로드맵 하면서 랜딩페이지를 만들 예정이거든.
그 내용이 홈에 들어가야 해.

그래서 홈을 수강생이 직접 쓰는 소개 글이 들어가는 자리로 바꿨어요. 아직 안 썼으면 "1주차에 여기를 채워요" 안내가 뜨고, 채우면 그게 홈이 되는 식으로요.

✅ 결과 (After)

Before vs After

결과물

수강생이 복사해서 바로 쓸 수 있는 학습 사이트 템플릿. 글을 쓸수록 위키가 자라고, 프로젝트가 포트폴리오가 되고, 4주 뒤엔 전자책이 나와요.

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 내가 원하는 흐름을 먼저 설명했어요. "만들어줘"가 아니라 "내가 원하는 그림은 이거야"를 말하니 AI가 훨씬 정확하게 잡았어요.
2. 이미 잘 되는 걸 참고하게 했어요. 제 기존 사이트를 보게 하니, 상상으로 만든 게 아니라 검증된 방식을 옮겨줬어요.
3. 한 번에 안 나와도 다시 요청했어요. 카드→태그→위키로 뒤엎으면서 더 좋은 구조가 나왔어요. 다시 요청하는 게 곧 협업이에요.

이렇게 하면 안 돼요

1. AI가 처음 준 걸 그냥 받지 마세요. "이게 맞나?" 싶으면 그 느낌을 그대로 말하면 돼요. 그게 더 좋은 결과로 이어져요.
2. 작은 규칙(파일 이름 등)도 놓치지 마세요. 한글 파일명 하나 때문에 사이트가 깨졌어요. 사소해 보여도 AI한테 원인을 물으면 금방 풀려요.

🌍 다른 업무에 적용한다면?

이 "과정이 저절로 결과가 되는" 구조는 학습 사이트에만 쓸 게 아니에요. 프로젝트 기록, 업무 일지, 취미 기록 등 꾸준히 쌓이는 무엇이든 같은 방식으로 만들 수 있어요. 매일 조금씩 남기면 그게 저절로 정리되고, 나중에 한 권으로 묶이는 식으로요.

🚀 앞으로의 계획

이 방식을 제 개인 사이트에도 적용하려고 해요. 사실 원래 제가 원했던 최종 뷰가 이거였거든요 — 프로젝트를 진행하면 그게 실시간으로 포트폴리오가 되고, 전자책으로까지 완성되는 것. 수강생용을 먼저 만들었으니, 이제 제 걸로도 가져오려고요.

📋 재사용 가능한 프롬프트

프롬프트 1: 내가 원하는 흐름부터 설명하고 만들기 시작할 때

나는 [만들고 싶은 것]을 만들고 싶어. 근데 바로 만들지 말고, 내가 원하는 흐름을 먼저 설명할게: [원하는 그림을 자연어로]. 그리고 이미 잘 되는 예시가 있으면 그걸 참고해: [참고할 것 경로/링크]. 이걸 바탕으로 뼈대부터 잡아줘. 내가 코딩을 몰라도 되게, 최대한 단순하게.

프롬프트 2: AI가 만든 게 맘에 안 들 때 (다시 요청)

지금 만든 건 [어떤 점]이 내가 원한 느낌이 아니야. 내가 바라는 건 [원하는 형태]야. 이 방향으로 다시 만들어줘. 여러 방법이 있으면 각각 뭐가 좋은지 알려주고 추천해줘.

프롬프트 3: 원인 모를 에러가 났을 때

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

아루나의 다른 프로젝트가 궁금하다면 → litt.ly/aluna