📌 AFTERS - 파티 크루 굿즈 스토어 웹사이트

🔹 프로젝트 개요

• 작업 기간: 약 1개월 (브랜드 세계관·화면 구축·인터랙션·사진 프로덕션·배포 전 과정)
• 작업 범위: 크루 세계관 및 상품 13종 구성, 영문 카피 전체, 포스터 크기 워드마크·3색 테마 시스템, 숍·상품 상세·파티 아카이브·모바일 메뉴 구축, 로딩 인트로·커서 착용컷 전환·상세 리빌·페이지 전환 인터랙션, 상품·착용·파티 사진 제작 파이프라인, 아이콘·공유 이미지, 배포
• 사용 도구: Next.js 16, React 19, TypeScript, Tailwind CSS 4, GSAP 3, Lenis, 자체 사진 프로덕션 파이프라인, Playwright, Vercel

🔹 프로젝트 목적

AFTERS는 자기 공간 없이 매달 다른 창고와 클럽을 빌려 파티를 여는 베를린 테크노 크루입니다. DJ와 디자이너 몇 명이 운영하고, 굿즈는 도어·바·조명 스태프용 옷에서 시작했습니다. 사람들이 계속 달라고 했고, 클로크룸 옆 테이블이 숍이 됐습니다.

그래서 사이트는 두 가지 일을 합니다 — 13개 상품을 팔고, 지금까지 연 모든 밤을 기록합니다. 과제는 계산대가 아니라 그 파티의 플라이어처럼 느껴지는 스토어였습니다. 클럽 포스터 타이포, 애시드 한 색, 그리고 밤이 시작되는 방식으로 들어오는 모션.

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

• 플라이어를 붙이듯 열리는 인트로: 검정 화면 위로 지난 파티 포스터가 한 장씩 쌓이고, 워드마크가 한 글자씩 올라오고, 카운터가 점점 빨라지며 100까지 달립니다. 포스터가 접혀 사라지면 검정 막이 위로 걷히며 숍이 드러나고, 헤더와 첫 줄도 같은 GSAP 타임라인으로 들어와 로딩 화면과 사이트가 하나의 장면으로 이어집니다.
• 커서에 답하는 비대칭 그리드: 넷이 꽉 찬 줄 다음에 높이가 다른 둘·하나가 오고 빈칸을 일부러 남겨, 포스터 벽처럼 읽히는 숍 그리드를 만들었습니다. 카드에 커서를 올리면 스튜디오컷이 착용컷으로 바뀌고, 커스텀 커서는 열 수 있는 것 위에서 점에서 원으로 커집니다.
• 들어오는 상품 상세: 페이지 이동은 막 하나가 덮습니다. 상세에서는 이미지가 잘린 가장자리에서 열리고 제목이 줄 단위로 올라오며, 갤러리를 내리는 동안 가격·색·사이즈·수량 칸이 화면에 붙어 있습니다.
• 결제 없는 커머스 셸: 장바구니·담기·배송을 모두 크루의 말투로 쓴 안내 모달 하나로 모았습니다. 원래 열 생각이 없던 기능 때문에 오류 화면을 보여 줄 일이 없습니다.
• 파티 아카이브: 모든 밤을 회차·날짜·장소·라인업으로 적고 그 방의 사진을 옆에 둡니다. 굿즈가 늘 가리킬 곳이 있게 했습니다.
• 모바일: 글자색 막이 위에서 내려오며 큰 링크가 올라오는 전체 화면 메뉴, 리듬을 잃지 않고 두 열로 다시 묶이는 그리드.
• 스무스 스크롤과 검증: Lenis 스무스 스크롤 위에 GSAP 리빌을 얹었고, 1440·390 두 폭 30개 화면을 헤드리스로 순회하며 콘솔 에러·깨진 이미지·가로 넘침 0건을 확인한 뒤 배포했습니다.

🔹 디자인 포인트

• 클럽 포스터 타이포: 워드마크는 좁은 그로테스크를 포스터 크기로, 글자마다 간격을 손으로 맞췄습니다. 그 옆에 작은 고정폭 정보 텍스트 — 플라이어의 두 목소리입니다.
• 애시드 한 색: 오프화이트 #ecebe6 · 검정 #0b0b0a · 애시드 그린 #c6ff00. 그린은 점·버튼·프린트 같은 면에만 쓰고 글자에는 쓰지 않아, 크게 울리되 소음이 되지 않습니다.
• 테마 3종: 헤더의 점 세 개로 데이·나이트·애시드 테마를 바꾸고 방문자별로 기억합니다. 인터페이스 전체가 색 토큰 위에 있어 모든 페이지가 함께 바뀝니다.