모션 매치 (Motion match)
사용자가 어떤 움직임을 가리키며 우리 것도 같은 방식으로 움직이길 원하거나, 그렇게 움직인다는 증거를 원할 때 사용하십시오. 결과물은 코드, 숫자, 시트이며 '대충 비슷해 보인다'는 절대 허용되지 않습니다.
권리가 먼저입니다 (Rights come first)
무엇이든 캡처하기 전에 참조의 소유권을 결정하고 첫 번째 메시지에 명시하십시오.
| 참조 | 허용되는 작업 |
|---|---|
| 자체 작업, 또는 사용자가 소유하거나 라이선스를 보유한 것 | 모든 정확도 (픽셀 레벨 포함) |
| 다른 사람의 사이트 또는 비디오 | 타이밍, 이징, 순서, 거리만 측정하여 서면 명세로 작성하고, 우리 고유의 디자인으로 구축 |
다른 사람의 작업에 대해서:
- 그들의 코드, 셰이더, 에셋, 글꼴, 브랜드, 레이아웃 또는 카피를 절대 복사하지 마십시오. 실제 제품을 우리 것인 양 재현하지 마십시오.
- 요청 내용과 관계없이 픽셀 일치 매칭은 불가능합니다. 대신 모션 레벨 매칭을 제안하고 이유를 설명하십시오: "당신의 디자인으로 움직임 방식을 매칭할 수 있습니다. 그들의 모양을 복사하는 것은 그들의 디자인 작업을 가져오는 것이므로 하지 않겠습니다."
- 로그인 장벽, 페이월, 봇 체크, DRM은 그대로 유지됩니다. 사이트의 이용 약관을 존중하고 일반 방문자가 보는 것만 캡처하십시오. 페이지에 접근할 수 없으면 화면 녹화를 요청하십시오. 다른 사람의 비디오를 절대 다운로드하지 마십시오.
- 원시 캡처는 무시되는 로컬 폴더에 보관됩니다. 절대 커밋, 게시 또는 결과물에 사용되지 않으며, 사용자가 선택하면 삭제됩니다. 서면 숫자만 전달됩니다. 사용자에게 해당 파일의 위치를 알려주십시오.
사용자가 참조를 소유하고 있다고 말하고 모순되는 내용이 없으면, 그 말을 받아들이고 명세에 기록하십시오. "그 회사 사이트와 동일하게 만들어 주세요"는 라이선스가 아닙니다. 소유권이 불분명할 때는 --rights third-party를 사용하십시오.
정확도 (Fidelity)
첫 번째 메시지에서 정확도 수준을 명시하십시오. 이 수준이 검증 기준을 결정합니다.
| 수준 | 일치해야 하는 항목 | 다를 수 있는 항목 |
|---|---|---|
| 모션 (기본값) | 트리거, 순서, 지연, 각 단계의 타이밍 (80 ms 이내), 이징, 방향, 거리 | 카피, 색상, 글꼴, 이미지, 레이아웃, 브랜드 |
| 픽셀, 자체 또는 라이선스 보유만 | 위 모든 항목 + 글꼴, 크기, 색상, 간격, 에셋; 평균 불일치 최대 2% | 사용자가 변경을 요청하지 않은 항목 없음 |
| 혼합 | 위 수준 중 하나에 따라 매칭된 부분 | 매칭된 모션을 깨뜨리지 않는 추가 항목 |
사용자가 지정한 것(한 섹션, 한 위젯, 또는 시간 범위)만 매치하십시오.
방법 (Method)
output/motion-match/<name>/ 또는 Git이 무시하는 다른 폴더에서 작업하십시오. 모든 라운드를 유지하십시오. --playwright와 --chrome을 전달하거나 PLAYWRIGHT_CORE와 CHROME_PATH를 설정하십시오. Node 22, 기존 브라우저 드라이버 및 기존 브라우저가 필요하며, 비디오에는 ffmpeg가 필요합니다. 아무것도 설치되지 않습니다.
-
범위 설정. 대상, 프로젝트 내 목적지, 권리, 정확도를 작성하십시오.
-
참조 캡처
scripts/capture.mjs또는 제공된 비디오의 경우scripts/frames.mjs를 사용하십시오. 결정한 권리를 전달하십시오:node <skill>/scripts/capture.mjs --url <page> --out <dir>/ref --rights third-party \ --selector .hero --track ".title, .cta" --duration 2000 -
모든 시트를 읽으십시오.
scripts/sheet.mjs filmstrip을 실행한 다음 각 시트를 여십시오. 이징은 중간 프레임에 있습니다. -
명세를 작성하십시오.
scripts/spec.mjs draft를 실행하십시오: 요소당, 속성당 한 행.?는 프레임 읽기를 완료하지 않았음을 의미하며, 각 물음표가 대체될 때까지 검사가 실행되지 않습니다. -
구축 프로젝트 자체 스택에서, 타사 참조의 경우 자체 디자인으로 수행하십시오.
-
우리의 것을 같은 방식으로 촬영하십시오. 참조 명령을 재사용하되,
--url,--out,--rights만 변경하십시오. 다른 설정은 설정 자체를 측정하며,compare.mjs는 이를 실패 처리합니다. -
비교하십시오.
scripts/spec.mjs check,scripts/compare.mjs,scripts/sheet.mjs compare를 실행하십시오. 모든 시트를 읽으십시오. -
숫자가 가리키는 가장 작은 것을 변경하십시오. 라운드당 하나의 원인만 수정하고 6단계로 돌아가십시오.
-
5라운드 후에도 여전히 실패하는 행이 있으면 중단하고 해당 숫자와 이유를 보고하십시오. 임계값은 그대로 두십시오.
-
보고서는 단독으로 읽을 수 있도록 작성하십시오: 권리와 정확도; 매치된 것과 추가된 것; 파일 및 모션 트리거 방법; 마지막 라운드의 표; 시트 경로; 각 잔차에 대한 숫자와 이유; 원시 타사 캡처가 있는 위치.
작업 실패 예시
라운드 1에서 세 개의 카드 중 하나가 실패했습니다:
.card-1 opacity start +300 ms end +300 ms easing RMSE 0.0003 FAIL
.card-2 opacity start +300 ms end +300 ms easing RMSE 0.0055 FAIL
gaps 116.7 against 116.7 pass
모든 행이 같은 양만큼 늦고 곡선과 간격이 정확하므로 유일한 원인은 기본 지연입니다. 그 숫자 하나만 변경하고 다시 촬영하십시오. 프레임을 정렬하면 이 행이 통과하고 300ms 늦은 애니메이션이 배송될 수 있기 때문에 compare.mjs는 두 캡처 간 --auto-align을 거부합니다.
함정 (Pitfalls)
- 양쪽 간의 뷰포트 또는 크롭이 다를 경우: 코드를 건드리기 전에 캡처를 수정하십시오.
- 첫 번째와 마지막 프레임만으로 판단하지 말고 중간 프레임을 읽으십시오.
- 폰트: 대체 폰트는 모든 프레임의 픽셀을 변경합니다. 모션 정확도에서는 타이밍 행만 읽고 텍스트 픽셀은 무시하십시오.
- 페이지가 이미 콜드 스타트에 대해 바쁜 경우: 양쪽에 동일한
--wait-before를 사용하십시오. - 스크롤 기반 모션은 시간이 아닌 스크롤 위치를 따릅니다. 동일한
--scroll-steps와--scroll-ms를 사용하고scrollY별로 비교하십시오. - 스프링:
easing.mjs는 오버슈트, 피팅된 강성 및 감쇠를 보고합니다. 오버슈트와 안정화 시간으로 튜닝하십시오. - 화면 녹화에는 커서, 브라우저 크롬 및 압축 노이즈가 포함됩니다. 이를 크롭하고
--activity-threshold를 약간 높이십시오. - 캔버스 콘텐츠: 양쪽에 가상 클록과 동일한
--seed를 사용하십시오. 실제 클록의 랜덤 콘텐츠는 머신을 측정합니다. - CSS 애니메이션은
timing.easing에linear를 보고합니다. 실제 이징은 각 키프레임에 있습니다.
경계 (Boundaries)
제품이 가져야 할 모션을 결정하려면 orbyn-ui-design을, 영상 제작에는 technical-illustration을, 가짜 UI에는 product-illustration을 사용하십시오. 비디오는 코드 전용 규칙을 따릅니다: 기술 학습을 위해 참조를 연구하고, 그 프레임을 절대 복사하지 마십시오.
필요할 때 읽으십시오 (Read when needed)
- 캡처 레시피, 트리거 및 출력 파일에 대해서는 capture를 읽으십시오.
- 명세 형식과 프레임 읽기 방법에 대해서는 analysis를 읽으십시오.
- 이징, 스프링 및 구축 패턴에 대해서는 implementation을 읽으십시오.
- 합격 기준과 각 실패의 의미에 대해서는 verify를 읽으십시오.