WEB DEVELOPMENT / CASE STUDY 01TAEYU LEE — VISUAL ARCHIVE
A visual archive,
built to move.
작품을 목록으로 나열하는 대신, 직접 탐색하는 공간으로 만들었습니다. 이 페이지는 현재 사이트의 원형·3D 아카이브가 어떻게 작동하는지 실제 구현을 바탕으로 기록합니다.
아카이브 직접 탐색하기THE MATERIAL / 07 PROJECTS
한 프로젝트, 한 장의 대표 이미지.
이 대표 이미지들이 공간 속에서 반복 배치됩니다. 카테고리를 바꾸면 같은 규칙으로 해당 프로젝트만 다시 구성합니다.
THE SYSTEM / 03 DECISIONS
보이는 움직임 뒤의 구조.
01
한 장의 이미지에서 공간으로
일곱 프로젝트의 대표 이미지를 출발점으로 삼았습니다. 원형 보기에서는 피보나치 구면 배치로 이미지를 고르게 분산하고, 깊이에 따라 크기와 밝기를 달리해 앞뒤 관계를 만듭니다.
Fibonacci sphere · depth-based scale02
두 보기, 하나의 좌표계
같은 이미지 데이터가 구형과 3D 아카이브를 오갑니다. 각 이미지의 두 위치를 보간해 보기 전환 중에도 이미지가 끊기거나 새로 나타나지 않도록 구성했습니다.
Shared data · interpolated positions03
손끝에서 이어지는 움직임
requestAnimationFrame으로 회전을 갱신합니다. 드래그 속도를 놓는 순간의 관성으로 연결하고, 자동 재생이 켜져 있으면 멈춤 없이 다음 움직임으로 이어집니다.
Pointer events · inertia · frame loopBEYOND THE ANIMATION
움직이지 않아도 탐색할 수 있도록.
01 / INPUT
마우스 밖에서도
방향키로 프로젝트를 탐색하고 Home 키로 처음 구도를 복원할 수 있습니다. 모바일에서는 스와이프와 일반 스크롤 흐름을 구분합니다.
02 / MOTION
움직임의 선택권
재생을 직접 멈출 수 있으며, 운영체제의 동작 줄이기 설정을 따릅니다. 키보드로 내용을 읽는 동안에는 자동 회전이 방해하지 않습니다.
03 / PERFORMANCE
필요할 때만 그리기
아카이브가 화면 밖에 있거나 탭이 숨겨지면 애니메이션 루프를 중지합니다. 좁은 화면에서는 별도의 읽기 쉬운 프로젝트 목록을 제공합니다.