Inner Sleeve

5면 접이식 상자 렌더러

• · 같은 기사 DOM을 5벌 복제합니다. 중앙면은 그대로 두고 상·하·좌·우 4면을 rotateX / rotateY ±90°로 접어, perspective 20vw 아래에서 상자로 조립합니다 — 안쪽에서 들여다본 열린 종이상자입니다.
• · 측벽은 scaleX(-1)로 거울반전하고 투명도를 5%로 낮춰, 두 번째 사본이 아니라 종이 뒤로 비치는 글자처럼 읽히게 했습니다. 스크롤 시 다섯 면이 같은 translateY를 받기 때문에, 중앙면을 벗어난 문장이 접힌 자리에서 끊기지 않고 그대로 이어집니다.

라이브러리 없는 스무스 스크롤

• · 스크롤 라이브러리를 쓰지 않았습니다. body 높이를 기사 높이 + 뷰포트 하나로 강제해 네이티브 스크롤바를 살려 두고, requestAnimationFrame 루프에서 scrollY를 lerp 0.1로 추종한 값을 다섯 면의 transform에 씁니다 — 전부 합쳐 30줄 남짓입니다.
• · 같은 루프에서 진행률을 계산해 우상단 READ % 트랙을 움직입니다. 폰트·이미지 로드 후와 리사이즈마다 body 높이를 다시 재서, 스크롤 범위가 콘텐츠와 어긋나지 않습니다.

마우스로 움직이는 시점

• · 마우스 위치를 0.1~0.9 범위로 정규화하고 lerp 0.08로 완화한 뒤 perspective-origin에 반영합니다. 좌상단 33% / 35%에서 우하단 68% / 68%까지 이동하며, 상자가 손을 따라 튀지 않고 기울어집니다.
• · 완화 계수를 스크롤 lerp와 일부러 다르게 두어 두 움직임이 같은 박자에 묶이지 않습니다 — 페이지는 휠을 한 속도로, 시점은 마우스를 다른 속도로 따라갑니다.

클라이언트 사이드 칼럼 전환

• · 기사 4편은 JSON 데이터로 두고 렌더 함수가 HTML을 만듭니다. 칼럼을 바꾸면 GSAP으로 상자를 페이드 아웃하고, 스크롤을 0으로 되돌린 뒤, 새 기사로 다섯 면을 다시 마운트하고 페이드 인합니다.
• · 룰러 탭·화살표 버튼·키보드 세 경로가 하나의 goTo()를 공유하고, 전환 중에는 잠기기 때문에 페이드 도중 한 번 더 눌러도 화면에 기사 두 편이 남지 않습니다.

에셋 생성 파이프라인

• · 사이트의 모든 이미지는 소싱하지 않고 Python Pillow로 생성했습니다. 커버 콜라주 4종(돋보기·자수정·틀니·분재), 다큐 사진 8장, 스크린톤 조각 10종, 픽셀 커서 2종, 로고까지입니다.
• · 찢은 종이 가장자리·드롭 섀도·하프톤·필름 그레인·듀오톤을 조합 가능한 함수로 만들고 모든 렌더에 시드를 고정해, 무엇을 고치든 세트 전체를 똑같이 다시 생성할 수 있습니다.

켜고 끄는 레이어

• · 데스크톱에서는 hover로 조각이 밀리고 모바일에서는 Draggable + InertiaPlugin으로 끌리는 퍼즐 오버레이, 커스텀 커서, 마우스를 따라 회전하다 클릭하면 접히는 3D 커버 카드.
• · 원본형 헤더·플로팅 독·풀폭 룰러 세 가지 UI 버전을 마크업 안에 표시 태그 주석 블록으로 남겨 두어, 코드를 건드리지 않고 각각을 켜고 끌 수 있습니다.

페이지로서의 상자

회색 종이 위의 흰 상자. 헤더도 히어로도 없이, 스캔된 오브젝트가 도착하듯 오브젝트 라벨과 대제목으로 페이지가 열리고, 읽는 사람은 이미 상자 안에 있습니다.

풀폭 탭 룰러

룰러를 고르기 전에 UI 시안 12종을 그렸습니다 — 레이아웃 변경 4·재질 변경 4·컨셉 도출 4. 남은 안은 워드마크·탭 4개·링크·화살표를 한 줄에 두고, 현재 칼럼을 굵은 밑줄로 표시합니다.

텍스처로서의 활자

측벽의 거울반전 텍스트와 바닥으로 늘어지는 본문은 내용이 아니라 텍스처입니다. 기사는 Inter Tight, 라벨과 진행률 트랙은 JetBrains Mono가 맡습니다.

에디토리얼 블록

다섯 가지 블록으로 기사 4편을 전부 짭니다 — 단일 본문, 리드를 왼쪽에 둔 2단 본문, 화살촉 인용, 화자를 왼쪽에 세운 transcript, 사진 2장 블록.