멈춰도 멈추지 않던 화면
이전 쇼케이스는 스크롤 위치에 따라 화면을 최대 24°까지 기울였습니다. 그런데 스크롤에 맞춰 바뀌는 transform에 0.64초짜리 탄성 transition과 JavaScript 보간이 함께 걸려 있었습니다. 그래서 스크롤을 멈춘 뒤에도 화면이 약 2,013ms 동안 더 움직였고, 화면이 고정된 773px 구간 가운데 557px은 스크롤해도 아무 변화가 없었습니다.
작업 화면을 보여 주는 자리에서 화면이 손보다 늦게 움직이면, 보는 사람은 그것을 느린 사이트로 받아들입니다. 그래서 효과를 다듬는 대신 구조를 바꾸기로 했습니다.
고정된 무대와 세 단계
새 쇼케이스는 화면을 한자리에 고정하고, 옆의 세 단계 탭으로 장면을 바꿉니다. 단계마다 창 높이의 24%만큼 스크롤 거리를 배정해, 높이 900px 화면에서는 세 단계가 정확히 648px 안에서 끝납니다. 스크롤 위치는 지금 어느 단계인지만 정하고, 움직임은 단계가 바뀔 때 한 번만 일어납니다.
스크롤은 단계를 고르고,
움직임은 그 결과를 보여 줍니다.
움직임은 짧게, 정보는 화면 위에
단계가 바뀌면 이미지가 450ms 동안 교차하고, 카메라가 900ms에 걸쳐 제자리를 찾습니다. 스크롤이 화면을 직접 끌고 다니지 않으므로, 스크롤을 멈춘 뒤 화면이 뒤늦게 따라오는 일도 없습니다. 장면마다 지금 보이는 기능을 가리키는 짧은 설명을 화면 위에 붙였고, 작은 화면에서는 같은 세 장면을 손가락으로 넘기는 스냅 스트립으로 보여 줍니다.
바뀐 쇼케이스는 moble.co.kr 첫 화면에서 확인하실 수 있습니다. 개발 노트에서는 앞으로도 이렇게 확인한 수치와 결정을 함께 기록하겠습니다.