negotiation_annotated_3d.mp4(677K)를 NegotiationReplay 컴포넌트로 대체했다.
영상이라 두 가지를 못 고쳤고, 둘 다 픽셀에 구워진 것이 원인이었다.
화자
"아이마켓 구매 MD" 가 박혀 있었다. POC 고객사 이름이라 다른 MRO 회사에 영업할 때
쓸 수 없다. 이제 "구매 담당자" 로, 회사명 없이 역할만 쓴다 — 상수라 언제든 바꾼다.
색
실측하면 말풍선 #5A68CD, 목표가 라벨 #B96175, 와일드카드 배지 #DB840B 로 셋 다
토큰에 없는 색이었고, 정작 브랜드의 핵심 대비 장치인 민트(#0FFFD6, 상대편 색)는
한 번도 쓰이지 않았다. 이제 토큰만 쓴다 — 우리 쪽 파랑, 상대편 민트.
진행 막대도 파랑에서 민트로 차오르며 양쪽이 만나는 지점을 그린다.
부수 효과
- 다크 무대에 네이티브로 그리니 밝은 영상이 구멍처럼 뜨던 문제가 사라졌다.
카드로 감싸고 그림자로 띄우던 처리가 더는 필요 없다.
- 677K + 포스터 85K → 0. 어느 해상도에서도 선명하다(영상은 840x1260 고정이었다).
- role="img" + aria-label 로 스크린리더가 결론을 읽는다. 영상은 못 읽었다.
숫자는 지어내지 않고 DEMO_ITEMS[0] 을 그대로 쓴다. 위쪽 인터랙티브 데모와 같은
품목·같은 가격이라 둘을 다 본 사람에게 앞뒤가 맞는다.
구현 메모
- 화면 밖에서는 타이머를 멈춘다(IntersectionObserver). 페이지 최하단이라
대부분의 시간 동안 보이지 않는데 계속 도는 건 배터리를 쓰는 일이다.
- prefers-reduced-motion 이면 최종 상태를 정지 표시한다.
- 낙찰 카드 자리를 h-[74px] 로 항상 확보하고 내용만 켜고 끈다. 나타날 때 아래가
밀리면 페이지가 주기적으로 흔들린다. 대신 금액은 whitespace-nowrap — 고정 높이라
한 줄이라도 접히면 잘린다(실제로 "1,080,000" 뒤 "원" 이 접혔다).
검증: 1280x900 카드 319x74 · 375x812 285x74, 슬롯 초과·가로 넘침 없음.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Haewon Kam
d3e33b10f4