Problem · 과제
3D 홈페이지가 휴대폰에서도 같은 결로 움직이게 하는 일
3D 홈페이지는 데스크톱에서는 잘 움직여도 휴대폰에서는 느리게 열리거나, 글이 먼저 움직이고 3D가 늦게 따라와 어긋나 보이기 쉽습니다.
해외 3D 홈페이지를 기준으로 삼아, 같은 휠 입력에서 화면이 바뀌는 결을 녹화해 비교하며 맞췄습니다.
Decisions · 판단과 버린 길
무엇을 먼저 정했고 무엇을 버렸나
글과 3D는 한 값으로
3D 쪽에만 따로 두었던 따라가기를 지우고, 문서 스크롤 위치 하나를 글과 3D가 함께 읽게 했습니다. 문서 스크롤을 통째로 없애는 방식은 문의 칸과 바로가기 링크가 그 위에서 돌기 때문에 버렸습니다.
장면 경계에서 서지 않게
장면마다 멈췄다 다시 출발하던 카메라 길을 끝에서도 움직이는 이음으로 바꿨습니다. 장면 하나에 240점씩 미리 뽑아 경계의 꺾임을 둥글게 폈습니다.
휴대폰은 단계적으로 낮춤
휴대폰에서 프레임이 자주 늦으면 빛 번짐, 픽셀 비율, 계단 현상 보정 순으로 한 단계씩 낮춥니다. 장면을 6초 안에 받지 못하면 정지 그림 판으로 엽니다.
Result · 결과 화면
실제 화면
Evidence · 확인한 것
무엇으로 확인했나
- 같은 휠 입력 20초 동안 글과 3D 장면 위치의 차이를 프레임마다 재어, 1536 폭에서 1,232 프레임 모두 0px 로 맞췄습니다.
- 스크롤 중 프레임을 재어 1536x780 에서 평균 59.9fps 를 확인했습니다.
- 휴대폰 4G 망과 CPU 4배 감속 조건에서 첫 장면이 열리는 시간을 세 번 재어 3,662ms, 3,669ms, 3,702ms 를 얻었습니다. 6초 안에 장면을 받지 못해 정지 그림 판으로 넘어간 경우는 없었습니다.
- 키보드, 머리 메뉴, 오른쪽 점, 문의 칸, 움직임 줄이기 설정을 포함한 기능 시험 33개를 배포 전마다 다시 돌립니다.
Contact · 프로젝트 문의
비슷한 프로젝트를 문의해 주십시오.
현재 상황과 일정만 적어 보내 주셔도 검토 후 맞는 범위를 제안드립니다.