COCOH / MIRRORMOTION

미러모션 개발 및 디자인 인계

2026년 11월 4일 · 신규 개발자 · 시각 디자이너 · 유지보수 담당자

다음 작업자는 미러모션의 현재 웹과 고정 배포 EXE, 원본 팁스 자료, 대표 Figma를 서로 연결해 확인해야 한다. 이 문서는 시작 위치와 수정 경계, 필요한 검증을 정리한다. 운영 계정·비밀키와 원본 고객 데이터는 별도 통제 대상이다.

01 / 03

프로젝트의 시작 위치

경로용도
미러모션/00-시작여기.md제품 정의·최신 변경·검증·다음 작업 진입점
mirrormotion-app/web/srcReact 화면과 상태·광고·미디어 처리
mirrormotion-app/server계정·광고·계약·정산·배포 API와 중앙 연결
mirrormotion-app/desktop-nativeWindows WebView2 호스트·런처·패키징
mirrormotion-app/verification검증 기록·실화면·릴리스 근거
mirrormotion-app/designFigma 전달 영수증·대표 시각자료
mirrormotion-research팁스 원본 조사·광고 출처·이번 재점검
mirrorbear-app/remote-gateway공유 외부 연결. 기존 Android 릴레이 보존

화면 작업별 소스

App.tsx는 화면 전환과 공통 레이아웃, MotionHome.tsx는 홈 메뉴, MotionAdRail.tsx와 motionAdPlayback.ts는 광고 표시와 캐시, MotionAdmin.tsx는 현황, MotionAdConsole.tsx는 광고 운영과 점주 화면이다. Studio.tsx·Translate.tsx·Scalp.tsx·Mirror.tsx는 재사용 기능의 핵심이다.

현재 웹은 React 19·TypeScript·Vite 구조다. 의존성은 lockfile과 일치하도록 설치하고 테스트 후 빌드한다. 버전 표시는 패키지 설정과 검증 영수증을 대조한다. 화면 안에 남은 이전 진단 버전 문자열만 보고 배포본을 식별하지 않는다.

근거: web/package.json, web/src/App.tsx, desktop-native/release_config.py, 미러모션/00-시작여기.md. 이 문서 경로는 작업공간 루트 기준이다.

02 / 03

디자인 파일을 수정할 때

대표 Figma 파일에는 편집 가능한 텍스트·벡터·버튼 인스턴스·변수가 있다. 화면은 1920 계열과 2560 계열을 구분한다. 광고 운영 페이지가 추가되어 있으나 코드 자동 동기화나 모든 런타임 상태 이전을 보장하지 않는다. 이번 그래프형 현황과 수정 상태는 실제 웹 캡처와 함께 비교한다.

변경 대상디자이너가 전달할 내용개발자가 확인할 내용
공통 색·서체토큰과 적용 범위자연색 사진 보존·대비·한글 줄바꿈
새 화면·모달기본·로딩·빈 값·오류·완료 상태키보드·터치·초점·내부 스크롤
스타일 상담사진·생성·비교의 순서와 안내작업 상태·취소·재시도·저장 대상
광고 레일비율·fit·로딩·실패·미디어 전환정확한 수명주기·해시·정리·회귀 시험
관리자차트 정의·월/지역 필터·역할별 정보집계 단위·시험 데이터·권한 제한

사진과 광고 소재 관리

원본 10개 광고와 보강 이미지·영상은 출처를 구분한다. 생성 보강물을 원본 광고주 승인본이나 실제 촬영물로 표시하지 않는다. 테스트용 스타일 인물도 실고객으로 소개하지 않는다. 새 이미지에는 사용 범위와 원본·생성 여부를 남기고 개인 식별정보가 있는 원본 문서를 정적 자산에 넣지 않는다.

Figma 파일: https://www.figma.com/design/SEsW0FiEOLtojobLeXaav2
대표 시작 node-id=4-5 / 광고 운영 node-id=19-5

근거: design/figma-delivery-receipt.json, 미러모션/06-Figma-편집인계.md, mirrormotion-research/2026-11-04-advertising/asset-provenance.md. 이번 자료 묶음은 Figma 재게시 완료를 주장하지 않는다.

03 / 03

변경 후 확인 순서

  1. 변경 기능의 단위·회귀 시험을 먼저 실행하고 TypeScript와 배포 빌드를 확인한다.
  2. 실제 브라우저에서 로그인·화면 전환·핵심 동작·관리자 복귀를 확인한다. 새로고침만으로 회복되는 오류는 완료로 처리하지 않는다.
  3. 공개 웹은 비로그인 차단·다른 매장 접근·변경 요청 경계와 자산 MIME·해시를 확인한다.
  4. Windows 코드가 바뀌면 호스트와 런처 정책·패키지 파일목록·CRC·해시를 재검증하고 새 버전으로 배포한다.
  5. 웹 허브·사용 안내·검수 양식·Figma 변경 목록·제품 MD에 같은 버전과 기능 범위를 기록한다.

배포본을 구분하는 방법

항목확인할 증거이번 기준
외부 웹실제 URL·서버 빌드·검증 시각시뮬레이터·관리자 최신 웹
Windows 실행파일파일명·버전·SHA-256·패키지 영수증0.2.0 고정 배포본
광고 콘텐츠매장·manifest 버전·해시·ACK웹/EXE 버전과 별개
디자인Figma 파일·페이지·노드·검토일대표 화면과 실제 코드의 차이 기록
문서작성일·근거·관찰/계획/미검증 구분2026년 11월 4일 개정본

다음 개발 우선순위

관리자 복귀 광고 상태 보존 수정은 현재 웹에 반영했고 외부·로컬 각 5회 왕복과 프런트 시험 38개를 확인했다. 실제 기기에서도 같은 회귀를 이어간다. 현장 카메라·두 입력 음성·장시간 생성 실패 복구, 실운영 광고 정책·운영 DB·코드서명·무인 업데이트는 후속 검증 대상이다. 과제·용역 납품은 별도 증거로 관리한다.

근거: 미러모션/07·08 변경 문서, verification/ui-functional.json, public-web-verification.json, desktop-native/RELEASE-0.2.0.md. 최신 회귀 수정 결과는 웹 허브의 검증 근거에서 추가 확인한다.