라이브커머스
포틀릿 디자인
2026-08-22지금방송중
포틀릿 3분할 · 라이브커머스
방송하면서 파는 몰. 배너가 아니라 라이브 플레이어로 화면이 열리고, 게시판 자리에 오늘 방송 편성표가 들어갑니다.
구현 사항 3 ▾
- 좌 400 · 중앙 640 · 우 400 고정 3분할
- 스타일 축 C 시끄러운 판촉 — 흰 바탕 · 검정 · 라이브 레드 세 색만, 숫자와 배지가 화면을 채운다
- 축이 둘 — 방송중/예고/다시보기 × 푸드/뷰티/패션/리빙 · 프리텐다드 · 버튼 모서리 4 · 검색 모서리 999
화면 1

- 메인
/포틀릿 14종 스택 · **임베드(라이브)가 맨 위** · 배너 640(1:1) · 무제한 진열 6개씩 3열열기 ↗ - 상품 목록
/shop방송 축 + 갈래 축을 겹쳐 거른다 · 2열/3열 전환 · 완판임박순 정렬열기 ↗ - 방송 중만
/shop?state=live남은 수량이 카드마다 붙는다열기 ↗ - 상품 상세
/product/mealkit방송가/정상가 · 남은 수량 · 편성 시각 · 하단 고정 구매 바열기 ↗ - 장바구니
/cart수량 변경 · 5만원 이상 무료배송열기 ↗ - 주문·결제
/checkout3단계 스텝 (데모)열기 ↗ - 주문 완료
/order/LV20260822주문번호 LV · 방송 종료 후 출고 안내열기 ↗ - 내 계정
/account로그인/가입 전환 · 주문·쿠폰·배송지 탭 (데모)열기 ↗
알아둘 점
- ·지금방송중은 가상 브랜드입니다. 결제·로그인·실제 방송 스트림은 화면만 있고 동작하지 않습니다. 라이브 플레이어는 전 템플릿 공통 유튜브 영상을 youtube-nocookie 로 임베드한 것입니다.
- ·상품 12종입니다. 라이브커머스는 업종이 섞이므로 밀키트·만두·화장품·마스크팩·니트·레깅스·프라이팬·텀블러·건강식품·원두·침구·정리함이 한 몰에 있는 것이 정상입니다.
- ·상품 사진 열두 장의 채도가 매우 높습니다. 「밝고 대비가 센 조명 · 채도를 낮추지 마세요」로 뽑은 결과이고 스타일 축 C 와는 맞지만, 몰의 흑백·빨강 팔레트보다 훨씬 화려합니다. 톤을 낮추려면 시안을 다시 뽑아야 합니다.
- ·정가 취소선은 규격이 #cbcbcb 로 못 박은 값이고 어드민 슬롯이 아니라 1.6:1 이어도 그대로 뒀습니다. 이 템플릿에서 유일하게 4.5:1 을 넘지 못하는 자리입니다.
- ·768~1079px에서 좌우가 비어 보이는 것은 버그가 아니라 실서비스의 동작을 그대로 재현한 것입니다.
- ·쇼핑몰 정보의 「정보명」 색만 어드민 기본값(#929292)에서 #767676 으로 내렸습니다. 기본값이 흰 바탕에서 3.11:1 이라 12px 기준에 못 미치고, 이 값은 어드민 색 슬롯이라 디자이너가 그대로 바꿀 수 있습니다.