'학습성찰일지' 앱의 기획부터 설계까지

배경

아이디어는 있었다. "아이들이 배운 걸 스스로 정리하게 만드는 앱을 만들고 싶다."

근데 기획을 끝내고 나면 다음에 뭘 해야 하는지 몰랐고, 대화를 하다보면 그냥 막연한 아이디어만 남았다.

로그인 구현이니 DB 설계니 API 구조니 하는 것들은 들어봤어도, 어떻게 어떤 걸 사용해야 하는지 전혀 감을 잡지 못했다.

과정

먼저 /thinking-partner 스킬로 아이디어를 기획으로 정리했다. (이 과정은 지난 사례글 참고)

기획이 끝나자 Claude Code가 이렇게 물었다.

"다음 단계로 넘어가고 싶을 때 /brainstorm 으로 기능 설계를 구체화할 수 있어요."

솔직히 말하면, 혼자였다면 이 단계가 있다는 것 자체를 몰랐을 것이다. 그리고 사용할 수 있다는 것도... 그냥 계속 대화만 했겠지...

AI가 제안한 대로 /brainstorm 스킬을 실행했다.

스킬이 설계에 필요한 결정들을 하나씩 물어봤다.

  • "로그인은 어떻게 할 건가요?" → 구글 + 카카오 중에 고름

  • "어떤 도구 조합으로 만들 건가요?" → 3가지 선택지를 표로 비교해서 보여줬다 → 내 조건(3주, 혼자, AI 활용)에 맞는 걸 골랐다

  • "화면은 몇 개, 어떻게 구성할까요?" → 4개 화면으로 정리됨

  • "AI 피드백은 언제, 어떻게 만들어줄 건가요?" → 일지 저장 후 자동 생성하는 방식으로 결정

내 조건을 설명하니 AI가 비교표를 만들어줬다. 비교표도 상세하게 잘 정리되어 있어서 이해하기 쉬웠다.

한국어 웹사이트 스크린샷
한국 컴퓨터 화면의 스크린샷

결과

대화가 끝나자 설계 문서가 자동으로 만들어졌다.

완성된 항목

내용

도구 조합

Next.js + Supabase + Gemini API

화면 구성

4개 페이지 명세 완성

데이터 구조

3개 항목 (사용자/과목/학습일지)

AI 기능 설계

어떻게 피드백을 만들지 방식까지 확정

  • 전: 기획은 있는데 어떻게 만들지 전혀 몰랐음

  • 후: 잘은 모르지만, 어쨌든 전문적으로 보이는 문서가 완성됨

한국 컴퓨터 화면의 스크린샷

배운 점

첫 번째 — AI가 다음 단계를 알려준다 내가 몰랐던 건 기술이 아니라 "순서"였다. 기획 → 설계 → 구현이라는 흐름 자체를 혼자선 생각하기 어려웠는데, Claude Code가 단계마다 무엇을 해야 하는지를 제안해줬다.

두 번째 — "비교해줘"라고 물으면 결정이 쉬워진다 "뭐가 좋아?"라고 물으면 애매한 답이 나온다. "내 조건에 맞게 3가지를 비교해줘"라고 하니 한눈에 보고 결정할 수 있었다.

세 번째 — 개발을 몰라도 '결정'은 할 수 있다 도구 조합이나 화면 구조를 직접 짤 줄 몰라도, AI가 제안한 것 중 뭐가 내 상황에 맞는지는 판단할 수 있다. 비개발자도 설계자가 될 수 있다는 걸 경험했다.

일단 이렇게 설계 문서가 완성되었으니 이제 구현만 하면 된다.
만들어보면서 또 중간에 수정사항들이 생기겠지만... 흐름을 조금은 알 것 같다.

3
3개의 답글
지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 아침,
읽고 바로 써먹을 AI 소식만