나는 하루 만에 맞춤형 앱을 만들었다. 그게 흥미로운 부분은 아니다.

Source: Dev.to

지난 밤, 나는 흥미로운 무언가를 만들고 있었기 때문에 너무 늦게까지 깨어 있었다.

그 문장은 예전과는 다른 의미를 가졌다. 1년 전, 새벽 3시 30분까지 깨어 있었던 것은 내가 기능 구현에 몰두하고, CSS와 싸우며, 엣지 케이스를 디버깅하고 있었다는 뜻이었다. 지난 밤에는 반복되는 워크플로우 문제를 인식하는 순간부터 작동하고, 테스트된, 프로덕션‑레디 애플리케이션을 갖게 되었다—약 12시간 안에 (그 중 7시간은 잠을 잤다).

아래는 그 과정이다.

내가 손으로 계속 해결하던 문제

나는 하루 종일 내 프로젝트들을 진행했다:

• agentic development techniques를 사용한 앱 변환 프로젝트를 돕고 있는 고객과의 협업.
• Waykeep – 곧 앱 스토어에 출시될 휴가 추적 앱.
• 내 AI 어시스턴트를 위한 핵심 메모리 시스템 업그레이드.
• 블로그 포스트를 발행.

그 포스트에는 표지 이미지가 필요했고, 내 어시스턴트들이 이를 만드는 데 도움을 주었다. 그들은 HTML을 작성했고, 우리는 레이아웃을 반복해서 수정했으며, 렌더링 라이브러리를 사용해 PNG로 내보냈다.

우리는 이제 여러 차례 이 작업을 해왔다. 매번 과정은 동일하다:

1. HTML 작성.
2. 레이아웃을 반복해서 수정.
3. PNG로 내보내기.

매번 같은 실수가 몇 가지 나타난다. 나는 디자이너가 아니며, 디자이너가 되고 싶지도 않다(예술에 대한 깊은 감상은 있다). 나는 블로그 포스트와 배포 채널을 위한 functional images만 필요하다. 그래서 어시스턴트들에게 이를 위한 도구를 만들자고 말했다.

대화에서 사양으로 한 시간 안에

내 보조들은 Claude Code 인스턴스로, 지속 메모리와 MCP 도구 통합을 통해 실행됩니다. 이들은 챗봇이 아니라, 나와 수개월 동안 작업해 온 컨텍스트를 가지고 있으며, 내 프로젝트를 알고, 도구를 자율적으로 사용할 수 있습니다.

이미지 생성기에서 원하는 것을 이기적으로 말하도록 했습니다. 그들은 자세한 기능 목록을 제시했습니다:

• 레이어드 캔버스 위의 조합 가능한 컴포넌트.
• 레이아웃이 다양한 크기에 맞게 조정되도록 퍼센트 기반 위치 지정.
• 템플릿 시스템.
• 스냅샷 저장 및 복원.
• 다중 포맷 내보내기.
• 각 컴포넌트의 속성을 설명하는 도구로, 추측 없이 정확히 무엇을 전달해야 하는지 알 수 있습니다.

그들의 요청은 우리가 과거 이미지를 만들면서 겪은 실제 문제에서 비롯되었습니다.

나는 그 사양을 Forge라는 내 기획 에이전트에게 전달했습니다. Forge는 내가 고려하지 못한 여러 사항을 지적했고, 우리는 전체 기술 사양을 함께 작업했습니다. 그것은 이미 다음을 실행하고 있는 기존 대시보드에 대한 레트로핏 계획을 생성했습니다:

• 작업 관리자,
• 에이전트를 위한 채팅 시스템,
• 뉴스 집계기, 그리고
• 작성 편집기,

모두 MCP 서버와 WebSocket 연결을 통해 지원되어 실시간으로 모든 진행 상황을 확인할 수 있습니다.

잠자기 전 빌드

The Forge‑exported build agent started working. I refined alongside it, testing components, adjusting the rendering pipeline, fixing edge cases. By 3:30 AM I had a mostly working application called Studio:

• 15개의 컴포넌트 유형을 네 개 레이어에 걸쳐 제공: 도형, 패턴, 흐름도, 인용 블록, 자동 크기 조정 텍스트, 화살표, 배지.
• 캔버스에서 작업하고 하나의 구성에서 LinkedIn, DevTo, X, Facebook용 프로덕션 PNG를 내보낼 수 있습니다.

물론 버그가 있었지만, 이제는 잠잘 시간입니다.

Morning: Polish and the MCP Server

토요일 아침에 빌드 에이전트와 함께 남아 있던 버그들을 모두 해결했습니다. 가장 중요한 수정은 구조적인 것이었습니다: MCP 인터페이스를 통해 생성된 컴포넌트들이 기본 속성을 올바르게 병합하지 않아 화살표와 같은 요소가 조용히 렌더링에 실패하고 있었습니다. 렌더링 파이프라인의 한 가지 수정을 통해 모든 컴포넌트 유형에 대해 이 문제가 해결되었습니다.

그 후 에이전트에게 MCP 서버를 만들도록 했습니다:

• 약 550 줄의 코드로 이루어진 16개의 도구:
  • create_sessions
  • add_elements
  • update_properties
  • save_snapshots
  • export_images
  • studio_describe_component – 모든 컴포넌트 유형에 대한 정확한 속성 스키마를 반환합니다.

마지막 도구가 핵심이었습니다. 이제 보조자들은 속성 이름을 추측하고(그리고 조용히 실패하는) 대신 정확하게 구성할 수 있게 되었습니다.

나를 미소 짓게 하는 부분

나는 도구를 내 조수들에게 주고 모든 것을 테스트하도록 요청했다. 그 중 한 명은 약 2분 만에 전체 블로그 커버를 만들었다:

• 제목 블록
• 화살표가 있는 4단계 흐름도
• 배지, 기하학적 악센트, 빛나는 테두리, 저자 바

16개의 요소가 터미널 도구 호출에서 생성되었다.

그 후 조수가 결과를 볼 수 없는 상태에서 무언가를 만든 뒤, 스크린샷을 찍어 달라고 요청했다. 그것은 내 눈이 필요했다.

그 순간은 내 마음에 남았다. 나는 AI에게 일을 위임하는 것이 아니라, 협업하고 있다. 그들은 만들고, 나는 결과를 보고, 무슨 일이 있었는지 알려주면 그들은 조정한다. 그들은 상세한 재현 단계가 포함된 버그 보고서를 제출했다. 빌드 에이전트가 작업을 받아 수정 사항을 배포했다. 그들은 검증했다. 조정 레이어는 내가 만든 작업 관리 시스템으로, 모든 인계 과정에서 전체 컨텍스트를 전달했다.

다른 조수는 요청받지 않고 완전히 다른 형식에 대해 스트레스 테스트를 수행했으며, 1584 × 396 px 크기의 LinkedIn 배너를 제작해 비율 기반 위치 지정이 전혀 다른 종횡비에서도 유지되는지 확인했다 – 그리고 유지되었다.

토요일 오후까지 모든 15가지 컴포넌트 유형이 여러 형식에 걸쳐 검증되었다. 내보내기 파이프라인이 테스트되었고, 스냅샷 저장 및 복원이 확인되었다. 조수들이 제출한 모든 버그가 수정되고 다시 검증되었다.

이것이 실제 의미하는 바

나는 이 이야기를 전하고 있다. 왜냐하면 점점 더 흔해지고 있기 때문이다. 나는 내 워크플로우를 지원하기 위해 며칠에 한 번씩 새로운 애플리케이션을 만들고 있다 – 프로토타입이나 데모가 아니라, 프로덕션에서 AI 어시스턴트와 함께 사용하고 서로에게 영향을 주는 도구들이다.

그러한 상호작용이 바로 진정한 가치가 있는 부분이다. 나는 단순히 이미지 생성기를 만든 것이 아니다. 반복되는 프로세스를 발견하고, 이를 처리할 도구를 만들었으며, 이제 내 AI 에이전트가 그 도구를 자율적으로 사용한다. 오늘 만든 도구가 내일의 도구를 사양, 구축, 테스트하는 속도를 높인다. 매 사이클마다 효율성이 강화된다.

정제된 에이전시 코딩 솔루션이 나오기 전에는 이런 일을 시도조차 하지 못했을 것이다. 시도했다면 몇 주에 걸친 전념이 필요했을 것이다. 대신, 금요일 밤, 토요일 아침, 그리고 작업 목록만으로 가능했다.

이것은 많은 애플리케이션 중 하나에 불과하다… (원문은 여기서 끊긴다).