고객 사례 · John Pavulon

“예전에 일주일 걸리던 일이 이틀 저녁이면 끝납니다.

John은 BarthMoney가 어떤 느낌이어야 하는지 정확히 알고 있었습니다. OpenDesign은 몇 초 만에 실제로 쓸 수 있는 수준의 시각 아이디어를 내놓았고 — 그대로 코드로 가져갈 수 있는, 다듬어진 인터페이스를 건넸습니다.

몇 분 만에
출발점이 될 일관된 시각 방향
60–70%
UI 프로토타이핑 시간 단축
며칠 안에
핵심 UI 방향을 Flutter로 옮기기
퇴근 후 시간

여백을 미세하게 만지며 보낸 저녁은, 앱이 한 걸음도 나아가지 못한 저녁이었습니다.

John의 본업은 크리에이티브 디렉션과 시각 시스템이지 전업 소프트웨어 개발이 아닙니다. 퇴근 후에는 그 시각적 직관을 자기만의 실용 앱으로 돌립니다. 그래서 한 시간 한 시간이 소중합니다.

BarthMoney는 분명한 관점에서 시작했습니다. 개인 재무 관리는 차분하고 즉각적이어야 한다는 것. John이 본 대안들은 비대해진 스프레드시트이거나 광고로 어수선했습니다. 그가 원한 건 그날의 지출을 빠르고 명확하게, 방해받지 않고 기록할 수 있는 목적이 분명한 모바일 앱이었습니다.

John은 이 인터페이스에 그가 말하는 “영혼”이 필요하다는 걸 알았습니다. 벽은 그 방향을 일관되고 만들 수 있는 모바일 UI로 바꾸는 일이었죠. 빈 Figma 캔버스나 코드로 직접 쓰는 UI는 색과 여백과 정렬만으로 저녁 전체를 삼켜버릴 수 있습니다 — 정작 제품은 한 걸음도 못 나간 채로요.

Figma의 빈 캔버스를 들여다보거나 코드로 UI 레이아웃을 처음부터 쓰는 건 퇴근 후 혼자 작업할 때는 너무 오래 걸립니다.
John Pavulon · 1인 개발자
첫 번째 돌파구

프롬프트 하나가, 그 위에서 만들어 갈 수 있는 시각 언어가 되었습니다.

John은 화면의 느낌과 목적에서 출발했습니다. “카테고리별 내역이 있는 모던한 다크 모드 지출 대시보드.” 돌아온 건 보기 좋은 대시보드만이 아니었습니다. 어두운 표면, 골드 포인트, 금액의 위계, 그리고 AI 보조 입력과 직접 입력이라는 서로 다른 두 경로가 그때 정해졌습니다.

BarthMoney 인터랙티브 프로토타입의 완성된 세 화면: 대시보드, AI 보조 지출 확인, 오프라인 빠른 추가
John이 공개한 인터랙티브 프로토타입에서: 대시보드, AI 보조 확인, 오프라인 빠른 추가.
일하는 방식

목업이 그대로 만들 수 있는 명세가 되었습니다.

John은 하나의 에이전트에게 제품을 처음부터 끝까지 발명하라고 시키지 않습니다. 각 도구에 분명한 역할을 주고, 제품에 대한 판단은 자기 몫으로 남깁니다.

01 · 의도느낌부터 말로 옮기기.

화면의 목적, 위계, 분위기, 제약을 먼저 평범한 말로 적습니다.

02 · OpenDesign눈에 보이게 만들기.

John이 생성된 HTML과 CSS를 다듬어 인터페이스에 일관된 방향이 잡힐 때까지 손봅니다.

03 · 시스템기준을 고정하기.

컴포넌트, 여백, 색, 위계가 함께 쓰는 시각 명세가 됩니다.

04 · Cursor + Flutter제품 만들기.

그 구조가 John의 코드베이스에서 모듈화된 위젯과 애플리케이션 로직이 됩니다.

OpenDesign이 인터페이스를 지휘John이 제품을 지휘
워크플로는 John이 직접 쓴 기록을 바탕으로 재구성했습니다.
잘 다듬어진 화면 너머

AI는 선택입니다. 확인은 아닙니다.

BarthMoney에서 가장 강한 부분은 화면의 개수가 아닙니다. 그것들을 잇는 판단들입니다 — 자동화가 도움이 되는 순간은 언제인지, 물러나 있어야 할 때는 언제인지, 그리고 사용자가 아직 아무것도 입력하지 않았을 때 제품이 무엇을 약속하는지.

AI 보조

제안한 다음, 묻기.

채팅이 지출과 카테고리, 환율을 알아봅니다 — 하지만 최종 확인은 사용자에게 남습니다.

오프라인 우선

직행 경로는 항상 열려 있습니다.

Quick Add는 AI도 클라우드 계정도 없이 동작합니다. 자동화의 연출보다 속도와 프라이버시가 더 중요하니까요.

첫 사용

빈 화면 자체가 약속이 됩니다.

데이터가 생기기 전부터 BarthMoney는 무엇이 기기에 남는지 설명하고, 헷갈릴 수 없는 첫 동작 하나를 제시합니다.

여러 화면을 오가는 흐름과 공유 상태는 여전히 손이 많이 갑니다 — 바로 그 부분을 John은 OpenDesign이 다음으로 쉽게 만들어 주길 바랍니다.

무엇이 달라졌나

부족했던 건 아이디어가 아니라, 끊기지 않는 시간이었습니다.

John은 OpenDesign이 UI 프로토타이핑 시간을 60–70% 줄였다고 봅니다. 일주일치 시각 작업이 이틀 저녁이 되었고, 핵심 UI 방향은 처음 구상한 지 며칠 만에 Flutter로 옮길 준비가 되었습니다.

얻은 것은 속도만이 아니었습니다. 퇴근 후에 만드는 사람에게, 인터페이스 주위를 맴도는 일을 멈추고 자기만 할 수 있는 일 — BarthMoney를 무엇으로 만들지 결정하는 일 — 로 돌아갈 만큼의 시각적 자신감을 주었습니다.

BarthMoney는 한 번으로 끝나지 않았습니다. John은 그 작업들이 지금 놓여 있는 포트폴리오도 OpenDesign으로 만들었습니다 — 시각적 방향을 구체적인 것으로 바꾸는 또 하나의 방법이죠.

결론
“전담 디자이너가 없는 1인 개발자나 인디 해커라면, OpenDesign이 바로 당신의 불공정한 무기입니다.
— John Pavulon, 1인 개발자 · “그래야 만들고 내보내는 데 집중할 수 있으니까요.”
P.S. · 퇴근 후에도 계속 만드는 중
John이 로컬에서 돌리는 BartX 빌더가 사이버펑크 스타일 랜딩 페이지를 만들어 보고 있는 화면
John이 붙인 설명은 단순했습니다. “내 사이드 프로젝트 ㅎㅎ.” 로컬에서 도는 BartX는 그가 퇴근 후에 계속 만들어 내는 낯설고 구체적인 인터페이스들의 또 다른 조각입니다.
다음 단계

머릿속 인터페이스를 꺼내 — 그대로 구현으로.

OpenDesign은 무료 오픈소스이며, 여러분의 컴퓨터와 여러분의 키로 실행됩니다.

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원