📌 Hinge: 아티스트 & 디렉터 아카이브 포트폴리오
🔹 프로젝트 개요
- 작업 기간: 2026.03 ~ 2026.04
- 작업 범위: 미니멀리스트 웹 디자인, 프론트엔드 개발, 호버 기반 동적 상태 관리 및 라우팅 구현
- 사용 도구:
- Frontend: Next.js (App Router), TypeScript, Tailwind CSS
- Creative / UI: React, CSS Modules
- Animation: GSAP
- Deployment: Vercel
🔹 프로젝트 목적
"Raw aesthetics and uncompromising focus (날 것의 미학과 타협하지 않는 집중)."
장식적인 UI 요소를 철저히 배제하고 '텍스트'와 '이미지'라는 본질에만 집중한 디지털 브루탈리즘(Digital Brutalism) 기반의 아카이브 웹사이트입니다. 아티스트 겸 디렉터(Elizabeth)의 작업물과 이력을 마치 오래된 타자기(Typewriter)로 타이핑한 듯한 건조하고 날것의 무드로 담아내어, 역설적으로 가장 강렬하고 독창적인 시각적 인상을 남기는 데 목적을 두었습니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
- Dynamic Hover Indexing (동적 호버 인덱싱)
- Instant State Management: 좌측의 텍스트 리스트에 마우스를 올리는(Hover) 즉시 우측 영역의 상세 설명과 이미지가 전환되는 구조입니다. React의 상태 관리(State Management)를 최적화하여 딜레이나 깜빡임 없는 즉각적인 렌더링을 구현했습니다.
- Pre-loading Media: 호버 시 이미지가 늦게 뜨는 현상을 방지하기 위해 뷰포트 진입 전 미디어 에셋을 사전에 로드(Pre-load)하여 매끄러운 탐색 경험을 제공합니다.
- Fluid Typography & Layout (유동적 타이포그래피 및 레이아웃)
- Responsive Text Alignment: 모노스페이스(Monospace) 서체를 활용하여 브라우저 창 크기에 따라 텍스트 래핑과 여백이 유동적으로 반응하도록 설계했습니다. 어떤 해상도에서도 문서적인 텍스트 정렬과 엄격한 그리드가 유지됩니다.
- Minimalist UI Logic (미니멀리스트 UI 로직)
- Invert Focus State: 현재 선택되거나 호버된 메뉴 항목은 검은색 배경에 흰색 글씨로 반전(Invert)되도록 처리하여, 극도로 절제된 화면 속에서도 사용자가 자신의 위치를 명확히 인지할 수 있는 직관적인 마이크로 인터랙션을 적용했습니다.
🔹 디자인 포인트
- Digital Brutalism (디지털 브루탈리즘): 화려한 컬러를 완전히 배제한 흑백(Black & White)의 대비, 그리고 시스템 터미널이나 옛날 문서를 연상시키는 서체(Courier/Monospace)만을 사용하여 아방가르드한 아날로그 감성을 웹으로 끌어왔습니다.
- Extreme Negative Space (극단적인 여백): 화면의 넓은 공간을 의도적으로 비워두는 과감한 여백(Negative Space) 배치를 통해, 시선이 분산되지 않고 리스트의 텍스트와 거친 질감(Lo-fi/Grainy)의 흑백·세피아 톤 사진에 온전히 꽂히도록 유도했습니다.
- Raw & Cinematic Contrast: 정제되지 않은 듯한 거친 파도, 바위, 흙먼지가 날리는 도로 등의 원초적인 이미지를 텍스트와 병치시켜 시각적인 긴장감과 시네마틱한 분위기를 조성했습니다.
🔹 담당 역할
- Web Designer & Developer:
- 브루탈리즘 기반 미니멀리스트 UI/UX 기획 및 화면 레이아웃 설계.
- Next.js 아키텍처 세팅 및 컴포넌트 구조화.
- 마우스 호버에 따른 즉각적인 데이터/미디어 교체 로직 및 인터랙션 개발.
🔹 주요 화면