PENNY PAGE
CASE 06(주)프리미엄2026.08

브랜드마다
다른 인터랙션

부산 하단 의류 도소매 법인의 브랜드 소개 사이트입니다.

업종
의류 도소매 (부산 하단)
형태
브랜드 소개 사이트 + 브랜드 상세 페이지
구성
히어로 · 회사소개 · 브랜드 라인업
매장 안내 · 브랜드 상세
기술 스택
Cloudflare Pages · Node.js 정적 빌드 · JSON 데이터 · 웹폰트 서브셋 · 반응형 HTML/CSS
호스팅
고객 명의 Cloudflare Pages, 자체 도메인
(주)프리미엄 데스크탑·모바일 화면
PENNYPAGE WORKS · CASE 06프리미엄.shop

01과제

무엇을 받았고, 무엇을 했나

셀렉트숍은 어떤 브랜드를 다루는지가 곧 매장의 얼굴입니다. 그래서 브랜드마다 역사·공식몰 링크·사진 갤러리를 담은 상세 페이지를 JSON 데이터에서 Node.js 빌드로 생성하고, 브랜드별 CSS 인터랙션을 따로 입혔습니다.

잉크블랙과 시그널 오렌지의 다크 에디토리얼 톤에, 한글 폰트를 로컬 서브셋으로 줄여 2MB에서 122KB로 가볍게 완성했습니다.

핵심 — 브랜드가 얼굴브랜드마다 상세 페이지를 데이터에서 생성하고 인터랙션을 따로 입혔습니다.

02화면

히어로가 아니라 실제로 일하는 구간

회사소개 — 다크 에디토리얼 톤
01회사소개 — 다크 에디토리얼 톤
2026 S/S 브랜드 라인업
022026 S/S 브랜드 라인업
브랜드 카드 — 가격대·상세 링크
03브랜드 카드 — 가격대·상세 링크
매장 안내
04매장 안내

03구성

이 사이트에 들어간 것

  • 01
    히어로·회사소개·매장안내 메인원페이지 메인 구성
  • 02
    브랜드 상세 페이지 자동 생성JSON 데이터 → Node.js 빌드
  • 03
    브랜드별 사진 갤러리상세 페이지마다 갤러리
  • 04
    브랜드 역사·공식몰 링크브랜드 소개 데이터
  • 05
    브랜드별 CSS 인터랙션브랜드마다 다른 효과
  • 06
    폰트 로컬 서브셋2MB → 122KB
  • 07
    플로팅 문의·맨위로 버튼전 페이지 공통
  • 08
    고객 명의 Cloudflare Pages·도메인계정·도메인 모두 고객 소유
(주)프리미엄 모바일 전체 화면

모바일 · 스크롤해서 보기

실제 사이트에서 확인하세요.

지금도 운영 중인 사이트입니다.