📌 VELLUM - 패션 하우스 웹사이트

🔹 프로젝트 개요

• 작업 기간: 약 1개월 (브랜드 설계·화면 구축·비주얼 프로덕션·배포 전 과정)
• 작업 범위: 브랜드 기획 및 네이밍, 상품 32종 카탈로그 설계, 홈·상품목록(PLP)·상품상세(PDP)·폴리오·하우스 5개 화면 구축, 룩북·에디토리얼 이미지 44장 제작 및 규격화 파이프라인, 아이덴티티 마크, 크로스 브라우징 검증·배포
• 사용 도구: Vite 5, React 18, TypeScript 5, React Router, 생성형 이미지 프로덕션, ImageMagick, Playwright, Vercel

🔹 프로젝트 목적

VELLUM은 밀라노에서 유니섹스 레디투웨어를 만드는 하우스입니다. vellum은 필사용으로 준비한 송아지 가죽 — 틀에 펴서 칼로 긁고 부석으로 문질러 이틀을 들여야 비로소 잉크를 받는 표면이 됩니다. 이름이 재료가 아니라 공정을 가리킨다는 점이 이 브랜드의 전부이고, 옷도 같은 순서로 만듭니다. 결을 거슬러 브러싱한 캐시미어, 돌로 씻어 표면을 긁어낸 울, 손이 닿는 자리마다 어두워지는 식물성 탄닌 가죽.

과제는 빌더가 아래에 없는 자사몰이었습니다. 카페24도 아임웹도 물려받지 않으니 모든 관습을 받아들이는 대신 하나씩 정해야 했고, 소재가 주인공인 브랜드라 그 결정의 기준도 하나였습니다 — 화면에서 옷감의 표면이 얼마나 크게 보이는가.

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

• 이미지가 곧 레이아웃: 상품 그리드의 간격을 2px까지 좁혀 이미지가 서로 붙은 채 화면을 가득 채웁니다. 제품컷 바탕을 사이트 배경과 같은 값으로 맞춰 경계가 생기지 않게 했고, 이미지는 프레임을 채우는 방식으로 처리해 옷감의 결이 최대 크기로 보이도록 했습니다.
• 색을 단 두 군데에만: 전체를 무채로 깔고 옥스블러드를 제품명 링크와 구매 버튼에만 씁니다. 화면에서 색이 있는 지점이 곧 다음에 누를 지점이 되므로, 별도의 강조 장치 없이 동선이 읽힙니다.
• 좌우 2분할 상품상세: 좌측이 이미지, 우측이 정보이고 우측만 따라붙습니다. 사이즈는 드롭다운이 아니라 박스 그리드로 펼쳐 두고 품절 사이즈는 취소선으로 남겨, 선택 가능한 범위가 한눈에 들어옵니다. 배송·수선·소재 관리는 아코디언으로 접어 첫 화면에서 구매 결정에 필요한 것만 보이게 했습니다.
• 접히는 필터: 필터를 사이드바에 상시 펼쳐 두면 이미지가 쓸 폭을 빼앗깁니다. 카테고리는 서브 내비로 한 줄에 늘어놓고 나머지 조건은 우측 버튼 뒤 오버레이로 접었습니다. 모든 필터와 정렬은 쿼리스트링에 들어가 어떤 상태든 링크로 공유됩니다.
• 캐스팅 순환 배정: 모델 12명을 상품 순서대로 돌려 같은 얼굴이 최대 3회, 간격 12칸으로 떨어지게 했습니다. 4열 그리드에서 정확히 3행 아래라 연달아 보이지 않습니다. 캐스팅 컷은 기준컷에서 인물만 교체해 만들었기 때문에 12명이 같은 스튜디오에서 찍힌 것처럼 묶입니다.
• 기준컷 2종 분배: 부드러운 숄칼라 계열과 각진 어깨·러프컷 계열 두 벌을 기준으로 두고 캐스팅에 번갈아 붙였습니다. 실루엣이 한 갈래로 굳지 않으면서도 시즌으로는 하나로 읽힙니다.
• 전송량 최적화: 상품 목록이 32장을 한꺼번에 받으므로 카드 전용 축소본을 원본과 함께 생성합니다. 목록 페이지 전송량을 3분의 1 이하로 줄였고 눈에 보이는 차이는 없습니다.
• 크로스 브라우징 자동 검증: Chromium·WebKit·Firefox 3개 엔진에서 320~2560px 7개 폭 × 6개 페이지를 순회하며 콘솔 에러·가로 넘침·이미지 로드 실패를 수집하는 스크립트로 점검한 뒤 배포했습니다.

🔹 디자인 포인트

• 간격을 없애는 것이 결정이다: 이미지 사이에 여백을 두면 제품이 카드 안에 갇히고, 붙이면 화면 전체가 한 장의 천처럼 읽힙니다. 소재가 주인공인 하우스라 후자를 택했고, 그 대신 텍스트 줄에 숨을 실어 균형을 맞췄습니다.
• 제품명과 가격을 양끝으로: 한 줄의 좌우 끝에 제품명과 가격을 놓으면 눈이 가격만 따라 세로로 훑을 수 있습니다. 32종을 비교하는 화면에서 이 배치가 좌측 3줄 쌓기보다 빠릅니다.