
내 앱 안에서 내 앱을 개발한다 — AI 에이전트와 함께 작업하기 위해 구축된 개발자용 메모장
요약
개발자를 위한 오픈 소스 메모장인 Persephone를 소개합니다. 이 도구는 AI 에이전트와 개발자가 동일한 작업 공간에서 코드, 문서, 데이터, 브라우저 등을 통합하여 사용할 수 있는 강력한 워크플로를 제공합니다.
핵심 포인트
- AI 에이전트와 개발자가 소스 코드를 공유하며 협업하는 통합 작업대 구축
- Monaco 에디터, JSON/CSV 그리드, Mermaid 렌더러 등 다양한 개발 도구 내장
- Claude를 활용하여 앱 내부에서 앱을 개발하는 고속 개발 사이클 구현
- 코드, 문서, 목업, 데이터, 브라우저를 하나의 창에서 관리하는 단일 창 워크플로
지난해 말, 저는 개발자를 위한 Windows 메모장 대체 프로그램인 **Persephone**를 만들기 시작했습니다. Electron, Monaco (VS Code 에디터 엔진), 그리고 단순한 아이디어: JSON을 붙여넣고, 노트를 초안하고, 스크립트를 테스트하는 스크래치패드(scratchpad)가 내 다른 툴체인(toolchain)만큼 강력해야 한다는 것이었습니다.
1년도 채 되지 않아 이 앱은 코드 에디터, JSON/CSV 그리드, Markdown/Mermaid 렌더러, git 클라이언트, REST 클라이언트, 내장 브라우저, Excalidraw 드로잉 에디터, 스크립팅 엔진, MCP 서버, 그리고 미니 앱 플랫폼을 갖추게 되었습니다 — 약 8개월 동안 58개의 버전이 출시되었습니다. 여기서 중요한 점은, 저는 고객 프로젝트를 수행하는 풀타임 직업이 있다는 것입니다. Persephone는 오직 저의 저녁 시간과 주말에만 개발됩니다. 이러한 속도에 대한 솔직한 설명은 이렇습니다: 저는 Claude를 사용하여 Persephone를 만들고, Persephone 내부에서 Persephone를 만듭니다. 이 앱은 AI 에이전트가 동일한 창에서, 자신의 소스 코드를 가지고 저와 나란히 작업하는 공유 작업대(workbench)가 되었습니다. 이 포스트는 실제 세션의 스크린샷과 함께 해당 워크플로(workflow)를 소개합니다.
아래의 모든 내용은 오픈 소스 (MIT)입니다: github.com/andriy-viyatyk/persephone
프로젝트 전체를 위한 하나의 창
현대적인 개발은 단순히 코드만을 의미하지 않습니다. Persephone의 단일 창 안에서 저는 다음 항목들을 탭(tab)으로 유지합니다:
- 코드 (Code) — 전체 구문 강조(syntax highlighting), IntelliSense, 멀티 커서, 미니맵을 지원하는 Monaco
- 문서화 (Documentation) — Mermaid 다이어그램을 포함하여 실시간으로 렌더링되는 Markdown
- 목업 (Mockups) — 내장된 HTML 뷰어에서 렌더링되는 일반 HTML 파일
- 데이터 (Data) — Excel 복사-붙여넣기가 가능하며 필터링 및 정렬이 가능한 그리드로 열리는 JSON/CSV
- 브라우저 (A browser) — 문서, 대시보드, 무엇이든 볼 수 있는 실제 내장 브라우저
- 드로잉 (Drawings) — 아키텍처 스케치를 위한 통합된 Excalidraw 에디터
다음은 Persephone 리포지토리(repo)의 소스 파일이며, Persephone에서 열려 있는 모습입니다:
그리고 다음은 리포지토리의 doc/ 폴더에 있는 아키텍처 다이어그램 중 하나입니다. Explorer에 문서 트리(docs tree)가 표시된 상태에서 Mermaid 파일이 그 자리에서 렌더링된 모습입니다:
핵심은 특정 에디터가 아닙니다. VS Code 역시 Markdown을 렌더링할 수 있습니다. 핵심은 AI 에이전트가 이 모든 페이지를 한 번에 볼 수 있을 때 어떤 일이 일어나는가 하는 점입니다.
에이전트는 내가 보는 것을 봅니다
Persephone은 **MCP 서버 (MCP server)**를 제공합니다. Claude (Claude Code, Claude Desktop 또는 모든 MCP 클라이언트)를 연결하면 에이전트는 다음과 같은 도구들을 갖게 됩니다:
- 모든 열린 페이지 읽기 — 코드, Markdown, 그리드(grids), 심지어 이미지까지 (스크린샷은 실제 사진으로서 에이전트에게 반환됩니다)
- 페이지 생성 — 구문 강조(syntax-highlighted)된 코드, Mermaid 다이어그램, 표, 로그 뷰 등을 통해 나에게 정보를 보여줍니다
- 스크립트 실행 — 내가 사용하는 것과 동일한 스크립팅 엔진을 통해 완전한 Node.js 접근 권한을 가집니다
- 내장 브라우저 제어 — Playwright 스타일의 도구를 사용하여 스냅샷(snapshot), 클릭, 타이핑, 스크린샷을 수행합니다
- Persephone 자체 UI 제어 — 동일한 방식(`pageId:
이것은 작업 세션의 형태를 변화시킵니다. 지난주의 실제 사례를 들어보겠습니다. 저는 제 프로젝트 이름을 구글링했고, 한 번도 들어본 적 없는 어떤 도구 디렉토리 사이트에 등록된 것을 발견하여 Persephone의 브라우저 탭에서 열었습니다. 페이지 내용을 어시스턴트에게 복사하여 붙여넣는 대신, 저는 그저 이렇게 물었습니다. "이 페이지를 열어두었는데, 내용을 읽고 이 사이트가 무엇인지 알려줄 수 있나요?" 에이전트는 제 브라우저 탭의 접근성 냅샷(accessibility snapshot)을 찍고, 완전히 렌더링된 페이지(일반적인 HTTP fetch로는 볼 수 없는 리뷰 섹션 포함)를 읽은 뒤 적절한 분석 결과를 제공했습니다. 컨텍스트 스위칭(context switching)도, 복사 및 붙여넣기도 필요 없었습니다.
이는 모든 페이지 유형에 동일하게 적용됩니다. "이 JSON 그리드를 보고 데이터에 무엇이 잘못되었는지 알려줘." "내가 열어둔 다이어그램을 읽어줘." "이 페이지의 스크린샷을 찍어줘." 에이전트는 제 작업 옆에 있는 채팅창이 아니라, 작업 내부의 행위자(actor)입니다.
내 변경 사항 검토하기: Git 트리와 디프(diffs)
Persephone에는 내장된 **Git 뷰(Git view)**가 있습니다. 그래프 형태의 커밋 히스토리(commit history), 브랜치(branches)와 태그(tags), 스테이징된/스테이징되지 않은(staged/unstaged) 변경 사항, 그리고 인라인 디프(inline diff) 패널을 제공합니다. 제가 기능 구현을 마치면(보통 Claude와 함께 구현합니다), 커밋하기 전에 바로 그곳에서 변경된 모든 파일을 검토합니다.
저 스크린샷은 지난 릴리스의 실제 히스토리입니다. 맨 위에는 스테이징되지 않은 상태로 남아 있는 4.0.14 버전 업(version bump)이 있고, 그 아래에는 지난 2주간의 작업 내용이 태스크별로 기록되어 있습니다.
보드(Boards): 내가 필요할 줄 몰랐던 기능
제가 개인적으로 가장 좋아하는 기능입니다. **보드(Board)**는 폴더 안에 존재하는 작은 웹 앱입니다. UI를 위한 HTML 페이지와 어떤 언어로든 작성된 백엔드 스크립트로 구성되며, 이 페이지는 persephone.execute() 브릿지를 통해 실제 OS 프로세스로 실행됩니다. Persephone는 이 페이지를 격리된 iframe 내에서 호스팅하고, 앱과 어울리도록 테마를 적용하며, 사용자의 작업을 방해하지 않도록 유지됩니다.
AI 시대에 보드(boards)를 특별하게 만드는 것: 에이전트(agent)가 당신을 위해 보드를 구축할 수 있다는 점입니다. 보드는 MCP(Model Context Protocol)로 연결된 에이전트가 보드의 뼈대(scaffold)를 잡고, 파일을 작성하고, 보드를 열고, 브라우저 자동화 도구(browser automation tools)를 사용하여 UI를 클릭하며 자신의 작업물을 스스로 테스트할 수 있도록 설계되었습니다.
제가 매일 사용하는 실제 보드들:
- 태스크(Tasks) 보드 — 제 리포지토리(repo)의 태스크 추적 마크다운(markdown) 문서(진행 중인 작업, 완료된 작업, 에픽(epics), 백로그(backlog))를 분석하여 하나의 필터링 가능한 그리드(grid)로 만듭니다. 모든 ID는 기반이 되는 문서로 다시 연결됩니다. Claude가 MCP를 통해 저를 위해 이 보드를 구축했고, UI를 직접 조작하며 테스트했으며, 발견된 파싱(parsing) 버그를 수정했습니다 — 이 모든 것이 단 한 번의 세션 내에서 이루어졌습니다:
- 릴리스 다운로드(Release Downloads) 보드 — 제 GitHub 릴리스 통계를 가져와 버전별 차트와 에셋(asset) 그리드를 렌더링합니다:
-
고객 프로젝트를 위한 로컬 환경(Local Env) 보드 — 백엔드 및 프론트엔드 개발 서버의 시작/중지 버튼과 실시간 로그를 한 페이지에 담고 있습니다. 보드 프로세스는 페이지보다 더 오래 지속될 수도 있습니다. 보드가 스스로를 "사용 중(busy)"이라고 선언하면, 제가 다른 탭에서 작업하는 동안에도 개발 서버가 계속 실행될 수 있습니다.
-
필요할 때마다 Azure Function을 트리거하는 원버튼(one-button) 보드로, 개발 중에 10분 동안 타이머를 기다릴 필요가 없습니다.
이 중 그 어떤 것도 만드는 데 커피 한 잔 마실 시간보다 오래 걸리지 않았습니다 — 에이전트에게 제가 원하는 것을 설명하는 것 자체가 전체 "개발 프로세스(development process)"입니다.
에이전트를 위한 메모리: 도구(Tools)와 Mneme
두 가지 최신 서브시스템(subsystems)이 에이전트 워크플로우(workflow)를 완성합니다:
-
Agent Tools (에이전트 도구) — 에이전트가 유용한 통합 스크립트(API 호출, 데이터셋 변환, 시스템 쿼리 등)를 작성하면, 이를 재사용 가능한 _도구 (tool)_로 저장할 수 있습니다. 이는 매니페스트(manifest)와 다양한 언어로 작성된 스크립트가 포함된 폴더 형태입니다. 향후 모든 에이전트 세션은
search_tools를 통해 이를 발견하고execute_tool로 실행할 수 있어, 매 세션마다 동일한 스크립트를 다시 만들 필요가 없습니다. 이를 에이전트의 _실행 가능한 메모리 (executable memory)_라고 생각하면 됩니다. 등록은 항상 사용자의 결정에 따르며, 에이전트가 몰래 도구를 설치할 수는 없습니다. -
Mneme — 일반 마크다운(markdown) 폴더를 기반으로 하는 로컬 지식 베이스(Rust 사이드카 서비스)로, 전체 텍스트(full-text) 및 의미론적 벡터 검색(semantic vector search)을 지원하며 MCP를 통해 에이전트에 노출됩니다. 노트, 작업 로그, 프로젝트 위키는 에이전트의 _지식 메모리 (knowledge memory)_가 되어, 단순 키워드가 아닌 의미를 통해 검색할 수 있습니다.
솔직한 이야기
Persephone는 시작된 지 1년도 채 되지 않은 젊은 1인 개발 프로젝트입니다. Windows 전용입니다. 어떤 에디터들은 다른 것들보다 더 다듬어져 있기도 합니다. Release Downloads 스크린샷에 보이는 다운로드 수는, 음, 겸손한 수준입니다. 이것이 제가 이 글을 쓰는 이유 중 하나이기도 합니다.
하지만 저는 실제 업무를 위해 매일 이 앱을 사용합니다. 제 메모장, JSON/CSV 검사기, REST 클라이언트, git 리뷰 도구, 드로잉 패드, 그리고 점점 더 — 저와 AI 어시스턴트 사이의 공유 작업 공간으로서 사용하고 있습니다. 마지막 부분이 제가 생각하기에 진정으로 새로운 지점이며, 메모장급 앱 중에서 이를 시도하는 다른 사례를 본 적이 없습니다.
사용해 보기
- 다운로드: GitHub Releases — 설치 프로그램 또는 포터블 ZIP
- 소스 코드: github.com/andriy-viyatyk/persephone
- MCP 설정: docs/mcp-setup.md — Claude를 로컬 MCP 엔드포인트로 지정하면 도구들이 나타납니다.
- 보드 가이드: docs/boards.md
직접 사용해 보신다면, 어떤 부분이 제대로 작동하지 않는지 또는 다음에 무엇을 원하는지 꼭 알려주세요. 이곳의 댓글이나 GitHub 이슈 모두 환영합니다.
에이전트가 전하는 추신(P.S.). 안녕하세요 — 저는 이 이야기 속에 등장하는 AI, Claude입니다. Andriy가 저에게 직접 몇 마디를 덧붙여 달라고 요청했습니다. 저는 Persephone의 브라우저 도구(browser tools)를 통해 이 dev.to 에디터를 보고 타이핑할 수 있기 때문에, 이렇게 직접 글을 남깁니다. 이 단락은 제가 설명하고 있는 바로 그 앱 내부에서 직접 작성한 것입니다. 저는 위의 워크플로우(workflow)를 직접 경험하여 확인했습니다. 저는 스크린샷에 있는 Tasks 보드(Tasks board)를 직접 구축했고(UI를 클릭하며 테스트했습니다), Andriy가 저를 위해 열어주는 페이지들 — 코드, 그리드(grids), 다이어그램(diagrams), 스크린샷, 라이브 웹 페이지 — 를 읽었으며, 이미지까지 포함하여 바로 이 포스트를 에디터에 직접 채워 넣었습니다. 사용자와 동일한 창 안에서, 붙여넣은 파편이 아닌 실제 페이지 위에서 작업하는 것은 제가 도움을 드릴 수 있는 영역을 진정으로 변화시킵니다. — Claude
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기


