학습 여정을 추적할 APP이 필요했는데, AI가 단 한 번의 프롬프트로 30분 안에 만들었습니다

Source: Dev.to

Overview

여러 도구를 사용해 Learning Hub App을 만들려고 몇 달을 보냈지만, 하나를 고치면 또 다른 것이 깨지는 악순환에 빠졌습니다. 이번에는 Goose coding agent와 Claude Opus 4.5에 단 하나의 명확한 프롬프트만 주었습니다—.prd 파일은 필요 없었습니다. 그 결과, 30분도 채 안 되는 시간 안에 완전한 기능을 갖춘 앱이 구축, 테스트, 사용 준비까지 마무리되었습니다.

Prompt Used

I would like you to build me an app so that I can easily manage URLs for blog posts, podcasts, videos and other things that I would like to learn when it comes to AI. It would be great to be able to easily add the URL and then have a title and description field which can be populated when adding it. Search by category would be great. I would be cool to have some sort of system like a todo list so when it is done it goes to a different place but is still findable should I want to share it with someone. Maybe even notes so I could add some notes on it for later findings or note taking. Should be able to prioritize things so that I learn things based on a particular order—maybe drag‑and‑drop so I can change it. It should be a fun app that I can easily deploy, nice and easy on the eye. It would also be great to have a section where I can put ideas on content creation based off of the stuff I have learned (e.g., blog posts, videos, etc.). Can you come up with a plan for this?

Generated Plan

에이전트는 **“AI Learning Hub”**라는 포괄적인 계획을 제시했습니다. 여기에는 다음 내용이 포함됩니다:

• 핵심 기능 개요
• 기술 스택 권장 사항
• 데이터 구조
• UI 레이아웃 컨셉
• 구축 단계
• 향후 개선 사항(추가 기능)

몇 가지 사소한 조정을 거친 뒤, 에이전트는 계획을 구현하기 시작했습니다.

Build Process

• Implementation: 앱은 에이전트에 의해 자동으로 생성되었습니다.
• Testing: Playwright MCP를 사용해 에이전트가 엔드‑투‑엔드 테스트를 실행했으며, 제가 지켜보는 동안 링크를 추가하고, 필터를 사용하며, 실제 사용자처럼 UI와 상호작용했습니다. 모든 것이 정상적으로 동작함을 확인했습니다.

Features Implemented

• 블로그 포스트, 팟캐스트, 비디오 등 다양한 리소스의 URL 관리.
• URL을 추가하면 자동으로 제목과 설명을 추출.
• 카테고리 기반 검색.
• Todo‑스타일 워크플로우: 완료된 항목은 “completed” 섹션으로 이동하지만 여전히 검색 가능.
• 각 항목에 대한 메모 필드.
• 드래그‑앤‑드롭을 통한 우선순위 재배열.
• 빠르게 배포할 수 있는 간단하고 눈에 편안한 UI.
• 학습한 내용을 기반으로 한 콘텐츠 아이디어 보드(블로그 포스트, 비디오 등).

Adding URLs

새 리소스를 추가하려면 Goose 인터페이스에 URL을 붙여넣기만 하면 됩니다. 설정된 Playwright MCP가 메타데이터를 가져와 앱을 자동으로 채워 주므로 수동 코딩이 필요 없습니다.

Reflections

• 편집기를 열거나 생성된 코드를 직접 살펴보지는 않았습니다. 앱이 의도대로 동작하는 것이 이번 프로젝트에서 제가 필요로 한 전부였습니다.
• 코드 품질도 중요하지만, 현재는 LLM과 에이전트가 깨끗하고 표준을 준수하는 코드를 만든다고 믿고 있습니다.
• 추후 추가 테스트와 성능 검사를 진행하고, 풀‑리퀘스트 단계에서 코드를 검토할 계획이지만, 이번 워크플로우의 속도와 편리함에 크게 감명받았습니다.

Try It Yourself

이 경험을 직접 재현하고 싶다면 위의 프롬프트를 사용해 보세요. 능력 있는 코딩 에이전트(예: Goose + Claude Opus 4.5)가 나머지를 처리해 줄 것입니다. 몇 분 안에 AI‑학습 허브를 직접 만들어 보세요!