서울바이오시스 (Seoul Viosys)
흰 코퍼레이트 지면 위에 60px 국문 제목을 세우고, 색은 브랜드 그린 한 점만 켠다.
에이전시 이모션글로벌이 만든 광반도체 제조사의 코퍼레이트 사이트입니다. 흰 지면에 그림자를 하나도 쓰지 않고 1px 선으로만 면을 나누며, 색은 브랜드 그린 한 점만 버튼과 아웃라인에 켭니다. 60px 국문 제목이 실제로 있고 900px 히어로 + 176px 타이틀 밴드로 하위 페이지를 여는 골격을 세 페이지가 똑같이 반복해서, 국문 코퍼레이트의 페이지 진입 화면 참고로 유효합니다. 다만 자간을 글자 크기와 무관하게 −4%로 일괄 적용하고 있어, 본문과 캡션까지 그대로 옮기면 한글이 좁아집니다.
https://www.seoulviosys.comColor Palette
Primary
Label
Line
Fill
Background
Static
Accent
Typography
Noto Sans KR · 400 / 500 / 700한글 전담 — heading·body·ui 전부
Inter · 400 / 500 / 700라틴·숫자 전담
Arial · 400 / 700폴백 (Ant Design 폼)
Noto Sans SC · 500 / 700중문 로케일용 (한국어 화면 미사용)
Type Scaleraw(1920) 35종을 10단으로 줄인 것이고, 140/80/60/40/32px은 layout(1440)의 섹션 제목 실측과 일치한다(인재채용 140/400, 홈 80/400·60/500·40/400, ESG 40/500, 카드 32/500)
display140px · 400 · 1.06
Handgloves 123
stat80px · 400 · 1
Handgloves 123
h160px · 400 · 1.4
다람쥐 헌 쳇바퀴
h260px · 500 · 1.4
다람쥐 헌 쳇바퀴
h340px · 500 · 1.5
다람쥐 헌 쳇바퀴
h432px · 500 · 1.5
다람쥐 헌 쳇바퀴
sub24px · 500 · 1.5
다람쥐 헌 쳇바퀴
body16px · 400 · 1.5
다람쥐 헌 쳇바퀴
body-sm14px · 400 · 1.5
다람쥐 헌 쳇바퀴
caption12px · 400 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR (한글 13,174글리프 중 13,057개 = 99.1%). self-hosted woff2 3종. 나머지는 홈·/kr·문의 3페이지의 700 웨이트에서 Helvetica로 보고되는 104글리프(0.8%)와 Inter 13글리프(0.1%)뿐인데, 두 서체 모두 한글 글리프를 갖지 않으므로 CDP 보고의 잔재로 본다(미확인) |
| hangulWeights | 400 주력(11,455) · 500(1,393 — nav·라벨·카드 제목) · 700(207) · 900(2). 500은 Noto Sans KR 1,110 / Noto Sans KR Medium 283으로 갈려 보고되는데, 같은 16px/500 노드가 직접 측정에서는 Medium, 프로브에서는 기본명으로 잡히는 측정 한계다(미확인) |
| body | 16px/400 lh1.5 ls−0.64px(−4%) — 스타일 35종 중 최다 31회. 보조 본문 14px/400 lh1.5 ls−0.56px 24회 |
| sub | 24px/500 lh1.5 ls−0.96px (CTA 밴드 제목·이벤트 목록 행 제목) · 20px/400 lh1.5 ls−0.8px (본문 리드 7회) |
| label | 16px/500 nav·탭(예: '적용분야'·'제품'·'기술'·'지원' → Noto Sans KR Medium) · 12px/400 lh1.5 ls−0.48px 푸터 링크 36회 |
| mixing | 한 줄 안에서 섞는다. 선언이 `Inter, "Noto Sans KR", sans-serif`라 라틴·숫자·공백은 Inter가, 한글은 Noto Sans KR이 그린다 — 'WICOP을 보유한 글로벌 LED 전문기업' 40px/400 → 한글 Noto Sans KR×11 + 라틴·숫자 Inter×24, '미디어 센터' 16px/500 → 한글 Noto Sans KR×5 + 공백 Inter Medium×1. 한글만 떼어내 재측정하면 Inter 몫은 13글리프(0.1%)로 사라진다 — Inter는 국문 조판에 관여하지 않는 라틴 전담이다. 두 폰트의 x-height·자폭이 달라 혼용 줄에서 굵기가 갈리는 것이 이 사이트 조판의 실제 위험이다 |
| hangulHeadings | 있다. 60px/400 국문 h1이 176px 타이틀 밴드에 5페이지(인재채용·기업정보·지속가능경영·문의하기·이벤트), 60px/500 국문 리드가 900px 히어로에 3페이지(예: '끊임없이 새로운 미래에 도전하는', '효율적인 기술로 전기 에너지를 빛으로 만드는 기업입…', '우리는 빛을 통해 행복을 전하는 기업으로서'), 56px/500 국문 h3가 기업정보에 1개, 40px/400 국문 히어로 카피가 홈에, 40px/500 국문 소제목이 ESG 페이지에 5개 있다. 다만 140px·80px 최대 두 단은 영문·숫자(Inter)가 가져간다 |
| verdict | 국문 코퍼레이트 히어로·페이지 타이틀 조판 레퍼런스로 유효하다 — 60px 국문 제목이 실재하고, 900px 히어로 + 176px 타이틀 밴드라는 하위 페이지 진입 골격을 세 페이지가 동일하게 반복한다. 다만 자간 −4% 일괄 규칙은 그대로 이식하지 말 것: 60px 국문에서 −2.4px는 무난하지만 16px 본문 −0.64px, 12px 캡션 −0.48px는 Noto Sans KR에서 좁다. 최대 표시 두 단(140/80px)이 영문 전용이라 '국문 초대형 디스플레이' 레퍼런스로는 부적합하다 |
| rendered | Noto Sans KR ×12774 · Noto Sans KR Medium ×283 · Helvetica ×104 · Inter ×13 |
영문 · Latin영문 전용
| latinFont | Inter 9,395글리프(80.4%) · Noto Sans KR 2,076글리프(17.8%) · Arial 188글리프(1.6%) · Helvetica 24글리프(0.2%) |
| latinWeights | 실측 페이스 Medium |
| share | 라틴 11,685글리프 / 한글 13,174글리프 — 지면의 47.0%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Inter를 쓰는 단: display 140px/400 · stat 80px/400 · h2 60px/500 · h4 32px/500 · body 16px/400 · caption 12px/400 |
| mixing | 국영문 혼용 노드 329개(전체 2,056개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Inter 영문 전용(80.4% · 선언됨) |
| verdict | 영문 전용 서체가 있다 — Inter 라틴 80.4% / 한글 0.1%. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 140px) |
| sharedWithKorean | 국문과 같은 서체: Inter · Noto Sans KR · Helvetica |
| rendered | Inter ×7305 · Inter Medium ×2090 · Noto Sans KR Medium ×1125 · Noto Sans KR ×951 · Arial ×188 · Helvetica ×24 · Lucida Grande ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 4px | |
| Max width | 1360px | |
| Section gap | 섹션은 여백이 아니라 높이로 나뉜다 — 패딩은 대부분 0/0이고, 명시 패딩은 홈 카드그리드 0/120 | |
| Header | nullpx static (보고값) | |
| Grid Home | 3열 480px(480×3=1440 풀블리드, Applications 480×784 · 뉴스 480×562) · 4열 변형 720×394 2행 · 링크 4열 188×25 gap 8 | |
| Grid Product | UV LED 카드 359×549 7개 4열 gap 1 · ESG 정책집 200×201 4열 · 제품 스펙 행 1071×121 19행 | |
| Card Padding | 미확인 (추출기가 카드 내부 패딩을 잡지 않는다) | |
| Button Padding | 0px 28px (버튼 6종 공통) · 칩형만 10px 20px | |
| Input Padding | 12px 84px 12px 20px (검색 인풋, 우측 84px는 버튼 자리) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| standard | 4px | 179회 · 인풋·앵커·칩형 버튼 — 최다 |
| small | 6px | 3회 · 소형 div |
| container | 8px | 61회 · 탭 리스트 10 + 표 상단 '8px 8px 0 0' 22 + 카드 하단 '0 0 8px 8px' 19 + 셀 모서리 2 — 컨테이너의 위/아래 한쪽만 둥글린다 |
| icon | 9px | 6회 · 아이콘 i 태그 |
| — | 12px | 5회 · 관측만 |
| pill | 22px | 84회 · 버튼 표준 알약 — 높이의 절반(Submit·View more·Product Search) |
| pill-lg | 32px | 2회 · 국문 버튼 '목록으로'·'제출하기' |
| circle | 50% | 19회 · 원형 아이콘 span |
| blob | 56px | 9회 · 대형 이미지 컨테이너 |
| pill-full | 9999px | 5회 · '더보기' 버튼 |
Guidelines
Do
- 국문 제목은 60px/400(h1, 176px 밴드)과 60px/500(히어로 리드)의 두 형태로 세운다 — 이 사이트에는 국문 대형 제목이 실재하며 40px/400 홈 히어로 카피까지 세 단이 산다
- 자간을 쓰려면 −4%(−0.04em) 하나로 통일한다 — 140px −5.6 / 60px −2.4 / 16px −0.64가 전부 같은 비율이다
- 브랜드 그린 #30AE56은 버튼 배경·1px 아웃라인·rgba(48,174,86,.2) 밴드로만 켠다. 페이지당 그린 등장은 105회/8페이지 수준으로 아낀다
- 리듬은 여백이 아니라 높이로 만든다 — 히어로 900 · 타이틀 176 · CTA 218/460 · 카드그리드 849~1186px, 패딩은 0/0이 기본이고 120/120은 마지막 CTA에만
- 콘텐츠 폭은 1,360px, 미디어 목록·기사만 1,280px로 좁힌다
- 깊이는 1px rgb(225,225,225) 헤어라인으로만 만든다(240+83회). 라운드는 인풋 4px, 버튼 22px 두 값으로 끝낸다
- 모션은 0.2s ease를 기본으로 하고 최대 0.3s까지만 쓴다(0.2s 569회 · 0.3s 161회 · ease 681회)
Don't
- #30AE56을 흰 배경 위 텍스트·아이콘 색으로 쓰지 않는다 (2.87:1 ×84쌍, AA 미달). #999999도 흰 배경에선 2.85:1이라 다크 섹션 전용이다
- −4% 자간을 국문 소형 텍스트에 그대로 옮기지 않는다 — 16px 본문 −0.64px, 12px 캡션 −0.48px는 Noto Sans KR에서 좁게 붙는다(비교: Montage는 15px 이하에서 +1%로 부호를 뒤집는다)
- box-shadow로 면을 띄우지 않는다 (9페이지 그림자 0개). 그라디언트도 흰색 페이드 1개뿐이다
- #E5E7EB(팔레트 최다 3,021회)를 보더색으로 재현하지 않는다 — border-width 0px라 화면에 없는 Tailwind 기본값이다
- #007AFF(스와이퍼 화살표 4회)·#337AB7(레거시 링크 5회)을 브랜드 액센트로 승격하지 않는다
- 홈과 /kr/를 다른 페이지로 취급하지 않는다 — docHeight 7,859 · 섹션 8개 · 섹션 타입까지 완전히 같은 중복 URL이다
- Ant Design·Bootstrap·Tailwind 3중 스택을 그대로 흉내내지 않는다 — 뉴스 페이지에서만 Arial 라틴 188글리프가 섞이는 원인이다
