인트로 페이지 반응형 재설계 + 스크롤 스파이 버그 두 방

"PPT형" 구성이라는 피드백

/intro가 1440px 고정폭에 텍스트 위주 구성이라는 피드백을 받았다(FE-12).

반응형은 미디어쿼리 대신 auto-fit + minmax(min(Npx,100%), 1fr) 패턴으로 처리했다. 처음엔 고정 minmax(480px,1fr) 같은 값을 썼는데, 좁은 컨테이너보다 바닥값이 커서 375px 화면에서 가로 오버플로가 나는 걸 진단 스크립트로 발견했다 — min(Npx,100%)로 캡을 씌워 해결했다. grid로 못 푸는 두 곳(헤더 앵커 내비 숨김, 한계 리스트 라벨 줄바꿈)만 globals.css 미디어쿼리로 남겨뒀다.

내용도 다시 짰다. "설계 판단" 7행 표를 Before→After 비교 카드로 바꿔서 표 자체를 없애고 반응형 문제도 같이 해결했다. 결론 인용구는 브랜드 소프트 배경의 큰 텍스트로 격상하고, 전반적으로 폰트를 키우고 텍스트를 번호 배지·통계 칩·강조색으로 대체해서 밀도를 낮췄다.

스크롤 스파이 버그 두 개

IntroNav.tsx를 새로 만들어 IntersectionObserver로 현재 섹션을 추적해 내비 항목을 강조하게 했는데, 실측하다가 버그 두 개를 잡았다.

1. 콜백의 entries만 보면 "방금 화면에서 빠져나간 섹션"만 담긴 배치가 들어올 때 상태가 멈추는 문제 — 전체 상태를 Set에 누적하는 방식으로 고쳤다.
2. 인접 섹션이 동시에 감지 밴드에 걸릴 때 픽셀 좌표 비교가 경계에서 흔들리는 문제 — 문서 순서상 더 아래쪽 섹션을 우선하는 규칙으로 고쳤다.

앵커 클릭 시 sticky 헤더에 가려지지 않도록 scrollMarginTop을 추가하고, prefers-reduced-motion을 존중하는 smooth scroll을 적용했다. 이후 피드백으로 헤더도 64px에서 84px로, 로고·내비·CTA를 비례해서 키웠다.

검증은 375/820/1440px 헤드리스 스크린샷으로 가로 오버플로 0건, 전체 스크롤 트레이스로 5개 섹션 전환 순서까지 확인했다. 같은 시점에 CSS 로고를 실제 이미지 파일로 교체하고(sharp로 512×512 리사이즈+라운드+투명 처리), Next.js 파비콘 규칙에 맞춰 app/icon.png로도 등록했다.