페이지가 준비된 만큼만 움직이는 인트로
ncjk.net에 처음 방문하면 짧은 인트로가 열립니다. 인트로의 선은 페이지가 실제로 준비된 만큼만 자라고, 페이지를 가리는 대신 실제 화면으로 이어집니다.
맥락
ncjk.net의 첫 방문을 NCJK 워드마크와 가는 선 하나, 그리고 페이지로 이어지는 짧은 순간으로 시작하고 싶었습니다. 문제는 모든 로딩 화면이 가진 위험이었습니다. 시간에 맞춰 차오르는 진행 막대는 사실이 아닌 정보를 보여주고, 이미 쓸 수 있는 페이지를 가리는 인트로는 기다림만 늘립니다.
그래서 두 가지 조건을 정했습니다. 실제보다 더 준비된 것처럼 보이지 않을 것, 그리고 준비된 페이지를 오래 붙잡아 두지 않을 것.
결정
- 선의 길이는 실제 준비 상태를 따릅니다. 문서 해석, 웹 폰트 로딩, 첫 화면 이미지 디코딩 세 가지를 확인합니다. 선은 ‘계획한 시간 중 지난 비율’과 ‘끝난 신호의 비율’ 중 작은 값만큼만 자랍니다. 분석 도구나 아래쪽 이미지는 기다리지 않습니다.
- 퍼센트 숫자는 표시하지 않습니다. 숫자는 우리가 가지지 않은 정밀함을 암시합니다. 로딩이 길어지면 선이 멈추고 ‘아직 준비하고 있습니다…’라는 안내가 나옵니다.
- 실제 페이지 위에서 끝납니다. 워드마크는 헤더 로고로, 선은 제목 아래 구분선으로 이동합니다. 두 목표 위치는 그 순간의 실제 화면에서 측정하므로 화면 크기가 달라도 정확히 맞물립니다.
- 한 번만, 필요한 경우에만 보여줍니다. 사이트 밖에서 홈으로 처음 들어왔을 때만 재생하고,
#링크로 들어왔거나 동작 줄이기 설정이 켜져 있거나 브라우저 저장소를 쓸 수 없으면 보여주지 않습니다. 언어 전환이나 사이트 안 이동에서는 나오지 않으며, 건너뛰기 버튼과 Esc로 바로 끝낼 수 있습니다.
근거
사이트의 로컬 빌드에서 측정한 값입니다(페이지 이동 시작 기준).
| 조건 | 페이지 준비 | 인트로 종료 |
|---|---|---|
| 제한 없음 | 0.21초 | 2.01초 |
| 느린 4G, CPU 4배 느리게 | 1.92초 | 2.49초 |
| 폰트 3초 지연 | — | 3.76초 |
| 폰트 8초 지연 | — | 4.02초 |
빠른 환경에서는 2초 중 대부분이 의도한 시간이고, 느린 환경에서는 거의 그렇지 않습니다. 로딩이 아무리 길어져도 페이지는 약 4초 안에 보입니다. 모든 측정에서 워드마크와 선은 목표 위치에 정확히 도착했습니다.
돌아보기
테스트에서 가장 중요한 실패 하나를 발견했습니다. 인트로 스크립트가 잘못된 순간에 오류를 내면 아래 페이지가 계속 조작할 수 없는 상태로 남을 수 있었습니다. 지금은 서로 독립된 세 가지 출구가 있습니다. 스크립트가 전혀 실행되지 않아도 CSS가 4.2초에 인트로를 숨기고, 스크립트 타이머가 4.3초에 페이지를 풀어 주며, 시작 중 오류가 나면 인트로를 즉시 닫습니다.
아직 하지 않은 일도 있습니다. 자동화로 Chromium 계열 브라우저에서만 확인했고, 실제 Safari·Firefox·폴더블 기기 확인과 입력 반응성 측정은 남아 있습니다.