Eunjune Kimchi · Detail Page Renewal

Six Directions 김치 상세페이지,
여섯 가지 방향으로

워크스페이스에 흩어져 있던 32개 상세페이지 HTML을 전부 읽고, 브랜드·카피·제품·인증·정책을 하나의 콘텐츠 소스로 정리했습니다. 그 위에 성격이 뚜렷한 여섯 가지 디자인을 올렸습니다. 문구를 한 번 고치면 여섯 시안에 동시에 반영됩니다.

32 → 6
파일 정리 · 중복 제거
1
공용 콘텐츠 소스 (content.js)
98
큐레이션·최적화 이미지
22
재사용 공용 블록
STYLE 01 매거진 에디토리얼 시안 대표 이미지

Editorial

매거진 에디토리얼

잡지 한 권처럼 읽히는 상세페이지. 아이보리 지면, 2단 본문, 드롭캡과 폴리오. 명인 인터뷰와 포토 에세이로 브랜드의 격을 만듭니다.

Playfair Display + Noto Serif KR 1080px 브랜딩 · 자사몰
시안 열기
STYLE 02 블랙 앤 골드 시안 대표 이미지

Noir

블랙 & 골드 프리미엄

먹빛 배경에 금박 헤어라인, 낙관과 한자 타이틀. 선물세트를 앞세운 고가 포지션. 명절과 감사 인사 시즌에 강합니다.

Cormorant + Noto Serif KR 1000px 선물 · 프리미엄
시안 열기
STYLE 03 한지 손글씨 시안 대표 이미지

Hanji

한지 · 손글씨 전통

크래프트 종이 위 폴라로이드와 마스킹 테이프, 도장과 손글씨 메모. “엄니가 담가 보내주신” 정서를 정면으로 쓰는 방향입니다.

Gowun Batang + Nanum Pen 1000px 중장년 · 정서 소구
시안 열기
STYLE 04 볼드 포스터 시안 대표 이미지

Bold

볼드 포스터 임팩트

초대형 타이포와 원색 대비, 스티커와 카운트업 숫자. 스크롤이 빠른 모바일 오픈마켓에서 3초 안에 읽히는 것이 목표입니다.

Black Han Sans 1000px 오픈마켓 · 광고 유입
시안 열기
STYLE 05 화이트 갤러리 시안 대표 이미지

Clean

화이트 갤러리 미니멀

흰 여백과 1px 헤어라인, 좌측 고정 인덱스. 사진과 숫자만으로 설명하는 스위스 그리드. 군더더기를 걷어낸 프리미엄 표현입니다.

Pretendard 단독 1240px 브랜드 사이트 · 백화점
시안 열기
STYLE 06 판매형 PDP 시안 대표 이미지

Commerce

실전 판매형 PDP

갤러리 · 옵션 선택 · 수량 · 합계 · 탭 · 고정 구매바까지 동작하는 실전 구조. 스마트스토어와 쿠팡에 그대로 얹을 수 있는 형태입니다.

Pretendard 900px · 모바일 우선 전환율 · 실판매
시안 열기

고치는 곳은
한 군데입니다

브랜드명, 명인 이름, 가격, 라인업, 상품정보 제공고시, FAQ, 교환·환불 문구가 모두 assets/data/content.js 한 파일에 모여 있습니다. 여기만 고치면 여섯 시안 전체에 반영됩니다.

레이아웃은 assets/css/base.css가 구조를 잡고, 각 시안의 theme.css가 색·폰트·장식만 덮어씁니다. 새 스타일을 하나 더 만들려면 theme.css 한 장만 쓰면 됩니다.

renew/ ├─ index.html ← 지금 보고 있는 시안 목록 ├─ assets/ │ ├─ data/content.js 모든 문구·가격·고시 (단일 소스) │ ├─ css/base.css 리셋 · 토큰 · 공용 블록 22종 │ ├─ js/app.js 렌더러 · 리빌 · FAQ · 갤러리 · 구매바 │ └─ img/ 98장 (1600px, 최적화) ├─ styles/ │ ├─ 01-editorial/ 매거진 │ ├─ 02-noir/ 블랙 & 골드 │ ├─ 03-hanji/ 한지 · 손글씨 │ ├─ 04-bold/ 볼드 포스터 │ ├─ 05-clean/ 화이트 갤러리 │ └─ 06-commerce/ 판매형 PDP └─ README.md 수정 방법 · 확인 필요 항목