한 줄 요약
현재 자사몰 전체에 12개 폰트, 218개 색상, 12개 radius 값이 섞여 있음. → 공통 CSS 변수 체계로 폰트 2~3개, 색상 15개, radius 2개로 압축 가능.
+ Hedvig Letters Serif, Verdana, Arial, Apple SD Gothic Neo, Spoqa, Prompt — 더 있음
왜 이렇게?
· Poppins: 본문·UI 기본. 둥근 지오메트릭 산세리프로 친근·모던
· Cormorant Garamond: 이탈리아 정체성 살리는 영문 장식용
+ 약 180개 더 있음. 회색만 14단계, 그린만 4종, 블루·골드·베이지 변종 다수.
브랜드 외 색 #4a9bb5 청록 (30회) · #3a7d44 다른 그린 (18회) · #2E7D32 Material 그린 (CSS 변수)
핵심 + 그레이 5단계로 충분. 디자인가이드 토큰 그대로 활용.
(추가: success/warn 2개, gold accent 변형 1개 정도 더 필요할 수 있음)
#4a9bb5(청록·30회), #3a7d44(다른 그린·18회), #2E7D32(Material 그린·CSS 변수), #ef441f(주황빨강 — `--font-color-secondary`로 정의돼 있음). 이들은 브랜드 가이드에 없음 → 사용처 확인 후 brand-dark/brand-gold로 흡수.
→ 같은 카드끼리도 6/8/10/12 섞임. 페이지 이동할 때 묘하게 다름 느껴지는 원인.
8px 단일로 카드·버튼·입력·박스 전부. 50px은 태그/뱃지/필터 칩만. 50%는 아바타/원형 버튼만.
핵심 변경: 7개 → 6개. 구매하기·MEMBERSHIP·BRAND·MAGAZINE은 유지하고, 최상위 BEST만 제거.
:root {
/* 폰트 */
--font: 'Poppins', 'Pretendard', sans-serif; /* 본문·UI — 한글은 Pretendard 폴백 */
--font-en: 'Poppins', sans-serif; /* 영문 */
--font-accent: 'Cormorant Garamond', serif; /* 영문 악센트 */
/* 브랜드 컬러 */
--brand-dark: #2C3E2D;
--brand-gold: #D9BC82;
--page-bg: #FAFAF8;
--card-bg: #FFFFFF;
--soft-gold: #FDFAF2;
/* 텍스트 */
--text-strong: #1A1A1A;
--text-body: #444444;
--text-caption: #888888;
/* 보더 */
--border-light: #F0F0F0;
--border-default: #E5E5E5;
/* 라운드 */
--radius: 8px;
--radius-pill: 50px;
/* 여백 (디자인가이드) */
--space-xs: 8px;
--space-s: 16px;
--space-m: 32px;
--space-l: 96px;
}
전체 영향 파일: 약 276개 HTML/CSS (skin 전체)
핵심 페이지(우선 작업): 메인·상품상세·상품리스트·장바구니·결제·헤더·푸터 — 약 30개 파일
예상 시간: 핵심만 = 반나절 · 전체(게시판·마이페이지 포함) = 1~1.5일
진행 순서: ① common.css에 토큰 박기 → ② skin13(복제본)에서 핵심 페이지부터 하드코딩 교체 → ③ 시크릿 모드 검증 → ④ 사용자 OK 후 skin8 배포
2026-05-21~22 작업 완료. 메디큐브 패턴 — 구매하기 클릭 시 옵션 선택을 모바일 바텀시트로 노출.
현재 /sde_design/skin13/product/detail.html에 적용. 사용자 OK 후 skin8 배포 예정. → skin13 미리보기 (관리자 로그인 필요)
위 줄 (장바구니 · 구매하기)
아랫 줄 (네이버페이 구매 · 찜) — 같은 8px 라운드 · 48px 높이
하단 고정바 (선물하기 — 크림색 액센트)