유니폼
포틀릿 디자인
2026-08-22팀웨어 TEAMWEAR
포틀릿 3분할 · 유니폼·단체복
팀 단위로 옷을 맞추는 단체복 전문점. 사이즈 표와 수량별 단가가 화면 맨 앞에 옵니다.
구현 사항 3 ▾
- 좌 400 · 중앙 640 · 우 400 고정 3분할
- 스타일 축 H 일본 고밀도 — 여백을 만들지 않는다. 3열 카드 · 작은 글씨 · 포틀릿 사이 텍스트 링크 줄
- 20종 · 단체티/후드/작업복/앞치마/모자 · 사이즈 표(cm) · 1·30·100·300벌 단가
화면 1

- 메인
/배너 560 스트립 · 퀵메뉴 10칸 · **수량별 단가표** · 탭 4개 3열 · 무제한 진열열기 ↗ - 상품 목록
/shop갈래·정렬 5종·검색어 · 3열열기 ↗ - 상품 상세
/product/tee-short수량별 단가표 → 사이즈 표(cm) → 색상 → 원단 표 · 구매 바가 견적 계산기열기 ↗ - 상품 상세 (표 없는 품목)
/product/gloves목장갑·토시는 사이즈 표가 없어 원단만 보여 준다열기 ↗ - 장바구니
/cart사이즈가 줄을 가른다 · 줄 합계를 수량별 단가로 계산열기 ↗ - 주문·결제
/checkout3단계 스텝 · 주문서에 사이즈 표기열기 ↗ - 주문 완료
/order/TW20260821무지 당일 · 자수 3~5 영업일열기 ↗ - 내 계정
/account로그인/가입 전환 · 주문·쿠폰·배송지 탭열기 ↗
알아둘 점
- ·팀웨어는 가상 브랜드입니다. 결제와 로그인은 화면만 있고 실제로 동작하지 않습니다.
- ·상품 20종입니다. 5열×4행 시트로 한 번에 받아 칸 단위로 잘랐고, 스무 장의 촬영 각도와 빛의 방향이 같습니다.
- ·사이즈 표의 치수는 갈래별 기준값에서 계산한 것입니다. 실서비스는 품목마다 실측값이 들어가고, 어드민에서는 상세 에디터에 표를 직접 넣는 자리입니다. 화면에 실측 오차 1~3cm 안내를 적었습니다.
- ·색상은 개수만 보여 줍니다. 실제 몰은 어드민 「옵션 관리」에 등록한 색상칩 이미지를 깝니다.
- ·이미지 40장 중 절반은 Stitch 없이 만들었습니다. PC 배경과 선 아이콘 10종은 코드로 그렸고, 띠 배너와 배너 스트립은 템플릿 폰트로 로컬 조판했습니다. 글자가 구워진 이미지는 2배로 확대해 자소를 눈으로 확인했습니다.
- ·정가 취소선은 규격이 #cbcbcb 로 못 박은 값이고 어드민 슬롯이 아니라 1.6:1 이어도 그대로 뒀습니다. 이 템플릿에서 유일하게 4.5:1 을 넘지 못하는 자리입니다.
- ·768~1079px에서 좌우가 비어 보이는 것은 버그가 아니라 실서비스의 동작을 그대로 재현한 것입니다.