Skip to content

design.md

Latest commit

 

History

History
298 lines (250 loc) · 9.15 KB

design.md

File metadata and controls

298 lines (250 loc) · 9.15 KB
Raw

@ai.sangkyun 카드뉴스 디자인 시스템

컨셉 키워드: Dark Tech Editorial · High Contrast · Bold Korean Typography · Neon Accent

1. 컬러 팔레트

기본 컬러

역할 이름 HEX 용도
Background --color-bg #000000 전체 페이지 배경
Surface --color-surface #1A1A1A 카드/컨테이너 배경
Surface-Alt --color-surface-alt #141414 비교 카드 좌측 (약간 더 어두운 구분)
Text Primary --color-text-primary #FFFFFF 헤드라인, 본문
Text Secondary --color-text-secondary #AAAAAA 서브텍스트, 레이블
Text Muted --color-text-muted #555555 흐린 보조 정보 (슬라이드 넘버 등)

액센트 컬러 (핵심 포인트)

역할 이름 HEX 용도
Accent Primary --color-accent #C8FF00 헤드라인 강조, 카드 좌측 보더, 뱃지 배경, 번호 원
Accent Hover --color-accent-dark #A8D900 호버 시 액센트 다운톤
Accent Text --color-accent-on #000000 액센트 배경 위 텍스트

💡 컬러 철학: 검정 배경 + 흰 텍스트의 하이 콘트라스트 위에, #C8FF00 네온 라임 하나만으로 전체 시각적 긴장감을 만든다. 절대 액센트 컬러를 2가지 이상 섞지 않는다.

2. 타이포그래피

폰트 패밀리

/* 한국어 메인 — 굵고 임팩트 있는 산세리프 */
--font-display-ko: 'Pretendard', 'Noto Sans KR', sans-serif;

/* 영문/숫자 레이블 — 테크니컬한 느낌의 모노/산세리프 */
--font-label-en: 'DM Mono', 'IBM Plex Mono', monospace;

추천 조합: Pretendard (한국어 완벽 지원, 웨이트 스펙트럼 넓음) + DM Mono (영문 레이블)

타입 스케일

역할 변수명 크기 웨이트 line-height 용도
Display --text-display 56–64px 900 (Black) 1.1 메인 헤드라인 (2줄 대형)
Heading 1 --text-h1 40px 800 (ExtraBold) 1.15 섹션 타이틀
Heading 2 --text-h2 26px 700 (Bold) 1.2 카드 내 소제목
Body --text-body 18px 400–500 1.75 본문 설명 텍스트
Label --text-label 12px 600 1.0 뱃지, 태그, 상단 레이블
Caption --text-caption 14px 400 1.4 슬라이드 번호, 핸들

타이포그래피 규칙

  • 헤드라인은 반드시 weight 900 이상. 한국어는 굵기가 곧 존재감이다.
  • 강조 텍스트는 color: var(--color-accent) 또는 font-weight: 900 으로 처리. 이탤릭 사용 금지.
  • 영문 레이블 (Article, AI INSIGHT, @handle)은 소형 대문자(uppercase) + letter-spacing 0.1em.
  • 본문 줄간격은 넉넉하게 1.75. 모바일 카드에서 가독성 확보.

3. 레이아웃 & 그리드

카드 기본 구조

┌─────────────────────────────────────┐
│  Article          @ai.sangkyun  N/8 │  ← Header Bar (16px top padding)
│  ─────                              │  ← Accent underline (2px, accent color)
│                                     │
│  [대형 헤드라인]                      │  ← 56–64px Black
│  [서브 헤드라인]                      │
│                                     │
│  ┌─────────────────────────────┐    │
│  │▌ 카드 컨텐츠                  │    │  ← Surface card
│  └─────────────────────────────┘    │
│                                     │
│  [아바타]                    [음소거] │  ← Footer
└─────────────────────────────────────┘

슬라이드 페이지 패딩

.slide {
  padding: 32px 28px 24px 28px;   /* top right bottom left */
  max-width: 480px;                /* 모바일 최적 너비 */
  min-height: 640px;
  background: var(--color-bg);
  aspect-ratio: 3/4;               /* 카드뉴스 표준 비율 */
}

2열 비교 레이아웃 (슬라이드 5/8 스타일)

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* 각 셀은 동일한 Surface 카드 스타일 */

4. 컴포넌트 스펙

4-1. 콘텐츠 카드 (메인 인포 블록)

.info-card {
  background: var(--color-surface);      /* #1A1A1A */
  border-radius: 12px;
  padding: 20px 20px 20px 24px;
  border-left: 3px solid var(--color-accent);  /* ← 핵심 포인트 */
  margin-bottom: 16px;
}

.info-card__title {
  font-size: var(--text-h2);   /* 26px */
  font-weight: 700;
  color: var(--color-accent);  /* 라임 컬러 */
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.info-card__body {
  font-size: var(--text-body); /* 18px */
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.75;
}

/* 본문 내 강조 */
.info-card__body strong {
  font-weight: 900;
  color: var(--color-text-primary);
}

4-2. 뱃지 / 태그

.badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-accent-on);   /* #000 */
  font-size: var(--text-label);    /* 12px */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

예: AI INSIGHT, BEFORE, AFTER 등의 레이블

4-3. 번호 원형 (스텝 인디케이터)

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
  font-family: var(--font-label-en);
}

4-4. 헤더 바

.slide-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.slide-header__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 6px;
}

.slide-header__meta {
  font-size: 13px;
  color: var(--color-text-muted);
  font-family: var(--font-label-en);
}

4-5. 인라인 텍스트 강조 (따옴표 인용)

/* 본문 내 핵심 메시지 인용 */
.quote-emphasis {
  font-weight: 900;
  color: var(--color-text-primary);
  /* 배경 없음, 굵기만으로 처리 */
}

/* 가격 등 수치 강조 */
.price-highlight {
  color: var(--color-accent);
  font-weight: 700;
}

5. 방향성 가이드라인

DO ✅

  • 헤드라인은 항상 2줄 이내, 굵게, 크게
  • 강조는 라임 그린 하나로만
  • 여백은 넉넉하게 (cramped 금지)
  • 본문 카드는 좌측 3px 라임 보더선으로 통일
  • 영문 레이블은 전부 대문자 + 자간 벌리기
  • 핵심 수치/키워드는 bold + accent color 조합

DON'T ❌

  • 흰 배경 절대 금지 (항상 다크 모드)
  • 액센트 컬러 2가지 이상 혼용 금지
  • 이미지/일러스트 남용 금지 (타이포 중심)
  • 그림자(box-shadow) 남발 금지 (플랫하게 유지)
  • 중간 회색 배경 카드 금지 (너무 탁해짐)
  • 줄간격 1.4 이하 금지 (한국어 가독성 저하)

6. CSS 변수 마스터 시트

:root {
  /* ── Colors ── */
  --color-bg:              #000000;
  --color-surface:         #1A1A1A;
  --color-surface-alt:     #141414;
  --color-accent:          #C8FF00;
  --color-accent-dark:     #A8D900;
  --color-accent-on:       #000000;
  --color-text-primary:    #FFFFFF;
  --color-text-secondary:  #AAAAAA;
  --color-text-muted:      #555555;

  /* ── Typography ── */
  --font-display-ko: 'Pretendard', 'Noto Sans KR', sans-serif;
  --font-label-en:   'DM Mono', 'IBM Plex Mono', monospace;

  --text-display:  clamp(48px, 8vw, 64px);
  --text-h1:       40px;
  --text-h2:       26px;
  --text-body:     18px;
  --text-label:    12px;
  --text-caption:  14px;

  /* ── Spacing ── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ── Borders & Radius ── */
  --radius-card:   12px;
  --radius-badge:   4px;
  --border-accent:  3px solid var(--color-accent);

  /* ── Card Dimensions ── */
  --card-max-width:  480px;
  --card-padding:    28px;
  --card-aspect:     3/4;
}

7. 슬라이드 타입 템플릿

타입 구조 예시 슬라이드
Cover 대형 이미지 + Display 헤드라인 + 뱃지 1/8
Before/After 불릿 2섹션 (BEFORE ↔ AFTER) 2/8
Single Focus 카드 1개 + 상세 설명 3/8
Comparison 2-col 2열 카드 그리드 + 결론 텍스트 5/8
Numbered List 스텝 번호 + 3개 항목 6/8
CTA / Action 강조 박스 2개 + 실천 메시지 7/8

Design System by @ai.sangkyun — Dark Tech Editorial Style Documented for reproduction and extension