페이지가 넘어가는 순간

1. 클릭과 다음 화면 사이의 0.5초

링크를 누르면 지금 화면이 사라지고 잠깐 하얀 빈 화면이 지나간 뒤 새 페이지가 뜹니다. 너무 익숙해서 신경 쓰지 않지만, 사용자는 그 빈칸에서 아주 짧게 길을 잃습니다. 방금 누른 사진이 다음 화면 어디로 갔는지, 앞으로 온 건지 옆으로 온 건지 머릿속으로 다시 맞춰야 하니까요. 닐슨 노먼 그룹은 응답이 0.1초 안이면 즉각적이라고 느끼고, 1초를 넘기면 생각의 흐름이 끊긴다고 설명합니다. 화면 전환은 그 사이를 이어 주는 장치입니다. 목록의 썸네일이 그대로 커지며 상세 화면의 대표 이미지가 되면, 설명이 없어도 같은 이야기가 이어진다는 걸 보는 사람이 바로 알아챕니다. 책장을 넘기는 것과 책을 바꿔 드는 것의 차이죠.

2. 브라우저가 직접 이어 주는 화면 전환

예전에는 이런 전환을 만들려면 지금 화면과 다음 화면을 한꺼번에 띄워 놓고 자바스크립트로 위치를 계산해 움직여야 했습니다. 이제는 브라우저가 이 일을 맡습니다. 뷰 트랜지션 API(View Transitions API)는 바뀌기 직전 화면을 사진처럼 찍어 두고, 새 화면을 그린 다음, 두 장면 사이를 CSS 애니메이션으로 이어 줍니다. 두 화면의 요소에 같은 view-transition-name을 붙이면 썸네일이 상세 이미지로 자라나는 효과도 몇 줄이면 됩니다. 크롬은 2023년 111 버전부터, 사파리는 18 버전부터 지원했고, 2025년 10월 파이어폭스 144가 합류하면서 주요 브라우저 모두에서 쓸 수 있게 됐습니다. 지원하지 않는 브라우저는 평소처럼 넘어갈 뿐이라 손해 볼 일도 없습니다.

3. 움직임이 길을 알려 줄 때와 방해할 때

좋은 전환과 나쁜 전환은 다음 화면이 어디서 왔는지 알려 주느냐, 시간만 잡아먹느냐로 갈립니다. 상세로 들어갈 때 앞으로 움직였다면 뒤로 가기에서는 반대로 움직여야 방향이 헷갈리지 않습니다. 길이는 대개 0.3초에서 0.7초 사이가 알맞고, 그보다 길면 기다린다고 느낍니다. 아이폰의 '동작 줄이기'처럼 움직임을 꺼 둔 사용자도 있습니다. 어지럼증 때문인 경우가 많아서, 이 설정(prefers-reduced-motion)을 켠 사람에게는 전환을 빼거나 짧은 페이드로 바꿔야 합니다. 웹 접근성 지침(WCAG)도 1초에 세 번 넘게 번쩍이는 화면은 피하라고 권합니다. 화면 전체를 검게 덮는 전환은 한 번 볼 때는 멋져도, 하루에 수십 번 보면 눈이 먼저 지칩니다.

4. 세컨드펭귄의 시선: 레이아웃 격자로 화면을 넘깁니다

사람을 걸음걸이로 알아보듯, 사이트도 넘어가는 방식에서 성격이 드러납니다. 이번에 홈페이지를 새로 만들면서 전환만 세 번을 갈아엎었습니다. 처음엔 검은 원이 화면을 덮었다 열리는 방식이었는데, 몇 번 오가 보니 눈이 피로했습니다. 종이 한 장이 쓸고 지나가는 방식은 얌전했지만 심심했고요. 결국 사이트를 받치는 12칸 격자를 그대로 썼습니다. 누른 자리의 칸부터 새 페이지가 기둥처럼 차례로 솟아올라 화면을 덮는 방식이죠. 레이아웃과 같은 뼈대로 움직이니 전환도 사이트의 일부처럼 보였습니다. 뷰 트랜지션이 없는 브라우저에서는 종이 전환이 대신하고, 동작 줄이기를 켠 분께는 전환 없이 바로 넘어갑니다.