이벤트/교통 예약 서비스 UI/UX 디자인 가이드

K.Rideus 공연/이벤트 페이지 리디자인에 직접 적용 가능한 실전 가이드. AETHER 디자인 시스템(네이비/블루/골드/화이트/그레이) 기준.

1. 정보 위계 (Information Hierarchy)

1-1. Need-to-Know vs Nice-to-Know 구조

예약 서비스에서 사용자 의사결정에 직접 영향을 주는 정보와 보조적 정보를 명확히 분리해야 한다.

레벨분류예시 (이벤트/교통)처리
L1Critical이벤트명, 날짜/시간, 가격, CTA 버튼Above-the-fold, 최대 크기
L2Important장소, 좌석 등급, 셔틀 출발지, 소요시간Above-the-fold 하단
L3Supportive상세 설명, 포함 사항, 주의사항스크롤 후 노출
L4ReferenceFAQ, 환불 정책, 약관접힘(Accordion) 또는 페이지 하단

K.Rideus 적용: 이벤트 상세 페이지에서 포스터 + 핵심 정보(L1~L2)가 뷰포트 상단, 상세 설명(L3)은 탭/스크롤 영역, FAQ(L4)는 아코디언.

1-2. 스캐닝 패턴

F-Pattern (텍스트 중심 페이지):

  • 적용 대상: 이벤트 상세 설명, FAQ, 이용 안내
  • 핵심: 왼쪽 정렬 + 첫 두 줄에 핵심 정보 + 볼드 키워드

Z-Pattern (시각 중심 페이지):

  • 적용 대상: 이벤트 리스트, 카드 그리드, 히어로 섹션
  • 핵심: 좌상단(로고/네비) → 우상단(CTA) → 좌하단(보조정보) → 우하단(액션)
/* F-pattern을 강화하는 텍스트 스타일 */
.ev-info-block h3 {
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-ink);         /* 진한 잉크 */
}
.ev-info-block p {
  color: var(--color-ink-secondary); /* 약간 연한 톤 */
  line-height: 1.75;
}
.ev-info-block strong {
  color: var(--color-accent);       /* 핵심 수치는 액센트 */
  font-weight: 600;
}

1-3. Above-the-Fold 전환 우선순위

예약 서비스의 ATF(Above-the-Fold)에 반드시 포함해야 할 요소:

  1. 이벤트/서비스 비주얼 (포스터 또는 히어로 이미지)
  2. 제목 + 날짜 (가장 큰 텍스트)
  3. 가격 또는 가격 범위 (“~원부터”)
  4. Primary CTA (예약하기/문의하기)
  5. 신뢰 시그널 (평점, 리뷰 수, “N명 예약”)
/* ATF 영역의 최소 높이 확보 */
.ev-hero {
  min-height: 85vh;          /* 모바일에서도 충분한 높이 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 콘텐츠를 하단에 배치 */
  padding-bottom: 3rem;
}
@media (min-width: 1024px) {
  .ev-hero {
    min-height: 90vh;
  }
}

2. 비주얼 리듬 (Visual Rhythm)

2-1. 섹션 교차 기법 (3-Tone System)

다크/라이트 이진법 대신 3단계 톤 시스템을 사용한다.

톤용도K.Rideus 배경색텍스트색
Dark히어로, 임팩트 섹션--color-bg: #0F1115--color-text: #FFF
Mid정보 밀도 높은 섹션#1A1D24 또는 #1E2128#E2E8F0
Light상세 정보, 폼, 리뷰--color-cool-surface: #f2f4f7--color-ink: #1c1917

교차 패턴 예시 (이벤트 상세 페이지):

[Dark]  히어로 — 포스터 + 제목 + CTA
[Light] 이벤트 상세 정보 — 날짜, 장소, 포함사항
[Mid]   셔틀 서비스 옵션 — 카드 그리드
[Light] 이용 안내 + FAQ
[Dark]  하단 CTA 밴드 — "지금 예약하기"

/* Mid-tone 섹션 토큰 (AETHER 확장) */
:root {
  --color-bg-mid: #1A1D24;
  --color-bg-mid-alt: #1E2128;
  --color-text-on-mid: #E2E8F0;
}
 
.section--mid {
  background: var(--color-bg-mid);
  color: var(--color-text-on-mid);
  padding: 5rem 0;
}
 
/* Light 섹션 */
.section--light {
  background: var(--color-cool-surface);
  color: var(--color-ink);
  padding: 5rem 0;
}
 
/* 섹션 간 부드러운 전환 (gradient bridge) */
.section--transition-dark-to-light {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-cool-surface) 100%);
  height: 120px;
}

2-2. 콘텐츠 밀도 vs 여백 균형

섹션 유형padding-y콘텐츠 max-width여백 비율
히어로5rem ~ 8rem100%60% 여백 : 40% 콘텐츠
정보 그리드4rem ~ 5rem1216px40% 여백 : 60% 콘텐츠
텍스트 블록3rem ~ 4rem768px (좁게)45% 여백 : 55% 콘텐츠
CTA 밴드3rem960px50% 여백 : 50% 콘텐츠
/* 텍스트 중심 섹션은 좁은 max-width */
.content-narrow {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 var(--container-px);
}
 
/* 그리드/카드 섹션은 넓은 max-width */
.content-wide {
  max-width: var(--container-max); /* 1216px */
  margin: 0 auto;
  padding: 0 var(--container-px);
}

2-3. 수직 리듬 (Vertical Rhythm)

일관된 간격 체계를 위해 8px 기반 스페이싱 스케일을 사용한다.

:root {
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  --space-5xl: 8rem;     /* 128px */
}

3. 타이포그래피 위계 (Typography Hierarchy)

3-1. 스케일 비율

K.Rideus는 현재 자체 스케일을 사용 중. 예약 서비스에 적합한 비율은 Major Third (1.25) 또는 Perfect Fourth (1.333).

레벨Major Third (1.25)Perfect Fourth (1.333)현재 AETHER용도
Display3.052rem (48.8px)4.209rem (67.3px)3rem (48px)페이지 타이틀
H12.441rem (39px)3.157rem (50.5px)2.25rem (36px)섹션 제목
H21.953rem (31.2px)2.369rem (37.9px)1.5rem (24px)서브 섹션
H31.563rem (25px)1.777rem (28.4px)—카드 제목
Large1.25rem (20px)1.333rem (21.3px)1.125rem (18px)인트로
Base1rem (16px)1rem (16px)1rem (16px)본문
Small0.8rem (12.8px)0.75rem (12px)0.875rem (14px)보조

권장: K.Rideus의 프리미엄 포지셔닝에는 Major Third가 적합. Perfect Fourth는 너무 극적.

/* 이벤트 페이지 타이포 확장 (Major Third 기반) */
.ev-display {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.052rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.ev-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.441rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.ev-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.953rem);
  font-weight: 600;
  line-height: 1.3;
}
.ev-h3 {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2vw, 1.563rem);
  font-weight: 600;
  line-height: 1.4;
}

3-2. 효과적인 위계 레벨 수

권장: 5~6레벨이 최적. 7레벨 이상은 사용자가 구별하지 못한다.

K.Rideus 이벤트 페이지 기준:

  1. Display — 이벤트명 (Outfit 800)
  2. H1 — 섹션 제목 (Outfit 700)
  3. H2 — 서브타이틀, 카드 제목 (Outfit 600)
  4. Body Large — 인트로, 설명 첫 문단 (Pretendard 400)
  5. Body — 일반 본문 (Pretendard 400)
  6. Caption — 라벨, 메타, 가격 단위 (Pretendard 500)

3-3. 폰트 페어링 원칙

K.Rideus 현재: Outfit(디스플레이) + Pretendard(본문) — 이미 우수한 조합.

원칙설명K.Rideus 적용
대비(Contrast)산세리프 vs 세리프, 또는 기하학적 vs 휴머니스트Outfit(기하학적) vs Pretendard(휴머니스트)
일관성x-height가 비슷해야 나란히 놓았을 때 자연스러움두 폰트 모두 x-height 높음
역할 분리디스플레이 폰트는 제목만, 본문 폰트는 긴 텍스트만--font-display vs --font-body
Weight 활용같은 폰트 내에서 weight 차이로 위계 표현Outfit: 500/600/700/800
/* 폰트 페어링 실전 */
.ev-title {
  font-family: var(--font-display);  /* Outfit */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.ev-subtitle {
  font-family: var(--font-display);
  font-weight: 400;                  /* 같은 폰트, 가벼운 weight */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ev-body {
  font-family: var(--font-body);     /* Pretendard */
  font-weight: 400;
  line-height: 1.75;                 /* 한글은 1.6~1.8이 최적 */
}

4. 색상 전략 (Color Strategy)

4-1. 60-30-10 비율

비율역할K.Rideus AETHER 매핑
60%지배색 (배경)#0F1115 (다크) 또는 #f2f4f7 (라이트 섹션)
30%보조색 (서피스/카드)#282c35 (카드), #1A1D24 (미드톤)
10%강조색 (CTA/액션)#2E5CFF (블루 액센트)

보조 강조색 (골드): 가격, 프리미엄 뱃지, 등급 표시에만 사용 (전체의 2~3%).

:root {
  /* Gold accent — 프리미엄 시그널 전용 */
  --color-gold: #D4A84B;
  --color-gold-light: #E8C97A;
  --color-gold-subtle: rgba(212, 168, 75, 0.15);
}
 
/* 가격 하이라이트 */
.ev-price {
  color: var(--color-gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
}
.ev-price-unit {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
 
/* 프리미엄 뱃지 */
.badge--premium {
  background: var(--color-gold-subtle);
  color: var(--color-gold);
  border: 1px solid rgba(212, 168, 75, 0.3);
  padding: 0.25rem 0.75rem;
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
}

4-2. 프리미엄 vs 버짓 서비스의 색상 차이

요소버짓 서비스프리미엄 서비스 (K.Rideus)
주 배경밝은 흰색, 밝은 그레이다크 네이비/차콜
액센트밝은 오렌지/그린 (친근함)블루/골드 (신뢰+고급)
그라디언트거의 사용 안 함미묘한 방사형 글로우
텍스트 대비높은 대비 (검정/흰)중~높은 대비 (뮤트 톤 활용)
이미지 처리원본 그대로오버레이 + 그레이딩
여백최소화 (정보 밀도 높음)넉넉한 여백 (호흡감)
/* 프리미엄 이미지 오버레이 */
.ev-hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 17, 21, 0.3) 0%,
    rgba(15, 17, 21, 0.0) 40%,
    rgba(15, 17, 21, 0.85) 100%
  );
}
 
/* 프리미엄 카드 글로우 */
.ev-card:hover {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(46, 92, 255, 0.15);
}

4-3. 다크 모드 — “올블랙이 아닌” 디자인 원칙

K.Rideus는 이미 다크 테마지만, “깊이감 있는 다크”를 만들기 위한 원칙:

  1. 순수 검정(#000) 사용 금지 — 가장 어두운 톤도 #080A0E(현재 --color-bg-deep)
  2. 배경에 미세한 색조(tint) 부여 — 네이비 틴트(#0F1115)로 차가운 톤 유지
  3. 서피스 레이어 간 명도 차이: 3~5% — #0F1115 → #1A1D24 → #282c35
  4. 그림자 대신 보더/글로우 — 다크 배경에서 box-shadow는 잘 안 보임
  5. 텍스트는 순백(#FFF)보다 약간 낮게 — 눈 피로 감소, 단 제목은 FFF 허용
/* 다크 서피스 레이어 체계 */
:root {
  --surface-0: #080A0E;   /* 최심층: 페이지 배경 */
  --surface-1: #0F1115;   /* 기본 섹션 */
  --surface-2: #1A1D24;   /* 올린 섹션, 사이드바 */
  --surface-3: #282c35;   /* 카드, 모달 */
  --surface-4: #353942;   /* 호버, 선택 상태 */
}
 
/* 서피스에 미세한 보더로 분리감 */
.card-on-dark {
  background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
}

5. CTA 디자인 패턴 (Call-to-Action)

5-1. 버튼 위계

레벨스타일용도페이지당 개수
PrimaryFilled, 액센트 컬러예약하기, 문의하기1~2개
SecondaryOutlined 또는 Subtle Fill자세히 보기, 일정 확인2~4개
Ghost/Tertiary텍스트 + 밑줄 또는 화살표더보기, 약관 보기무제한
/* Primary CTA */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-spring);
  cursor: pointer;
  min-height: 48px;               /* 터치 타겟 */
}
.btn-primary:hover {
  background: var(--color-accent-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--color-accent-glow);
}
.btn-primary:active {
  transform: translateY(0);
}
 
/* Secondary CTA */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-spring);
  cursor: pointer;
  min-height: 48px;
}
.btn-secondary:hover {
  background: rgba(46, 92, 255, 0.08);
  border-color: var(--color-accent-light);
}
 
/* Ghost CTA */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  transition: gap var(--duration-fast) var(--ease-spring);
}
.btn-ghost::after {
  content: '\2192';              /* → 화살표 */
  transition: transform var(--duration-fast) var(--ease-spring);
}
.btn-ghost:hover::after {
  transform: translateX(4px);
}

5-2. Floating/Sticky CTA 패턴

모바일에서 긴 스크롤 페이지의 전환율을 높이는 핵심 패턴.

/* 모바일 Sticky CTA Bar */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(15, 17, 21, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-spring);
}
.sticky-cta.visible {
  transform: translateY(0);
}
 
.sticky-cta__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
}
.sticky-cta__price span {
  display: block;
  font-size: var(--text-overline);
  font-weight: 400;
  color: var(--color-text-muted);
}
 
.sticky-cta .btn-primary {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
}
 
/* 데스크톱에서는 숨김 */
@media (min-width: 1024px) {
  .sticky-cta { display: none; }
}
/* Sticky CTA 표시 로직 — 히어로 CTA가 화면에서 사라지면 표시 */
const heroCTA = document.querySelector('.ev-hero .btn-primary');
const stickyCTA = document.querySelector('.sticky-cta');
 
if (heroCTA && stickyCTA) {
  const observer = new IntersectionObserver(([entry]) => {
    stickyCTA.classList.toggle('visible', !entry.isIntersecting);
  }, { threshold: 0 });
  observer.observe(heroCTA);
}

5-3. Urgency Without Pressure (압박 없는 긴급성)

패턴좋은 예나쁜 예
잔여 수량”남은 좌석 12석” (사실 기반)“곧 마감! 서두르세요!” (압박)
타임라인”예약 마감: 4월 15일” (정보)“3분 후 가격 인상!” (거짓 긴급)
사회적 증거”이번 주 24명 예약” (행동)“지금 83명이 보고 있어요” (불안)
혜택 프레이밍”얼리버드 10% 할인 적용 중” (긍정)“할인 놓치지 마세요!” (부정)
/* 잔여 수량 인디케이터 */
.ev-availability {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ev-availability__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;              /* 충분 */
}
.ev-availability__dot--low {
  background: #F59E0B;              /* 잔여 소량 */
  animation: pulse-dot 2s infinite;
}
.ev-availability__dot--urgent {
  background: #EF4444;              /* 거의 매진 */
  animation: pulse-dot 1.5s infinite;
}
 
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}
 
/* 얼리버드 뱃지 */
.badge--earlybird {
  background: rgba(34, 197, 94, 0.12);
  color: #22C55E;
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 0.2rem 0.625rem;
  font-size: var(--text-overline);
  font-weight: 600;
  border-radius: var(--radius-full);
}

6. 카드 디자인 패턴 (Card Design)

6-1. 이미지 대 콘텐츠 비율

카드 유형이미지 비율콘텐츠 비율적용
이벤트 리스트 카드55~60%40~45%세로 카드 (3:4 이미지)
셔틀 옵션 카드0~30%70~100%정보 중심, 아이콘 사용
갤러리 카드75~80%20~25%이미지 오버레이 텍스트
가로 카드 (모바일)35%65%1:1 또는 4:3 썸네일
/* 이벤트 리스트 카드 — 세로형 */
.ev-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-spring);
}
 
.ev-card__image {
  position: relative;
  aspect-ratio: 3 / 4;            /* 포스터 비율 */
  overflow: hidden;
}
.ev-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-spring);
}
 
.ev-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
 
.ev-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-overline);
  color: var(--color-text-dim);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
 
.ev-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  /* 2줄 제한 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
 
.ev-card__info {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

6-2. 정보 밀도 가이드

카드 내 정보는 최대 5개 요소로 제한한다:

  1. 카테고리/타입 태그
  2. 제목 (최대 2줄)
  3. 날짜 또는 위치 (1줄)
  4. 가격 또는 상태
  5. 액션 힌트 (화살표, 더보기)

과밀도 경고 신호: 카드 높이가 콘텐츠 영역만 200px 이상이면 정보 분리 필요.

/* 정보 밀도 높은 셔틀 옵션 카드 */
.shuttle-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-spring);
}
 
.shuttle-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 92, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: 1.25rem;
}
 
.shuttle-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
 
.shuttle-card__route {
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
}
 
.shuttle-card__time {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
 
.shuttle-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-gold);
  text-align: right;
}

6-3. 호버 상태 — 가치를 더하는 인터랙션

호버는 단순 색상 변화가 아닌 추가 정보 노출 또는 시각적 깊이 변화로 가치를 더해야 한다.

패턴효과적용
LifttranslateY(-4px) + 그림자 강화클릭 가능한 카드 전반
Image Zoom이미지 scale(1.05)이벤트/갤러리 카드
Reveal숨겨진 설명이나 CTA 노출갤러리형 카드
Border Glow보더 색상이 액센트로 변경선택 가능한 옵션 카드
Overlay Info반투명 오버레이에 추가 정보이벤트 포스터 카드
/* 복합 호버: lift + image zoom + border glow */
.ev-card:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 92, 255, 0.2);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(46, 92, 255, 0.1);
}
.ev-card:hover .ev-card__image img {
  transform: scale(1.05);
}
 
/* Reveal 패턴 — 호버 시 추가 정보 등장 */
.ev-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15,17,21,0.9) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity 0.3s var(--ease-spring);
}
.ev-card:hover .ev-card__overlay {
  opacity: 1;
}
 
.ev-card__overlay-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  /* 3줄 제한 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

7. 종합 적용: 이벤트 상세 페이지 구조

K.Rideus 이벤트/공연 상세 페이지에 위 원칙을 모두 적용한 섹션 구조:

 Section          | 톤    | 콘텐츠                          | 타이포 레벨
──────────────────|───────|────────────────────────────────|──────────
 1. Hero          | Dark  | 포스터 풀블리드 + 이벤트명 + CTA  | Display + Body
 2. Quick Info    | Light | 날짜/장소/가격/잔여석 그리드      | H2 + Body + Caption
 3. Description   | Light | 이벤트 상세 설명 (좁은 컬럼)      | H2 + Body Large
 4. Shuttle Options| Mid  | 셔틀 옵션 카드 3~4개             | H1 + H3 + Body
 5. Gallery       | Dark  | 이미지 갤러리/리뷰               | H2 + Caption
 6. FAQ           | Light | 아코디언 FAQ                    | H2 + Body
 7. Bottom CTA    | Dark  | 최종 예약 유도 밴드              | H1 + Primary CTA
 + Sticky CTA     | —     | 모바일 하단 고정                 | Price + Primary CTA

Quick Info 그리드 예시

.ev-quick-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 2rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
@media (min-width: 768px) {
  .ev-quick-info {
    grid-template-columns: repeat(4, 1fr);
  }
}
 
.ev-quick-info__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.ev-quick-info__label {
  font-size: var(--text-overline);
  font-weight: 500;
  color: var(--color-ink-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ev-quick-info__value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
}

8. 반응형 브레이크포인트 참조

K.Rideus 기존 브레이크포인트와 일치시킨다:

/* 모바일 퍼스트 */
/* base: ~767px */
@media (min-width: 768px)  { /* 태블릿 */ }
@media (min-width: 1024px) { /* 데스크톱 */ }
@media (min-width: 1280px) { /* 와이드 */ }
요소모바일태블릿데스크톱
카드 그리드1col2col3~4col
섹션 패딩 y3rem4rem5rem~6rem
컨테이너 패딩 x1.5rem2rem3rem
Display 폰트2rem2.5rem3rem
Sticky CTA표시표시숨김

9. 체크리스트: 이벤트 페이지 디자인 리뷰

  • ATF에 이벤트명, 날짜, 가격, CTA가 모두 보이는가?
  • 정보 위계가 5~6레벨 이내인가?
  • 섹션 톤이 최소 3종(Dark/Mid/Light)으로 교차하는가?
  • 색상이 60-30-10 비율을 따르는가?
  • Primary CTA가 페이지에 2개 이내인가?
  • 모바일에 Sticky CTA가 있는가?
  • 카드 내 정보가 5개 요소 이내인가?
  • 호버가 단순 색변화가 아닌 가치를 더하는가?
  • 타이포 스케일이 Major Third (1.25) 기준인가?
  • 한글 본문 line-height가 1.6~1.8인가?
  • 긴급성 표현이 사실 기반인가? (거짓 카운트다운 없음)
  • 최소 터치 타겟이 48px인가?
  • 보라색 계열을 사용하지 않았는가? (AETHER 규칙)

그래프 뷰