부산국제영화제 (BIFF)
흰 바탕의 정보 목록과 검정 영상·포스터 밴드를 번갈아 쌓고, 빨강 #E20011 하나로 링크·배지·선을 찍는 영화제 포털.
부산국제영화제는 흰색·연회색 정보 섹션과 검정 영화 섹션이 번갈아 나오는 포털형 홈페이지입니다. 모든 글자는 Pretendard 한 서체이고, 강조는 빨강 한 색(#E20011)과 굵은 700 웨이트로만 합니다. 국문 대형 제목은 45px/700 '미디어', 42px/600 'BIFF 소식을 가장 빠르게 만나려면?'처럼 있지만 홈의 큰 섹션 제목은 영문(48px/700)입니다. 행사·일정·뉴스를 촘촘히 보여 주는 공연·문화 기관 사이트를 만들 때 참고하기 좋습니다.
https://www.biff.kr/korColor Palette
Accent
Background
Label
Line
Typography
Pretendard · 200 / 400 / 500 / 600 / 700 / 800display·heading·body·ui 전부
Type Scaleraw 1920 기준 42종 중 대표 10단
display-en50px · 600 · 1.5
다람쥐 헌 쳇바퀴
h2-section48px · 700 · 1.1
다람쥐 헌 쳇바퀴
h1-ko-page45px · 700 · 1.5
다람쥐 헌 쳇바퀴
h-newsletter42px · 600 · 1.5
다람쥐 헌 쳇바퀴
h328px · 700 · 1.5
다람쥐 헌 쳇바퀴
h424px · 700 · 1.5
다람쥐 헌 쳇바퀴
card-title18px · 700 · 1
다람쥐 헌 쳇바퀴
body16px · 400 · 1.5
다람쥐 헌 쳇바퀴
meta14px · 400 · 1.5
다람쥐 헌 쳇바퀴
label12px · 400 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard (한글 16,067글리프 중 98.3%) — os-font 판정, 웹폰트 아님으로 보일 수 있어 Mac/Windows에서 다를 수 있음(미확인) |
| hangulWeights | 400 주력(9,036) · 600(4,506) · 700(1,603) · 200(292) |
| body | 14~16px 400 lh1.5 ls0 |
| sub | 13px 400 lh1.5 ls+0.65px |
| label | 12px 400~700 ls+0.5~1.2px |
| mixing | 국영문 모두 Pretendard 단일 — 영문 섹션 제목(48/700)과 국문 페이지 제목(45/700)이 같은 서체 |
| hangulHeadings | 있음 — 서브 페이지 45px/700 ls−2px '미디어'·'행사 일정'·'상영관별 시간표'(layout), 푸터 위 42px/600 'BIFF 소식을 가장 빠르게 만나려면?', 홈 히어로 국문 '제31회 부산국제영화제 개막식 생중계'(51/600). 홈 섹션 제목은 영문 |
| verdict | 국문 대형 제목 레퍼런스로 유효(45px/700 −2px). 단 홈의 큰 섹션 제목은 영문이라 국문 히어로 홈 레이아웃 근거로는 서브 페이지·푸터 CTA를 본다 |
| rendered | Pretendard ×15788 · Pretendard Medium ×232 · Pretendard SemiBold ×47 |
영문 · Latin국문과 동일
| latinFont | Pretendard 41,604글리프(100.0%) |
| latinWeights | 실측 페이스 SemiBold · Medium · ExtraLight · Light · Black · ExtraBold |
| share | 라틴 41,604글리프 / 한글 16,067글리프 — 지면의 72.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: display-en 50px/600 · h2-section 48px/700 · h1-ko-page 45px/700 · h-newsletter 42px/600 · h3 28px/700 · h4 24px/700 · card-title 18px/700 · body 16px/400 · meta 14px/400 · label 12px/400 |
| mixing | 국영문 혼용 노드 846개(전체 4,079개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 72.1%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 100.0%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Pretendard SemiBold ×19886 · Pretendard ×17913 · Pretendard Medium ×2773 · Pretendard ExtraLight ×762 · Pretendard Light ×248 · Pretendard Black ×12 · Pretendard ExtraBold ×10 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 5px | |
| Max width | 1400px | |
| Docs width | 1320px | |
| Section gap | 섹션 위·아래 패딩 66px(홈 대부분)·80px(Media), 서브 페이지 일정 행 40px | |
| Header | 129px relative(홈)·static(서브) | |
| Grid Home | Competition 4열 카드 335×294 갭 20px(11개 반복) | |
| Card Padding | News 행 1010×69, 이벤트 카드 335×510 | |
| Button Padding | 6×20 알약 / 8×30×8×50 View 외곽선 / 8×8×8×40 Subscribe |
Border Radius
| Role | Value | Preview |
|---|---|---|
| — | 3px | 164회 · 배지·라벨 칩 |
| small | 4px | 504회 · ul·span |
| standard | 6px | 1117회 · 링크·카드·캐러셀 슬라이드 |
| card | 8px | 313회 · div 카드 |
| — | 12px | 68회 · span 칩 |
| — | 16px | 57회 · span |
| pill | 50px | 31회 · 알약 버튼 |
| circle | 50% | 239회 · 탭·원형 버튼·페이지 점 |
Guidelines
Do
- 포인트는 #E20011 한 색(1,031회)만 링크·배지·구분선·화살표에 쓴다
- 밝은 정보 섹션(#FFF·#F7F8F9)과 어두운 영화 섹션(#000·#111)을 번갈아 쌓는다
- 섹션 제목은 48px/700 ls−1px, 위·아래 패딩 66px
- 카드는 4열 335px 폭·갭 20px, 포스터 비율 이미지 위에 흰/검정 라벨 칩
- 목록은 69px 행 + 1px #EEE 구분선, 날짜는 #888 14px
- 국문 제목은 45px/700 ls−2px, 12px 영문 눈썹 라벨은 ls+1.2px 대문자
- 카드 hover는 0.3s ease opacity·transform, 링크는 0.1~0.3s 배경색 전환
Don't
- #888888을 흰 지면 위 본문에 쓰지 않는다(3.54:1, AA 미달)
- 레드 외 브랜드 유채색을 UI 강조로 늘리지 않는다 — 8가지 링크색(오렌지·초록·파랑)은 카테고리 태그 한정
- 골드 그라디언트(#D4AF37→#AA7C11)를 배지·수상 표시 밖에 쓰지 않는다(29회)
- 서체를 섞지 않는다 — Pretendard 단일(98.3%)
- 큰 외부 그림자는 카드 레이어에만(rgba(0,0,0,.25) 0 10px 25px 405회), 일반 면에는 쓰지 않는다
- 국문 대형 제목에 −4% 자간을 모든 곳에 복제하지 않는다 — 45px 제목(−2px)만 해당
