트리플 (Triple)

흰 지면과 #F9FBFD 두 장 위에, 자간 보정 없는 OS 고딕 60px 국문 헤드라인과 파랑 #368FFF 알약 하나.

여행 앱의 랜딩과 장소 상세가 한 도메인에 함께 있는 사이트입니다. 흰 지면과 옅은 청회색 지면 두 장을 번갈아 쓰고 파란 알약 버튼 하나로 행동을 유도하며, 60px 헤드라인부터 48·26px 소제목까지 모든 위계의 제목을 국문이 맡습니다. '~할까요?' 같은 질문형 2행 제목이 블록마다 반복되는 카피 구조가 특징이라, 국문 랜딩의 조판과 문장 패턴 참고로 유효합니다. 다만 한글을 웹폰트가 아니라 맥 OS 고딕이 그리고 자간 보정이 한 건도 없어서, 크기와 행간만 가져오고 서체·자간은 프로젝트에서 다시 정하셔야 합니다.

https://triple.guide/intro

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Apple SD Gothic Neo (OS 시스템 폰트) · 400 / 500 / 600 / 700display·heading·body·ui — 한글 전부

.SF NS · 400 / 500 / 700latin·숫자·공백

Roboto · 400지도 UI

Noto Sans KR · 선언되었으나 렌더 0

Arial · 500latin fallback

Type Scaleraw 타이포 40종의 letter-spacing이 전부 미지정이다 — 60px 국문 디스플레이에도 트래킹 보정이 없다(라이브러리에서 자간 규칙 0종은 그린카에 이은 두 번째)

display60px · 700 · 1.3

다람쥐 헌 쳇바퀴

h248px · 700 · 1.4

다람쥐 헌 쳇바퀴

h426px · 700 · 1.8

다람쥐 헌 쳇바퀴

page-title24px · 700 · 1.2

다람쥐 헌 쳇바퀴

lead22px · 500 · 1.2

다람쥐 헌 쳇바퀴

body-lg20px · 400 · 1.8

다람쥐 헌 쳇바퀴

cta18px · 700 · 1.2

다람쥐 헌 쳇바퀴

body16px · 500 · 1.38

다람쥐 헌 쳇바퀴

meta13px · 500 · 1.46

다람쥐 헌 쳇바퀴

caption12px · 400 · 1.5

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	OS 폰트 100% — .Apple SD Gothic NeoI 12,260(60.7%) + Apple SD Gothic Neo 7,753(38.4%) + .SF NS 182(0.9%) + Arial 1 (한글 20,196 글리프). 선언 1순위는 -apple-system이고, Google Fonts로 Noto Sans KR(display=optional)을 불러오지만 한글 렌더 기록은 0이다. 이전 집계의 '.SF NS 4,731(28.1%) · Arial 345'는 한글 노드 속 라틴·숫자·공백을 한글로 센 허수였다
hangulWeights	400 Apple SD Gothic Neo 2,712 / .Apple SD Gothic NeoI 1,337 · 500 .Apple SD Gothic NeoI 4,798 / Apple SD Gothic Neo 1,407 / .SF NS 57 · 600 Apple SD Gothic Neo 536 / .Apple SD Gothic NeoI 323 · 700 .Apple SD Gothic NeoI 5,802 / Apple SD Gothic Neo 3,098 / .SF NS 125. 700(9,025)과 500(6,262)에 몰리고 600은 859뿐이다
body	홈 섹션 본문 20px/400 lh1.8, 카드·리뷰 본문 16px/500 lh1.38, FAQ 질문 15px/500. 자간 0
sub	히어로 부제 22px/500 lh1.2 ('계획부터 예약까지, 여행이…' → Apple SD Gothic Neo×15 + .SF NS×4)
label	13px/700 ×26(최다 스타일) · 12px/400 lh1.5 ×16(브레드크럼 '오사카'·'관광지') · 14px/700 ×23(링크)
mixing	영문 전용으로 고른 디스플레이 서체가 없다. 국문·영문·숫자를 같은 OS 스택이 그리고, 그 안에서 숫자·라틴은 .SF NS가 5,833 글리프(라틴의 35.9%)로 맡는다 — .SF NS의 한글은 182글리프(0.9%)뿐이라 사실상 라틴 전담이다. Google Fonts 3요청 중 하나는 화살표 4자(←→↑↓)만 서브셋한 Google Sans Text이고, Roboto는 지도 UI 몫으로 보인다(미확인). 가격 표기('192,400원' 32px/700)도 별도 숫자 서체 없이 같은 스택이다
hangulHeadings	있음 — 홈 h1 60px/700 lh1.3 '나를 아는 여행 앱 트리플'(2행), 섹션 h2 48px/700 lh1.4 6곳('우리가 함께 만드는 / 여행이 가능할까요?'), 소제목 h4 26px/700 lh1.8 6곳, 상세 h1 24px/700. 국문이 모든 위계의 제목을 맡는다
verdict	국문 히어로·대형 제목 레퍼런스로 유효하다 — 60/48/26/24px 4단이 전부 국문이고 질문형 2행 조판이 반복된다. 다만 자간 보정이 0이고 한글이 웹폰트가 아니라 OS 고딕이므로, 값을 그대로 옮기면 Windows에서 다른 글자체로 재현된다. 조판 규칙(크기·행간·2행 분절)은 가져오되 서체·자간은 프로젝트에서 다시 정해야 한다
rendered	.Apple SD Gothic NeoI ×12218 · Apple SD Gothic Neo ×7753 · .SF NS ×182 · Arial ×1

영문 · Latin폴백

latinFont	.SF NS 5,771글리프(84.0%) · Apple SD Gothic Neo 377글리프(5.5%) · Arial 363글리프(5.3%) · .Apple SD Gothic NeoI 332글리프(4.8%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 6,872글리프 / 한글 20,154글리프 — 지면의 25.4%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일 단이 라틴 전용 서체로 지정된 곳 없음 — 라틴은 국문 서체 또는 폴백이 그린다
mixing	국영문 혼용 노드 812개(전체 2,203개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	.SF NS 폴백(84.0%) · Arial 폴백(5.3% · 선언됨)
verdict	영문 전용 서체 없음(폴백) — 라틴을 .SF NS 84.0% · Arial 5.3%가 그리지만 전부 OS·브라우저 기본 페이스다. 서체를 고른 결과가 아니라 스택이 흘러간 결과이므로 디자인 결정으로 인용하지 말 것
sharedWithKorean	국문과 같은 서체: .SF NS · Apple SD Gothic Neo · Arial · .Apple SD Gothic NeoI
rendered	.SF NS ×5771 · Apple SD Gothic Neo ×377 · Arial ×363 · .Apple SD Gothic NeoI ×332 · Apple Color Emoji ×15 · Roboto ×10 · .蘋方 UI-簡 ×2 · Helvetica ×2

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	8px
Max width	1140px
Docs width	708px
Section gap	홈 진술 패널 padding-top 320px(y3154·y7841, 둘 다 h900)
Header	80px fixed(홈) · sticky(항공·상세·고객센터) · static(일정 공유)
Grid Home	특가 카드 6×2 560×86 gap 20 r16 · 기능 캐러셀 3×1 888×498 · 히어로 앱 배지 2
Grid Detail	리뷰 카드 5×5 · 함께 본 장소 24×24 140×189 gap 10 · 지역 정보 26×26 153×168 gap 10 · 갤러리 5×5 728×400
Card Padding	상세 기본정보 행 708×80 · FAQ 행 708×55 · 근처 추천 708×151 · 항공 특가 카드 359×394
Button Padding	0px(알약 CTA r36, 높이는 부모가 지정) · 11px 16px(칩 r21 13/700) · 7.5px 14px(r16 13/700) · 5px 7px(배지 r12) · 20px 0 16px 20px(취향 카드 r20)
Breakpoints	1281/1280 · 1142/1141 · 881/880 · 768/767 · 711/707/706 · 640 · 541/540 (14개)

Border Radius

Role	Value	Preview
hairline	2px	17회 · 캐러셀 화살표 버튼
standard	4px	728회 · div·a 기본 — 사이트 최다 라운드
image	6px	427회 · 썸네일·이미지 타일
small	8px	41회 · 소형 버튼('최저가 알림 받기' 12/700)·스팬
medium	12px	44회 · a·button('App Store' 14/700)·배지
card	16px	29회 · 홈 특가 카드 560×86
tile	20px	8회 · 취향 선택 카드(bg #F1F7FF)
chip	30px	55회 · FAQ 카테고리 칩 43×34(활성 bg #368FFF)
pill	36px	16회 · 히어로·섹션 CTA 3종 18/700
pill-lg	100px	14회 · button 알약(치수 미확인)
circle	50%	81회 · 아바타·아이콘 원

Guidelines

국문 대형 제목을 60px/700(히어로)·48px/700(섹션)·26px/700(소제목) 3단으로 세운다 — 자간은 건드리지 않는다(raw 40종 전부 미지정)
지면을 #FFFFFF와 #F9FBFD 두 장으로 번갈아 깔아 블록을 나눈다(홈 19섹션 중 9섹션이 #F9FBFD)
채도색은 블록당 하나로 고정한다 — 일정 #368FFF, 협업 #0ECEDB, 항공 #1AADF6를 CTA 글자색으로만 구분
CTA는 radius 36px 알약 18px/700 하나로 통일하고, 카드·타일은 4px(728회)·6px(427회)로 거의 각지게 둔다
진술형 질문 패널은 padding-top 320px, 높이 900px, 제목 48px/700 2행 + CTA 1개로 짠다(홈 y3154·y7841 동일 규격)
콘텐츠 폭은 랜딩 1140px, 상세·문서 708px 두 축만 쓴다(10페이지 실측에서 1140×25 / 708×625 후보가 지배적)
카드 부양은 rgba(0,0,0,0.07) 0 0 20px(29회), 행 구분은 rgba(58,58,58,0.05) 0 1px 0(33회)으로 역할을 나눈다

Don't

#368FFF를 흰 바탕 본문 텍스트로 쓰지 않는다(3.22:1, AA 미달 쌍 68회). #FD2E69도 #FFF5F8 위 3.41:1로 미달(12회)
#B0B0B0·#C4C4C4·#9D9D9D를 읽어야 하는 텍스트에 쓰지 않는다(2.17:1 ×59 · 1.74:1 ×19 · 2.71:1 ×28)
한글 웹폰트가 있다고 가정하지 않는다 — 20,196 글리프 전부 OS 폰트이고 Noto Sans KR은 display=optional로 불려도 렌더 0이다. 이 결을 재현하려면 Windows 대체 폰트를 반드시 확인한다
다크 섹션을 만들지 않는다(10페이지 섹션 배경이 #FFFFFF·#F9FBFD·#FAFBFD·rgba(58,58,58,0.03) 넷뿐)
300ms를 넘는 전환을 넣지 않는다(0.2s 35회·0.3s 11회가 대부분, 0.5s는 3회). 커스텀 이징도 cubic-bezier(0.68…) 6회뿐이다
CSS 변수 13개(azul·emerald·orange 등)를 팔레트로 확대 해석하지 않는다 — 실제 지면에서 관측된 채도색은 #368FFF·#0ECEDB·#1AADF6·#FD2E69·#975FFF 다섯 계열이다
라운드를 한 값으로 통일하지 않는다 — 4·6px 기본과 30·36px 알약의 대비가 이 사이트의 리듬이다