그리팅 (Greeting)
%3B%22%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cuse%20href%3D%22%23svg1229253535_6530%22%3E%3C%2Fuse%3E%3C%2Fsvg%3E)
중립 회색 9단 위에 파랑 한 색, 자간은 −1%와 −2% 두 값뿐 — 규칙을 좁게 잠그고 900px 화면 열 장으로 16,316px를 밀고 간다.
그리팅은 Framer로 만든 채용 관리 SaaS 랜딩으로, 규칙을 아주 좁게 잠근 사이트입니다. 중립색은 Tailwind 기본 회색 9단을 그대로 쓰고 채도는 파랑 한 색뿐이며, 자간은 −1%와 −2% 두 값만 있고 양수는 한 건도 없습니다. 홈은 높이 900px로 고정한 기능 화면 열 장을 쌓고 묶음마다 앞에 296px 제목 밴드를 붙여, 16,000px가 넘는 문서를 챕터로 끊어 읽게 합니다. 국문 문장은 60px에서 멈추고 그보다 큰 글자는 전부 숫자라, 지표를 앞세우는 SaaS 랜딩 구조를 볼 때 좋습니다.
https://www.greetinghr.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard · 400 / 700본문·기본 — 한글 12,323글리프(50.6%)
Pretendard Medium · 400 / 500부제·UI 라벨·요금표 — 한글 6,088글리프(25.0%)
Pretendard SemiBold · 400 / 600제목·글로벌 nav·CTA — 한글 4,676글리프(19.2%)
Pretendard ExtraBold · 400why-greeting 스토리텔링 전용 — 한글 1,118글리프
Pretendard Light · 300가는 국문 — 59글리프
Apple SD Gothic Neo · 400 / 600 / 700폴백 — 한글 46 · 라틴 61글리프
Inter / Inter Tight · 400 / 600라틴 소수 — 한글 20 · 라틴 3글리프
Type Scale1440 레이아웃 기준
display-num96px · 400 · 1
다람쥐 헌 쳇바퀴
hero60px · 400 · 1.2
다람쥐 헌 쳇바퀴
h152px · 600 · 1.25
다람쥐 헌 쳇바퀴
h248px · 400 · 1.3
다람쥐 헌 쳇바퀴
h336px · 400 · 1.2
다람쥐 헌 쳇바퀴
h428px · 400 · 1.4
다람쥐 헌 쳇바퀴
h520px · 400 · 1.4
다람쥐 헌 쳇바퀴
body18px · 400 · 1.6
다람쥐 헌 쳇바퀴
ui16px · 400 · 1.5
다람쥐 헌 쳇바퀴
caption14px · 400 · 1.8
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 5패밀리 self-host(framerusercontent.com woff2 74파일) — Regular 12,323 · Medium 6,088 · SemiBold 4,676 · ExtraBold 1,118 · Light 59글리프. 한글 24,330글리프의 99.7%이고 나머지는 Apple SD Gothic Neo 46 · Inter 20 |
| hangulWeights | 선언 weight는 400이 23,636글리프(97.1%)로 사실상 전부다 — 굵기는 CSS가 아니라 패밀리 이름이 만든다(Framer 정적 폰트 패턴). 명시 선언은 600 133글리프 · 500 91 · 700 33 · 300 59뿐이고, 48px 제목도 weight 400 + 'Pretendard SemiBold'로 그려진다(pricing '알맞은 플랜을 선택해 보세요' 48/400 → Pretendard SemiBold×29 실측) |
| body | 18px lh1.60 자간 0 Pretendard Regular(count 10, 홈 기능 10섹션 전부) · UI 기준은 16px lh1.50 Pretendard SemiBold(count 42, 40개 스타일 중 최다) |
| sub | 20px lh1.40 −0.2px(−1%) Pretendard Medium ×7 (라벨 레일 그룹명) · 24px lh1.50 −0.24px(−1%) ×1 (지표 밴드 설명) |
| label | 14px lh1.80 −0.28px(−2%) ×20 (푸터·고지, 행간 최대) · 15px lh1.20 Medium ×10 (공지 바) · 13px lh1.70 ×9 · 12px lh1.40 ×10 |
| mixing | 국영문 한 서체다. 라틴 875글리프 중 832가 Pretendard 계열이고 Inter Tight는 3글리프뿐이라 라틴 전용 서체가 없다. fonts.gstatic.com에서 9패밀리 58파일(Geist·Outfit·Work Sans·Instrument Sans·Fragment Mono 등)을 받지만 렌더에 쓰인 글리프는 0 — Framer 편집기 잔재로 본다(해석). 숫자는 같은 Pretendard로 96~174.9px까지 키워 국문 문장과 층을 나눈다 |
| hangulHeadings | 있다. 국문 최대는 60px/lh1.20/−0.6px(−1%)이고 Pretendard SemiBold가 그린다 — 홈 마감 CTA '채용 관리를 넘어, 채용 성공으로'(y14953 h495, 그라디언트 지면)와 채용 홈페이지 히어로 '지원하고 싶어지는 우리 회사의 첫인상'(y43 h900), 인재풀 히어로 '원하는 순간 바로 연결되는 우리 회사 전용 인재풀'(y43 h1272) 세 곳. 그 아래로 52·48(8회)·36(10회)·28(5회)까지 전부 국문이 맡는다. 96px 이상은 예외 없이 숫자다 |
| verdict | 국문 히어로 레퍼런스로 유효하되 '중간 크기' 사례다 — 60px lh1.20 −1%는 라이브러리의 80~90px 국문 히어로(토스·카카오뱅크)보다 한참 작고, 대신 자간 규칙(−1%/−2% 두 값·양수 0건)과 국문 본문 18/lh1.6/자간 0이 명확해 SaaS 본문 조판 레퍼런스로 강하다. 굵기를 패밀리 이름으로 정하는 Framer 패턴은 그대로 옮기지 말고 Variable + weight로 바꿔 재현한다 |
| rendered | Pretendard ×15602 · Pretendard Medium ×6867 · Pretendard SemiBold ×6502 · Pretendard ExtraBold ×1147 · Pretendard Light ×84 · Apple SD Gothic Neo ×74 |
영문 · Latin국문과 동일
| latinFont | Pretendard 11,528글리프(99.1%) · Apple SD Gothic Neo 70글리프(0.6%) · Inter 20글리프(0.2%) · false 16글리프(0.1%) |
| latinWeights | 실측 페이스 Medium · SemiBold · ExtraBold · Light |
| share | 라틴 11,637글리프 / 한글 30,276글리프 — 지면의 27.8%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: display-num 96px/400 · hero 60px/400 · h1 52px/600 · h2 48px/400 · h3 36px/400 · h4 28px/400 · h5 20px/400 · body 18px/400 · ui 16px/400 · caption 14px/400 |
| mixing | 국영문 혼용 노드 1,278개(전체 2,936개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 27.8%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.1%를 그리는 Pretendard가 한글도 99.8% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · Apple SD Gothic Neo |
| rendered | Pretendard ×5529 · Pretendard Medium ×3670 · Pretendard SemiBold ×1652 · Pretendard ExtraBold ×660 · Apple SD Gothic Neo ×70 · Inter ×17 · Pretendard Light ×17 · false ×16 · Inter Tight ×3 · Inter SemiBold ×3 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 미확정. | |
| Max width | 1172px | |
| Section gap | 홈 기능 화면 900px 고정 ×9 + 917px ×1 | |
| Header | 110px fixed | |
| Content Widths | 1172 = 마케팅 5페이지(home 1172×41 · pricing 1172×146 · career-site 1172×39 · talent-pool 1172×43 · why-greeting 1172×58) · 1200 = 폼·자료 4페이지(demo·downloads ×2·guidebooks, 각 1200×6~7) · 1240 = 프로모션(1240×23) | |
| Card Padding | 프로모션 카드 320×276 거터 20 (4열) · 채용 홈페이지 리스트 1240×248 거터 20 (세로 6개) · why-greeting 스토리텔링 771×58 거터 0 (3개 2열) · 요금 비교표 행 1170×73 (11행) | |
| Button Padding | 14×25 (무료 체험하기 ×5 · 무료 체험 시작 ×1) · 14×25/20 비대칭 (도입 문의하기 ×4 · 견적 문의하기 ×2) · 12×16 (그리팅 AX 보기) · 8×20 (알약 칩 ×2) · 12×32 (바우처 혜택 상담 받기) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| micro | 2px | 54회 · 작은 이미지 마스크(div/img) |
| standard | 4px | 144회 · 주 CTA 버튼 4종 전부(무료 체험하기·도입 문의하기·견적 문의하기·무료 체험 시작) |
| small | 6px | 53회 · 다크 지면 위 보조 버튼('그리팅 AX 보기' bg rgba(255,255,255,.12)) |
| link | 8px | 121회 · 링크 블록·작은 카드 |
| card | 14px | 108회 · 이미지 카드(div/img) |
| card-lg | 16px | 25회 · 큰 카드·링크 카드 |
| media | 24px | 14회 · 미디어 프레임 |
| pill | 50px | 48회 · 알약 칩('New채용 홈페이지 산업별 사례 모음' pad 8×20) |
| circle | 50% | 39회 · 아바타·아이콘 원형 마스크 |
| pill-lg | 100px | 316회 · 라운드 최다. 로고 칩·원형 마스크(div/img) |
Guidelines
Do
- 국문 자간은 −1%(60·48·36·32·24·20·15px)와 −2%(52·50·28·18·17·14px) 두 값만 쓴다. 이 사이트 40개 스타일에 양수 자간은 0건이다
- 굵기는 Pretendard 4단(Regular 12,323 · Medium 6,088 · SemiBold 4,676 · ExtraBold 1,118글리프)으로 만든다. 재현할 때는 Pretendard Variable + font-weight 400/500/600/800으로 옮긴다 — 원본은 패밀리 이름으로 굵기를 정해 CSS weight가 97.1% 400이다
- 기능 소개는 900px 고정 화면으로 쌓고, 묶음마다 앞에 296px 챕터 제목 밴드(48px 제목 단독)와 좌측 20px 라벨 레일을 붙인다
- 지표는 다크 지면(#001946 599px · #09090B 420px)에 100px 이상 숫자 한 개로 놓는다. 국문 문장은 60px에서 멈춘다
- 중립은 Tailwind zinc 9단(#09090B·#18181B·#27272A·#3F3F46·#71717A·#A1A1AA·#D4D4D8·#E4E4E7·#F4F4F5) 안에서만 고르고, 채도는 #1890FF 한 색으로 제한한다
- 1px 경계는 border가 아니라 box-shadow 0 0 0 1px으로 그린다(#E4E4E7 12회 · #3F3F46 8회 vs 실제 border 1회)
- 모션은 0.4s cubic-bezier(0.36, 0, 0, 1) 한 조합으로 통일한다(지속시간 32/32 · 커브 32/32)
- 콘텐츠 폭은 마케팅 1172 · 폼과 자료 1200 · 프로모션 1240 세 값으로 잠근다
Don't
- 라운드를 즉흥으로 늘리지 않는다 — 원본은 25종(100px 316 · 4px 144 · 14px 108 … 15.68px 2)이라 표준이 없다. 재현은 4·8·16·50·100 다섯으로 줄인다
- 검정을 세 값으로 갈라 쓰지 않는다 — 원본은 #09090B(요금 CTA)·#0F0F0F(버튼)·#171717(섹션 지면)이 동시에 산다
- #A1A1AA를 본문에 쓰지 않는다 — #FCFCFC 위 2.5:1로 342쌍, 이 사이트 최다 AA 미달이다. 같은 자리에 #71717A(4.71:1)를 쓴다
- #1890FF 위에 흰 텍스트를 얹지 않는다(3.24:1 ×66, AA 미달). #71717A를 #F4F4F5 카드 위에 올리는 것도 피한다(4.4:1 ×19)
- 국문 제목을 60px보다 키우지 않는다 — 원본의 96px 이상은 전부 숫자(92% · 10,000+ · 2,633,708 · 50)다
- 여백을 22px(844회)·10px(322회)·5px(104회)·3px(88회)처럼 스케일 밖 값으로 흩지 않는다. 8px 스케일로 재현하려면 8·16·24·40·80으로 재배치해야 한다
- 그림자를 12종으로 벌리지 않는다 — 3중 소프트(0.60/2.29/10px, 18회)와 1px 링 2종만 남긴다
- 첫 화면에 모달을 띄우지 않는다 — 홈 폴드가 딤 + 팝업('그리팅 AI는 다릅니다')에 가려 히어로가 보이지 않는다(1440 실측 2026-09-09)
