WRLD

실제 입체가 된 로고

• · 스캔한 마커 드로잉을 채워진 실루엣과 선 그림 두 겹으로 분리해 potrace로 벡터화하고, Three.js에서 각각 별개의 입체로 압출했습니다.
• · 잉크 판을 바디보다 길게 뽑아 앞뒤 양면으로 튀어나오게 했습니다. 로고를 뒤집어도 그림이 그대로 읽힙니다.
• · 관성이 붙은 드래그 회전과 수평으로 되돌아오는 스프링, 포인터 틸트, 잉크가 두꺼워지는 호버, 클릭하면 눌렸다 튀어오르며 도는 임펄스.
• · WebGL이 없으면 원본 스캔으로 대체되고, prefers-reduced-motion을 존중하며, 탭이 백그라운드로 가면 렌더를 멈춥니다.

타입 시스템이 된 손글씨

• · 메뉴·페이지 대제목·라이트박스 컨트롤·페이지 번호가 전부 폰트가 아니라 스캔입니다. SVG로 따서 CSS 마스크로 쓰기 때문에 칠이 currentColor를 상속받아, 호버 블록 안에서 저절로 흰색으로 반전됩니다.
• · 바운딩박스가 아니라 실측 캡하이트로 크기를 맞춰 FLASH와 WORK가 같은 베이스라인에 앉고, F의 하강 꼬리만 그 아래로 빠집니다.
• · 기계 서체(Archivo 900)는 2px짜리 마커 획이 버티지 못하는 작은 자리에만 씁니다. 두 결의 충돌이 곧 디자인입니다.

1,229장 아카이브

• · 플래시 도안 990장과 타투 작업 사진 239장. Supabase Storage에서 서빙하고, 두 섹션이 같은 media 테이블 하나를 공유합니다.
• · FLASH와 WORK는 템플릿 하나로 돌아가고 섹션은 데이터 속성으로만 갈립니다. 50장씩 끊어 DOM을 가볍게 유지하되, 라이트박스는 전체를 인덱싱해 페이지 경계를 넘으면 그리드를 갈아끼웁니다.
• · 고정 그리드가 아니라 CSS 컬럼 모자이크 — 정사각 스캔과 3:4 사진이 크롭 없이 함께 놓이고, 모든 이미지에 실치수를 박아 지연 로딩이 레이아웃을 밀지 않게 했습니다.

스튜디오가 직접 쓰는 CMS

• · 업로드·교체·제목수정·삭제·정렬을 처리하는 비공개 관리자 콘솔. RLS로 읽기는 공개, 쓰기는 인증된 사용자만 가능합니다.
• · 정렬은 페이지 안에서 드래그하거나, 카드 번호를 고쳐 넣어 두 자리를 통째로 맞바꿉니다. 천 장 중 뒤쪽 한 장을 맨 앞으로 올리는 유일한 방법입니다.
• · 빌드 단계에서 HEIC·JPEG 원본을 WebP 2종으로 변환하며 EXIF 회전을 굽고 메타데이터를 제거합니다. 위치정보가 웹에 올라가지 않습니다.

장식 없는 브루탈리즘

종이 흰색과 검은 잉크, 헤어라인, 둥근 모서리 없음, 그라디언트 없음. 화면이 거의 비어 있어 가운데 오브젝트 하나가 전부를 감당해야 하는데, 움직이기 때문에 감당해냅니다.

작으면 기계, 크면 손

가는 마커 획은 메뉴 크기에서는 미완성 낙서로 읽히고 제목 크기에서는 작가성으로 읽힙니다. 둘을 섞어 쓰는 대신 규칙이 자리를 정하게 했습니다.

남겨둔 결함

압출한 바디와 잉크가 외곽 벽을 공유해서, 회전하면 모서리를 따라 빗금 형태의 z-파이팅이 어른거립니다. 그대로 뒀습니다 — 표면의 질감처럼 읽히고, 스튜디오도 깔끔하게 고친 쪽보다 이쪽을 택했습니다.