Framebook

Case study · Compose → Review → Handoff

핵심 보기

Case study / 2026

Intent stays in the loop.

화면을 만들고 검토하고 전달하는 동안에도 사람이 정한 화면의 의미와 판단 기준을 유지한다. Framebook은 요소의 정체성과 기준본을 Canvas·Review·WebMCP·Handoff에 연결한다.

Framebook 스토리보드 캔버스와 화면 속성 패널
Working frame · 화면의 구조와 공유 요소를 정의하는 캔버스

화면의 의미는 저작에서 끝나지 않는다.

화면이 여러 버전과 도구를 거치면 다음 질문에 답하기 어려워집니다. “무엇을 바꿨는가?”, “무엇은 유지해야 하는가?”, “그 판단은 어느 기준본에서 왔는가?”

Framebook의 작업 단위는 화면 전체가 아니라 역할과 출처를 가진 요소입니다. 그래서 같은 기준이 저작·검토·에이전트 제어·핸드오프에 계속 남습니다.

01Compose

Structure first

화면이 해야 할 일을 먼저 정의한다.

Canvas에서 메시지, 대표 미디어, 설명, 행동 유도와 같은 의미 요소를 배치합니다. 색상이나 스타일보다 먼저 각 영역의 역할과 관계를 정의하면, 이후의 변경도 같은 기준에서 판단할 수 있습니다.

“완성 UI보다 먼저, 사람이 검토할 수 있는 화면 구조를 만든다.”
화면 목적핵심 메시지를 빠르게 전달하고, 대표 시각 자료와 다음 행동을 한 흐름으로 이해하게 한다.
학습 시작 화면이 포함된 Framebook 캔버스
실제 Framebook Canvas — 스토리보드, 작업 캔버스, 화면 속성 패널
02Identify

Identifiable draft

스케치의 박스를, 다시 찾을 수 있는 대상으로 바꾼다.

위치가 바뀌거나 시각 표현이 달라져도, 화면 요소의 정체성은 유지되어야 합니다. 이름·역할·source를 통해 같은 대상을 Page Spec, 피드백, 검토에서 계속 지칭합니다.

el_hero_01

HERO_VISUAL

화면에서 가장 먼저 인지되어야 하는 시각적 초점. 대표 미디어의 비중과 위치를 판단하는 단위입니다.

el_action_01

PRIMARY_ACTION

다음 행동으로 연결하는 CTA. 노출 상태·위치·강조 정도를 분리해 검토할 수 있습니다.

Framebook 실제 레이어 패널과 공유 요소 목록
실제 Framebook Layers — 요소명, 레이어 순서, 공유 Header/Footer를 함께 확인
Framebook 페이지 명세 화면과 기능 정의 목록
실제 Page Specification — 화면 요소와 기능·나레이션을 같은 기준본에 연결
03Persist

Persist and recover

기준본은 저장·복구·복사 과정에서도 같은 정체성을 유지한다.

Framebook은 문서 전체를 하나의 JSON blob으로 덮어쓰지 않습니다. metadata, slides, CRDT journal, checkpoints, sync state, assets를 정규화해 저장하고, 충돌이 생기면 강제 덮어쓰기 대신 JSON 보존과 별도 프로젝트 복사로 복구합니다.

6 STORES

documents_meta · slides · crdt_deltas · checkpoints · sync_state · assets_cache

RECOVER

stale writer와 충돌 Checkpoint는 기존 ID를 덮어쓰지 않는다.

FORK

별도 프로젝트 복사에서 Document·Checkpoint·Review ID를 새로 발급한다.

Framebook 프로젝트 보관함과 저장 복구 화면
실제 Persistence — 프로젝트 보관함과 복구 경계를 확인하는 화면
04Review

Checkpoint-bound review

검토는 최신 화면이 아니라 기준본 위에서 시작한다.

불변 Checkpoint를 기준으로 A→B 의견을 남기고, 대상 요소·변경 내용·보존 조건을 분리합니다. 비교의 목적은 감상을 남기는 것이 아니라 무엇이 달라졌고 어떤 근거로 반영됐는지 추적하는 것입니다.

HERO_VISUAL, MAIN_CONTENT, PRIMARY_ACTION, HEADER 구조 Overlay가 표시된 Framebook 캔버스
구조 기준 Overlay — 실제 Canvas의 요소 Bounds를 포트폴리오 검토 기준으로 표시

아래 Proposal v1/v2는 구조 기반 비교 개념을 설명하기 위한 개념 시각안입니다. 실제 제품의 Review·Checkpoint 근거는 아래 Flow와 Review 캡처로 확인합니다.

CONCEPTUAL PROPOSAL V1
개념 Proposal v1: 오른쪽 대표 미디어가 상대적으로 작고 CTA 강조가 약한 학습 화면 위에 HERO_VISUAL 검토 UI가 겹쳐진 모습
v1 — 결과물 위에서 선택한 요소를 검토하고, Target / Change / Preserve를 즉시 편집 요청으로 전환하는 개념 UI

개념 인터랙션입니다. 실제 Framebook 기능이 구현되면 생성 결과의 이미지 레이어·분석 결과에 같은 UI를 연결합니다.

CONCEPTUAL PROPOSAL V2
개념 Proposal v2: 오른쪽 대표 미디어가 커지고 CTA 강조가 강화된 학습 화면 위에 스토리보드 구조 가이드가 겹쳐진 모습
v2 — 동일한 구조를 유지한 채 대표 미디어와 CTA의 시각적 우선순위를 조정
Preserve · 원래 초안의 구조를 유지 Change · 검토 요청으로 변경된 대상
TARGET

HERO_VISUAL

CHANGE

시각적 비중을 약 15% 확대

PRESERVE

Header·본문·CTA 위치 유지

Current evidence

Review baseline

  • 불변 Checkpoint Snapshot
  • 요소를 지정한 A→B 피드백
  • 답변·상태·반영 Checkpoint trace
Conceptual extension

Structure overlay

  • 기준본 위 요소 Bounds
  • 변경 대상과 보존 대상 구분
  • 실제 Proposal 생성 기능과 분리
Framebook 화면 흐름 다이어그램
실제 Flow — 화면, Action, 이동 관계를 한 곳에서 검토하는 기준선
05Collaborate

One command boundary

사람과 AI가 같은 검증·History·Undo 경계를 사용한다.

UI, CLI, WebMCP, peer automation은 별도 우회 경로를 만들지 않고 같은 command gateway를 호출합니다. 잘못된 target이나 오래된 token은 거절하고, 통과한 변경만 Revision과 CRDT journal에 남깁니다.

06Handoff

Many representations, one source

하나의 기준본을 여러 표현으로 전달한다.

Visual Handoff는 같은 source identity에서 Compact DSL, Standard JSON, HUD SVG, Intent Graph, Stage HTML, Layout Tree, Design Tokens, Constraint, Difference/Edit DSL, Evaluation Trace를 파생합니다. 화면을 다른 도구로 넘겨도 의미와 출처를 다시 찾을 수 있습니다.

COMPOSEIDENTIFYPERSISTREVIEWCOLLABORATEHANDOFF
Framebook 라이브 Handoff 탭과 다중 표현 산출물
실제 Visual Handoff — 하나의 기준본에서 여러 표현을 파생하는 라이브 화면

Grounded examples

화면 사이의 결정도 설계의 일부다.

현행 학습 데모의 Action과 공유 요소 참조를 바탕으로 재구성한 두 가지 실제 시나리오입니다. 아래 도식은 제품 캡처가 아니라 예제 데이터의 관계를 읽기 쉽게 정리한 것입니다.

Scenario 01 / Branch & retry

오답 이후의 경험까지 화면 흐름에 남긴다.

영상 학습 다음의 퀴즈는 화면 순서대로 진행되지 않습니다. 정답 Action은 게임으로, 오답 Action은 다시 시도 화면으로 연결되고, 재도전 버튼은 퀴즈로 되돌아갑니다. 각 이동은 명시적인 대상 화면 ID를 가집니다.

근거: 학습 데모의 quiz-correct, quiz-incorrect, retry-action. 실제 Flow UI 캡처 보기 — 이 캡처는 흐름 UI의 전체 모습이며, 아래 분기 경로는 예제 Action 데이터에서 재구성했습니다.

Action route / example data

  1. 시작 화면
  2. 영상 학습
  3. 퀴즈 · 분기
정답 · quiz-correct게임 화면targetSlideId: slide-game
오답 · quiz-incorrect다시 시도 → 퀴즈retry-action → slide-quiz

Sequence 순서가 아니라 Action의 목적지가 실제 이동 경로를 결정합니다.

Scenario 02 / Shared elements

Header만 교체하고 Footer는 그대로 둔다.

영상 학습과 다시 시도는 Header/video를 공유합니다. 게임 화면에서는 Header/game으로 바꾸지만, 세 화면 모두 같은 Footer를 참조합니다. 반복 UI를 화면마다 복사하지 않고, 기준본과 화면별 조합을 구분한 결과입니다.

근거: slide-video, slide-retry, slide-game의 masterElementIds. 실제 Layers UI 캡처 보기 — 공유 요소가 레이어로 나타나는 현재 제품 화면입니다.

Master references / example data

화면HeaderFooter
영상 학습Header/videoFooter/default
다시 시도Header/videoFooter/default
게임 화면Header/gameFooter/default

다시 시도 화면에는 Alert/error 공유 요소가 추가됩니다. Footer 참조는 유지됩니다.

The result

사람의 구조가 AI 작업의 처음과 끝을 잇는다.

Framebook의 가치는 화면을 빨리 스케치하는 데 그치지 않습니다. 요소의 의도와 출처를 저작·검토·협업·전달의 공통 언어로 만들어, 변화가 많은 작업에서도 판단의 근거를 지키는 데 있습니다. AI 이미지 Proposal은 실제 증거가 확보되기 전까지 개념안으로 분리합니다.

Cloudflare Pages에서 열기 ↗ 처음으로 돌아가기 ↑