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

🔹 프로젝트 개요

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

🔹 프로젝트 목적

ORME는 유니섹스 컨템포러리 레디투웨어를 만드는 파리의 패션 하우스입니다. orme는 프랑스어로 느릅나무 — 넓고 낮게 퍼지며 아무도 그려 주지 않은 형태를 스스로 갖는 나무입니다. 이름이 곧 옷이 해야 할 일입니다. 형태를 강요받는 대신 스스로 자리를 잡는 것. 컬렉션은 시즌이 아니라 지형에서 이름을 가져옵니다.

과제는 빌더가 아래에 없는 자사몰이었습니다. 카페24도 아임웹도 물려받지 않으니 모든 관습을 받아들이는 대신 하나씩 정해야 했습니다. 패션 자사몰은 두 가지 방식으로 실패합니다 — 레이아웃이 옷보다 시끄럽거나, 너무 밋밋해서 평범한 사진이 실수처럼 보이거나. 시스템은 이 둘을 한 번에 풀도록 잡았습니다. 본문은 전 화면 11px 단일이고 위계는 글자 크기가 아니라 여백과 대문자가 만듭니다. 인터페이스가 조용해야 사진이 화면에서 가장 큰 목소리를 낼 수 있기 때문입니다.

제품컷은 2:3 흰 배경 레터박스로 고정해 어떤 경우에도 자르지 않습니다. 이 규칙 하나가 길이도 실루엣도 제각각인 32벌을 하나의 격자로 묶어 줍니다.

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

• 조용한 타이포 위에 세운 시스템: 본문을 전 화면 11px/15px 단일로 두고 위계를 여백과 대문자로 만들었습니다. 크게 두는 것은 홈을 붙잡는 에디토리얼 세리프와 상품 페이지의 검정 CTA 둘뿐이라, 그 둘이 장식이 아니라 판단으로 읽힙니다. 제품 이미지는 2:3 흰 배경으로 고정하고 자르지 않습니다.
• 백엔드 없는 커머스 셸: 로그인·장바구니·위시리스트·뉴스레터·검색 다섯 가지 액션을 단일 안내 모달 컴포넌트가 받습니다. 에러 화면이 아니라 "FW26 배송과 함께 열립니다" 톤의 안내문으로 처리해, 데모임을 숨기지 않으면서도 브랜드 목소리를 유지했습니다.
• URL을 상태로 쓰는 필터: 카테고리·라인·컬러 필터와 4종 정렬이 전부 쿼리스트링에 들어갑니다. 필터링 중 스크롤이 튀지 않도록 스크롤 복원은 pathname 변화에만 반응하게 분리했습니다.
• 룩북 프로덕션 파이프라인: 상품 데이터를 파싱해 프롬프트를 조립하는 스크립트를 짜서 카탈로그를 두 벌 관리하지 않도록 했습니다. 기준컷 한 장으로 모델·배경·크롭·조명을 먼저 고정하고 이후 모든 컷을 그것에 맞춰 옷만 바꿔 생성해, 32벌이 한 시즌으로 읽히게 했습니다. 룩북·에디토리얼 44장을 이 방식으로 제작했습니다.
• 이미지 규격화 자동화: ImageMagick으로 원본을 자르지 않고 흰 캔버스에 레터박스로 얹어 상품컷 1000×1500(2:3), 에디토리얼 1400×933(3:2)로 맞춥니다. 파일 이름이 곧 사이트의 경로가 되므로 새 시즌 컷을 넣을 때 코드를 건드릴 필요가 없습니다.
• 전송량 최적화: 상품목록이 32장을 한꺼번에 받는 구조라 카드 전용 600×900 축소본을 따로 생성해 원본과 분리했습니다. 목록 페이지 전송량이 8.7MB에서 2.5MB로 줄었습니다.
• 크로스 브라우징 자동 검증: Chromium·WebKit·Firefox 3개 엔진에서 320~2560px 7개 폭 × 6개 페이지를 순회하며 콘솔 에러·가로 넘침·이미지 로드 실패를 수집하는 스크립트를 작성했습니다. 총 126건 점검, 문제 0건으로 배포했습니다.

🔹 디자인 포인트

• 11px를 지키는 것이 설계다: 커머스 UI 전체를 의도적으로 작고 조용하게 깔아야 사진과 대형 세리프만 크게 읽힙니다. 이 값을 13~14px로 올리는 순간 평범한 쇼핑몰이 되기 때문에, 토큰 주석에 올리지 말 것을 명시해 두었습니다.
• 홈에 상품이 없다: 상품 그리드는 Shop에만 두고 홈은 전부 에디토리얼로 채웠습니다. 화면 중앙의 대형 세리프 한 블록이 사실상 히어로 역할을 하며, 홈은 물건이 아니라 무드를 파는 자리로 설계했습니다.