스티비
흰 지면과 #F6F6F6 회색 띠가 교대하고, 코랄 #FF6464 한 색이 다음 행동을 가리킨다.
이메일 마케팅 SaaS의 국문 랜딩입니다. 흰 지면과 옅은 회색 띠를 섹션 단위로 번갈아 깔고, 코랄 한 색만 CTA 버튼과 밴드에 돌려 써서 다음에 할 행동을 가리킵니다. 제목은 44px에서 42·36·32px로 내려가는데 전부 국문이고 자간을 거의 건드리지 않아, 굵기 한 단(SemiBold)만으로 국문 대형 제목을 짜는 표본으로 좋습니다. 청유형 종결('~하세요')의 2행 제목과 명사형 기능 제목('~하기')이 짝을 이루는 카피 패턴도 함께 볼 만합니다.
https://stibee.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard Variable · 400 / 500 / 600display·heading·body·ui·caption 전부 — 한글·라틴 100%
stibeeicon10 · 400icon font (자체)
Font Awesome · 100 / 300 / 400 / 900icon font (서드파티)
Type Scale10단 전부 Pretendard Variable, 제목은 600·본문은 400 두 웨이트
hero44px · 600 · 1.4
다람쥐 헌 쳇바퀴
h142px · 600 · 1.4
다람쥐 헌 쳇바퀴
h2-cta40px · 600 · 1.4
다람쥐 헌 쳇바퀴
h2-home36px · 600 · 1.5
다람쥐 헌 쳇바퀴
h2-feature32px · 600 · 1.5
다람쥐 헌 쳇바퀴
h428px · 600 · 1.5
다람쥐 헌 쳇바퀴
h520px · 600 · 1.6
다람쥐 헌 쳇바퀴
quote18px · 600 · 1.6
다람쥐 헌 쳇바퀴
body16px · 400 · 1.6
다람쥐 헌 쳇바퀴
ui14px · 400 · 2.14
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard Variable (11,454글리프, 100%, 8페이지 CDP) — 선언 1순위와 일치. 파일 출처는 dembrandt URL 목록에 없어 미확인(CDN 추정) |
| hangulWeights | 400 주력(8,984, 78%) · 600 제목(2,329, 20%) · 500 소수(141, 1%). 700 이상 0 |
| body | 16px w400 — 히어로 부제 '고객과 가까워지는 이메일 마케팅을 시작하세요.'(59글리프) · 피처 본문 bodyPx 16 ×14섹션. lh 실측 없음(미확인, body 계열 1.60 준용). UI 본문 14/400 lh2.14(30px 라인박스) ×21, 보안 섹션 bodyPx 14 |
| sub | 16/400 히어로 부제 1행 · 후기 인용 18/600 lh1.6 |
| label | 14/600 lh1.6 ×9(요금표 라벨) · 헤더 CTA 14/400 · 푸터 링크 13/400·12/400 lh1.6 각 14 · 태그 9/400 |
| mixing | 단일 서체 — 라틴 565글리프도 Pretendard Variable 100%, 서체 전환 없음. 영문 고유명사 카드 제목('NEWNEEK'·'UPPITY'·'SATUR'·'JEJUSHINHWAWORLD') 18/600도 같은 폰트. 제목은 <br>로 2행 강제 분리(h1 텍스트 '이메일스티비로' 붙음 = br 흔적) |
| hangulHeadings | 있음 — 홈 히어로 44/600 lh1.4 ls−0.4px '고객이 좋아하는 이메일 / 스티비로 보내세요' 2행(span). 하위 페이지 h1 42/600 lh1.4 ×5('성장 단계에 따라 요금제를 선택하세요'·'누구나 쉽게 고객이 좋아하는 / 이메일을 만들 수 있어요' 등). 홈 h2 36/600 lh1.5 ls−0.2 ×7('드래그 한 번으로 / 이메일 만들기'). CTA 밴드 40/600 ×4. 제목 25개 전부 국문 |
| verdict | 국문 히어로·대형 제목 레퍼런스로 유효 — 44/600/1.4/−0.4px → 42/600/1.4/0 → 36·32/600/1.5/−0.2px 3단, 자간을 거의 안 건드리는(최대 −0.9%) SemiBold 국문 조판의 표본. 청유형 종결('~하세요'·'~해 보세요') 2행 제목 + 명사형('~하기') 피처 제목 패턴. 국문 본문 레퍼런스로는 16/400 lh 미확인이라 보류 |
| rendered | Pretendard Variable ×14216 |
영문 · Latin국문과 동일
| latinFont | Pretendard 6,822글리프(100.0%) |
| latinWeights | 단일 페이스(웨이트 파생 페이스 없음) |
| share | 라틴 6,822글리프 / 한글 14,216글리프 — 지면의 32.4%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: hero 44px/600 · h1 42px/600 · h2-cta 40px/600 · h2-home 36px/600 · h2-feature 32px/600 · h4 28px/600 · h5 20px/600 · quote 18px/600 · body 16px/400 · ui 14px/400 |
| mixing | 국영문 혼용 노드 605개(전체 1,652개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 32.4%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 100.0%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Pretendard Variable ×6822 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 8px | |
| Max width | 1132px | |
| Section gap | 홈 피처 블록 사이 200px(1309→1509, 1955→2155) | |
| Header | 64px fixed | |
| Grid Cards4 | 4열 268px, 거터 20 (268×4+20×3=1132) — 템플릿 카드(feature-email s4)·아카이브 링크 4열 | |
| Grid Cards3 | 3열 364px, 거터 20 (364×3+20×2=1132) — feature-subscriber s5 | |
| Grid Guide | 940 컨테이너 안 3열 300px, 거터 20 (300×3+20×2=940) — 가이드 카드 ×3페이지 | |
| Grid Gallery | 고객사례 4열, 행 피치 442(카드 398 + 44) · 템플릿 4열, 행 피치 466–467(카드 423 + 43–44). 카드 폭은 미측정(컨테이너 후보 1040·776) | |
| Content Width Candidates | 1132(홈 23·가격 78·기능 21–29) · 940(9) · 1192(4–10) · 840(4) | |
| Card Padding | 미측정 | |
| Button Padding | 0 26px (주 CTA 16px) / 0 20px (헤더 CTA 14px) / 0 30px (아웃라인 16px) / 14px 42px ('더보기' 14px r2.8) | |
| Feature Block | 이미지 1 + h2 36|32/600 + 본문 16 블록 높이 442–452px, 홈 3개·기능 페이지 3개 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| — | 2px | 3회 · 관측만(span) |
| — | 2.8px | 1회 · '더보기' 버튼 1회 — 표준 밖 |
| — | 3px | 28회 · div 28회 — 요소 미확인 |
| standard | 4px | 259회 · 버튼·인풋·헤더 CTA·필터 칩 |
| badge | 5px | 55회 · 태그 배지(1px #DFE0E4) |
| card | 10px | 36회 · 카드·컨테이너. 상단만 '10px 10px 0 0' 13회(카드 썸네일 img), 하단만 '0 0 10px 10px' 4회(요금제 카드 하단 밴드 — 플랜 4개) |
| circle | 50% | 22회 · 아바타·아이콘 칩(span) |
Guidelines
Do
- 코랄 #FF6464는 CTA 배경(×4+1)·아웃라인 보더(1px ×5)·인라인 링크(×5)·CTA 밴드 배경에만 — 103회 전부 '다음 행동' 자리
- 섹션 배경은 #FFFFFF/#F6F6F6 교대(홈 회색 613 → 흰 2,084 → 회색 1,835 → 흰 1,033), 강조 섹션은 페이지당 하나만 #F7FDFA(674–821px) 또는 #FFF8F8(510px)
- 제목은 Pretendard 600 단일 웨이트로 44→42→40→36/32→28→20 (lh 1.4→1.5→1.6), 자간은 −0.4px(44)·−0.2px(36/32) 이내
- 본문·UI는 400(8,984글리프, 78%). 500은 141글리프뿐이라 중간 웨이트로 위계를 만들지 않는다
- 라운드 4px 표준(259회) · 카드 10px(36회) · 배지 5px(55회). 알약 없음
- 컨테이너 1132, 카드 거터 20 — 4열 268 / 3열 364. 가이드 카드는 940 안 3열 300
- 피처 블록(이미지 1 + h2 + 본문 16)은 442–452px 높이, 블록 간격 142–200
- 분리는 1px 선 — 표·FAQ·리스트 행은 #202124(158회), 태그는 #DFE0E4(55회), 카드는 #EBEBEB(5회)
Don't
- 코랄 위 흰 텍스트를 본문·버튼 크기로 쓰지 않는다 — 2.89:1 ×55, aaLarge도 미달(hover #FF5252도 3.19)
- #747579를 틴트 배경 위에 쓰지 않는다 — #f9fafe 4.41·#f7fdfa 4.47 AA 미달, 흰 배경에서만 4.6
- nav hover 색 #9D9EA2(2.68:1, 328회)를 정적 텍스트색으로 쓰지 않는다
- 카드를 그림자로 띄우지 않는다 — 유일한 그림자 rgb(239,239,239) 0 0 10px −2px(106회)는 거의 안 보이는 값
- 알약(9999) 라운드·700 이상 웨이트를 쓰지 않는다 — 둘 다 0회
- 커스텀 이징·긴 전환을 넣지 않는다 — 0.3s(384)·0.2s(315) ease(675)가 표준, cubic-bezier(0.23,1,0.32,1) 9회·0.6s 14회는 예외
- 두 번째 채도 색을 넣지 않는다 — #00A75B 1회, 파트너 4색(cafe24·sixshop·godo·donus)은 CSS 변수로만 존재
- 스케일 밖 여백 5px(110)·9px(60)·0.01px(161, antd 버튼 padding-top 핵)을 재현하지 않는다
