문서 본문으로 건너뛰기
oh-my-design
라이브 데모▾

라이브 데모 플레이북

관객이 실제 제품의 변화를 보게 하세요.

좋은 oh-my-design 데모는 스킬 이름을 훑는 시간이 아닙니다. 눈에 보이는 문제 하나에서 시작해 제품이 의존하는 동작을 지키고, 누구나 확인할 수 있는 근거와 함께 실제 라우트에서 끝납니다.

결과를 증명할 수 있는 가장 작은 형식을 고르세요

시간은 작업 범위만 줄일 뿐, 근거를 줄이지 않습니다. 데모 전에 형식을 하나 고르고 무엇을 바꾸지 않을지 먼저 선언하세요.

5분01

눈에 띄는 문제 하나 고치기

기존 페이지는 동작하지만 평범하거나 이해하기 어려울 때

동작을 보존하면서 위계·간격·상태·접근성 문제 중 영향이 큰 하나를 고칩니다.

수정 전 화면, 집중된 변경점, 그리고 같은 실제 라우트에서 동작하는 수정 후 화면.

15분02

완결된 화면 하나 출시하기

기술 스택과 컴포넌트가 있고 흐름의 범위가 명확할 때

프로젝트 디자인 맥락으로 작은 화면 하나와 로딩·빈 화면·오류·성공 상태를 구현합니다.

동작하는 라우트, 상태 커버리지, 변경 파일, 실제로 실행한 검사.

30분03

체크포인트 기반 하네스 실행하기

새롭거나 모호해서 조사와 디자인 시스템 결정이 필요한 화면일 때

필수 승인 단계를 건너뛰지 않고 발견·여정·DESIGN.md 제안·구현·검증까지 진행합니다.

사용자 여정, DESIGN.md 패치, 동작하는 UI, 검증 요약, 세 번의 사용자 체크포인트.

반복해서 쓸 수 있는 6단계 진행표

밋업·워크숍·화면 녹화에서 같은 순서를 사용하세요. CLI는 환경을 준비하고, 실제 UI 작업은 코딩 에이전트가 저장소 안에서 수행합니다.

  1. 01

    눈에 보이는 문제 하나와 보존할 동작 하나를 정하기

    실제 라우트를 열어 관객이 확인할 문제를 정확히 가리키세요. URL·데이터 흐름·필드명·카피·상호작용 중 무엇을 바꾸면 안 되는지도 함께 선언합니다.

  2. 02

    번들을 설치하고 doctor로 실제 상태 확인하기

    프로젝트 루트에서 두 명령을 실행하고 설치 후 코딩 에이전트를 재시작하세요. 설치 성공 자체를 결과처럼 소개하지 않습니다.

    npx oh-my-design-cli@latest npx oh-my-design-cli@latest doctor
  3. 03

    DESIGN.md와 verified_v2 근거 대조하기

    공개 데모에는 verified_v2 레퍼런스를 고르세요. 기존 DESIGN.md와 함께 읽게 한 뒤 해당 제품 화면에 속하는 근거만 승격하고, 모르는 폰트·토큰·컴포넌트 주장은 비워 둡니다.

  4. 04

    실제 화면과 핵심 상태 구현하기

    현재 기술 스택과 컴포넌트를 사용합니다. 새 흐름이라면 정적인 성공 목업만 다듬지 말고 사용자가 실제로 마주칠 상태를 포함하세요.

  5. 05

    제품 화면에서 직접 점검하기

    제품 라우트를 열고 보존하기로 한 동작을 직접 확인한 뒤 접근성과 interface-feel 검사를 실행하세요. 실제로 실행한 검사와 측정값만 보고합니다.

  6. 06

    관객의 교정을 기록하기

    사용자가 시각 결정을 교정하면 그 범위만 고치고 omd:remember로 남겨 다음 세션에서 같은 실수를 반복하지 않게 합니다.

5분 라이브 개선에 쓸 프롬프트

먼저 DESIGN.md를 읽고 현재 제품 라우트를 확인해. URL, 데이터 흐름, 필드명, 기존 사용자 동작은 보존하면서 이 페이지에서 눈에 보이는 위계 또는 상태 문제 하나를 개선해. 공개 데모에는 verified_v2 레퍼런스를 사용하고 이 제품 화면에 해당하는 근거만 정합해. 모르는 값은 폴백으로 채우지 말고 생략해. 실제 화면에 구현하고 핵심 상태를 다룬 다음, 그 라우트에서 검증해서 변경 파일과 실제로 실행한 검사를 보고해. DESIGN.md 확장이나 필수 하네스 체크포인트를 넘기기 전에는 내게 확인해.

관객이 직접 확인할 수 있어야 하는 근거

진행하면서 아래 증거를 남기세요. 추적 가능한 과정이 없는 멋진 스크린샷은 검토 가능한 데모가 아닙니다.

수정 전 화면과 처음에 지목한 한 가지 문제

보존할 동작까지 포함한 정확한 프롬프트

DESIGN.md 변경점과 의도적으로 생략한 미확인 필드

분리된 목업이 아닌 실제 제품 라우트와 핵심 상태

변경 파일과 실제 실행한 검사 또는 측정

지속되고 범위가 명확한 선호로 기록한 사용자 교정

와우 포인트를 정직하게 유지하세요

CLI는 설치하고 진단합니다

설치된 맥락을 읽고 UI를 수정하는 주체는 코딩 에이전트입니다. 설치기만으로 화면을 생성했다고 말하지 않습니다.

모르면 여전히 비워 둡니다

누락된 브랜드 사실을 시스템 폰트·일반 컴포넌트·추정 토큰·인접 마케팅 화면으로 채우지 않습니다.

성과 연출보다 증거가 먼저입니다

실제 전후 측정 없이 속도·전환율·접근성·성능이 개선됐다고 주장하지 않습니다.

필수 체크포인트는 그대로입니다

30분 하네스도 사용자 여정·DESIGN.md 패치·검증 승인을 위해 멈춥니다. 라이브 관객이 있다는 이유로 생략할 수 없습니다.