브랜드 · BI

이 문서가 규칙 정본입니다

BI 강제 규칙(금지·작성 규칙)의 단일 출처는 이 페이지입니다 — 사람용 설명·라이브 데모와 AI가 따르는 규칙이 모두 여기 있습니다. 규칙을 바꿀 땐 이 문서만 고치면 됩니다. (코딩 에이전트는 자동 로드되는 얇은 규칙 포인터를 통해 이 페이지로 안내되며, 그 포인터에는 규칙 내용을 복제하지 않습니다.)

규칙 (강제) · 코딩 에이전트용 — 사람은 접힌 채로 두어도 됩니다

이 규칙의 정본은 이 접이 섹션입니다(변경 시 여기만 수정). 아래 나머지 섹션은 배경·근거·라이브 데모입니다.

체계 — 마스터와 패밀리

BI는 마스터(hereby)와 패밀리(hereby Medical · hereby Sign · hereby Works) 두 체계다. 패밀리는 심볼이 다르다 — 마스터 심볼을 쓰고 서비스명만 덧붙이는 것이 아니다.
마스터는 hereby 하나뿐이다. 마스터에 서비스명을 붙이지 않는다(hereby Medical을 마스터 심볼로 그리는 락업은 없다). 국문 마스터도 없다 — hereby는 영문 고유명사이므로 영문 하나로 고정이다.
서비스명과 영문/국문 축은 전부 패밀리의 것이다. 마스터에 그 변형을 적용하지 않는다.
어느 쪽을 쓸지는 그 화면의 주체가 누구인가로 정한다. 패밀리 사이트가 주체(헤더·파비콘·앱 아이콘·로그인) → 패밀리 락업. hereby가 모든 서비스를 거느리는 자리(통합 랜딩·계약서·제품군 소개) → 마스터 락업(hereby). 확신이 없으면 주체를 먼저 답하고 고른다.
패밀리 심볼을 새로 만들지 않는다. 등록된 것은 Medical·Sign·Works 셋이다. 새 패밀리가 생기면 심볼을 디자인에서 받아 이 페이지에 등록한 뒤 쓴다 — 마스터 심볼에 서비스명만 붙여 임시로 만들지 않는다.
패밀리는 서비스명이 필수다. 패밀리 심볼 + hereby만 쓰는 락업은 없다 — 어느 서비스인지 사라져 마스터를 대체하는 다른 마크처럼 읽힌다. 단 심볼만 쓰는 경우(파비콘·앱 아이콘·16px 미만)는 예외다(워드마크 자체가 없으므로).

조판

워드마크 hereby와 영문 서비스명(Medical · Sign · Works)은 Geist SemiBold 600, 국문 서비스명(메디컬 · 사인 · 웍스)은 Pretendard Bold 700, 자간 0.
700으로 조판 금지. Geist는 600만 탑재돼 있어 700을 지정하면 브라우저가 synthetic bold를 만들어 다른 워드마크가 됩니다.
폰트는 --font-brand 토큰(Tailwind font-brand)으로만 지정. font-family: Geist 직접 지정 금지.
--font-brand를 본문 텍스트에 사용 금지 — 워드마크 전용입니다. 본문은 --font-app.
Figma SVG export를 그대로 붙여넣지 말 것: export의 font-family="Pretendard"는 이 저장소의 등록명 Pretendard Variable 과 달라 국문이 폴백됩니다.

폰트 로드 실패 = path로 표시 (가장 중요)

기본값은 항상 path이고, 라이브 텍스트는 폰트가 도착했을 때만 올라가는 향상입니다. document.fonts.load() → check()가 통과했을 때만 텍스트로 교체하고, 실패하면 path가 남습니다.
font-display는 block (tokens.css의 Geist @font-face에 이미 선언). swap 금지 — 폴백 서체 워드마크가 먼저 보였다 바뀌는 것은 느린 렌더가 아니라 브랜드 사고입니다.
라이브 텍스트에는 translate="no" 필수 (+ lang). 워드마크는 영문 고유명사이므로 브라우저 번역·접속 지역에 따라 바뀌면 안 됩니다. 한글로 옮기지 않습니다.
translate="no"는 국문 서비스명에도 붙입니다. 「메디컬」·「사인」·「웍스」도 브랜드 워드라 자동번역 대상이 아닙니다 — 번역되면 Pretendard Bold 700 자리에 폴백 서체가 들어와 락업이 깨집니다. 언어별 정본은 우리가 고르는 것이지 브라우저가 바꾸는 것이 아닙니다.
밖으로 나가는 자산은 언제나 path. 다운로드·이메일·외부 배포·디자인 툴 전달본에 <text>를 넣지 않습니다(받는 쪽 폰트 환경에 따라 서체가 바뀜).
내보내는 파일명은 내용이 달라지는 축을 전부 담습니다 — 체계 · 언어 · 심볼/워드마크 유무 · 톤 · 배경(on-white / on-neutral / on-dark). 배경이 빠지면 워드마크 색(검정↔흰색)이 다른 파일이 같은 이름으로 덮어써집니다. 반대로 라이브 텍스트/path 모드는 파일명에 넣지 않습니다 — 내보내기는 언제나 path라 모드를 바꿔도 파일이 바뀌지 않고, 이름에 livetext를 넣으면 path를 담은 파일이 스스로를 라이브 텍스트라 말하게 됩니다.

색

워드마크 = --color-neutral-900. 서비스명은 primary --color-orange-500 / dark --color-neutral-900 / light 흰색 세 톤 모두 정본이고, 세 값 모두 기존 토큰과 일치하므로 새 평면 색을 만들지 않습니다.
기본값은 dark입니다(패밀리는 심볼이 이미 그라디언트로 색을 지니므로 워드까지 오렌지면 색이 겹칩니다). 서비스명은 패밀리에만 있으므로 이 톤도 패밀리 전용입니다.
배경 × 톤 금지 조합: 밝은 배경(화이트·뉴트럴)에 light ❌, 어두운 배경에 dark ❌. primary는 모든 배경에서 안전.
그라디언트 stop-color는 hex 하드코딩을 유지 — 토큰 규칙의 예외입니다. BI 자산은 CSS 변수가 없는 곳(이메일 HTML·단독 SVG·외부 배포)에서도 열려야 하는데 var()면 심볼이 검게 렌더됩니다.
그라디언트는 두 벌이고 서로 다릅니다. 마스터 #F8884F → #FF4141 → #F6BC3D(값이 토큰과 동일), 패밀리 #FE4D43 → #FF7732 → #FFAF00(대응 토큰 없음 — 패밀리 전용). 섞어 쓰지 마세요: 패밀리 심볼에 마스터 그라디언트를 물리면 다른 마크가 됩니다.
SVG 그라디언트 id는 문서 전역입니다. 한 페이지·한 파일에 BI 자산을 둘 이상 인라인하면 id가 겹치고, 브라우저는 먼저 나온 정의를 씁니다 — 뒤엣것이 앞엣것의 그라디언트로 칠해집니다(실제로 났던 버그). 자산마다 다른 id를 쓰세요. 데모가 내보내는 파일은 이미 체계별로 분리돼 있습니다(bi-grad-master / -medical / -sign).

형태

락업 비율 고정. 마스터 471×130. 패밀리 hereby Medical 865×130 · hereby 메디컬 746×130 · hereby Sign 702×130 · hereby 사인 659×130. 심볼과 워드마크의 간격·크기 비를 바꾸지 않습니다.
최소 높이 16px. 그보다 작으면 워드마크를 떼고 심볼만 씁니다(패밀리 화면이면 패밀리 심볼만).
파비콘·앱 아이콘은 데모에서 「워드마크」를 꺼서 정사각 심볼을 받습니다(패밀리 hereby-bi-<체계>-symbol-<fill|outline>.svg · 마스터 hereby-bi-master-symbol.svg). 락업을 받아 디자인 툴에서 잘라 쓰지 않습니다 — 자르는 순간 심볼의 크기·여백이 정본에서 벗어납니다. 심볼만 쓸 때는 최소 16px 규칙이 적용되지 않습니다(그 하한을 벗어나는 방법이 바로 심볼 단독이므로).
심볼을 그리는 방식은 둘이고 기본형은 fill 입니다 — fill(그라디언트 면 + 안쪽 흰색) · outline(그라디언트 없이 워드마크 색을 따르는 단색, 안쪽은 채우지 않음). 심볼만 쓰든 락업으로 쓰든 기본은 fill입니다(어두운 배경 락업에서 십자·사람·펜이 검게 렌더되던 것이 이 규칙을 못 박은 계기입니다).
outline은 브랜드 컬러를 쓰지 않습니다. 오렌지 단색도, 그라디언트도 아닙니다 — 워드마크와 같은 색(밝은 배경 #1B1B1B · 어두운 배경 흰색) 하나입니다. 컬러가 필요하면 그건 fill입니다.
outline은 컬러 없는 워드마크와만 조합합니다 — 서비스명 톤이 dark·light일 때만이고 primary(오렌지)와는 금지입니다. 심볼이 워드마크 색을 따라가므로, 워드에 컬러가 있으면 심볼까지 그 컬러가 되어 정의가 깨집니다.
outline을 자리별로 규정하지 않습니다. 「어느 화면은 outline」 같은 규칙은 없습니다 — 화면과 자산의 기본은 언제나 fill이고, outline은 필요할 때 데모에서 받아 쓰는 조합형입니다.
fill의 안쪽 색은 흰색(#FFFFFF) 하나입니다. 배경색에 맞춰 칠하는 「손으로 흉내 낸 outline」, 안쪽에 넣는 그라디언트 모두 금지입니다 — 색은 컨테이너가 지닙니다.
fill본을 새로 그리거나 디자인에 재요청하지 않습니다. 컨테이너 + 컨테이너 ⊕ outline 원본(fill-rule="evenodd" 대칭차 = 정확히 안쪽 도형) 두 줄로 등록된 정본에서 파생됩니다. clipPath·mask를 쓰지 않습니다(자산은 자기완결적이어야 합니다).
Works의 상단 노치는 fill본에서도 비어 있습니다 — 노치는 안쪽 도형이 아니라 컨테이너 실루엣의 일부입니다. 몸통(사람)만 흰색이 됩니다.
마스터엔 이 축이 없습니다. 마스터 심볼은 스우시 하나라 컨테이너도 안쪽 도형도 없습니다 — 「마스터 fill본」을 만들지 마세요.
웹 파비콘 자산은 packages/static/brand/favicon-hereby-<패밀리>.svg 하나뿐입니다(앱마다 복사하지 않습니다). 앱은 <link rel="icon" type="image/svg+xml" href="static/brand/…">로 상대경로로 겁니다 — CDN(STATIC_URL)이 있으면 플러그인이 리라이트하고, 없으면 앱 base(/앱이름/) 기준으로 해소됩니다. 절대경로(/static/…)는 후자에서 404 납니다.
파비콘 파일을 바꿨으면 href의 ?v=N을 올립니다. 브라우저는 파비콘을 URL 기준으로 따로 캐시하고 강력 새로고침으로도 잘 안 지워집니다 — 파일만 바꾸면 사용자 탭에는 예전 아이콘이 그대로 남습니다. 10개 index.html을 함께 올리세요(값이 갈리면 앱마다 다른 시점의 아이콘이 남습니다). CDN 때문이 아닙니다 — 배포 워크플로가 매 배포마다 CloudFront를 --paths "/*"로 무효화하므로 서버 쪽은 이미 최신입니다(.github/workflows/dev-frontend.yaml의 invalidate()). 이 쿼리는 오직 브라우저 캐시용이니, 무효화 단계를 보고 「필요 없겠네」 하며 지우지 마세요.
문서 사이트(docs)의 파비콘은 마스터 심볼입니다. 이 사이트의 주체는 특정 패밀리가 아니라 hereby 제품군 전체이므로 십자·사람·펜을 쓰지 않습니다. 자산은 예외적으로 docs/public/favicon.svg에 둡니다 — 문서 사이트는 @hereby/static을 소비하지 않아 /static 미들웨어가 없고, VitePress가 서빙하는 public/이 유일한 경로이기 때문입니다. href에는 base를 붙입니다(버전 문서는 /1.2.3/ 하위 경로로 서빙되므로 루트 절대경로면 404).
회전·기울임·그림자·외곽선 추가 금지. 그라디언트를 단색으로 바꾸지 않습니다. 락업을 이미지로 캡처해 쓰지 않습니다(SVG 정본 사용).
심볼 정본은 packages/components/src/icons.ts — 마스터 logo-hereby, 패밀리 logo-hereby-medical · logo-hereby-sign · logo-hereby-works.
Figma export의 id를 그대로 쓰지 않는다. export는 paint0_linear_… · clip0_… 같은 일련번호 id를 답니다. id는 문서 전역이라 다른 BI 자산과 충돌하므로, 등록할 때 lnb-hereby-<서비스>-grad 규칙으로 바꿉니다. 클립 사각형이 viewBox와 같은 크기면 아무것도 자르지 않으므로 clipPath째 지웁니다.

표기 (락업이 아닌 일반 텍스트)

여기부터는 자산이 아니라 글자의 규칙입니다. 로그인 제목·푸터·버전 표기처럼 락업을 쓰지 않고 브랜드명을 텍스트로 적는 자리에 적용합니다. 위 조판 규칙(Geist 600 등)은 락업 전용이라 여기엔 해당하지 않습니다.

hereby는 언제나 소문자입니다. Hereby · HEREBY 금지. CSS text-transform: uppercase가 걸린 자리에 브랜드명을 넣지 마세요 — 선언은 소문자여도 렌더가 대문자면 위반입니다(실제로 LNB에서 났던 사고).
마스터에 서비스명을 붙이지 않습니다. Hereby Admin · Hereby Inventory · Hereby General Affairs · Hereby Platform 같은 조합은 없습니다. 등록된 서비스명은 Medical · Sign · Works 셋뿐이고, 그건 패밀리의 것입니다.
다만 「마스터 + 일반명사」는 됩니다. 금지되는 건 서비스명(제품 브랜드)을 붙이는 것이지, 뒤에 오는 모든 말이 금지는 아닙니다. hereby System Admin(내부 도구) · hereby Design System · hereby Brand Primary처럼 일반명사로 대상을 가리키는 표현은 정본입니다. 구분 기준: 뒤의 말이 등록된 패밀리 서비스명이면 금지, 그냥 그 대상을 설명하는 보통명사면 허용. 구분자(·)는 쓰지 않고 띄어쓰기로 잇습니다.

어느 쪽을 적을지는 락업과 같은 기준 — 그 화면의 주체가 누구인가 — 로 정합니다:

자리	적는 것	예
제품 화면 (로그인·로딩·앱 내부)	`hereby Medical`	로그인 부제, 로딩 화면
법인·플랫폼을 가리키는 자리	`hereby` (마스터)	`© 2026 hereby`, 계약서, 공문
전 서비스를 아우르는 내부 도구	`hereby` (마스터)	`hereby System Admin`

저작권 표기는 마스터입니다. 저작권자는 개별 서비스가 아니라 플랫폼이므로 © 2026 hereby Medical이 아니라 © 2026 hereby 입니다. 「© 문구는 대문자를 써도 된다」는 예외는 없습니다(2026-07-20에 그런 통념을 폐기하고 30곳을 정정했습니다).
공용 템플릿에서는 브랜드를 하드코딩하지 않습니다 — 글자든 자산이든. 앱이 createAlpinePlugin으로 넘긴 값(brand 표기 · brandFamily 자산 키 · linkedBrandFamily 상위 서비스)을 읽어 락업도 앱마다 갈립니다. packages/components/html/의 템플릿은 여러 앱이 같은 파일을 인라인하므로, 문자열을 박으면 한 앱을 고치는 순간 나머지가 깨집니다. 앱이 createAlpinePlugin({ brand })로 넘긴 값을 $store.hereby.brand로 읽으세요(기본값 hereby Medical, 직원 앱은 hereby Works).
앱 이름은 브랜드가 아닙니다. 로그인 큰 제목처럼 어느 앱인지 알려야 하는 자리에는 앱 이름(nav.admin → 「관리자」)을 쓰고, 브랜드는 부제로 내립니다.
다만 앱 이름 자체가 패밀리 브랜드인 앱이 있습니다. 직원 앱의 제품명은 hereby Works(국문 hereby 웍스)라 「앱 이름」과 「브랜드」가 같은 말입니다. 이건 위 규칙의 예외가 아니라 제목에 앱 이름을 적은 결과가 브랜드와 일치하는 경우입니다 — 이때는 그 제목을 브랜드 조판(워드마크 서체 + translate="no")으로 적습니다. 「브랜드를 부제로 내린다」는 admin(앱 이름 「관리자」 ≠ 브랜드 hereby Medical)처럼 둘이 다른 앱의 이야기입니다. 화면에 적을 제품명이 nav.* 의 일반 서술어(「직원 앱」)와 다르면, 서술어가 아니라 제품명을 적습니다.
로그인 상단은 기본이 텍스트, BI 심볼은 앱이 켜서 씁니다(opt-in). 로그인은 「어느 앱에 들어가는가」, 가입은 「어느 서비스에 계정을 만드는가」가 먼저이므로 가입만 락업인 비대칭 자체는 그대로 유지합니다. 다만 제품 판단으로 로그인에도 BI를 세울 수 있도록 열어 둡니다 — loginForm({ showBrandLogo: true })로 그 앱만 켭니다(기본값 false, 안 켠 앱은 종전과 100% 동일한 텍스트 제목). 켤 때 지킬 것:
- 락업이 아니라 심볼만 놓습니다. 락업의 워드마크를 쓰면 바로 아래 부제의 서비스명과 같은 말이 두 번 적힙니다.
- 심볼은 그 앱의 패밀리를 따라갑니다($store.hereby.brandFamily) — 공용 템플릿이므로 자산 키를 문자열로 박지 마세요.
- 켠 화면의 3단 구성은 심볼 → 제목 → 부제입니다. 제목은 위 규칙대로 앱 이름이고, 그 이름이 패밀리 브랜드인 앱(직원 앱 hereby 웍스)에서는 브랜드 조판으로 적습니다.
- 가입의 락업을 로그인으로 옮기는 것은 여전히 금지입니다. 로그인에 놓을 수 있는 건 심볼뿐입니다.
(2026-07-20 「로그인은 텍스트 고정」 결정을 2026-07-24에 opt-in 으로 완화. 직원 앱이 첫 적용 사례. 바뀐 건 심볼 노출 여부뿐이고 「제목 = 앱 이름」 규칙은 그대로입니다.)

Hereby의 BI는 심볼(그라디언트 마크)과 워드마크(hereby)로 이루어지고, 둘을 나란히 놓은 것이 락업입니다. 여기에 마스터와 패밀리 두 체계가 있습니다.

마스터와 패밀리

패밀리는 심볼이 다릅니다. 이것이 핵심입니다 — 마스터 심볼에 서비스명만 덧붙인 것이 아니라, 서비스마다 전용 심볼이 있습니다.

체계	심볼	워드	영문/국문
마스터	마스터 심볼 (스우시)	`hereby` — 이것뿐	없음 (영문 고정)
패밀리	서비스 전용 심볼	`hereby` + 서비스명 (필수)	`Medical`/`메디컬` · `Sign`/`사인` · `Works`/`웍스`

등록된 패밀리는 셋입니다 — hereby Medical(병원 운영) · hereby Sign(전자계약) · hereby Works(직원 앱, Medical과 연동).

마스터는 `hereby` 하나뿐입니다

마스터에 서비스명을 붙이지 않습니다. 마스터 심볼로 hereby Medical을 그리는 락업은 없습니다 — 서비스명은 패밀리의 것입니다.

국문 마스터도 없습니다. hereby는 영문 고유명사라 영문 하나로 고정입니다(한글로 옮기지 않습니다 — 번역 금지). 따라서 영문/국문 축 자체가 패밀리에만 있습니다.

무엇을 쓸지는 "그 화면의 주체"가 정합니다

그 자리의 주체	쓰는 것	예
패밀리 사이트 자신	패밀리 락업 (전용 심볼 + 서비스명)	그 서비스의 헤더 · 파비콘 · 앱 아이콘 · 로그인 화면
hereby (제품군 전체)	마스터 락업 (`hereby`)	통합 랜딩 · 계약서 · 공문 · 제품군 소개

Medical 사이트에 들어온 사용자에게 그 화면의 주인은 Medical입니다 — 전용 심볼에 서비스명을 붙입니다. 반대로 hereby가 여러 서비스를 거느리는 자리에서는 주인이 hereby이므로, 특정 서비스명을 붙이지 않은 hereby 그대로를 씁니다.

새 패밀리 심볼을 임의로 만들지 마세요

등록된 패밀리는 Medical · Sign · Works 셋뿐입니다. 새 서비스가 생겼다고 마스터 심볼에 서비스명을 붙여 "임시 패밀리 락업"을 만들지 않습니다 — 그런 락업은 이 BI에 존재하지 않습니다. 전용 심볼을 디자인에서 받아 이 페이지에 등록한 뒤 쓰세요.

직접 확인하기

두 체계는 규칙이 다르므로 영역을 나눠 둡니다. 한 컨트롤에 섞어 두면 어느 규칙이 어느 체계의 것인지 흐려집니다.

두 데모 모두 라이브 텍스트 ↔ path를 번갈아 눌러도 형태는 같습니다. 폰트 로드 실패를 켜면 규격대로 path로 대체되고, path 폴백 적용을 끄면 규칙이 없을 때 무슨 일이 벌어지는지 보입니다.

마스터

마스터는 hereby 하나뿐입니다 — 그래서 서비스명 선택기도, 영문/국문 선택기도 없습니다. 바꿀 수 있는 것은 심볼/워드마크 유무와 배경뿐입니다.

워드마크

배경

심볼 워드마크 보호 영역 폰트 로드 실패 path 폴백 적용 높이 48px

브랜드 폰트를 확인하는 동안 path 버전을 표시합니다.

hereby-bi-master-on-white.svg 내보내기는 항상 path입니다 — 배포된 자산의 폰트가 바뀔 여지를 남기지 않습니다. 색도 hex로 실체화되어 어디서 열어도 동일합니다.

패밀리

패밀리는 서비스명이 필수입니다 — 그래서 「없음」이 아예 없습니다. Medical ↔ Sign을 바꿔 보세요, 심볼과 그라디언트가 함께 바뀝니다. 워드는 검정(dark)이 기본입니다.

패밀리

서비스명

워드마크

서비스명 색

심볼 내부

배경

심볼 워드마크 보호 영역 폰트 로드 실패 path 폴백 적용 높이 48px

브랜드 폰트를 확인하는 동안 path 버전을 표시합니다.

hereby-bi-medical-en-dark-on-white-fill.svg 내보내기는 항상 path입니다 — 배포된 자산의 폰트가 바뀔 여지를 남기지 않습니다. 색도 hex로 실체화되어 어디서 열어도 동일합니다.

패밀리 심볼을 서비스명 없이 쓰지 마세요

전용 심볼 + hereby만 남기면 어느 서비스인지가 사라집니다. 그 상태는 "Medical 락업에서 이름만 뺀 것"이 아니라, 마스터를 대체하는 다른 마크처럼 읽힙니다 — 보는 사람은 hereby의 심볼이 바뀐 줄 압니다.

✅ hereby Medical · hereby 메디컬 · hereby Sign · hereby 사인
❌ 십자 심볼 + hereby (서비스명 없음)
예외는 심볼만 쓰는 경우입니다(파비콘·앱 아이콘·16px 미만) — 워드마크 자체가 없으므로 이름이 빠진 것이 아닙니다.

파비콘·앱 아이콘 — 「워드마크」를 끄면 심볼만 받습니다

심볼만 쓰는 구성은 데모에서 바로 내려받습니다. 락업을 받아 디자인 툴에서 잘라내지 마세요 — 자르는 순간 심볼의 크기·여백이 정본에서 벗어납니다.

데모의 「워드마크」 체크를 끄면 화면과 내보내기가 정사각 심볼(viewBox 2 18.5 93 93)로 바뀝니다. 파일명은 패밀리 hereby-bi-<체계>-symbol-<fill|outline>.svg, 축이 없는 마스터는 hereby-bi-master-symbol.svg입니다.
패밀리 화면이면 그 패밀리의 심볼을 받으세요(medical / sign). Medical 앱 아이콘에 마스터 스우시를 넣지 않습니다.
심볼은 fill이 기본형입니다. 파비콘·앱 아이콘은 브랜드 컬러를 지닌 정본을 씁니다.
심볼만 쓸 때는 최소 16px 규칙이 적용되지 않습니다 — 그 하한을 벗어나는 방법이 바로 심볼 단독이기 때문입니다(파비콘은 16px 이하도 정상).
심볼과 워드마크를 동시에 끌 수는 없습니다(남는 것이 없으므로 체크박스가 잠깁니다).

심볼을 그리는 두 방식 — `fill`과 `outline`

패밀리 심볼은 컨테이너(라운드 사각형)에 안쪽 도형(십자 · 사람 · 펜)이 들어 있는 구조입니다. 그리는 방식이 둘입니다.

방식	컨테이너	안쪽 도형	색
`fill` — 기본형	그라디언트 면	흰색으로 채움	브랜드 컬러 (패밀리 3-stop)
`outline` — 조합형	단색 면	채우지 않음 (배경이 비침)	그라디언트 없음 — 워드마크 색을 그대로 따름

outline은 브랜드 컬러를 쓰지 않습니다. 심볼이 워드마크와 한 색으로 묶여, 락업 전체가 단색 한 덩어리로 읽힙니다 — 밝은 배경이면 #1B1B1B, 어두운 배경이면 흰색입니다(워드마크가 뒤집히는 규칙을 그대로 따라갑니다).

outline은 선(stroke)이 아닙니다

컨테이너를 선으로 그린 형태가 아닙니다 — 면은 그대로이고 색이 단색으로 바뀌며 안쪽을 채우지 않는 path 구성입니다. 선으로 된 BI 심볼은 존재하지 않습니다.

기본형은 `fill`입니다

심볼은 어디에 놓이든 같은 마크여야 합니다. 브랜드 컬러를 지닌 fill이 정본이고, 심볼만 쓰든 락업으로 쓰든 같습니다.

자리별로 규정하지 않습니다. 「어느 화면은 outline」 같은 규칙은 두지 않았습니다 — 화면과 자산의 기본은 언제나 fill이고, outline은 필요할 때 데모에서 받아 쓰는 조합형입니다.

다크 배경 락업이 fill을 기본형으로 못 박은 이유입니다

hereby Medical 락업을 어두운 배경에 놓으면 워드는 흰색으로 뒤집히는데 심볼의 십자만 검게 남았습니다 — 워드마크 톤 규칙(light)은 있어도 심볼 안쪽에는 규칙이 없었기 때문입니다. 안쪽을 채우면서 이 자리가 함께 해결됩니다. (다크 배경에서 단색으로 가고 싶다면 그건 outline이고, 그때는 심볼 전체가 흰색이 됩니다.)

`outline`은 컬러 없는 워드마크와만 조합합니다

조합	가능?
`fill` + 서비스명 `primary` · `dark` · `light`	✅ 셋 다
`outline` + 서비스명 `dark` · `light`	✅
`outline` + 서비스명 `primary`(오렌지)	❌

이유는 outline의 정의 그 자체입니다 — 심볼이 워드마크 색을 따라가므로, 워드에 컬러가 있으면 심볼까지 그 컬러가 되어 「그라디언트 없는 단색 마크」라는 정의가 깨집니다. 데모에서는 outline을 고르면 primary 버튼이 잠기고, primary 상태에서 outline을 고르면 그 배경의 중립 톤으로 물러납니다 — 배경 × 톤 금지 조합과 같은 처리입니다.

outline 심볼에 브랜드 컬러를 칠하지 마세요

오렌지 단색도, 그라디언트도 아닙니다. 컬러가 필요하면 그건 fill입니다.

안쪽을 배경색으로 칠하지 마세요

fill의 안쪽 색은 흰색 하나입니다. 「다크 배경이니 안쪽도 어둡게」는 배경이 한 톤만 달라져도 어긋납니다 — 배경에 맞춰 심볼을 바꾸고 싶다면 그건 outline이고, 그때는 안쪽이 아니라 심볼 전체 색이 바뀝니다. 안쪽에 그라디언트를 넣는 것도 금지입니다 — 색은 컨테이너가 지니고 안쪽은 흰색입니다.

`fill`본은 새로 그리지 않습니다 — 등록된 정본에서 파생됩니다

fill본을 디자인에 재요청할 필요가 없습니다. 필요한 것은 컨테이너 실루엣 하나뿐이고, 흰 도형은 계산으로 나옵니다.

html

<!-- fill본 = 컨테이너(그라디언트) + (컨테이너 ⊕ outline 원본)을 흰색으로 -->
<path d="{컨테이너}" fill="url(#bi-grad-medical)" />
<path d="{컨테이너} {outline 원본}" fill-rule="evenodd" fill="#FFFFFF" />

fill-rule="evenodd"로 두 도형을 겹치면 겹치는 부분이 빠지고 구멍만 남습니다(대칭차). 그 구멍 집합이 정확히 안쪽 도형이므로, 좌표를 따로 뽑아 둘 필요가 없습니다.

체계	컨테이너를 어디서 얻나
Medical	원본의 첫 서브패스가 이미 온전한 라운드 사각형입니다
Sign	펜이 컨테이너 외곽선에 통째로 파여 있어 서브패스가 1개입니다 — 상자가 같으므로 Medical의 컨테이너를 그대로 씁니다
Works	몸통도 외곽선에 파여 있어, 그 구간만 Medical 컨테이너의 하단(우측 코너 → 바닥 → 좌측 코너)으로 되돌린 것이 실루엣입니다

clipPath·mask를 쓰지 않습니다

흰 도형을 넉넉히 그려 놓고 컨테이너로 잘라내는 방법도 되지만, 자산이 자기완결적이지 않게 됩니다(id 충돌 · 도구마다 다른 평탄화). even-odd 두 줄은 어디서 열어도 같은 모양입니다 — 그라디언트를 hex로 두는 이유와 같은 원칙입니다.

엔진 두 개로 확인했습니다 — Chromium(16px 파비콘 · 락업 · 심볼만)과 WebKit(macOS QuickLook으로 .svg 직접 렌더)에서 Medical · Works · Sign · 락업이 모두 같은 모양으로 나옵니다. fill-rule="evenodd"를 걱정해 안쪽 도형 좌표를 따로 뽑아 「단순화」하지 마세요 — 그건 등록 정본에서 파생되지 않은 새 좌표를 들이는 일이고, 지금 구성은 원본 두 개를 이어 붙인 것이라 원본이 바뀌면 자동으로 따라옵니다.

Works의 상단 노치는 fill본에서도 비어 있습니다

노치는 안쪽 도형이 아니라 컨테이너 실루엣의 일부입니다. fill본에서 흰색이 되는 것은 사람(머리 + 몸통)뿐이고, 노치는 그대로 배경이 비칩니다. 위 파생식이 이것까지 자동으로 지킵니다 — Works의 컨테이너는 노치를 남긴 채 몸통 구간만 되돌린 것이기 때문입니다.

마스터엔 이 축이 없습니다

마스터 심볼은 스우시 하나라 컨테이너도 안쪽 도형도 없습니다. 뚫린 데가 없으니 채울 것도 없습니다 — 「마스터 fill본」을 만들지 마세요. 데모의 마스터 쪽에 선택기가 없는 것도 그래서입니다.

내보내기는 항상 path입니다

하단의 「SVG 다운로드」로 지금 보고 있는 구성(체계 · 서비스명 · 심볼/워드마크 유무 · 톤 · 배경)을 그대로 받을 수 있습니다. 심볼 그라디언트도 선택한 체계의 것으로 내보내지고, 파일명도 구성을 따라갑니다(파일명 규칙). 화면에서 라이브 텍스트를 보고 있더라도 내보내지는 파일은 언제나 path입니다.

폰트를 바꿀 여지를 남기지 않기 위해서입니다. 배포된 자산이 <text>를 품고 있으면, 받는 쪽 환경의 폰트에 따라 워드마크가 다른 서체로 그려질 수 있습니다. path에는 그런 여지가 없습니다.
색도 hex로 실체화됩니다(var() 없음). 이메일·디자인 툴·외부 배포처럼 CSS 변수가 없는 곳에서도 그대로 열립니다 — 아래 그라디언트 예외와 같은 이유입니다.

라이브 텍스트는 우리 코드 안에서만 쓰는 방식이고(폰트를 우리가 실어 보내니까), 밖으로 나가는 자산은 path로 통일합니다.

파일명은 구성을 그대로 담습니다

같은 이름으로 덮어써지지 않도록, 파일 내용이 실제로 달라지는 축을 전부 파일명에 넣습니다.

hereby-bi-medical-en-dark-on-white-fill.svg
          │       │  │    │        │
          │       │  │    │        └─ 심볼 내부 (fill / outline)
          │       │  │    └────────── 배경 (on-white / on-neutral / on-dark)
          │       │  └─────────────── 서비스명 색 (primary / dark / light)
          │       └────────────────── 언어 (en / ko)
          └────────────────────────── 체계 (master / medical / sign)

hereby-bi-master-wordmark-only-on-dark.svg   심볼을 끈 것 (심볼이 없으니 내부 축도 없음)
hereby-bi-medical-symbol-fill.svg               워드마크를 끈 것 = 파비콘용 (기본형)
hereby-bi-medical-symbol-outline-on-white.svg   단색 심볼 — 색이 배경에서 갈리므로 배경이 붙는다

배경이 파일명에 들어가는 이유는 워드마크 색이 배경에서 갈리기 때문입니다(다크 배경이면 흰색, 아니면 검정). 배경이 이름에 없으면 내용이 다른 파일이 같은 이름으로 덮어써집니다.
배경에는 on-을 붙입니다. 안 그러면 medical-en-dark-white처럼 앞의 dark(톤)와 뒤의 white(배경)가 뒤섞여 읽힙니다.
심볼 내부(fill / outline)는 맨 뒤에 붙습니다 — 락업이든 심볼만이든 파일을 바꾸는 축이기 때문입니다. 기본형(fill)도 생략하지 않습니다: 흰 배경에서 두 파일이 같아 보이는 만큼 이름이 유일한 구분점이고, 생략하면 예전에 받아 둔 outline 파일과 같은 이름이 되어 조용히 덮어써집니다.
심볼만일 때는 서비스명·톤이 파일에 영향을 주지 않으므로 이름에서 뺍니다. 배경도 fill이면 빼지만, outline은 색이 배경에서 갈리므로(워드마크를 따라가니까) 심볼만이어도 배경이 붙습니다. 심볼을 끈 것(워드마크만)은 반대로 이 축이 사라집니다 — 심볼이 없으니까요. 마스터는 애초에 축이 없어 hereby-bi-master-symbol.svg 그대로입니다.

「라이브 텍스트 / path」 모드는 파일명에 없습니다 — 넣으면 거짓말이 됩니다

내보내기는 화면 모드와 무관하게 항상 path입니다. 즉 모드를 바꿔도 파일이 한 바이트도 바뀌지 않습니다(같은 구성에서 두 모드의 md5가 동일함을 확인했습니다).

파일명에 livetext를 넣으면 path를 담은 파일이 스스로를 라이브 텍스트라고 말하게 되고, 내용이 같은 파일이 두 이름으로 갈라져 오히려 헷갈립니다. 모드는 화면에서 두 정본이 같아 보인다는 것을 확인하는 장치이지, 내보내는 파일의 축이 아닙니다.

조판 규격

워드마크는 조판된 글자입니다. 아래 규격에서 벗어나면 그것은 BI가 아닙니다.

요소	폰트	굵기	기본 색	토큰
`hereby` (워드마크)	Geist	SemiBold 600	`#1B1B1B`	`--color-neutral-900`
`Medical` · `Sign` (영문 서비스명)	Geist	SemiBold 600	마스터 `#F66014` / 패밀리 `#1B1B1B`	`--color-orange-500` / `--color-neutral-900`
`메디컬` · `사인` · `웍스` (국문 서비스명)	Pretendard	Bold 700	마스터 `#F66014` / 패밀리 `#1B1B1B`	`--color-orange-500` / `--color-neutral-900`

크기 100px 기준, 자간 0 (letter-spacing: 0)
영문은 Geist, 국문은 Pretendard — 한 락업 안에서 두 폰트가 섞이는 것이 정상입니다
색은 전부 기존 토큰과 정확히 일치합니다. 새 평면 색을 만들지 않습니다 (그라디언트는 예외)
서비스명은 세 톤(primary · dark · light)이 모두 정본이고, 위 표의 값은 기본값입니다 — 자세한 것은 서비스명 색

Figma export를 그대로 붙여넣지 마세요 — 국문이 폴백됩니다

Figma가 뽑아주는 SVG에는 font-family="Pretendard"로 적혀 있는데, 이 저장소에 등록된 패밀리 이름은 Pretendard Variable 입니다. 그대로 쓰면 국문 워드마크가 다른 서체로 폴백됩니다.

html

<!-- ❌ Figma 원본 그대로 -->
<text font-family="Pretendard" font-weight="bold">메디컬</text>
<!-- ✅ -->
<text font-family="Pretendard Variable" font-weight="700">메디컬</text>

락업 5종

마스터 — 하나뿐입니다.

락업	비율 (viewBox)	구성
마스터	`471 × 130`	마스터 심볼(스우시) + `hereby`

패밀리 — 심볼은 서비스 전용, 서비스명은 필수.

락업	비율 (viewBox)	구성
Medical 영문	`865 × 130`	십자 심볼 + `hereby Medical`
Medical 국문	`746 × 130`	십자 심볼 + `hereby 메디컬`
Sign 영문	`702 × 130`	서명 심볼 + `hereby Sign`
Sign 국문	`659 × 130`	서명 심볼 + `hereby 사인`
Works 영문	`790 × 130`	폴더 심볼 + `hereby Works`
Works 국문	`659 × 130`	폴더 심볼 + `hereby 웍스`

비율은 고정입니다. 심볼과 워드마크의 간격·크기 비를 임의로 바꾸지 않습니다.

비율은 계산으로 구합니다 — 디자인 재요청이 필요 없습니다

락업 폭은 감으로 정하거나 Figma 프레임에서 읽어오는 값이 아닙니다. 폰트가 저장소에 있으므로 정확히 계산됩니다.

viewBox 폭 = 486 (서비스명 x) + 서비스명의 커닝 적용 advance 폭 (font-size 100), 올림

이 규칙은 기존 정본 4종을 전부 정확히 재현합니다 — 그래서 신뢰할 수 있습니다:

락업	`486 + advance`	올림	정본
`hereby Medical`	`864.20`	865	865 ✅
`hereby 메디컬`	`745.28`	746	746 ✅
`hereby Sign`	`701.70`	702	702 ✅
`hereby 사인`	`658.85`	659	659 ✅
`hereby Works`	`789.60`	790	—
`hereby 웍스`	`658.85`	659	—

hereby 웍스가 hereby 사인과 같은 659인 것은 우연이 아닙니다 — 한글 글리프는 advance가 같아 2글자 국문 서비스명은 항상 같은 폭이 됩니다.

계산 근거는 두 번 교차검증했습니다

hereby 커닝 advance = 328.20, 여기에 규정된 간격 0.238em(= 23.8)을 더하면 352.00 — 정본의 서비스명 오프셋(486 − 134 = 352)과 소수점까지 일치합니다.
디자인 export의 hereby → 서비스명 간격도 146.55 − 40.9497 = 105.6003으로, 352 × 0.3(font-size 30 환산) = 105.6과 일치합니다. 받은 자산이 정본 그리드 위에 있다는 뜻입니다.

커닝을 반드시 적용해야 합니다. 커닝을 끄면 Medical이 384.00(정본 379), hereby가 338.30(정본 328.20)으로 어긋납니다.

Figma 프레임 폭을 비율로 쓰지 마세요

받은 Works export는 영문·국문이 똑같이 258 × 40 인데, 실제 내용이 끝나는 지점은 서로 다릅니다(우측 여백 영문 26.4 · 국문 59.6). 고정 프레임이지 타이트 크롭이 아닙니다. 프레임 폭을 그대로 비율로 옮기면 국문 락업에 60 가까운 빈 공간이 붙습니다.

path 정본도 직접 생성합니다

받은 export는 워드마크가 <text>(라이브 텍스트)라 아웃라인이 없지만, 폰트가 저장소에 있으므로 아웃라인을 생성할 수 있습니다 — 디자인에 재요청할 필요가 없습니다. 생성기는 위 폭 규칙과 같은 방식으로 검증합니다: 같은 절차로 hereby · Medical · 메디컬 · Sign · 사인 정본 path 5종을 오차 0.00으로 재현하면, 그 생성기가 뽑은 Works path도 정본입니다.

생성 시 지켜야 할 값 — font-size 100 · 베이스라인 y = 100.5 · 서비스명 x = 486 · hereby x = 134 · 커닝 적용 · 국문은 Pretendard Variable을 wght=700으로 인스턴싱(가변 폰트라 인스턴싱 없이는 굵기가 틀립니다).

받은 export를 그대로 붙여넣으면 3가지가 깨집니다

font-family="Pretendard" → 이 저장소의 등록명은 Pretendard Variable. 그대로 쓰면 「웍스」가 폴백 서체로 그려집니다(조판 규격의 Figma 경고 참조). 이번 export가 정확히 이 함정을 밟았습니다.
font-weight="bold" → 정본 표기는 700입니다. 렌더 결과는 같지만 규격 문구에 맞춰 정규화합니다.
id="paint0_linear_131_108" · clip0_131_108 → 영문·국문 두 파일이 같은 id를 씁니다. id는 문서 전역이라 한 페이지에 둘 다 넣으면 뒤엣것이 앞엣것의 그라디언트로 칠해집니다. 등록할 때 서비스·용도별로 갈라야 합니다. clipPath는 사각형이 심볼 박스와 같은 크기라 아무것도 자르지 않으므로 통째로 지웁니다.

심볼 크기와 hereby 위치는 두 체계가 동일합니다

패밀리 심볼은 마스터 심볼과 같은 박스(x 2~95 / y 18.5~111.5)에 정렬돼 있고 hereby도 같은 x=134에서 시작합니다. 그래서 체계를 바꿔도 워드마크가 흔들리지 않습니다. 패밀리에서만 다른 값은 hereby와 서비스명 사이 간격 0.238em 하나이고, 디자인에서 그려진 값이라 그대로 보존했습니다.

두 가지 정본 — path와 라이브 텍스트

같은 락업을 워드마크를 무엇으로 그리느냐로 두 벌 관리합니다. 시각적으로는 동일합니다.

	path (도형)	라이브 텍스트
워드마크	`<path>` 아웃라인	`<text font-family="Geist">`
폰트 필요	불필요	Geist SemiBold 필수 (국문은 Pretendard)
브라우저 번역	원천 불가	가능 → `translate="no"` 필수
텍스트 선택·복사	안 됨	됨
수정	Figma에서 재export	크기·자간을 CSS로 조정 가능

어느 것을 쓰나

path가 기본값입니다. 라이브 텍스트는 폰트가 도착했을 때만 그 위로 올라갑니다(아래 폴백 규칙).

사용처	정본	이유
LNB·헤더의 작은 로고, 파비콘	path 고정	24~32px 고정. 라이브 텍스트로 얻을 게 없습니다
랜딩 등 대형 워드마크	path + 라이브 텍스트 향상	크고, 반응형·애니메이션 여지가 있습니다. 단 폰트 실패 시 path로 되돌아가야 합니다
증명서·이메일 등 브라우저 밖 산출물	path 고정	폰트 로드를 보장할 수 없습니다

두 방식이 같아 보인다는 것은 측정으로 확인했습니다

Geist SemiBold를 로드한 상태에서 두 버전을 픽셀 비교하면 형태 차이(강한 차이)는 0.18%이고, 그마저 전부 글자 경계의 안티에일리어싱입니다. 둘 중 무엇을 골라도 BI는 같아 보입니다 — 선택 기준은 모양이 아니라 위 표의 제약입니다.

폰트 로드에 실패하면 path로 표시합니다

이것이 가장 중요한 규칙입니다. 라이브 텍스트는 "폰트가 도착했을 때만 올라가는 향상"이고, 기본값은 항상 path입니다. 브랜드 폰트를 못 받아온 사용자에게 다른 서체의 워드마크를 보여주는 일은 없어야 합니다.

데모에서 폰트 로드 실패를 켜고 path 폴백 적용을 껐다 켜보면 그 차이가 바로 보입니다.

구현

path를 먼저 놓고, 폰트가 실제로 준비된 것이 확인됐을 때만 텍스트로 교체합니다.

html

<svg viewBox="0 0 471 130" role="img" aria-label="hereby">
  <path d="…심볼…" fill="url(#bi-grad)" />
  <!-- 기본값: 아웃라인. 폰트와 무관하게 항상 옳다 -->
  <path class="bi-word-path" d="…hereby 아웃라인…" fill="#1B1B1B" />
  <!-- 향상: 폰트가 준비됐을 때만 보인다 -->
  <text class="bi-word-text" x="134" y="100.5" font-size="100" lang="en" translate="no">hereby</text>
</svg>

css

.bi-word-text { display: none; }
.brand-font-ready .bi-word-text { display: block; }
.brand-font-ready .bi-word-path { display: none; }

// 폰트가 "실제로 준비됐는지"까지 확인한 뒤에만 교체한다.
// load()가 reject되거나 check()가 false면 path가 그대로 남는다 — 그것이 정상 동작이다.
document.fonts
  .load('600 1em Geist')
  .then(() => {
    if (document.fonts.check('600 1em Geist')) {
      document.documentElement.classList.add('brand-font-ready');
    }
  })
  .catch(() => {
    /* 폰트 실패 → path 유지 */
  });

나머지 가드레일

--font-brand 토큰만 사용합니다. font-family: Geist를 직접 쓰지 않습니다. Tailwind에서는 font-brand 유틸리티가 자동 생성됩니다.
굵기는 600입니다. font-bold(700)를 쓰면 다른 워드마크가 됩니다 — Geist는 600만 탑재돼 있어 700을 지정하면 브라우저가 가짜 굵게(synthetic bold)를 만들어 냅니다.
font-display: block — 토큰(tokens.css)에 이미 block으로 선언돼 있습니다. 기본값 swap이면 폴백 서체가 먼저 보였다가 바뀝니다.
폰트 preload — 워드마크가 첫 화면에 있는 페이지(랜딩 등)에서는 <link rel="preload" as="font" type="font/woff2" crossorigin>로 교체 시점을 앞당깁니다.

다섯 락업 모두 path 정본이 있습니다

마스터 1종·패밀리 4종(Medical·Sign) 전부 아웃라인이 준비돼 있어, 어느 락업을 쓰든 위 폴백을 걸 수 있습니다. 국문(메디컬 · 사인)은 Pretendard Bold 700, 영문(hereby · Medical · Sign)은 Geist SemiBold 600 아웃라인입니다.

Works 2종도 같은 폴백이 걸립니다. Works path는 디자인 export가 아니라 계산으로 생성한 것인데, 라이브 텍스트와의 픽셀 차이가 1.06%(영문)·1.17%(국문)로 기존 정본 Medical 1.04% · Sign 1.00%와 같은 수준입니다(전부 글자 경계 안티에일리어싱). 생성 path가 디자인 export와 동등하다는 뜻입니다.

구성 변형

심볼 on / off

락업에서 심볼을 빼고 워드마크만 쓸 수 있습니다. 반대로 공간이 좁아 락업이 최소 크기(16px) 아래로 내려가야 하면 워드마크를 빼고 심볼만 씁니다.

상황	구성	받는 법
일반	심볼 + 워드마크 (락업)	기본
이미 브랜드 맥락이 확립된 화면, 좁은 가로 공간	워드마크만	「심볼」 체크 해제
높이 16px 미만, 파비콘·앱 아이콘	심볼만	「워드마크」 체크 해제 → 심볼만 내보내기

패밀리 화면에서 심볼만 쓸 때는 그 패밀리의 심볼을 씁니다 — Medical 앱의 아이콘에 마스터 스우시를 넣지 않습니다. 심볼 내부는 이 구성에서도 fill이 기본형입니다 — 락업과 같습니다.

패밀리에서 뗄 수 있는 것은 심볼이지 서비스명이 아닙니다

위 표의 "워드마크만"은 패밀리에서도 유효합니다 — hereby Medical을 심볼 없이 글자만 쓰는 것이니까요. 하지만 서비스명을 떼는 것은 패밀리에 없는 구성입니다. 심볼 + hereby만 남기면 그건 패밀리 락업이 아닙니다.

	심볼 뗀다	워드마크 뗀다 (심볼만)	서비스명 뗀다
마스터	✅	✅	✅ (기본 락업 `hereby`)
패밀리	✅	✅	❌ 불가

서비스명 색 — primary / dark / light

서비스명(Medical · Sign · Works · 메디컬 · 사인 · 웍스)은 세 가지 색 모두 정본입니다. 서비스명은 패밀리에만 있으므로 이 톤도 패밀리 전용입니다.

톤	값	토큰	쓰는 곳
dark	`#1B1B1B`	`--color-neutral-900`	기본값. 밝은 배경 전반
primary	`#F66014`	`--color-orange-500`	브랜드 색을 앞세워야 할 때. 모든 배경에서 쓸 수 있습니다
light	`#FFFFFF`	흰색	어두운 배경·이미지 위

기본값이 dark인 이유는 패밀리 심볼이 이미 그라디언트로 색을 지니고 있기 때문입니다. 서비스명까지 오렌지로 두면 한 락업 안에서 색이 겹쳐 심볼의 존재감이 죽습니다.

워드마크 hereby는 배경에 따라 dark/light만 바뀌고, 서비스명만 세 톤을 오갑니다.

「중립 톤」은 배경마다 하나씩 — 어두운 배경의 기본은 `light`

dark와 light는 같은 자리의 짝입니다 — 워드마크 hereby가 배경에 따라 뒤집히는 것과 같습니다. primary만 그 짝 밖에 있는, 의도를 갖고 직접 고르는 톤입니다.

배경	중립 톤 (기본)	primary
화이트 · 뉴트럴	`dark`	골라서 씀
다크	`light`	골라서 씀

그래서 밝은 배경에서 dark로 쓰던 락업을 어두운 배경으로 옮기면 light가 되지, primary가 되지 않습니다. dark를 고른 이유(심볼이 이미 그라디언트로 색을 지니므로 서비스명은 중립으로 둔다)가 배경과 무관하기 때문입니다 — 여기서 primary로 가면 피하려던 색 겹침이 그대로 발생합니다.

데모에 있던 버그 (2026-07-20 수정)

배경을 다크로 바꾸면 톤이 light가 아니라 primary로 튀는 버그가 있었습니다. 데모는 자산을 내려받는 곳이라, 다크 배경용 락업을 받으려던 사람이 의도치 않게 오렌지 버전을 받고 파일명(…-primary-on-dark.svg)만으로는 눈치채기 어려웠습니다.

배경과의 조합 — 배경에 묻히는 조합은 금지

톤은 자유롭게 고르는 것이 아니라 배경이 무엇을 허용하는지가 먼저입니다. 배경과 명도가 겹치는 조합은 워드가 사라지므로 쓰지 않습니다.

배경	primary	dark	light
화이트	✅	✅	❌ 흰 배경에 흰 글자
뉴트럴	✅	✅	❌ 밝은 배경에 흰 글자
다크	✅	❌ 어두운 배경에 검은 글자	✅

primary는 어느 배경에서나 안전합니다. 확신이 없으면 primary를 쓰세요.
dark는 어두운 배경에서, light는 밝은 배경에서 금지입니다 — 이 둘만 기억하면 됩니다.

워드마크는 번역·현지화 대상이 아닙니다

hereby는 영문 고유명사입니다. 브라우저 자동번역이나 접속 지역(IP)에 따라 다른 글자로 바뀌어서는 안 됩니다. 그래서 국문 마스터가 없습니다 — hereby는 영문 하나로 고정입니다.

번역되면 브랜드 사고입니다

라이브 텍스트로 쓸 때는 translate="no"를 반드시 붙입니다(+ lang). 없으면 Chrome 자동번역의 대상이 됩니다.
translate="no"는 국문 서비스명에도 붙입니다. 「메디컬」·「사인」·「웍스」도 브랜드 워드입니다 — 번역되면 Pretendard Bold 700 자리에 폴백 서체가 들어와 락업이 깨집니다.
path로 쓸 때는 애초에 텍스트가 아니라 도형이므로 번역이 불가능합니다. 이것이 제품 UI에서 path를 기본으로 두는 이유입니다.
워드마크 hereby를 한글로 옮기지 않습니다. 반대로 서비스명(Medical/메디컬 · Sign/사인 · Works/웍스)은 언어별 정본이 각각 존재하므로, 화면 언어에 맞는 패밀리 락업을 고르면 됩니다.

색 — 토큰에 맞추되, 그라디언트는 예외

평면 색(워드마크·서비스명)은 반드시 토큰을 씁니다. 이 색들은 기존 토큰과 값이 정확히 일치하므로 새 색을 만들 이유가 없습니다.

대상	값	토큰
워드마크 `hereby`	`#1B1B1B`	`--color-neutral-900`
서비스명 (primary)	`#F66014`	`--color-orange-500`
서비스명 (dark)	`#1B1B1B`	`--color-neutral-900`

그라디언트는 하드코딩을 유지합니다

심볼의 3-stop 그라디언트는 토큰 규칙의 예외입니다. stop-color에 hex를 그대로 둡니다.

이유는 자기완결성입니다. BI 자산은 CSS 변수가 존재하지 않는 컨텍스트 — 이메일 HTML, 단독으로 다운로드된 SVG 파일, 외부 배포본 — 에서도 그대로 열려야 합니다. var()로 두면 그런 곳에서 심볼이 검게 렌더됩니다.

그라디언트는 두 벌입니다 — 섞어 쓰지 마세요

마스터와 패밀리는 stop 값도 벡터도 다릅니다. 패밀리 심볼에 마스터 그라디언트를 물리면 다른 마크가 됩니다.

html

<!-- 마스터 심볼 -->
<stop stop-color="#F8884F" />
<stop offset="0.5" stop-color="#FF4141" />
<stop offset="0.956731" stop-color="#F6BC3D" />

<!-- 패밀리 심볼 (Medical · Sign · Works 공통) -->
<stop stop-color="#FE4D43" />
<stop offset="0.389423" stop-color="#FF7732" />
<stop offset="0.956731" stop-color="#FFAF00" />

	마스터	패밀리
stop 1	`#F8884F` = `--color-orange-400`	`#FE4D43` — 대응 토큰 없음
stop 2 (offset)	`#FF4141` = `--color-hr-red-400` (`0.5`)	`#FF7732` — 대응 토큰 없음 (`0.389423`)
stop 3	`#F6BC3D` = `--color-yellow-400`	`#FFAF00` — 대응 토큰 없음
CSS 각도 환산	`290°`	`314°`

마스터의 세 stop은 값이 토큰과 동일합니다 — 즉 값이 어긋나서 하드코딩하는 것이 아니라 이식성 때문에 예외를 두는 것입니다. CSS로 같은 그라디언트가 필요하면 --gradient-logo 토큰이 이미 있습니다.

css

background: var(--gradient-logo);
/* = linear-gradient(290deg, #f8884f 14.45%, #ff4141 50.1%, #f6bc3d 82.67%) */

패밀리의 세 stop은 어떤 토큰과도 일치하지 않는 전용 색입니다. 평면 색과 달리 그라디언트는 애초에 hex 하드코딩이 규격이므로 토큰을 새로 만들지 않았고, CSS 대응 토큰(--gradient-logo-family 같은 것)도 일부러 만들지 않았습니다 — 아직 CSS로 이 그라디언트를 칠하는 화면이 없습니다(기존 --gradient-logo조차 사용처가 0입니다). 필요해지는 시점에 만드세요.

크기와 보호 영역

최소 크기 — 락업은 높이 16px 아래로 쓰지 않습니다(2026-08-25에 24px에서 내렸습니다). 그보다 작아야 하면 워드마크를 떼고 심볼만 씁니다.
보호 영역 — 락업 사방으로 심볼 높이의 1/4 만큼은 비웁니다. 다른 요소·텍스트·테두리를 그 안에 넣지 않습니다.

금지 규칙(굵기 700 조판 · 배경에 묻히는 톤 · 폰트 실패 방치 · 비율 변경 · 회전/그림자 · 본문에 --font-brand 사용 · 캡처 이미지 사용 등)은 상단 「규칙 (강제)」 접이 섹션에 모여 있습니다.

코드에서의 현재 위치

대상	위치	상태
마스터 심볼 (정본)	`packages/components/src/icons.ts` → `logo-hereby`	등록됨, 화면 사용처 0 (락업 데모·내보내기에서만 씀)
패밀리 심볼 (정본)	`packages/components/src/icons.ts` → `logo-hereby-medical` · `logo-hereby-sign`	`logo-hereby-medical` 사용 중, `logo-hereby-sign`은 `icons.ts` 엔트리로는 미사용(랜딩 데모가 path를 직접 인라인). 셋 다 `fill`본으로 전환됨(2026-07-31)
패밀리 심볼 — Works	`packages/components/src/icons.ts` → `logo-hereby-works`	등록됨, 화면 사용처 0. 그라디언트는 패밀리 공통(`#FE4D43`→`#FF7732`→`#FFAF00`), 벡터도 Medical과 동일. `id`는 `lnb-hereby-works-grad`로 갈랐고 Figma의 no-op `clipPath`는 제거
심볼 렌더	`packages/components/html/workspace-switcher.html`, `apps/admin/src/views/dashboard.html`	admin·총무·경영 대시보드의 LNB 헤더 — Medical 심볼
락업 path 정본 (7종)	`docs/.vitepress/theme/components/DemoBrandLogo.vue`	데모의 「SVG 다운로드」로 받아 씁니다. 마스터 1 + Medical 2 + Sign 2 + Works 2
심볼 컨테이너 (`fill`본용)	`docs/.vitepress/theme/components/DemoBrandLogo.vue` → `SYMBOL_*_CONTAINER_D`	패밀리 3종. 새로 그린 좌표가 아니라 등록된 심볼에서 파생 — Medical=첫 서브패스, Sign=Medical 것 재사용, Works=몸통 구간만 되돌림(파생식). 마스터는 없음(축 자체가 없음)
파비콘 자산	`packages/static/brand/favicon-hereby-medical.svg` · `favicon-hereby-works.svg`	`fill`본으로 교체됨(2026-07-31). 10개 앱이 이 두 파일을 상대경로로 참조하므로 앱마다 복사하지 마세요. `href`에 `?v=2`가 붙어 있습니다 — 파일을 바꾸면 이 값을 올려야 브라우저가 다시 받습니다
문서 사이트 파비콘	`docs/public/favicon.svg`	마스터 심볼(스우시). 데모의 「심볼만」 내보내기와 같은 구성(`viewBox 2 18.5 93 93` · 마스터 그라디언트)이고, `config.mts`의 `head`에서 base를 붙여 겁니다
앱 아이콘 (PNG)	`apps/employee-app/public/icons/icon-*.png`	별도 자산이라 이번 전환 대상이 아닙니다 — 그대로 둡니다
앱에서 쓰는 락업	`packages/components/src/icons.ts` → `logo-lockup-hereby-medical` · `logo-lockup-hereby-works`	영문 2종만 등록(`865×130` · `790×130`). `viewBox`로 비율만 고정하고 크기는 쓰는 쪽 CSS가 정합니다. 현재 사용처는 가입 화면 상단
outline 케이스 (다크 배경용)	`packages/components/src/icons.ts` → `logo-lockup-hereby-medical-outline-on-dark` · `logo-hereby-medical-outline-on-dark`	락업 + 심볼만, 둘 다 흰색 단색(그라디언트·`defs` 없음). outline 은 색이 배경에서 갈리므로 이름에 배경이 붙습니다 — 밝은 배경이 필요하면 `#1B1B1B` 본을 따로 등록하세요. 사용처는 admin LNB 하단 브랜드 마크
Works 락업 (영문·국문)	데모에 등록됨 (`790×130` · `659×130`)	디자인 export는 고정 프레임(`258×40`)이라 참고용으로만 씀. 비율·path 모두 계산으로 도출 — 정본 4종 재현 + 라이브 텍스트 픽셀 대조로 검증
브랜드 폰트	`packages/static/fonts/Geist/Geist-SemiBold.woff2` (SIL OFL, 46KB)	`--font-brand` 토큰으로 노출
국문 폰트	`packages/static/fonts/Pretendard/PretendardVariable.woff2`	기존 자산 재사용 (`--font-pretendard`)
마스터 그라디언트 (CSS)	`--gradient-logo` (`tokens.css`)	정의돼 있으나 사용처 0
패밀리 그라디언트 (CSS)	—	일부러 만들지 않음 (소비처가 없음)

아직 정리되지 않은 것 (2026-07-20 기준, 2026-07-31 보강)

심볼이 박힌 자리는 2026-07-31에 전부 fill본으로 교체했습니다 — icons.ts 심볼 3 + 락업 2, 파비콘 2, 랜딩 인라인 3(nav · footer · 데모의 Sign), docs 데모 2. PNG 앱 아이콘(apps/employee-app/public/icons/)만 그대로입니다. og:image는 여전히 보류지만, 만들 때는 기본형을 씁니다.
LNB 헤더는 락업이 아니라 「패밀리 심볼 + 텍스트 서비스명」입니다. 락업(심볼+워드마크 통짜)은 비율이 865×130으로 고정이라, 208px LNB에서 브랜드가 쓸 수 있는 폭 132px(.ds-lnb 좌우 패딩 24 + 접기 토글 24 + gap 8 + .ws-brand 좌우 패딩 20을 뺀 값)에 넣으면 높이가 19.8px로 떨어집니다. 하한이 24px이던 때는 이것이 규칙 위반이라 아예 불가능했지만, 2026-08-25에 하한이 16px로 내려가 규칙상으로는 가능해졌습니다. 그래도 이 자리는 심볼 + 텍스트를 유지합니다 — 승격은 이제 규칙 문제가 아니라 디자인 판단이니 바꾸려면 시안을 먼저 받으세요. hereby Medical은 .ws-trigger-label의 일반 텍스트입니다.
LNB 헤더의 심볼 자리는 조직 로고가 가져갈 수 있습니다 — 병원 로고를 등록한 조직은 그 자리에 같은 24px 정사각으로 로고가 들어가고(admin .ws-brand__org-logo), 미등록이면 패밀리 심볼입니다. 「심볼 × 로고」로 나란히 놓던 코브랜딩은 브랜드 텍스트 가용폭을 29px까지 밀어내 잘려서 2026-08-25에 걷어냈습니다.
그 대신 LNB 하단에 브랜드 마크(.ds-lnb__brandmark)를 둡니다 — 심볼 자리를 로고가 가져가도 hereby 가 화면에서 사라지지 않게 하는 자리입니다. 영문 outline 락업(다크 배경용 흰색 단색) · 높이 18px(하한 16px 위) · 불투명도 30% · 가운데 정렬 · 비클릭(aria-hidden + pointer-events: none)이고, 접힘 레일(안쪽 폭 44px)에서는 락업 대신 같은 outline 심볼로 바뀝니다. 메뉴가 세로로 다 들어가지 않는 화면에서는 마크를 숨겨 메뉴에 자리를 돌려줍니다(그래서 세로가 짧은 노트북 화면에서는 보이지 않는 것이 정상입니다). CSS 는 design-system.css 에 있지만 현재 렌더하는 앱은 admin 하나입니다.
Works BI는 자산 등록·적용까지 끝났습니다 — 심볼·락업 2종·데모·내보내기 + 직원 앱 전면 적용(로그인 부제·로딩 화면·더보기 버전 표기·<title>·홈화면 라벨·manifest·appName·푸시 폴백). 다만 manifest·appName은 앱을 다시 설치해야 홈화면·런처에 반영됩니다.
hereby Works(직원 앱)가 아직 Medical로 표기돼 있습니다. 로그인 부제·로딩 화면이 hereby Medical이고, 앱 셸(<title>·manifest·appName·버전 표기)은 옛 대문자 Hereby Works입니다. 로딩 화면은 8개 앱이 공유하는 packages/components/html/loading.html에 하드코딩돼 있어 앱별 파라미터화가 필요합니다 — 문자열만 바꾸면 나머지 7개(Medical)가 깨집니다.
logo-hereby-sign은 icons.ts 엔트리로는 미사용이지만, 랜딩 데모(apps/landing/src/views/demo.html)가 Sign 심볼 path를 직접 인라인해 이미 화면에 렌더하고 있습니다. Sign 사이트가 생기면 헤더·파비콘·앱 아이콘에 엔트리를 붙입니다.
packages/static/brand/의 자산 8개가 전부 미사용입니다. 랜딩은 이 디렉터리의 .svg를 하나도 참조하지 않고 path를 인라인합니다(nav.html · footer.html). 그중 hereby-wordmark.svg 등 3개는 125×32 구버전 비율이라 정본과 다릅니다. 패밀리 락업은 같은 부채를 늘리지 않으려고 파일로 떨구지 않았습니다 — 필요할 때 데모에서 받아 쓰세요.
og:image는 보류입니다 (썸네일 제작 전). 지금은 전 앱에 없어 링크를 메신저에 붙여도 썸네일이 뜨지 않습니다. 파비콘과 달리 심볼을 그대로 쓸 수 없습니다 — 1200×630 가로 캔버스에 락업을 배치해야 해서 배경(그라디언트/흰색/다크)·락업 크기·앱 이름 표기 여부가 전부 디자인 결정입니다. 썸네일 시안이 나온 뒤 착수하세요. 그전에 심볼만 늘려 넣지 마세요.
헤더에 브랜드가 없는 앱이 남아 있습니다 — module-manager(텍스트만), inventory(텍스트 표기만). hr-system 은 헤더가 없는 것이 의도된 설계이므로 대상이 아닙니다 — 시트 작업 화면을 세로로 최대한 쓰기 위해 상단바를 걷어냈습니다. 「브랜드가 빠졌다」고 보고 헤더를 새로 만들지 마세요.
위 항목들은 자산 정본화 작업에서 함께 해소할 예정입니다.

브랜드 · BI ​

마스터와 패밀리 ​

마스터는 hereby 하나뿐입니다 ​

무엇을 쓸지는 "그 화면의 주체"가 정합니다 ​

직접 확인하기 ​

마스터 ​

패밀리 ​

파비콘·앱 아이콘 — 「워드마크」를 끄면 심볼만 받습니다 ​

심볼을 그리는 두 방식 — fill과 outline ​

기본형은 fill입니다 ​

outline은 컬러 없는 워드마크와만 조합합니다 ​

fill본은 새로 그리지 않습니다 — 등록된 정본에서 파생됩니다 ​

내보내기는 항상 path입니다 ​

파일명은 구성을 그대로 담습니다 ​

조판 규격 ​

락업 5종 ​

비율은 계산으로 구합니다 — 디자인 재요청이 필요 없습니다 ​

두 가지 정본 — path와 라이브 텍스트 ​

어느 것을 쓰나 ​

폰트 로드에 실패하면 path로 표시합니다 ​

구현 ​

나머지 가드레일 ​

구성 변형 ​

심볼 on / off ​

서비스명 색 — primary / dark / light ​

「중립 톤」은 배경마다 하나씩 — 어두운 배경의 기본은 light ​

배경과의 조합 — 배경에 묻히는 조합은 금지 ​

워드마크는 번역·현지화 대상이 아닙니다 ​

색 — 토큰에 맞추되, 그라디언트는 예외 ​

그라디언트는 하드코딩을 유지합니다 ​

그라디언트는 두 벌입니다 — 섞어 쓰지 마세요 ​

크기와 보호 영역 ​

코드에서의 현재 위치 ​

브랜드 · BI

마스터와 패밀리

마스터는 `hereby` 하나뿐입니다

무엇을 쓸지는 "그 화면의 주체"가 정합니다

직접 확인하기

마스터

패밀리

파비콘·앱 아이콘 — 「워드마크」를 끄면 심볼만 받습니다

심볼을 그리는 두 방식 — `fill`과 `outline`

기본형은 `fill`입니다

`outline`은 컬러 없는 워드마크와만 조합합니다

`fill`본은 새로 그리지 않습니다 — 등록된 정본에서 파생됩니다

내보내기는 항상 path입니다

파일명은 구성을 그대로 담습니다

조판 규격

락업 5종

비율은 계산으로 구합니다 — 디자인 재요청이 필요 없습니다

두 가지 정본 — path와 라이브 텍스트

어느 것을 쓰나

폰트 로드에 실패하면 path로 표시합니다

구현

나머지 가드레일

구성 변형

심볼 on / off

서비스명 색 — primary / dark / light

「중립 톤」은 배경마다 하나씩 — 어두운 배경의 기본은 `light`

배경과의 조합 — 배경에 묻히는 조합은 금지

워드마크는 번역·현지화 대상이 아닙니다

색 — 토큰에 맞추되, 그라디언트는 예외

그라디언트는 하드코딩을 유지합니다

그라디언트는 두 벌입니다 — 섞어 쓰지 마세요

크기와 보호 영역

코드에서의 현재 위치