EBS (한국교육방송공사)

흰 검색 머리글과 파란 TV 탭 아래, 네모 한국기행 풍경·미리보기 선반·분홍 인기 VOD 순위

한국미디어소비자차가운modern-minimalhumanism고딕compactsharpflat라이트한글 지원출시 2004개정 2016

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: EBS (한국교육방송공사, Educational Broadcasting System). 대상은 방송 포털 EBS TV 홈이다.
한 줄 정체성: 방송과 다시보기로 배움을 이어가는 교육 공영방송. 프로그램 장면과 제목이 화면의 중심이다.
공식 디자인 철학: CI의 공식 개념은 Humanism & Edutopia. 원이 품은 확장성을 사람과 교육의 가능성으로 설명한다. 파랑은 미래와 비전, 초록은 성장, 주황은 활기와 따뜻함에 연결한다.
시그니처 요소 1개: 흰 검색 머리글 아래 파란 TV 탭, 네모 방송 장면과 분홍 인기 VOD 순위. 커다란 사진 옆에 후원 안내를 놓고, 아래 미리보기·인기 방송·프로그램을 선반처럼 잇는다. 사진 속 자연과 사람이 색을 맡는다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 친근한, 믿음직한, 풍성한
무드 설명: 흰 바탕·검정 제목·가는 회색 선이 방송 포털의 오래 익숙한 질서를 만든다. 파란 메뉴와 프로그램명은 길을 알려주고, 분홍 순위는 인기 콘텐츠를 골라낸다. 대표 사진은 전면에 펼치지만 나머지 장치는 작고 조용하다.
비주얼 스타일: 모던 미니멀 + 휴머니즘. 자연·사람·문화의 장면과 단정한 글목록.
밀도(Density): Compact — PC의 미리보기는 한 줄 4개, 인기 VOD는 여러 장이 이어지는 선반이다. 제목·프로그램명·재생시간을 함께 담는다.
모서리 성향: Sharp(0~2px) — 배너·방송 썸네일·검색창은 네모. 검색·슬라이더 점·후원 버튼만 원 또는 알약이다.
평면성: Flat — 그림에 테두리와 그림자를 덧씌우지 않고 여백과 선으로 구획한다.

Color System

컬러 시스템 (CSS 변수)

공식 CI AI의 별색은 Pantone 294 C / 1375 C / 376 C이며 원본의 CMYK는 각각 100·70·30·0 / 0·50·100·0 / 40·0·80·0이다. 인쇄 별색을 RGB로 단순 치환하지 않는다. 아래 CI RGB는 공식 웹 로고와 화면을 맞춘 값(추정)이며, UI 파랑과 배너 회색은 공식 TV CSS에서 확인했다. 분홍·주황은 실제 화면을 맞춘 추정값이다. 기본 파랑 이외 사다리·상태색은 재사용을 위한 추정이다.

:root {
  --color-primary-50:#F0F8FC; /* (추정) 옅은 선택 면 */
  --color-primary-100:#DCEEF8; /* (추정) 안내 면 */
  --color-primary-200:#BBDEEF; /* (추정) */
  --color-primary-300:#8CC7E7; /* (추정) */
  --color-primary-400:#5AB3DE; /* (추정) */
  --color-primary-500:#199ADB; /* 공식 TV CSS — 현재 탭·시각·선 */
  --color-primary-600:#1588C1; /* (추정) hover */
  --color-primary-700:#1475A4; /* (추정) pressed */
  --color-primary-800:#155E83; /* (추정) */
  --color-primary-900:#103E59; /* (추정) */
  --color-secondary-500:#DD6095; /* 인기 VOD, 화면 관찰 (추정) */
  --ebs-ci-blue:#073474; /* 공식 CI 웹표현 관찰 (추정 RGB) */
  --ebs-ci-green:#A2CD53; /* 공식 CI 웹표현 관찰 (추정 RGB) */
  --ebs-ci-orange:#F7941D; /* 공식 CI 웹표현 관찰 (추정 RGB) */
  --ebs-subscribe:#FF8200; /* 구독 행동, 화면 관찰 (추정) */
  --ebs-popular:#DD6095;
  --ebs-banner-ground:#E6E5EA; /* 공식 vod2016.css */
  --color-neutral-0:#FFFFFF;
  --color-neutral-50:#FAFAFA;
  --color-neutral-100:#F3F3F3;
  --color-neutral-200:#E6E6E6;
  --color-neutral-300:#D1D4D7;
  --color-neutral-400:#A5ADB3;
  --color-neutral-500:#888F94;
  --color-neutral-600:#747A7E;
  --color-neutral-700:#52585D;
  --color-neutral-900:#222222;
  --color-neutral-1000:#000000;
  --color-success-bg:#EDF7EF; --color-success-fg:#34834D; /* (추정) 처리 완료 */
  --color-warning-bg:#FFF3E3; --color-warning-fg:#A96312; /* (추정) 확인 */
  --color-error-bg:#FCEDEF; --color-error-fg:#C5364F; /* (추정) 오류 */
  --color-info-bg:#EEF6FC; --color-info-fg:#1975AA; /* (추정) 안내 */
  --bg-base:#FFFFFF; --bg-subtle:#F3F3F3; --bg-elevated:#FFFFFF;
  --bg-overlay:rgba(0,0,0,.5); /* (추정) 팝업 뒤 */
  --text-primary:#222222; --text-secondary:#636A70; --text-tertiary:#8A8F94;
  --text-on-primary:#FFFFFF; --text-disabled:#A9AEB2;
  --border-default:#B8C0C6; --border-subtle:#DEE2E8;
  --border-strong:#6E7883; --border-focus:#199ADB;
}

파랑을 넓은 바탕에 칠하지 않는다. 사진 위 프로그램명·선택 메뉴·방송시각에 쓴다. 분홍은 인기 VOD의 집계 순위색이다.

Typography

타이포그래피

폰트 페어링:
- TV UI 한글·영문: Noto Sans KR — 공식 common2016.css의 웹폰트 선언. 대체 맑은 고딕·Apple SD Gothic Neo. UI를 훈민정음체로 바꾸지 않는다.
- 브랜드 배포서체: EBS 훈민정음(2014), EBS 훈민정음 새론체(2016, 제목용 1종·본문용 2종), EBS 주시경체. 방송 타이틀·문화 콘텐츠용이며 TV 본문 지정 서체는 아니다.
- 작품별 레터링: 한글 특집은 명조·붓글씨, 여행은 흰 산세리프 제목과 파란 프로그램명.
위계 (공식 TV CSS 관찰, Display와 일부 행간·자간은 추정):
- Display: 36px / 700 / 1.25 / -.03em — 대표 프로그램 이미지 안 레터링.
- H1: 28px / 400 / 1.35 / -.03em — 배너 방송 제목.
- H2: 26px / 900 / 1 / -.03em — 미리보기·인기 VOD.
- H3: 18px / 400 / 21px / -.02em — 방송 카드 제목.
- Body Large: 16px / 400 / 24px / -.02em — 미리보기 2줄 제목.
- Body: 15px / 300 / 25px / -.02em — 프로그램명.
- Body Small: 13px / 400 / 20px / -.01em — 메뉴·보조 내용.
- Caption: 11px / 400 / 16px / 0 — 유틸 메뉴·작은 재생시간.

Spacing

스페이싱

Base unit: 4px (추정). 실제 TV CSS에는 10·15·17·20px 간격도 쓰인다.
Container: 기존 TV CSS는 980px 고정 폭이며 넓은 화면 보정도 함께 있다. 예시는 900px 창을 위해 최대 1200px·좌우20px로 재배치했다. 모바일은 좌우15px, 히어로만 화면 양끝까지 쓴다.

:root {
  --space-xs:4px; --space-sm:8px; --space-md:16px;
  --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px;
  --font-body:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
}

PC 썸네일 사이 20px, 사진 아래 제목까지 17px는 공식 CSS 값이다. 축소 예시에서는 같은 비율을 유지하며 12~16px로 줄인다. 섹션 사이는 넓게, 썸네일 아래는 좁게 묶는다.

Border Radius

:root {
  --radius-none:0; /* 검색창·대표 배너·방송 이미지 */
  --radius-sm:2px; /* (추정) 작은 방송정보 라벨 */
  --radius-md:4px; /* (추정) 보조 입력 */
  --radius-lg:8px; /* (추정) 모바일 공지 */
  --radius-xl:12px; /* (추정) 팝업 */
  --radius-full:9999px; /* 후원 단추·검색 원·슬라이더 점 */
}

썸네일을 둥근 OTT 포스터로 바꾸지 않는다. 16:9 네모 방송장면 아래에 제목을 붙인다.

Shadow / Elevation

:root {
  --shadow-none:none; /* 방송 이미지·일반 목록 */
  --shadow-sm:0 1px 2px rgba(0,0,0,.12); /* (추정) 검색 단추 */
  --shadow-md:0 3px 8px rgba(0,0,0,.12); /* (추정) 모바일 알림 */
  --shadow-lg:0 8px 24px rgba(0,0,0,.18); /* (추정) 드롭다운 */
  --shadow-xl:0 16px 48px rgba(0,0,0,.24); /* (추정) 팝업 */
}

기본 카드에는 그림자가 없다. 인기 VOD는 가는 테두리로 영역을 정하고, 배너 제목 자리에는 사진 아래쪽 검은 투명 그라디언트를 쓴다.

Iconography

스타일: Outline 중심. 돋보기·메뉴·화살표는 선, 재생은 채운 삼각형.
Stroke 굵기: 24px 판에서 약2px(추정). 모바일 검색 원은 파란 바탕에 흰 돋보기다.
모서리 처리: 검색 원·햄버거의 끝은 둥글다. 데스크톱 선택 상자의 아래 화살표는 네모 틀 안에 둔다.
추천 라이브러리: Lucide를 2px로 맞추면 유사하다(공식 지정 아님).
로고: 공식 CI 다운로드의 가로형 시그니처를 경로로 추출했다. EBS 세 글자와 심벌의 비율·배치를 유지한다. TV는 서비스 구분 글자로 옆에 둔다.

Component Guide

컴포넌트 가이드 (상태별 CSS)

TV 홈의 네모 구독 단추·회색 검색 단추·밑줄 탭·방송 썸네일을 따른다. 상태색·오류·로딩은 공개 토큰이 없어 추정했다.

.ebs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:36px;padding:0 18px;border:1px solid transparent;border-radius:var(--radius-none);font:600 13px/1 var(--font-body);cursor:pointer;transition:background-color var(--duration-base) var(--ease-out)}
.ebs-btn--primary{background:var(--color-primary-500);color:var(--text-on-primary)}
.ebs-btn--primary:hover{background:var(--color-primary-600)}
.ebs-btn--primary:active{background:var(--color-primary-700)}
.ebs-btn--orange{background:var(--ebs-subscribe);color:#fff}
.ebs-btn--orange:hover{background:#E97700}
.ebs-btn--orange:active{background:#CB6800}
.ebs-btn--secondary{background:#fff;border-color:var(--border-default);color:var(--text-secondary)}
.ebs-btn--secondary:hover{background:var(--bg-subtle)}
.ebs-btn--secondary:active{background:var(--color-neutral-200)}
.ebs-btn--ghost{background:transparent;color:var(--text-secondary)}
.ebs-btn--ghost:hover{color:var(--color-primary-500)}
.ebs-btn--ghost:active{color:var(--color-primary-700)}
.ebs-btn--danger{background:var(--color-error-fg);color:#fff}
.ebs-btn--danger:hover{background:#A32A41}
.ebs-btn--danger:active{background:#872238}
.ebs-btn:disabled{background:var(--color-neutral-200);color:var(--text-disabled);border-color:transparent;cursor:not-allowed}
.ebs-btn:focus-visible{outline:2px solid var(--border-focus);outline-offset:3px}
.ebs-btn.is-loading{position:relative;color:transparent;pointer-events:none}
.ebs-btn.is-loading:after{content:'';position:absolute;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:ebs-spin 800ms linear infinite}
@keyframes ebs-spin{to{transform:rotate(360deg)}}
.ebs-input{display:block;min-width:0;width:100%;height:36px;padding:0 10px;border:1px solid var(--border-default);border-radius:0;background:#fff;color:var(--text-primary);font:400 13px/1.4 var(--font-body)}
.ebs-input::placeholder{color:var(--text-tertiary)}
.ebs-input:focus{outline:2px solid var(--border-focus);outline-offset:2px}
.ebs-input.is-error{border-color:var(--color-error-fg)}
.ebs-input:disabled{color:var(--text-disabled);background:var(--bg-subtle)}
.ebs-card{min-width:0;background:#fff}
.ebs-card__image{aspect-ratio:16/9;overflow:hidden;border-radius:0}
.ebs-card__title{font-size:16px;line-height:24px;margin-top:17px;font-weight:400}
.ebs-card--featured{position:relative;color:#fff;overflow:hidden}
.ebs-card--outlined{border:1px solid var(--color-neutral-300)}
.ebs-card:hover .ebs-card__title{color:var(--color-primary-500)}
.ebs-badge{display:inline-flex;align-items:center;padding:2px 5px;border-radius:2px;font:500 11px/1.3 var(--font-body)}
.ebs-badge--solid{background:var(--color-primary-500);color:#fff}
.ebs-badge--subtle{background:var(--color-info-bg);color:var(--color-info-fg)}
.ebs-badge--outline{border:1px solid var(--border-default);color:var(--text-secondary)}
.ebs-nav{display:flex;align-items:center;gap:24px;height:48px;border-bottom:1px solid var(--border-subtle);background:#fff}
.ebs-nav__item{position:relative;height:100%;display:flex;align-items:center;color:var(--text-primary);font-size:16px}
.ebs-nav__item[aria-current='page']{color:var(--color-primary-500)}
.ebs-nav__item[aria-current='page']:after{content:'';position:absolute;left:0;bottom:0;width:20px;height:2px;background:var(--color-primary-500)}

Motion

공식 TV CSS의 썸네일 전환은 300~500ms다. 대표 배너는 자동 순환하며 아래 점이 현재 장면이다. 예시는 정지 화면, 버튼 시간은 추정값이다.

:root{--duration-fast:100ms;--duration-base:200ms;--duration-slow:500ms;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.ebs-btn,.ebs-card{transition:none}.ebs-btn.is-loading:after{animation:none}}

Anti-patterns

1. TV 홈 전체를 검정 OTT 화면으로 바꾸지 않는다. 흰 검색 머리글·파란 TV 탭·프로그램별 제목 선반이 방송 포털의 골격이다. 2. CI 초록·주황·파랑을 같은 비율의 큰 배경 면으로 쓰지 않는다. 원형 심벌 안의 조합과 UI의 안내색은 역할이 다르다. 3. 프로그램 사진을 색 칩·회사소개·학습 링크 표로 바꾸지 않는다. 자연·사람·문화의 구체 장면이 화면의 큰 몫을 차지한다. 4. 훈민정음체를 검색칸·시각·긴 본문에 일괄 적용하지 않는다. TV UI의 실제 글꼴은 Noto Sans KR이다. 5. 네모 방송 썸네일에 큰 반경·떠 있는 그림자·큰 순위 배지를 겹치지 않는다. 인기 VOD 순위는 사진 아래에 분홍색 숫자로 따로 놓는다.

Sources

출처

EBS (한국교육방송공사) 이름과 로고는 각 권리자의 상표입니다.