공구·철물
포틀릿 디자인
2026-08-22철물점
포틀릿 3분할 · 공구·철물
필요한 것만 두는 동네 공구·철물 가게. 규격이 판단 근거라 mm·V·토크가 상품명에 그대로 들어갑니다.
구현 사항 3 ▾
- 좌 400 · 중앙 640 · 우 400 고정 3분할
- 스타일 축 N 브루탈리즘 — 곡선·그림자·그라디언트 금지. 검정과 옐로 둘뿐
- 12종 · 수공구/전동공구/나사·부속/접착·보수/안전용품 · 어두운 셸 · 모서리 0
화면 1

- 메인
/배너 640(1:1) · 퀵메뉴 5칸 · **규격 비교표** · 탭 4개 3열 · 무제한 진열 9개씩열기 ↗ - 상품 목록
/shop갈래·정렬·검색 · 3열열기 ↗ - 상품 상세
/product/wrench값 → 핵심 규격 → **규격 표** → 구성·배송열기 ↗ - 상품 상세 (전동)
/product/drill갈래마다 규격 항목이 다르다 — 전압·토크·척·회전수열기 ↗ - 장바구니
/cart3만원 이상 무료배송열기 ↗ - 주문·결제
/checkout3단계 스텝열기 ↗ - 주문 완료
/order/CM20260822평일 16시 이전 주문 시 당일 발송열기 ↗ - 내 계정
/account로그인/가입 전환 · 주문·쿠폰·배송지 탭열기 ↗
알아둘 점
- ·철물점은 가상 브랜드입니다. 결제와 로그인은 화면만 있고 실제로 동작하지 않습니다.
- ·상품 12종입니다. 4열×3행 시트로 한 번에 받아 칸 단위로 잘랐고, 열두 장의 이름과 그림을 눈으로 대조했습니다. 검정+옐로 평면 일러스트라 어두운 셸과 톤이 맞습니다.
- ·**할인율이 흰 추천 카드 위에서 4.23:1 입니다.** 어드민 「할인율 기본색」이 사이트 전체에 하나뿐이라 어두운 셸과 흰 카드를 함께 만족시킬 수 없습니다. 카드 안에서만 다른 값을 쓰면 재현이 안 됩니다 — 28 이 같은 자리에서 내린 판단을 따랐습니다.
- ·**PC 배경이 옛 안전지대 규칙으로 그려졌습니다.** 왼쪽 0~240 에 옐로 「01」 배지가 있습니다. 64 가 새 규칙으로 다시 그릴 예정이라 그대로 붙였고, 지금 값으로는 레일 글자와 겹치지 않습니다(화소 실측).
- ·**배너가 1024×1024 로 2배수(1280)에 못 미칩니다.** 늘리면 화질만 나빠지므로 그대로 뒀습니다. 재생성 대상입니다.
- ·갈래별 개수가 고르지 않습니다(수공구 6 · 전동공구 2 · 나사·부속 2 · 접착·보수 1 · 안전용품 1). 사진 열두 장이 정한 대로입니다.
- ·취소선 정가는 어두운 셸용 값(#8a8a8a)을 28 에서 물려받았고, 흰 카드 안에서는 규격값 #cbcbcb 로 되돌아갑니다.
- ·768~1079px에서 좌우가 비어 보이는 것은 버그가 아니라 실서비스의 동작을 그대로 재현한 것입니다.