컴투스
1440×859 게임 키비주얼 위에 56px 국문 게임명을 얹고, 그 아래 416×302 카드 그리드를 히어로 위로 끌어올려 겹친다.
컴투스는 게임 회사의 코퍼레이트 홈인데 회사 이야기가 아니라 게임 카드로 첫 화면을 채웁니다. 화면을 채운 키비주얼 위에 56px 국문 게임명이 놓이고, 그 아래 카드 그리드가 히어로 영역 위로 169px 올라와 겹치는 배치가 특징입니다. 크기를 전부 rem으로 잡고 루트 글자 크기를 화면 폭에 연동해 둬서 1440에서 1rem이 9.99px입니다 — 화면이 좁아지면 레이아웃이 통째로 비례해 줄어듭니다. 그림자를 두 겹(넓게 퍼지는 층 + 가까운 층)으로 겹쳐 쓰는 3단 체계도 이 라이브러리에서 드물어 참고할 만합니다.
https://www.com2us.comColor Palette
Primary
Label
Fill
Line
Background
Accent
Typography
Pretendard · 400 / 500 / 600 / 700display·heading·body·ui — 국영문 전부
Noto Sans JP · 400 / 500 / 600 / 700일본어 (한국어 화면에서는 렌더되지 않음)
Apple Color Emoji · 400이모지
Type Scale**크기가 전부 rem이고 루트 글자 크기가 뷰포트에 연동돼 있다** — 1440에서 1rem = 9
display56px · 600 · 1.2
다람쥐 헌 쳇바퀴
h232px · 500 · 1.2
다람쥐 헌 쳇바퀴
h324px · 600 · 1.2
다람쥐 헌 쳇바퀴
h420px · 700 · 1.2
다람쥐 헌 쳇바퀴
body18px · 400 · 1.6
다람쥐 헌 쳇바퀴
ui16px · 500 · 1.2
다람쥐 헌 쳇바퀴
body-sm15px · 400 · 1.6
다람쥐 헌 쳇바퀴
caption14px · 400 · 1.2
다람쥐 헌 쳇바퀴
label11px · 500 · 1.2
다람쥐 헌 쳇바퀴
micro10px · 400 · 1.2
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard — 10페이지 한글 6,189글리프의 90.1%(Pretendard 5,577 · SemiBold 412 · Medium 200). 선언 패밀리도 'Pretendard, sans-serif' 하나뿐이고 선언과 렌더가 일치한다. NotoSansJP 4웨이트가 함께 로드되지만 한국어 화면에서는 한 글자도 그리지 않는다 |
| hangulWeights | 400 5,549 · 600 412 · 500 200 · 700 21글리프. 사실상 400 단일이고 600은 히어로 게임명, 500은 nav, 700은 소제목에만 쓰인다 |
| body | 18px/400 lh1.60 자간 normal · 15px/400 lh1.60 |
| sub | 24px/600 lh1.20(카드 제목) · 20px/700 lh1.20(소제목) |
| label | 16px/500 lh1.20(nav·버튼) · 14px/400 lh1.20(캡션, 최다 27회) · 10px/400(태그 칩 65×19) |
| mixing | 한 서체가 국영문을 다 그린다 — 라틴 6,436 : 한글 6,189글리프로 거의 반반이다. 히어로 게임명이 대표적인 혼용 지점이다('컴투스프로야구V26' 56px/600에서 한글 7자와 라틴 3자를 Pretendard SemiBold가 한 줄로 그린다, rendered ×10). 게임 타이틀이 국문+숫자+영문 조합이라 혼용이 제목에서 상시로 일어난다 |
| hangulHeadings | 있음 — 홈 최대 제목이 국문 56px/600이다. 다만 그 제목이 회사 메시지가 아니라 게임 타이틀이고('컴투스프로야구V26'·'제우스: 오만의 신'·'컴투스프로야구2026'·'MLB 9이닝스 26'·'MLB 9이닝스 라이벌 26' 5개가 같은 자리에서 교체된다) 뒤에 영문·숫자가 붙는 혼용 문자열이다. 두 번째 단은 32px/500 순국문 '컴투스 게임 소식'이고 그 아래는 24·20px이다. 영문 전용 제목 단은 없다 |
| verdict | 국문 히어로 레퍼런스로 조건부 유효하다 — 56px/600 국문이 첫 화면 제목이고 자체 서체 없이 Pretendard 하나로 국영문을 다 버틴다는 점에서 국문+영문 혼용 타이틀(제품명·버전 표기)을 크게 세워야 할 때 근거가 된다. 다만 두 가지를 못 준다. ① 자간 규칙 0종 — 56px 제목에도 normal이라 대형 국문의 트래킹을 여기서 가져올 수 없다. ② 크기 계단이 얕다(56 → 32 → 24 → 20). 대신 이 사이트에서만 얻을 수 있는 것은 **뷰포트 연동 rem**이다 — 국문 조판을 화면 폭에 비례해 통째로 줄이는 방식이라, 국문 제목을 clamp가 아니라 루트 스케일로 반응시키는 사례로 본다 |
| rendered | Pretendard ×5577 · Pretendard SemiBold ×412 · Pretendard Medium ×200 |
영문 · Latin국문과 동일
| latinFont | Pretendard 6,436글리프(99.8%) · Apple Color Emoji 12글리프(0.2%) |
| latinWeights | 실측 페이스 Medium · SemiBold |
| share | 라틴 6,448글리프 / 한글 6,189글리프 — 지면의 51.0%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: display 56px/600 · h2 32px/500 · h3 24px/600 · h4 20px/700 · body 18px/400 · ui 16px/500 · body-sm 15px/400 · caption 14px/400 · label 11px/500 · micro 10px/400 |
| mixing | 국영문 혼용 노드 217개(전체 780개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 51.0%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.8%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Pretendard ×6218 · Pretendard Medium ×116 · Pretendard SemiBold ×102 · Apple Color Emoji ×12 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 24px | |
| Max width | 1312px | |
| Section gap | 섹션 padding은 뉴스 섹션 pT 120 하나뿐이고 나머지는 0이다 — 간격을 섹션 높이(771·936·604)와 카드 그리드의 겹침으로 만든다 | |
| Header | 80px fixed | |
| Grid Cards | 게임 카드 416×302 6장 3열 거터 32 (416×3+32×2=1312, 콘텐츠 폭과 정확히 일치) · 히어로 페이지네이션 256×50 4개 · 태그 칩 65×19 17개 6열 거터 4 | |
| Card Padding | 미확인 — 카드 외곽 치수만 실측됐다 | |
| Button Padding | padding 0, 높이는 라인 박스로 잡는다. '게임 더보기' bg #F0F2F8 · 18px/400 · r90 ×9 / '더보기' bg rgba(255,255,255,.32) 흰 글자 · 16px/500 · r90 ×2 / bg rgba(255,255,255,.5) 검은 글자 ×2 | |
| Root Font Size | 1440에서 9.9936px (뷰포트 연동 rem — 1rem ≈ 10px 기준) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| hairline | 3px | 6회 · 작은 버튼 |
| small | 4px | 6회 · 칩·썸네일 |
| standard | 8px | 100회 · 카드·패널 표준 — 사이트 최다 |
| — | 10px | 12회 · 관측만 |
| large | 20px | 9회 · 큰 패널 |
| circle | 50% | 34회 · 아이콘·인디케이터 |
| pill | 90px | 41회 · 버튼 알약 — '게임 더보기'·'더보기'·닫기 |
| pill | 990px | 9회 · 같은 알약을 990px로도 쓴다(값만 다르고 결과는 동일) |
| circle | 100% | 6회 · 원형 요소 |
Guidelines
Do
- 크기를 rem으로 잡고 루트를 뷰포트에 연동한다 — 1440에서 1rem 9.9936px이라 화면이 좁아지면 타이포·여백이 통째로 비례한다
- 그리드를 콘텐츠 폭에 정확히 떨어뜨린다 — 416×3 + 거터 32×2 = 1312
- 다음 섹션을 히어로 위로 끌어올려 겹친다(카드 그리드 y690 vs 히어로 하단 y859, 169px 겹침). 히어로 paddingBottom을 자기 높이(859)만큼 줘서 자리를 만든다
- 그림자를 2겹으로 쓴다 — 넓게 퍼지는 층(0 4 20 / 0 8 16)과 가까운 층(0 0 8)을 겹쳐 3단계를 만든다
- 면은 radius 8, 버튼은 알약(90px)으로 이분한다
- 브랜드 레드는 4px 상단 룰(15회)과 링크 hover(0.2s)에만 쓰고 지면에 칠하지 않는다
- 이미지 위 버튼은 반투명 흰 채움(alpha .32 / .5)으로 얹는다
Don't
- 국문 자간을 이 사이트에서 가져오지 않는다 — 자간이 붙은 단은 11px 대문자 라벨 하나(+5%)뿐이다
- #000000을 어두운 면 위에 두지 않는다 — #20252E 위 1.37:1 ×135, #1C2027 위 1.29:1 ×36, #171616 위 1.16:1 ×18로 사실상 안 보인다
- #95969F를 본문에 쓰지 않는다(2.94:1). #FF0000(4:1)·#F31D38(4.16:1)도 작은 글자에 쓰지 않는다
- 근검정을 네 단(#000000·#111111·#171616·#1C1C1E)으로 나누지 않는다 — 대비 차가 3:1 이내라 위계로 읽히지 않는다
- 행간 1.20을 본문까지 밀지 않는다 — 이 사이트는 nav·캡션·버튼까지 1.20이고 본문 18·15px만 1.60으로 풀었다
- 같은 알약을 90px과 990px 두 값으로 쓰지 않는다(41회 + 9회) — 결과가 같은 중복이다
- 히어로에 회사 메시지를 넣지 않는다 — 이 사이트의 첫 화면 제목은 회사가 아니라 게임 타이틀 5개다
