📌 WRLD - 타투 스튜디오 웹사이트

🔹 프로젝트 개요

• 작업 기간: 약 1주
• 작업 범위: 브루탈리즘 웹 디자인 및 프론트엔드 개발, 손그림 원본의 벡터화·3D 압출 오브젝트 구현, 1,229장 규모 아카이브 시스템, 이미지 변환 파이프라인, 헤드리스 CMS 및 관리자 콘솔 구축
• 사용 도구:
• Frontend: Vite (멀티페이지), Vanilla JS, CSS Mask
• 3D: Three.js, ExtrudeGeometry, SVGLoader
• Backend: Supabase (Postgres · Storage · Auth · RLS)
• Asset Pipeline: potrace, ImageMagick, WebP

🔹 프로젝트 목적

WRLD는 타투이스트의 마커 손글씨가 브랜드 전체인 스튜디오입니다. 그 손을 폰트 옆에 나란히 두면 결국 폰트가 이깁니다. 그래서 그림 자체를 만지는 대상으로 만들었습니다 — 버블레터 로고를 벡터로 따고 실제 두께를 가진 입체로 뽑아, 텅 빈 흰 화면 한가운데 두고 붙잡아 돌릴 수 있게 했습니다. 나머지는 규칙 하나를 따릅니다. 작은 자리는 기계 서체, 큰 자리는 작가의 손. 그 뒤에는 스튜디오가 개발자 없이 직접 운영하는 1,229장짜리 아카이브가 있습니다.

🔹 핵심 기술 및 구현 기능 (Key Technical Features)

• 실제 입체가 된 로고 (Hand-Drawn Mark as Real Geometry)
• 스캔한 마커 드로잉을 채워진 실루엣과 선 그림 두 겹으로 분리해 potrace로 벡터화하고, Three.js에서 각각 별개의 입체로 압출했습니다.
• 잉크 판을 바디보다 길게 뽑아 앞뒤 양면으로 튀어나오게 했습니다. 로고를 뒤집어도 그림이 그대로 읽힙니다.
• SVG는 Y축이 아래로 향해, 메시를 뒤집으면 페이스 와인딩이 반전돼 조명이 깨집니다. Shape 포인트 단계에서 Y를 뒤집고 폭을 1로 정규화해 해결했습니다.
• 관성 드래그 회전과 수평 복귀 스프링, 포인터 틸트, 잉크가 두꺼워지는 호버, 눌렸다 튀어오르는 클릭 임펄스, 방향키 조작, 유휴 시 자동 드리프트.
• WebGL이 없으면 원본 스캔으로 대체되고, prefers-reduced-motion을 존중하며, 탭이 백그라운드로 가면 렌더를 멈춥니다.
• 타입 시스템이 된 손글씨 (Handwriting as a Type System)
• 메뉴·대제목·라이트박스 컨트롤·페이지 번호가 전부 폰트가 아닌 스캔입니다. SVG로 따서 CSS 마스크로 쓰기 때문에 칠이 currentColor를 상속받아, 호버 블록 안에서 저절로 흰색으로 반전됩니다.