마이리얼트립
흰 지면 위에 사진을 빽빽이 깔고, 글자는 14px/600 자간 −2%로 촘촘하게 눌러 담는다.
마이리얼트립은 항공·숙소·투어를 한 지면에 모은 여행 커머스로, 사진을 빽빽하게 깔고 글자를 촘촘히 눌러 담은 인상입니다. 기준 글자가 14px에 자간을 2% 좁힌 값이고 굵기 500·600·700으로만 위계를 만들어, 작은 글자 구간의 국문 조판 사례로 유효합니다. 제목은 40px이 상한이라 대형 히어로 레퍼런스로는 약하고, 대신 이모지를 섞은 캐러셀 줄 제목과 가격 표기 같은 커머스 특유의 조판이 잡힙니다. 카드가 촘촘히 깔리는 목록형 커머스 화면의 밀도를 참고할 때 보면 좋습니다.
https://www.myrealtrip.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard · 500 / 600 / 700display·heading·body·ui·caption, 한글 84.2%
Apple SD Gothic Neo · 400한글 웨이트 400 폴백 (OS 시스템 폰트)
Arial · 400한글·라틴 최종 폴백
FontAwesome · 400아이콘
Type Scaleraw 37종 중 자간이 붙은 것은 17종이고 전부 음수다
display36px · 700 · 1.24
다람쥐 헌 쳇바퀴
h228px · 600 · 1.24
다람쥐 헌 쳇바퀴
h324px · 700 · 1.24
다람쥐 헌 쳇바퀴
h418px · 700 · 1.24
다람쥐 헌 쳇바퀴
body-lg16px · 400 · 1.5
다람쥐 헌 쳇바퀴
body-strong15px · 700 · 1.24
다람쥐 헌 쳇바퀴
body15px · 500 · 1.38
다람쥐 헌 쳇바퀴
body-sm14px · 600 · 1.38
다람쥐 헌 쳇바퀴
caption13px · 600 · 1.38
다람쥐 헌 쳇바퀴
caption-sm12px · 400 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 계열이 46,858글리프 중 39,473(84.2%)을 그린다 — Medium 18,197(38.8%) · Pretendard 14,129(30.2%) · SemiBold 7,147(15.3%). 나머지는 Apple SD Gothic Neo 4,391(9.4%) · Arial 1,783(3.8%) |
| hangulWeights | 500 = Pretendard Medium 18,197 · 700 = Pretendard 14,129 · 600 = Pretendard SemiBold 7,147 · 400 = Apple SD Gothic Neo 4,307 + Arial 1,781(웹폰트 없음). 400 웨이트만 OS 폰트로 떨어지므로 Mac과 Windows에서 다르게 보인다 |
| body | 14px/600 lh1.38 자간 −0.28px(−2%) 198회가 기준. 그 다음이 15px/500 lh1.38 −0.15px(−1%) 87회 |
| sub | 15px/700 lh1.24 −0.15px(−1%) 111회 — 카드 상품명·nav 1차 라벨 |
| label | 13px/600 lh1.38 −0.26px(−2%) 31회 · 12px/400 lh1.5 −0.2px 12회 · 11px/500 lh1.24 −0.22px가 바닥(1회) |
| mixing | 국문·라틴을 한 서체(Pretendard)로 처리한다 — 라틴 1,721글리프도 같은 패밀리다. 별도 영문 디스플레이 서체가 없다. 대신 이모지가 제목에 상시로 섞인다(투어 8섹션 제목 중 '⭐️인생 여행지, 호주·뉴질랜드🐨' 등, 숙소 8섹션은 국기 이모지 🇯🇵🇻🇳🇮🇩🇨🇳🇺🇸🇫🇷🇮🇹🇪🇸로 지역을 구분한다). 숫자는 쉼표 표기 그대로 22px/700('총 1,091,550원') |
| hangulHeadings | 있다. 홈 폴드 36px/700 국문(한글 92%) · 최저가 보장제 h1 40px/700 3행('최저가가 아니면 / 차액 두 배의 / 포인트 지급!') · 패키지 h1 28px/700('쉽게 떠나는 패키지') · 캐러셀 줄 제목 18~26px/700 국문이 10페이지 전반. 다만 48px 이상은 0개이고 최대가 40px이다 |
| verdict | 국문 커머스 조판 레퍼런스로 유효하다 — 14/600 −2%를 기준선으로 13~15px대에서 굵기(500·600·700)로 위계를 만드는 방식, 이모지를 섞은 캐러셀 줄 제목 18/700, 가격 22/700의 조합이 실측으로 잡힌다. 반면 국문 대형 히어로 조판 레퍼런스로는 약하다(최대 40px, 자간 −2%, 48px↑ 0개). 웨이트 400 국문이 OS 폰트로 떨어지는 것은 재현하지 말 것 |
| rendered | Pretendard Medium ×18738 · Pretendard ×10711 · Apple SD Gothic Neo ×7464 · Pretendard SemiBold ×6682 |
영문 · Latin폴백
| latinFont | Pretendard 16,890글리프(86.2%) · Arial 1,614글리프(8.2%) · FontAwesome 972글리프(5.0%) · Apple Color Emoji 86글리프(0.4%) |
| latinWeights | 실측 페이스 Medium · SemiBold |
| share | 라틴 19,585글리프 / 한글 43,595글리프 — 지면의 31.0%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: display 36px/700 · h2 28px/600 · h3 24px/700 · h4 18px/700 · body-lg 16px/400 · body-strong 15px/700 · body 15px/500 · body-sm 14px/600 · caption 13px/600 · caption-sm 12px/400 |
| mixing | 국영문 혼용 노드 1,641개(전체 3,965개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Arial 폴백(8.2%) |
| verdict | 영문 전용 서체 없음(폴백) — 라틴을 Arial 8.2%가 그리지만 전부 OS·브라우저 기본 페이스다. 서체를 고른 결과가 아니라 스택이 흘러간 결과이므로 **디자인 결정으로 인용하지 말 것** |
| sharedWithKorean | 국문과 같은 서체: Pretendard · Apple SD Gothic Neo |
| rendered | Pretendard Medium ×9289 · Pretendard ×4934 · Pretendard SemiBold ×2667 · Arial ×1614 · FontAwesome ×972 · Apple Color Emoji ×86 · Apple SD Gothic Neo ×22 · Zapf Dingbats ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 10px | |
| Max width | 1076px | |
| Section gap | 대부분 0/0 — 10페이지 섹션 중 상하 패딩이 잡힌 곳은 최저가 보장제 64/64(3섹션) | |
| Header | 123px relative | |
| Content Widths | 홈 1076 · 지금특가 1120 · 프로모션 1060(2페이지) · 투어·항공·숙소·상품상세 884(4페이지) · 패키지 860 · 최저가 740 | |
| Grid Cards | 배너 카드 350×260 gap 8 (홈 20개 · 항공 19개 · 투어 9개 · 숙소 9개) · 세로 카드 128×215 gap 1 (숙소 8섹션, 최대 22개) · 정사각 카드 281×281 gap 8 r12 (패키지) · 리뷰 카드 316×194 gap 6 (상세 32개) | |
| Grid Rows | 전폭 행 860×80 ×4 (패키지 7섹션) · 884×240 ×6 (항공) · 800×87 ×12 (상세 일정표) · 738×104 ×5 (최저가) | |
| Card Padding | 미확인 — 추출기가 카드 내부 패딩을 재지 않는다 | |
| Button Padding | 배지 0 10px · 오버레이 닫기 버튼 0 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| hairline | 1.5px | 2회 · 상단 인디케이터 바 |
| xs | 3px | 21회 · 작은 버튼·라벨 |
| sm | 4px | 21회 · 썸네일·작은 면 |
| md | 8px | 68회 · 카드 이미지 |
| standard | 12px | 141회 · 카드·버튼 표준 |
| badge | 13px | 1회 · 특가 배지(높이에 맞춘 값) |
| chip | 16px | 7회 · 탭·필터 칩(레이아웃 실측 r16px 칩 다수) |
| banner | 20px | 20회 · 광고 프로모션 배너 1·2 |
| tablist | 24px | 1회 · 탭 컨테이너(패키지 칩 r24px) |
| circle | 50% | 38회 · 아바타·아이콘 버튼·캐러셀 도트 |
Guidelines
Do
- 국문 본문·카드 라벨은 14px/600 lh1.38 자간 −0.28px(−2%)로 잡는다 — 37종 중 198회로 가장 많이 쓴 기준 글자다
- 자간은 음수만, −1%·−2%·−2.5% 세 값 안에서만 준다(실측 17종 전부 음수, 양수 0종)
- 지면은 #FFFFFF 하나로 유지한다 — 10페이지 전 섹션 배경이 rgb(255,255,255)다
- 카드 라운드는 12px(141회)을 표준으로, 이미지는 8px(68회), 배너는 20px(20회)로 쓴다
- 가로 배너는 350×260 gap 8로 통일한다(홈 20 · 항공 19 · 투어 9 · 숙소 9가 같은 규격)
- 그림자는 2겹 한 조합(rgba(0,0,0,.05) 0 1px 2px + rgba(0,0,0,.1) 0 4px 14px, 18회)으로 고정한다
- 전환은 0.2s ease 하나로 통일한다(102회 중 75회). 입력 필드만 cubic-bezier(0.4,0,0.2,1)
Don't
- 알약 버튼(radius 9999)을 만들지 않는다 — 실측 0개, 칩도 r16·r24 사각 라운드다
- #848C94(3.41:1 ×24) · #EC4937(3.77:1 ×11) · #8238FA on #E6D7FE(3.98:1 ×64)를 본문에 쓰지 않는다 — wcag 23쌍 중 11쌍이 AA 미달이다
- 라벤더 #E6D7FE 위에 흰 글자를 얹지 않는다(대비 계산상 미달) — 이 면의 텍스트는 #8238FA 하나뿐이다
- 48px 이상 국문 디스플레이를 이 사이트에서 인용하지 않는다 — 10페이지 최대 국문 제목이 40px/700(최저가 보장제 h1)이다
- 웨이트 400 국문을 쓰지 않는다 — 400용 Pretendard가 로드되지 않아 Apple SD Gothic Neo(4,307글리프)·Arial(1,781)로 떨어진다
- 섹션 상하 패딩을 크게 잡지 않는다 — 10페이지 섹션 대부분이 0/0이고 최대가 64/64다
- 헤더를 고정하지 않는다 — 123px relative로 스크롤과 함께 올라간다
