엘리스
파랑–보라 그라디언트 한 장 위에 56px weight 300 국문 한 줄, 그 아래로는 40px/500 흰 지면이 스물일곱 번.
엘리스는 파랑에서 보라로 넘어가는 그라디언트 히어로 한 장으로 열고, 그 아래는 전부 흰 지면으로 가는 사이트입니다. 히어로 문장만 56px 굵기 300으로 얇게 눕히고 나머지 대형 제목은 전부 굵기 500이라, 얇은 국문 대형 조판의 사례로 보기에는 표본이 아주 얇습니다(한글 44,917자 중 weight 300은 22자뿐). 대신 자간 규칙은 또렷합니다 — 48·40px은 −2.4%, 32~24px은 −1%, 20px은 −0.5px, 18px 이하는 0으로 비율 계단이 딱 떨어집니다. 자체 브랜드 서체를 제목에만 쓰고 본문은 Pretendard로 넘기는 이원 조판, 그리고 GPU 요금표처럼 정보 밀도가 높은 표를 흰 지면에서 다루는 방식이 참고할 지점입니다.
https://elice.io/koColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Elice DX Neolli · 300 / 500display·heading (제목 전용)
Pretendard Variable · 400 / 500 / 600 / 700 / 800body·ui·caption·link·표 (본문 전부)
Elice DigitalCoding ver.H · 400mono (자사 코딩 서체)
Menlo · 400code (실제 렌더)
Apple SD Gothic Neo · 400폴백 (한글 118글리프)
Type Scale자간이 비율 계단으로 내려간다 — 48·40·28
display56px · 300 · 1
다람쥐 헌 쳇바퀴
display-alt56px · 500 · 1
다람쥐 헌 쳇바퀴
h148px · 500 · 1.2
Handgloves 123
h240px · 500 · 1.2
Handgloves 123
h332px · 500 · 1.24
Handgloves 123
h424px · 500 · 1.3
Handgloves 123
body-lg20px · 600 · 1.2
다람쥐 헌 쳇바퀴
body18px · 500 · 1.5
다람쥐 헌 쳇바퀴
ui16px · 500 · 1.5
다람쥐 헌 쳇바퀴
label14px · 500 · 1.4
다람쥐 헌 쳇바퀴
caption12px · 500 · 1.7
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard Variable 42,700글리프(95.1%) · Elice DX Neolli OTF Medium 2,075(4.6%) · Apple SD Gothic Neo 118(0.3%) · Elice DX Neolli OTF Light 22(0.05%) · Menlo 2. 총 44,917글리프(CDP 10페이지, 1440) |
| hangulWeights | 500 27,310(60.8% — Pretendard 25,235 + Neolli Medium 2,075) · 400 10,534(23.5%) · 700 3,128 · 600 2,889 · 800 914 · 300 22(0.05%, Neolli Light 단독). weight 300은 홈 페이지에만 존재한다 |
| body | 18px w500 lh1.50 자간 0 (raw ×16) · 16px w500 lh1.50 (×16) · 14px w500 lh1.40 (×21). 아티클 본문만 18px w400 lh1.75 (×3) |
| sub | 20px w600 lh1.20 (×10) · 24px w500 lh1.30 자간 −1% (Elice DX Neolli, ×5) — 히어로 아래 리드와 카드 제목 |
| label | 14px w600 lh1.71 (GNB·배지, ×19) · 13px w600 lh1.69 (×11) · 12px w500 lh1.70 (×18). 12px w600에 자간 +1.8px(+15%)인 대문자 라벨이 한 건 있다 |
| mixing | 한 줄 안에서 국영문을 섞는다 — 'AI 풀스택, 모델은 엘리스에서' · 'AI 전용 IaaS 플랫폼 ECI (Elice Cloud Infrastructure)'처럼 제품명·약어가 라틴 그대로 들어간다. 혼용 노드 1,252개(전체 3,536개, 35%)이고 전부 프로브로 재측정했다. 서체는 층으로 나뉘지만(제목 Elice DX Neolli / 본문 Pretendard) 한 줄 안에서는 나누지 않는다. GPU 사양('8 x B200 180GB SXM')처럼 라틴만인 제목 단도 14건 있다 |
| hangulHeadings | 있다. 1440 layout 10페이지 기준 국문 56px/300 2건(홈 · home-9 — 같은 URL 두 경로라 실질 1건, 'AI 풀스택, 모델은 엘리스에서', y65 h480, 한글 11글리프) · 48px/500 8건 · 48px/600 1건 · 40px/500 27건(최다) · 32px/500 5건 · 28px/500 1건 · 24px/600 12건 · 24px/800 2건. 라틴 대형은 40px/500 숫자 2건과 32px/800 제품명 1건뿐이라 대형 조판은 국문이 전담한다 |
| verdict | 국문 대형 조판 레퍼런스로 유효하되 '얇은 국문'의 사례로는 쓸 수 없다 — weight 300은 홈 히어로 한 줄(한글 11글리프, 전체의 0.05%)이 전부이고 나머지 대형 제목 43건이 전부 weight 500이다. 라이브러리의 얇은 국문 디스플레이 세 곳과 비교하면 성격이 확실히 갈린다: 이터널저니는 60px weight 100(AritaBuri Thin)을 40섹션 중 25섹션에 반복해 규칙으로 삼았고, 한화는 54px weight 300 히어로에 30px weight 300 섹션 오프닝 12회를 더해 한글 3,765글리프의 85%가 300이며, 제네시스는 40~80px 구간을 Light 300~400으로 채운다. 엘리스는 얇은 굵기가 히어로 한 줄의 연출이지 사이트 규칙이 아니다. 대신 이식 가치가 큰 것은 두 가지다 — ① 자간 비율 계단(48·40 −2.4% / 32·28·24 −1% / 20 −0.5px / 18↓ 0)이 흔들리지 않고, 가장 큰 56px에서 자간을 0으로 되돌리는 규칙이 명확하다(한화가 크기에 비례해 −4%까지 조이는 것과 반대) ② 제목 굵기를 500 하나로 고정하고 위계를 크기와 자간으로만 만드는 방식이다. 다만 자사 서체 Elice DX Neolli는 공개 배포 여부를 확인하지 못했으니 값만 옮기고 서체는 대체해야 한다(미확인) |
| rendered | Pretendard Variable ×42700 · Elice DX Neolli OTF Medium ×2075 · Apple SD Gothic Neo ×118 · Elice DX Neolli OTF Light ×22 · Menlo ×2 |
영문 · Latin자사 라틴
| latinFont | Pretendard 33,054글리프(92.3%) · Menlo 1,355글리프(3.8%) · Elice DX Neolli 837글리프(2.3%) · Elice DigitalCoding ver.H 317글리프(0.9%) |
| latinWeights | 실측 페이스 Medium · Light |
| share | 라틴 35,808글리프 / 한글 44,917글리프 — 지면의 44.4%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: body-lg 20px/600 · body 18px/500 · ui 16px/500 · label 14px/500 · caption 12px/500 |
| mixing | 국영문 혼용 노드 1,252개(전체 3,536개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Elice DigitalCoding ver.H 자사 라틴(0.9%) |
| verdict | 영문 전용 서체가 있다 — Elice DigitalCoding ver.H 라틴 0.9% / 한글 0.0%. 다만 타입 스케일에 이 서체로 지정된 단이 없다 — 디스플레이 레퍼런스로 보기 어렵다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · Menlo · Elice DX Neolli · Apple SD Gothic Neo |
| rendered | Pretendard Variable ×33054 · Menlo ×1355 · Elice DX Neolli OTF Medium ×829 · Elice DigitalCoding ver.H ×317 · Apple SD Gothic Neo ×235 · Elice DX Neolli OTF Light ×8 · .SF NS ×8 · PingFang SC ×1 · Apple Color Emoji ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 8px | |
| Max width | 1280px | |
| Section gap | 섹션 padding이 대부분 0/0이고 높이 자체로 간격을 만든다 — 홈은 383px 블록 7연속(§4~§10), 이벤트는 388px 카드 행 4단. padding이 붙는 곳은 ax/helpy-vision 80/80, 아티클 24/24·16/0, 그리고 브랜드 히어로 200/200(사이트 최대)뿐이다 | |
| Header | 65px sticky | |
| Content Widths | 역할별로 갈린다 — 홈 1280 · 브랜드·이벤트 1232 · 제품·요금·모델 라이브러리 1200 · 아티클(블로그·케이스스터디) 700 · 문의 512 | |
| Grid Cards | 3열 384×171 거터 24 r12px(helpy-vision §3) · 3열 368×617 거터 24 r16px(모델 라인업) · 3열 360×132 거터 34(홈 보안) · 3열 304×102 거터 32(홈 지표) · 4열 290×243 거터 24 r24px bg rgb(250,250,250)(브랜드 로고) · 2열 576×521 거터 48(홈 언론, 다크 밴드) · 2열 395×298 거터 24 · 20열 280×225 거터 32(홈 성공사례 캐러셀) | |
| Table Row | 요금표 행 429×82 6열 거터 0 — GPU 사양 14행이 같은 규격으로 이어진다(cloud/pricing §2~§15). FAQ 행은 1200×57 또는 1200×69 r8px 8px 0 0 | |
| Button Padding | 8×16 (r8px, 14px/600 — 주 CTA) · 7×15 (보더 있는 보조 CTA) · 11×20 (r10px, 15px/700 — 히어로용 큰 버튼) · 6px (r6px, 13px/700 — 토글) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 4px | 295회 · 칩·작은 배지·태그 (MUI 기본 계열) |
| toggle | 6px | 94회 · 토글·세그먼트 버튼(13px/700 pad 6px) |
| standard | 8px | 329회 · 표준 — 버튼·인풋·FAQ 행·카드. 부분 라운드(8px 8px 0 0 · 0 0 8px 8px 등) 74건 포함 |
| medium | 12px | 29회 · 설명 카드 384×171 |
| large | 16px | 90회 · 모델 카드 368×617, 이미지 블록 |
| xlarge | 24px | 69회 · 브랜드 로고 카드 290×243 (bg rgb(250,250,250) + 1px rgb(245,245,245)) |
| xxlarge | 32px | 14회 · 큰 버튼·컨테이너 |
| circle | 50% / 100% | 40회 · 언어 선택·아이콘 버튼 |
| pill | 999px / 500px | 13회 · 상태 칩·태그 |
Guidelines
Do
- 자간을 비율 계단으로 내린다 — 48·40px −2.4% · 32·28·24px −1% · 20px −0.5px · 18px 이하 0
- 제목 굵기를 500 하나로 통일하고 위계는 크기와 자간으로만 만든다(48·40·32·28·24px 전부 500)
- 제목은 브랜드 서체, 본문·표·UI는 Pretendard로 층을 나눈다 — 한 줄 안에서 섞지 않는다
- 색은 히어로 한 장에만 쓰고 폴드 아래는 흰 지면으로 돌린다. 다크 밴드는 10페이지에 세 번
- 제품 페이지마다 히어로 색면을 바꾸고 같은 색으로 마감 CTA를 닫는다(helpy-vision rgb(184,83,234) 두 번)
- 표는 배경 대신 잉크색 1px 부분 보더로 격자를 만든다(0 0 1px solid rgb(25,31,40) ×243)
- 아티클 콘텐츠 폭은 700, 문의 폼은 512로 좁혀 읽기 폭을 따로 잡는다
Don't
- 이 사이트를 '얇은 국문 대형 조판' 레퍼런스로 쓰지 않는다 — weight 300 한글이 44,917자 중 22자(0.05%)이고 전부 홈 히어로 한 줄이다
- #A8AAAD를 흰 지면 본문에 쓰지 않는다 (2.33:1, AA 크게 미달인데 136회 쓰인다)
- 브랜드 보라 #7353EA를 CTA 배경으로 전제하지 않는다 — 실제 버튼은 #212121이고 보라는 그라디언트·링크·강조 텍스트에만 있다
- 라운드 값을 그대로 옮기지 않는다 — 4px 295 · 6px 94는 Material UI 기본값이 남은 것으로 보인다
- 코드 블록에 GitLab Mono·자사 코딩 서체를 선언만 하고 두지 않는다 — 실제 코드 라틴 1,355글리프는 OS 서체 Menlo가 그린다
- 56px 히어로에 음수 자간을 붙이지 않는다 — 이 사이트의 규칙은 정반대다(56px 0, 48·40px −2.4%)
- 스타일이 안 붙은 링크를 남기지 않는다 — #0000EE(브라우저 기본색)가 8페이지에서 80회 잡힌다
