Guides
마이그레이션
기존 레이아웃(el_imin · el_main · el_axai)의 클래스와 토큰을 EOND UI로 옮기는 대응표입니다. 원칙: el_imin이 뼈대, el_axai가 컬러, el_main·el_axai의 고유 패턴은 흡수.
계보 요약
EOND UI는 세 계열의 디자인 시스템을 통합했습니다. 각 계열이 기여한 핵심 요소를 보여줍니다.
el_imin
2023~, Rhymix SCSS
- 뉴트럴 위계 3단계 (ink/muted/faint)
- 4px 스페이싱 리듬
- pill 버튼, 카드 리프트
- 이중 소프트 섀도우
- 롤링 텍스트
el_main
2025~, eondcms 마켓
- 상태 배지 (HOT/NEW/BEST/FREE/SALE)
- 가격 표기 (mono·tabular-nums)
- 썸네일 비율 (16:10·1:1·2:3)
- 탭 카운트
- 포커스 링, 반응형 히어로
el_axai
2026~, AX 랜딩
- 브랜드 컬러 (오렌지 #FF6B35 + 딥네이비)
- 다크 섹션 키트 (그리드 텍스처·글로우)
- 눈썹 배지, 스크롤 리빌
- CTA 박스 (둥근 다크 + 글로우)
- 프로모션 밴드
el_main → EOND UI
마켓 관련 클래스와 토큰을 EOND UI로 변환합니다.
| el_main | EOND UI | 비고 |
|---|---|---|
var(--el-brand)#FF6B35 |
var(--e-accent)#FF6B35 |
동일 값. 주 액션·포인트 색 |
var(--el-ink)#111 |
var(--e-ink)#212121 |
el_imin 값으로 통일. 본문 텍스트 |
el-ink-soft #555el-ink-dim #888 |
var(--e-muted)#727272 |
6단계→3단계 축소. 보조 텍스트 |
el-ink-faint #BBBel-ink-ghost #CCC |
var(--e-faint)#a8a8a8 |
흐린 텍스트·플레이스홀더 |
el-bg-mutedel-bg-softel-bg-sunken |
var(--e-paper)#f8f8f8 |
서피스 1종으로 통일. 섹션·카드 배경 |
el-line #EFEFEFel-line-strong #E5E5E5 |
var(--e-line)#EBEBEB |
1종으로 통일. 구획선 |
.el-btn-brand |
.e-btn .e-btn-primary |
오렌지 주 CTA |
.el-btn-primary (검정) |
.e-btn .e-btn-dark |
딥네이비 버튼 |
.el-btn-outline |
.e-btn .e-btn-outline |
보더 버튼 |
.el-badge-hot.el-badge-new 등 |
.e-badge .e-badge-hot.e-badge .e-badge-new 등 |
상태 배지 그대로 흡수 |
.el-price.el-price-old.el-price-free |
.e-price.e-price-old.e-price-free |
가격 표기 그대로 흡수. mono·tabular-nums |
.el-thumb.el-thumb-square.el-thumb-book |
.e-thumb.e-thumb-square.e-thumb-book |
썸네일 비율 그대로 흡수 |
.el-tabs.el-tab.el-tab-count |
.e-tabs.e-tab.e-tab-count |
active 클래스는 .active 유지 |
.el-overline (mono·회색) |
.e-overline (Outfit·오렌지) |
스타일 통일. 섹션 라벨 |
.el-card (hover 내장) |
.e-card .e-card-hover |
hover는 opt-in으로 분리 |
--el-radius-md 12px |
--e-radius-lg 10px또는 --e-radius-xl 16px |
12px 폐기. 목적에 맞는 값 선택 |
--el-text-hero clamp(...) |
var(--e-text-hero) |
반응형 히어로 그대로 흡수 |
--el-shadow-focus |
var(--e-shadow-focus) |
포커스 링 그대로 흡수 |
el_axai → EOND UI
다크 섹션, 브랜드 컬러, 모션 패턴을 EOND UI로 변환합니다.
| el_axai | EOND UI | 비고 |
|---|---|---|
ax-grid-bg |
.e-grid-bg |
다크 그리드 텍스처. .e-dark와 함께 사용 |
ax-glow |
.e-glow또는 .e-cta 내장 |
오렌지+블루 글로우. CTA 박스에 내장 |
ax-overline |
.e-overline |
동일 스타일. 섹션 라벨 |
ax-reveal (+ --d 스태거) |
.e-reveal (+ --d) |
스크롤 리빌. IntersectionObserver로 .is-in 부여 |
ax-card |
.e-card .e-card-hover |
리프트 호버 카드 |
| 눈썹 배지 (수동 마크업) | .e-eyebrow |
펄스 도트 내장. 다크 배경용 |
| 다크 섹션 (bg-night 수동) | .e-dark + .e-grid-bg |
다크 섹션 스타일. 텍스처와 결합 가능 |
| CTA 박스 (rounded-[2.5rem] 수동) | .e-cta |
글로우 내장. 센터 정렬 텍스트 |
| 흰 보더 보조 버튼 (border-white/20) | .e-btn .e-btn-inverse |
다크 배경 위 투명 버튼 |
el_imin → EOND UI
Rhymix 기반 뉴트럴 디자인을 EOND UI로 변환합니다. 주요 항목만 나열합니다.
| el_imin SCSS 변수 | EOND UI | 값 | 역할 |
|---|---|---|---|
$text-primary |
var(--e-ink) |
#212121 | 본문 텍스트 |
$text-secondary |
var(--e-muted) |
#727272 | 보조 텍스트 |
$text-tertiary |
var(--e-faint) |
#a8a8a8 | 흐린 텍스트·플레이스홀더 |
$line-color |
var(--e-line) |
#EBEBEB | 구획선 |
$border-color |
var(--e-border) |
#dbdbdb | 인풋·버튼 보더 |
$bg-color |
var(--e-paper) |
#f8f8f8 | 섹션·카드 배경 |
$point-color |
var(--e-danger) |
#FA2828 | 포인트→시맨틱으로 역할 변경 |
| pill 버튼 (height=radius) |
.e-btn .e-btn-pill |
border-radius-full | 알약형 버튼 |
.rolling-txt |
.e-rolling |
3문장 고정 | 롤링 텍스트 애니메이션 |
.promotion-wrap |
.e-promo |
night·accent만 | 프로모션 밴드 |
| 카드 hover (translateY -0.5rem+그림자) |
.e-card-hover |
translateY(-6px) scale(1.02) | 호버 리프트 효과 |
폐기 목록
더 이상 사용하지 않는 클래스와 토큰입니다. 해당하는 경우 위의 대응표를 참고해 마이그레이션하세요.
el_imin의 임의 컬러
사용 중단: #1500ff, #3673EE, #CCFF00, #00e1fa, #4042D7 등
대체: 브랜드 2색(--e-accent, --e-night) + 시맨틱 컬러(--e-danger, --e-success, --e-warning, --e-info)로만 제한합니다.
6단계 잉크 위계 (el_main)
사용 중단: el-ink-soft, el-ink-dim, el-ink-faint, el-ink-ghost 등
대체: 3단계 표준 위계로 축소합니다.
- •
--e-ink#212121 — 본문 텍스트 (높은 대비) - •
--e-muted#727272 — 보조 텍스트 (중간 대비) - •
--e-faint#a8a8a8 — 흐린 텍스트 (낮은 대비)
섹션·배너마다 새 색 만들기 (금지)
기존 방식: 각 섹션마다 배경색, 텍스트색, 포인트색을 임의로 정의
새 원칙: 토큰화된 팔레트만 사용합니다. 필요한 경우 기존 조합을 재활용하거나 시맨틱 컬러로 시작하세요.
마이그레이션 체크리스트
레이아웃을 EOND UI로 전환할 때 확인해야 할 항목입니다.
CSS 변수 빠른 참고
자주 사용하는 토큰을 빠르게 찾을 수 있습니다.
Brand & Neutral
- --e-accent
- #FF6B35 (오렌지)
- --e-night
- #0B1120 (딥네이비)
- --e-ink
- #212121 (본문)
- --e-muted
- #727272 (보조)
- --e-faint
- #a8a8a8 (흐린)
- --e-paper
- #f8f8f8 (배경)
Semantic
- --e-danger
- #FA2828 (위험·점수)
- --e-success
- #12B76A (완료·긍정)
- --e-warning
- #F79009 (주의)
- --e-info
- #2563EB (정보·링크)
- --e-line
- #EBEBEB (구획선)
- --e-border
- #dbdbdb (폼 보더)