🔀 :: (#26) efface 브랜드 소개 스크롤 씬 추가

[Xixn2]

원인

efface(지우다)라는 이름의 의미를 사이트에서 직접 보여주는 섹션이 없었다.
히어로 바로 아래(두 번째)에 브랜드 정의를 시각화하는 씬을 넣는다. 기존 섹션은 한 칸씩 뒤로 밀린다.

수정

components/sections/EffaceIntro.tsx (신규) — 스크롤 진행도 하나로 구동되는 700vh 핀 고정 씬:

1. // EFFACE 라벨 타이핑 + 커서
2. 사전 정의(ef·face /ɪˈfeɪs/ …)가 이어서 타이핑
3. 배경에 흩어진 군더더기 12장이 중앙에서 퍼지는 원형 마스크로 지워진다 (각자 다른 주기로 부유)
4. 지우개(puck)가 그 지워지는 경계를 따라 이동
5. 본문이 단어 단위로 어두운 색에서 밝아지고, "지우고" 계열 단어에는 취소선이 그어진 뒤 회색으로 남는다.
   구슬 2개가 팝으로 등장하고 efface만 파란 강조색을 띤다

• public/clutter/c01–c12.png — 군더더기 이미지 12장 (총 388KB)
• messages/{ko,en}.json — 카피 추가. 강조는 번역 가능한 토큰으로 표현한다:
  ~취소선~, *강조*, {orb1} / {orb2}
• app/globals.css — 부유용 bob 키프레임, prefers-reduced-motion에서 정지
• 모바일은 핀 고정 없이 같은 타임라인을 블록 자체 스크롤 위치로 재생하고, 본문 크기를 읽기 좋게 키운다

구현 중 잡은 문제

카피의 {orb1} 중괄호를 next-intl이 ICU 메시지 변수로 해석해 Efface.sentence라는 키 이름이
그대로 렌더됐다. 해당 문자열만 t.raw()로 읽어 자체 파서에 넘기도록 고쳤다.

검증

데스크탑 1280×800 실측:

진행도	밝은 단어	취소선	구슬
0.36	0/23	0	0
0.50	8/23	0	1
0.65	14/23	3	2
0.80+	19/23	3	2

(19/23은 취소선이 그어진 3개가 의도대로 회색으로 남기 때문)

• 라벨·정의 타이핑 진행 확인 (0 → 45 → 103자)
• 지우개 opacity 0 → 1 → 0 (pm 0.01~0.97 구간)
• 섹션 순서: hero → efface → apps → capabilities → approach → about → contact
• tsc --noEmit / next build 통과

비고

• 서버 변경 없음.
• 씬 루프도 화면 밖·탭 숨김 시 멈춘다 (#16의 성능 원칙 유지).

---

Closes #26