ORME

조용한 타이포 위에 세운 시스템

• · 본문은 전 화면 11px/15px입니다. 내비게이션도 상품 카드도 사양도 가격도 전부 같은 크기를 씁니다. 위계는 여백과 대문자가 대신 만들기 때문에 어떤 요소도 사진과 경쟁하지 않습니다.
• · 크게 두는 것은 둘뿐입니다. 홈을 붙잡는 에디토리얼 세리프, 그리고 상품 페이지의 검정 CTA 하나. 나머지가 전부 기본 크기에 머물기 때문에 그 둘이 장식이 아니라 판단으로 읽힙니다.
• · 제품 이미지는 2:3 흰 배경 레터박스로 고정하고 자르지 않습니다. 길이도 실루엣도 다른 32벌이 격자 안에서 리듬을 깨지 않고 나란히 섭니다.

백엔드가 없는 커머스 셸

• · 로그인·장바구니·위시리스트·뉴스레터·검색을 안내 컴포넌트 하나가 전부 받습니다. 문구는 에러가 아니라 브랜드의 목소리로 쓴 차분한 안내라서, 아직 열리지 않은 것에 대해 사과하지 않습니다.
• · 필터와 정렬이 전부 쿼리스트링에 들어가 어떤 상태든 링크로 공유됩니다 — 카테고리, 라인, 컬러, 가격순. 스크롤 복원은 의도적으로 pathname 변화에만 묶어, 필터를 누를 때마다 화면이 맨 위로 튀지 않게 했습니다.
• · 상세 페이지는 캐러셀 대신 이미지를 세로로 쌓습니다. 클릭할 것이 없으니 깨질 것도 없고, 세 번 탭하는 대신 한 번의 스크롤로 룩 전체가 보입니다.

기준컷 한 장과 서른두 벌

• · 32벌을 따로 만들면 서로 다른 사람이 서로 다른 방에 서 있게 됩니다. 대신 기준컷 한 장으로 모델·배경·크롭·조명을 먼저 고정하고, 이후 모든 컷을 그것에 맞춰 옷만 바꿔 생성했습니다.
• · 프롬프트 조립기가 상품 카탈로그를 직접 읽기 때문에 카탈로그를 두 벌 관리하지 않습니다. 상품을 추가하면 컷이 함께 생깁니다.
• · 아트 디렉션을 바꾼 발견이 둘 있었습니다. 크롭은 전신이 아니라 허벅지 중간에 두고 얼굴이 크게 정면으로 들어와야 했고, 브리프 어딘가에 도시 이름이 들어가면 지정한 캐스팅을 조용히 덮어써서 지명을 완전히 빼야 했습니다.

손이 아니라 파이프라인

• · 규격화는 ImageMagick으로 돌립니다. 원본을 자르지 않고 흰 캔버스에 얹어 상품컷 1000×1500, 에디토리얼 1400×933으로 맞추며, 파일 이름이 곧 사이트의 경로가 됩니다.
• · 상품 목록이 32장을 한꺼번에 받기 때문에 카드 전용 600×900 축소본을 원본과 함께 생성합니다. 목록 페이지 전송량이 8.7MB에서 2.5MB로 줄었고 눈에 보이는 차이는 없습니다.
• · 검증도 스크립트입니다. 3개 엔진, 320~2560px 7개 폭, 6개 페이지를 돌며 콘솔 에러·가로 넘침·이미지 로드 실패를 수집합니다. 배포 시점에 126건 점검, 발견 0건이었습니다.

홈에 상품이 없다

상품 그리드는 Shop에만 둡니다. 홈은 전부 에디토리얼이고 화면 중앙의 대형 세리프 한 블록이 히어로 역할을 합니다. 상품 벽으로 시작하는 자사몰은 가격으로 비교해 달라는 말이고, 사진으로 시작하는 자사몰은 읽어 달라는 말입니다.

문서는 12칸 비대칭 위에

한 칼럼 중앙 정렬은 페이지를 길게만 만듭니다. 제목이 9칸을 가로지르고, 리드는 우측으로 밀어 좌측에 여백을 남기며, 본문은 읽는 동안 제자리에 머무는 라벨 옆에서 2단으로 접힙니다.

세리프 워드마크

세리프 워드마크·그로테스크 워드마크·원 안의 능선 마크 3안을 그려 흰 바탕과 검정 바탕에서 54px부터 파비콘 크기까지 비교했습니다. 세리프가 이긴 이유는 본문의 대형 에디토리얼 서체와 같은 얼굴을 쓰기 때문입니다. 마스트헤드와 본문이 한 덩어리로 읽힙니다.