아임웹

잉크 한 색(#15181E 6,222회)으로 글자와 버튼을 동시에 칠하고, 하늘색 #00B9FF는 7회만 쓴다.

아임웹은 노코드 사이트 빌더의 마케팅 사이트로, 흰 지면에 잉크 한 색만 얹은 담백한 인상입니다. 브랜드 하늘색은 거의 쓰지 않고 글자도 버튼도 같은 먹색으로 칠해, 색 대신 크기와 굵기로만 위계를 만듭니다. 국문 히어로가 80px까지 커지지만 자체 서체 imweb Sans에 굵은 굵기가 없어 큰 제목은 Pretendard로 넘어가는데, 자체 서체를 도입하려는 프로젝트라면 이 대목이 그대로 반면교사가 됩니다. 템플릿 썸네일과 제품 화면이 지면을 채우는 SaaS 랜딩이라, 이미지가 많은 제품 소개 페이지를 설계할 때 참고하기 좋습니다.

https://imweb.me

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

imweb Sans · 400 / 600ui·link·body (한글 400/600)

Pretendard · 400 / 500 / 600 / 700display·heading (한글 700·500), 폴백 본문

Noto Sans KR · 400 / 700빌더 제작 페이지의 한글 본문

Montserrat · 400 / 500 / 700빌더 제작 페이지의 라틴 본문·UI

Nexon Gothic · 400 / 700빌더 제작 페이지의 제목

Apple SD Gothic Neo · 400 / 700OS 폴백

Black Tie · 400아이콘 폰트

Type Scaleraw typography

display-xl170px · 500 · 0.7

다람쥐 헌 쳇바퀴

display-hero80px · 700 · 1

다람쥐 헌 쳇바퀴

display62px · 700 · 1.3

다람쥐 헌 쳇바퀴

h148px · 700 · 1.48

다람쥐 헌 쳇바퀴

h230px · 700 · 1.2

다람쥐 헌 쳇바퀴

h328px · 700 · 1.3

다람쥐 헌 쳇바퀴

h424px · 700 · 1.33

다람쥐 헌 쳇바퀴

h520px · 700 · 1.4

다람쥐 헌 쳇바퀴

ui16px · 600 · 1.5

Handgloves 123

body-sm14px · 400 · 1.43

Handgloves 123

caption12px · 400 · 1.33

Handgloves 123

국문 · Korean

hangulFont	imweb Sans 400(7,082글리프 24.6%) + imweb Sans 600(1,997) + Pretendard(12,601 43.8%) + Noto Sans KR(4,641). 선언 1순위는 'imweb Sans, Pretendard, Nexon Gothic'
hangulWeights	400 → imweb Sans 400 7,082 / Noto Sans KR 3,573 · 500 → Pretendard Medium 74 (imweb Sans 3) · 600 → imweb Sans 600 1,854 / Pretendard SemiBold 409 · 700 → Pretendard 11,647 / Noto Sans KR 1,068, imweb Sans 0
body	imweb Sans 14px/400 lh1.43 자간 0 (raw 26회 최다). 16px/400 imweb Sans는 16회
sub	Pretendard 18px/400 lh1.68 ×3 · 18px/700 lh1.00 ×4(카드 하단 링크 '웹사이트 방문하기')
label	imweb Sans 16px/600 lh1.5 ×19 · 14px/600 lh1.71 ×14 · 12px/400 lh1.33 ×3 · 11px/600 lh1.09 ×7
mixing	두 스택이 한 도메인에 공존한다. Clay 기반 제품 페이지(home·price·blog·expert-intro·expert-profile·expert-portfolio-detail)는 imweb Sans+Pretendard, 아임웹 빌더로 만든 페이지(features·qna·customer·best-production-list)는 Noto Sans KR+Montserrat+Nexon Gothic이다. 같은 nav '주요기능'이 blog에선 imweb Sans 400, expert-intro에선 Pretendard로 그려진다. 웨이트 단위 혼용도 있다 — 자체 서체 imweb Sans가 400·600만 커버해 500과 700은 Pretendard로 넘어간다
hangulHeadings	있음. 홈 히어로 80px/700 국문 '운영하기'(1440 실측, y172), expert-intro 60px/700 '1천만원' · 48px/700 '100만 이상 잠재 고객이 기다리고 있어요', price 48px/700 '요금제를 선택해 보세요', 목록 페이지 28px/700 제목. 다만 80px·60px·48px 전부 imweb Sans가 아니라 Pretendard 700이 그린다
verdict	국문 히어로 레퍼런스로 유효하다 — 80px/700 국문 대형 제목이 실재한다. 단 두 가지를 그대로 베끼면 안 된다: ① 자간이 0이라(60종 중 자간 있는 것 3종) 80px 국문에서 글자 사이가 벌어져 보인다 ② 자체 서체 imweb Sans는 400·600만 있어 히어로 웨이트가 Pretendard로 폴백된다 — 자체 서체를 쓰는 국문 사이트를 설계할 때 웨이트 커버리지를 먼저 확인해야 한다는 반례다
rendered	Pretendard ×12598 · imweb Sans 400 ×6869 · Noto Sans KR Thin ×6581 · imweb Sans 600 ×2571 · Pretendard SemiBold ×584 · NEXONLv1GothicOTFBold ×206 · Pretendard Medium ×112 · Apple SD Gothic Neo ×101 · Montserrat Thin ×38 · NEXONLv1GothicOTFRegular ×18

영문 · Latin영문 전용

latinFont	Pretendard 6,069글리프(39.1%) · imweb Sans 400 5,536글리프(35.7%) · Montserrat 2,083글리프(13.4%) · imweb Sans 600 939글리프(6.0%)
latinWeights	실측 페이스 Thin · SemiBold · Bold · Medium · Regular
share	라틴 15,522글리프 / 한글 29,678글리프 — 지면의 34.3%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: display-xl 170px/500 · display-hero 80px/700 · display 62px/700 · h1 48px/700 · h2 30px/700 · h3 28px/700 · h4 24px/700 · h5 20px/700
mixing	국영문 혼용 노드 975개(전체 2,895개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Montserrat 영문 전용(13.4% · 선언됨)
verdict	영문 전용 서체가 있다 — Montserrat 라틴 13.4% / 한글 0.1%. 다만 타입 스케일에 이 서체로 지정된 단이 없다 — 디스플레이 레퍼런스로 보기 어렵다
sharedWithKorean	국문과 같은 서체: Pretendard · imweb Sans 400 · Montserrat · imweb Sans 600
rendered	Pretendard ×5953 · imweb Sans 400 ×5536 · Montserrat Thin ×2083 · imweb Sans 600 ×939 · Noto Sans KR Thin ×728 · Pretendard SemiBold ×97 · NEXONLv1GothicOTFBold ×90 · Apple Color Emoji ×62 · Pretendard Medium ×19 · Apple SD Gothic Neo ×11 · NEXONLv1GothicOTFRegular ×2 · PingFang SC ×1 · Lucida Grande ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	compact
Base unit	4px
Max width	1320px
Section gap	제품 페이지 features는 섹션 높이 184~4,104px으로 불규칙
Header	72px static
Grid	blog 3열 401px 거터 0 · features feature-grid 3열 407px 거터 0 · expert-profile 대표 포트폴리오 3열 440px 거터 20 · expert-portfolio-detail 4열 212px 거터 24 · expert-intro 스탯 3열 435px 거터 28
Card Padding	blog 카드 401×350(일부 401×382) · price FAQ 행 1280×88 · price 비교표 행 1320×56·1320×82
Button Padding	8×12 (헤더 14px/600) · 12×16 (16px/600) · 8×20 (필터 '전체') · 6×12 (틴트 버튼)
Content Width Note	단일 max-width가 없다 — qna·best-production-list 1180 · blog 1204 · features 1220 · customer 1240 · expert-intro 1296 · price 1320 · expert-profile 1360 · expert-portfolio-detail 미검출. 홈은 600으로 잡히는데 히어로 전체가 한 노드(y172 h8889)로 묶여 본문 폭이 아니라 텍스트 블록 폭을 집은 것이다(추출기 한계)

Border Radius

Role	Value	Preview
xs	2px	29회 · 필터 칩 '전체'
sm	3px	492회 · 카드 — 최다이지만 버튼 표준(8px)과 층위가 겹친다
sm-alt	4px	20회 · 검색 인풋
md	6px	70회 · figure·img
standard	8px	350회 · 버튼·FAQ 행·목록 표준
lg	12px	443회 · 큰 카드·패널
xl	16px	15회 · 블록쿼트·모달
2xl	30px	21회 · iframe·영상 프레임
circle	50%	16회 · 아바타·아이콘 버튼
pill	999999px	62회 · 태그 알약 78×28 (100px ×6 · 9999px ×1 포함)

Guidelines

주 액션은 채도색이 아니라 잉크 #15181E로 칠한다 — 버튼 bg #15181E ×5+2, semantic.primary #00B9FF의 렌더는 7회뿐이다
버튼 radius는 8px로 통일한다(전체 350회). 알약 999999px은 태그·칩 62회로 제한한다
국문 700 제목은 Pretendard로 간다 — imweb Sans에 700 컷이 없어 hangulByWeight 700이 Pretendard 11,647 : imweb Sans 0이다
본문 기본은 imweb Sans 14px/400 lh1.43(26회), 링크·nav는 16px/600 imweb Sans(19회)
경계는 1px solid #E2E5E9(42+35+7회), 강조가 필요할 때만 2px solid #DBDEE3(48회)
전환은 0.2s ease로 맞춘다(0.2s ×749 · ease ×811). 색 전환만 걸고 버튼은 0.15s cubic-bezier(0.25,0.46,0.45,0.94) ×7
회색 지면은 #F6F6F8(목록 페이지 전체)과 #F8F9FB(카드·FAQ 행) 두 장만 쓴다

Don't

#00B9FF·#0090D4·#1A6DFF를 본문 텍스트에 쓰지 않는다 — 흰 배경에서 1.99·3.54·4.49:1로 전부 AA 미달이다
#717680을 회색 지면 위에 얹지 않는다 — #ffffff에선 4.56:1이지만 #f8f9fb 4.33:1(40쌍)·#e2e5e9 3.61:1(72쌍)로 떨어진다
한 사이트에 서체 스택을 두 벌 두지 않는다 — /features·/qna·/customer·/best_production_list만 Noto Sans KR+Montserrat+Nexon Gothic이라 같은 nav가 페이지마다 다른 폰트로 그려진다
80px 국문 히어로에 자간을 0으로 두는 것을 그대로 베끼지 않는다 — 60종 중 자간이 붙은 스타일은 3종뿐이고 대형 국문 제목은 −2% 계열이 필요하다(라이브러리 다른 사이트 실측 기준)
간격을 15px·65px 같은 8배수 밖 값으로 쌓지 않는다(15px ×802 · 65px ×396 · 3px ×20)
콘텐츠 폭을 페이지마다 바꾸지 않는다 — 1180·1204·1220·1240·1296·1320·1360 일곱 값이 공존한다
radius 3px(492회)와 8px(350회)를 같은 층위 카드에 섞어 쓰지 않는다
그림자를 여덟 종류로 늘리지 않는다 — 4겹 그림자(rgba(75,81,91,.12) 0 14 32 외 3겹)가 36회, 별개 조합이 7종 더 있다