모바일 DOM 충실도은(는) 무엇을 하나요?
이 스킬은 컴포지션을 작성하기 전에 사용합니다. 진실의 원천(source of truth)은 정적 스크린샷이 아닌 모바일 뷰포트의 실제 사이트입니다.
워크플로우
- 모바일 뷰포트로 브라우저에서 URL을 엽니다.
- 기준 해상도를 정의합니다 (보통
390x844,393x852,414x896또는 이에 가까운 값). - 비디오에 나타날 DOM 섹션을 검사합니다.
- 텍스트,
href,src,alt, 주요 클래스, 역할(role), 상호작용 상태(interactive state)를 추출합니다. - 컴포넌트가 보이는 상태인지 확인한 후에만 클릭 좌표를 매핑합니다.
- 관련 상태를 나열합니다: 클릭 전, 클릭 후, 스크롤 후, 장바구니, 결제, 확인 등.
MCP DevTools / console
MCP DevTools를 사용할 수 있을 때는 콘솔을 통해 실제 DOM을 조회하십시오. 추출할 데이터 예시:
const el = document.querySelector("SECTION_SELECTOR");
const rect = el.getBoundingClientRect();
({
text: el.innerText,
rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
classes: el.className,
images: [...el.querySelectorAll("img")].map((img) => ({
src: img.currentSrc || img.src,
alt: img.alt,
width: img.naturalWidth,
height: img.naturalHeight,
})),
links: [...el.querySelectorAll("a")].map((a) => ({
text: a.innerText,
href: a.href,
classes: a.className,
})),
});
클릭을 검증하려면:
const target = document.querySelector("TARGET_SELECTOR");
const r = target.getBoundingClientRect();
({ centerX: r.x + r.width / 2, centerY: r.y + r.height / 2, visible: r.width > 0 && r.height > 0 });
이 값들을 사용하여 컴포지션에서 커서 타이밍과 위치를 정의합니다.
캡처할 내용
- 정확한 제품명.
- 화면에 표시된 그대로의 혜택(benefit).
- 가격과 조건.
- 버튼 및 CTA.
- 주요 이미지.
- 캐러셀 카드.
- 클릭 검증을 위한 안정적인 선택자.
규칙
- DOM이 텍스트를 제공한다면 카피를 임의로 만들지 마십시오.
- 타임라인에 컴포넌트가 나타나기 전에 클릭하지 마십시오.
- 스크린샷을 구조의 유일한 출처로 사용하지 마십시오.
- 스냅샷, 쿠키, 로그 또는 검사 파일을 게시하지 마십시오.
- 사이트가 지연 로딩(lazy loading)을 사용한다면
src를 추출하기 전에 이미지가 로드될 때까지 기다리십시오.
예상 인계 사항
짧은 맵(map)을 생성하십시오:
Scene: Product carousel
Selector: .rf-cards-scroller-platter
Visible at: 2.0s
Action: horizontal scroll
Click target: card link, center x/y after card returns to center
Required text: ...
Required images: ...
이 맵을 사용하여 HyperFrames 컴포지션을 안내합니다.
충실도 기준
다음 조건이 모두 충족될 때 해당 섹션이 충실하다고 간주합니다:
- 텍스트가 원본 DOM과 일치할 것;
- 이미지가 동일하거나 허용된 대체물일 것;
- 간격이 모바일 계층 구조를 따를 것;
- 카드, 버튼, 레이블이 동일한 시각적 순서를 사용할 것;
- 클릭이 실제 컴포넌트 경계 상자 내에서 발생할 것;
- 커서 동작 전에 컴포넌트가 렌더링되어 있을 것.