오픈 소스 · Apache-2.0로컬은 무료 · 명령 하나로 공유 · 리뷰 결과는 Agent에게
TS/TSX로 클릭하고 재생할 수 있는 프로토타입을 만들고 로컬 보드에서 안을 비교하세요. 명령 하나로 공유하거나 임베드하고, 팀은 리뷰 링크에서 투표해 결정합니다. Agent는 joplo feedback으로 결정대로 소스를 고칩니다.
터미널
$ npx joplo@latest init my-demo$ npx joplo dev --open$ npx joplo share --review✓ 리뷰판 공개 → https://joplo.app/s/…$ npx joplo feedback반영할 결정 2건 → Agent에게 넘기기
작동 방식
소스 파일이 기준이고 기록은 Git이 남깁니다. 리뷰 의견이 채팅에 묻히지 않습니다. 결정된 내용은 Agent가 같은 TSX에 반영하고 다시 공개합니다.
화면, 안, 케이스, 흐름을 모두 소스 파일에 적고 코드 옆에 둡니다.
options/a.tsx안 A와 B를 전환하며 각 안이 어떤 케이스를 다루는지 보고, 단계별로 재생합니다.
npx joplo dev --open일반 링크에는 고른 안만 들어갑니다. 리뷰판에는 모든 안이 들어가고, 규칙과 질문은 리뷰어에게만 보입니다.
npx joplo share --review리뷰어는 데모 옆에 댓글을 달고 요소를 가리키고 투표합니다. 작성자는 안을 고르고 규칙을 확정하거나 기각하고 질문에 답합니다.
cloud.joplo.app/review/…Agent가 아직 반영하지 않은 결정과 댓글을 가져와 소스를 고치고 check를 통과시킨 뒤 반영 완료로 표시합니다.
npx joplo feedback2단계로 돌아가기: 수정이 끝나면 npx joplo share --review를 다시 실행하세요. Pro에서는 같은 리뷰 링크가 갱신되고 댓글과 투표도 그대로 남습니다.
기능
01
화면, 안, 케이스, 흐름을 TS/TSX로 써서 Git에 넣습니다. 나와 Agent가 같은 소스 파일을 고칩니다.
export default option({name: 'A · 이메일로 한 명씩 초대하는 대화상자',tradeoffs: ['가장 짧은 경로', '한 번에 한 명만'],});flow('관리자가 초대를 보냄').click('btn_invite', '초대 대화상자 열기').type('in_email', '[email protected]').select('sel_role', '편집자', uses('role_cap')).click('btn_send', '초대 보내기');
02
같은 기능에 안 A와 B를 씁니다. 보드는 케이스별로 각 안의 커버리지를 보여 주므로, 빠진 곳과 미정인 곳이 한눈에 보입니다.
03
npx joplo share로 joplo.app/s/… 링크를 공개합니다. 블로그, 문서, README에 임베드하면 방문자는 먼저 표지를 보고, 클릭해서 재생하거나 전체 화면으로 볼 수 있습니다.
04
리뷰 링크를 보내면 동료가 데모 옆에 댓글을 달고 요소를 가리키고 투표합니다. 결정을 내리면 Agent가 npx joplo feedback으로 결정을 받아 그대로 소스를 고칩니다.
$ npx joplo feedbackShare k3f9x2Qa1B · version 3Decisions not yet applied (2):[d_8f2k] Pick option invite.a-modal for feature invite[d_3m9q] Reject rule resend_cap: 1분 안의 재전송만 막기Unresolved comments (1):[c_7xw1] scenario invite.a-modal.success · step 2 — 천천버튼 문구를 "동료 초대"로 바꾸면 어떨까요?Next: update the source as decided, run npx joplo check,then npx joplo feedback --applied d_8f2k,d_3m9q
05곧 공개
CI에서는 기기 로그인 대신 API 키로 공개합니다. Joplo GitHub App이 열리면 PR마다 미리보기 댓글이 달리고, PR을 닫으면 링크가 만료됩니다.
on: pull_requestjobs:preview:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v4- run: npx joplo share --new --pr ${{ github.event.number }}env:JOPLO_API_KEY: ${{ secrets.JOPLO_API_KEY }}
예시
B2B 관리자 화면과 모바일 앱부터 백엔드 아키텍처, 기술 글까지. 여기서 바로 재생되며, 내 페이지에 임베드했을 때와 똑같이 보입니다.
B2B SaaS팀 초대관리자가 멤버를 초대하고 권한을 정합니다. 초대 성공, 전송 실패 후 재시도, 초대 권한이 없는 멤버까지 세 가지 흐름을 단계별로 재생할 수 있습니다.대상:관리자 화면을 만드는 PM과 디자이너장면 3개
소비자용 앱 · 두 사람캠핑 도우미샤오위가 도우미에게 주말 캠핑 계획을 맡기고 친구 아제에게 일정을 공유합니다. 날씨나 인원이 바뀌면 도우미가 먼저 계획을 고칩니다.대상:모바일 앱과 AI 도우미를 만드는 팀
기술 설명두뇌와 손을 나눈 Agent 백엔드Agent 작업 하나를 클라이언트부터 클라우드까지 따라갑니다. 두뇌는 도구 호출만 만들고, 실행은 기기 쪽 실행기와 클라우드 샌드박스가 맡습니다.대상:팀에 아키텍처를 설명해야 하는 엔지니어
기술 설명 · 블로그 연계Intelligent UI 구현 상세AI가 화면을 직접 출력하게 하는 두 가지 방식과, 모델에서 샌드박스까지의 전체 흐름입니다. 블로그 글과 함께 보면 좋습니다.대상:기술 글을 쓰고 발표하는 사람장면 4개가격
CLI로 작성·검사·빌드하는 데는 비용이 들지 않고, 임베드·리뷰·API 키는 모든 계정에서 쓸 수 있습니다. Pro는 기한 없는 링크와 더 높은 한도를 위한 요금제입니다.
$0
동료에게 잠깐 보여 주거나 리뷰를 한 번 돌릴 때.
$48/ 년
링크가 계속 살아 있어야 할 때.
가격은 미국 달러 기준입니다. 결제는 Waffo Pancake가 판매 대행사(Merchant of Record)로서 처리합니다.
FAQ
가격, 공유, 임베드, 리뷰, Agent에 대한 솔직한 답변입니다.