여기어때

---
name: 여기어때
design_system_name: Yeogi Design System
slug: yeogi
category: travel
last_updated: "2026-07-18"
sources:
  - https://designlibrary.yeogi.com/
  - https://designlibrary.yeogi.com/about/mission/
  - https://designlibrary.yeogi.com/about/core-value/
  - https://designlibrary.yeogi.com/brand/overview/
  - https://designlibrary.yeogi.com/brand/color/
  - https://designlibrary.yeogi.com/brand/logo/bi/
  - https://designlibrary.yeogi.com/brand/logo/ci/
  - https://designlibrary.yeogi.com/brand/logo/membership/
  - https://designlibrary.yeogi.com/brand/logo/brand-servcie/
  - https://designlibrary.yeogi.com/brand/logo/campaign/
  - https://designlibrary.yeogi.com/foudations/overview/
  - https://designlibrary.yeogi.com/foudations/color/palette-color/
  - https://designlibrary.yeogi.com/foudations/color/semantic-color/
  - https://designlibrary.yeogi.com/foudations/typography/
  - https://designlibrary.yeogi.com/foudations/spacing/
  - https://designlibrary.yeogi.com/foudations/radius/
  - https://designlibrary.yeogi.com/foudations/shadow/
  - https://designlibrary.yeogi.com/foudations/layout/
  - https://designlibrary.yeogi.com/foudations/iconography/overview/
  - https://designlibrary.yeogi.com/foudations/grahpics/overview/
  - https://designlibrary.yeogi.com/foudations/grahpics/2d_graphics/
  - https://designlibrary.yeogi.com/foudations/grahpics/3d_graphics/
  - https://designlibrary.yeogi.com/foudations/grahpics/showcase/
  - https://designlibrary.yeogi.com/foudations/content/writing-principle/
  - https://designlibrary.yeogi.com/foudations/content/vocie_and_tone/
  - https://designlibrary.yeogi.com/foudations/content/grammer-mechanics/date-and-time/
  - https://designlibrary.yeogi.com/foudations/content/grammer-mechanics/grammer-and-punctuation/
  - https://designlibrary.yeogi.com/components/overview/
  - https://designlibrary.yeogi.com/components/button/overview/
  - https://designlibrary.yeogi.com/components/button/content/
  - https://designlibrary.yeogi.com/components/button/box-button/box-button-usage/
  - https://designlibrary.yeogi.com/components/button/box-button/box-button-content/
  - https://designlibrary.yeogi.com/components/search-bar/usage/
  - https://designlibrary.yeogi.com/components/price-marker/usage/
  - https://designlibrary.yeogi.com/expressions/overview/
  - https://designlibrary.yeogi.com/resources/overview/
  - https://designlibrary.yeogi.com/resources/asset-policy/
  - https://designlibrary.yeogi.com/components/button/box-button/box-button-spec/
  - https://designlibrary.yeogi.com/components/search-bar/spec/
  - https://designlibrary.yeogi.com/components/price-marker/spec/
  - https://techblog.gccompany.co.kr/여기어때-비주얼-에셋-새롭게-정의하다-a247c28bc5d8
  - https://noonnu.cc/font_page/115
  - https://data.jsdelivr.com/v1/packages/gh/projectnoonnu/noonfonts_four@1.2
related_services: ["socar"]
lang: ko
logo: https://getdesign.kr/logos/yeogi.png
---

# 여기어때 — design.md

> 여기어때는 GC COMPANY(여기어때컴퍼니)가 운영하는 여행·숙박 플랫폼이고, 그 공개 문서 사이트가 **여기어때 Design Library**다 [src:1]. 문서 본문이 스스로를 지칭하는 시스템 이름은 **YDS(Yeogi Design System)**이며 [src:12][src:19], Layout 문서 기준 현재 버전은 **YDS 6.0**이다 [src:18].

## Brand & Style

여기어때는 GC COMPANY가 운영하는 여행·숙박 플랫폼이고 [src:1], 그 디자인 시스템 YDS는 지도 위 가격 마커와 활기찬 Lively red를 시그니처로 삼는다 [src:12][src:34]. Design Library는 컴포넌트 라이브러리가 아니라 **디자인 시스템 + 비주얼 시스템 + 브랜드 가이드를 한곳에 모은 아카이브**로 스스로를 정의한다 — "플랫폼 디자이너들이 직접 만든 디자인 시스템, 비주얼 시스템, 그리고 브랜드 가이드를 한곳에 모아둔 여기어때만의 아카이브" [src:41]. 운영 주체는 플랫폼 디자인 팀(Platform Design Team)이며, 모든 페이지 푸터가 사내 Slack 채널과 팀 이메일로 고정된다 [src:11]. 선언된 스코프도 같은 방향이다 — 디자인 컴포넌트부터 그래픽, 보이스 앤 톤까지 하나의 시스템 아래 통합하는 것을 목표로 삼는다 [src:2]. 사이트가 내건 표어는 "Millions ways, One system"이고 [src:35], 그래픽 시스템의 자기 규정은 "A Visual Language for Travel"이다 [src:1].

세 가지 코어 밸류가 시각 결정을 직접 구속한다 [src:3]. **Simple**은 "결정적인 순간, 사용자가 혼란 없이 행동할 수 있도록 군더더기를 걷어냅니다", **Scalable**은 "기능이 늘어나고 팀이 커져도, 시스템은 하나의 기준을 유지합니다", **Lively**는 "즐거운 시각 요소, 세심한 상호작용, 그리고 기억에 남을 감성적 터치를 통해 경험을 생생하게" 만드는 것이다. 마지막 밸류는 이름만 남은 수사가 아니다 — UI 팔레트의 primary 램프 이름 자체가 **Lively red**다 [src:12].

대상은 단일 소비자가 아니라 투사이드 마켓이다. 보이스 앤 톤 문서가 8개 상황 전부를 "여기어때 APP/WEB"과 "파트너센터" 두 트랙으로 갈라 서술하고 [src:25], 로고 자산에도 파트너센터·공간대여호스트·부킹허브 같은 공급자용 서비스가 별도로 존재한다 [src:9]. 라이팅 원칙의 Reliable도 "고객과 파트너가 안심하고 플랫폼을 이용할 수 있도록"으로 파트너를 명시한다 [src:24]. 브랜드 계층은 법인(CI)과 서비스(BI)를 구분하며, BI는 "브랜드의 시각적 정체성을 대표하는 요소"로 정의된다 [src:6][src:7].

정서적 톤은 문서에 문장으로 박혀 있다. "여기어때는 사용자에게 밝고 영감을 주며 유쾌함을 느낄 수 있는 목소리를 가집니다"가 voice 정의이고, 기조는 "활기차고 편안함을 느낄 수 있는 구어체(~해요)"다 [src:25]. 다만 문서는 곧바로 못을 박는다 — "어조는 단순히 구어체(~해요), 문어체(~합니다)를 의미하지 않습니다"이며, 격식(Casual↔Formal)·분위기(Light↔Serious)·감정(Emotionally expressive↔Fact-focused) 3축 매트릭스로 상황마다 좌표를 다시 잡는다 [src:25]. 가독성 기준은 "중학교 1학년 수준에서도 충분히 이해할 수 있도록"으로 수치화되어 있고, 사용자가 "스캔하듯 읽는" 것을 전제로 단문을 요구한다 [src:24].

## Colors

컬러는 **Palette color → Semantic color** 2계층 구조다 [src:12][src:13]. 아래 OKLCH 값은 공개된 hex를 변환한 것이며, 원본 hex는 트레일링 주석으로 병기한다.

이 시스템에서 가장 먼저 확인해야 할 것은 **브랜드 레드와 UI primary가 서로 다른 색**이라는 점이다. 마스터브랜드 컬러 Yeogi Red는 `#F7323F`(`oklch(0.635 0.229 23.9)`)로 Pantone Red 032 C에 정렬된 인쇄 겸용 색이고 [src:5], 프로덕트 팔레트의 primary는 Lively red 800 `#F94239`(`oklch(0.650 0.220 27.9)`)다 [src:12]. 두 값은 미세하게 다르며 문서상 용도도 분리되어 있다.

```yaml
# 브랜드 컬러 — 인쇄·매체 겸용, 로고 컬러 [src:5]
yeogi-red: oklch(0.635 0.229 23.9) # #F7323F — Pantone Red 032 C · CMYK 0/89/66/0 · RGB 247/50/63
secondary-black: oklch(0 0 0) # #000000 — CMYK 0/0/0/100
secondary-white: oklch(1 0 0) # #FFFFFF — CMYK 0/0/0/0
```

### Palette color

9개 명명 램프로 구성된다 [src:12]. 상태색(success/error/warning)이라는 역할 이름 대신 색 이름 그대로(Green/Cyan/Yellow) 램프를 두는 것이 특징인데 — 역할 이름은 아래 Semantic 레이어의 `Support/` 축이 따로 맡는다 [src:13] — 멤버십 전용 Violet 램프는 1급 시민으로 편성되어 있다. 엘리트 시리즈·비즈 엘리트 시리즈라는 티어 체계가 팔레트 레벨에 새겨져 있다 [src:8].

```yaml
# YDS UI 팔레트 [src:12]
common-100: oklch(1 0 0) # #FFFFFF
common-0: oklch(0 0 0) # #000000
lively-red-50: oklch(0.978 0.011 17.3) # #FFF5F5
lively-red-100: oklch(0.960 0.020 28.9) # #FFEDEA
lively-red-200: oklch(0.929 0.034 20.0) # #FEDFDE
lively-red-500: oklch(0.736 0.152 24.3) # #FB7F79
lively-red-800: oklch(0.650 0.220 27.9) # #F94239 — UI primary
lively-red-900: oklch(0.598 0.232 29.6) # #EA2013
cyan-50: oklch(0.977 0.011 252.0) # #F2F8FF
cyan-100: oklch(0.950 0.025 251.9) # #E3F0FF
cyan-200: oklch(0.917 0.042 251.7) # #D0E6FF
cyan-500: oklch(0.721 0.149 251.6) # #57A9FF
cyan-800: oklch(0.641 0.196 254.6) # #1D8BFF
cyan-900: oklch(0.550 0.195 257.0) # #006CE0
yellow-50: oklch(0.969 0.038 89.1) # #FFF4D8
yellow-100: oklch(0.954 0.059 90.4) # #FFEFC3
yellow-800: oklch(0.859 0.159 86.0) # #FFC83B
yellow-900: oklch(0.827 0.171 80.5) # #FFB803
green-50: oklch(0.963 0.018 179.3) # #E7F7F3
green-100: oklch(0.941 0.027 179.6) # #D9F2EC
green-800: oklch(0.640 0.124 172.3) # #01A484
orange-50: oklch(0.943 0.035 57.5) # #FFE7D6
orange-100: oklch(0.913 0.052 54.8) # #FFDAC2
orange-600: oklch(0.724 0.177 39.8) # #FF7847
navy-10: oklch(0.975 0.005 258.2) # #F5F7FA
navy-500: oklch(0.486 0.049 247.7) # #49627A
membership-violet-10: oklch(0.974 0.013 290.8) # #F6F5FF
membership-violet-50: oklch(0.948 0.027 290.5) # #EDEBFF
membership-violet-100: oklch(0.894 0.056 292.0) # #DCD6FF
membership-violet-400: oklch(0.737 0.145 288.6) # #A799FF
membership-violet-600: oklch(0.581 0.229 283.2) # #7059FA
membership-violet-800: oklch(0.472 0.212 280.8) # #4F3BCC
neutral-10: oklch(0.985 0 0) # #FAFAFA
neutral-50: oklch(0.970 0 0) # #F5F5F5
neutral-100: oklch(0.925 0 0) # #E6E6E6
neutral-200: oklch(0.894 0 0) # #DCDCDC
neutral-300: oklch(0.792 0 0) # #BBBBBB
neutral-400: oklch(0.683 0 0) # #999999
neutral-500: oklch(0.637 0 0) # #8B8B8B
neutral-600: oklch(0.545 0 0) # #707070
neutral-700: oklch(0.475 0 0) # #5C5C5C
neutral-800: oklch(0.398 0 0) # #474747
neutral-900: oklch(0.252 0 0) # #222222
```

근거 강도에 편차가 있다. Lively red·Cyan·Yellow·Green·Orange·Navy·Violet·Common 램프는 두 경로(직접 렌더 측정 + 독립 재fetch)에서 값이 일치해 확정된 반면, **Neutral 램프만은 직접 렌더 측정 단독 근거**다 [src:12]. 램프 라벨 표기(예: "Violet" vs "Membership Violet")도 hex 값만큼 확실하지는 않다 [src:12].

### Neutral opacity

불투명도 조정이 허용되는 두 축이다. Neutral light는 {colors.common-100} 기준, Neutral dark는 {colors.common-0} 기준이며, 그림자와 그라디언트 토큰이 이 사다리를 이름으로 참조한다 [src:12][src:17][src:13].

```yaml
# Neutral light — #FFFFFF 기준 [src:12]
neutral-light-88: oklch(1 0 0 / 88%)
neutral-light-72: oklch(1 0 0 / 72%)
neutral-light-56: oklch(1 0 0 / 56%)
neutral-light-48: oklch(1 0 0 / 48%)
neutral-light-24: oklch(1 0 0 / 24%)
neutral-light-16: oklch(1 0 0 / 16%)
neutral-light-8: oklch(1 0 0 / 8%)
neutral-light-0: oklch(1 0 0 / 0%)
```

```yaml
# Neutral dark — #000000 기준 [src:12]
neutral-dark-90: oklch(0 0 0 / 90%)
neutral-dark-80: oklch(0 0 0 / 80%)
neutral-dark-72: oklch(0 0 0 / 72%)
neutral-dark-64: oklch(0 0 0 / 64%)
neutral-dark-56: oklch(0 0 0 / 56%)
neutral-dark-48: oklch(0 0 0 / 48%)
neutral-dark-40: oklch(0 0 0 / 40%)
neutral-dark-32: oklch(0 0 0 / 32%)
neutral-dark-24: oklch(0 0 0 / 24%)
neutral-dark-16: oklch(0 0 0 / 16%)
neutral-dark-8: oklch(0 0 0 / 8%)
neutral-dark-6: oklch(0 0 0 / 6%)
neutral-dark-4: oklch(0 0 0 / 4%)
neutral-dark-2: oklch(0 0 0 / 2%)
neutral-dark-0: oklch(1 0 0 / 0%) # 원문 표기 그대로 — 0단만 #FFFFFF 0%
```

### Alpha color

YDS의 가장 특징적인 규칙이 여기 있다. **"YDS에서는 원칙적으로 Neutral light, Neutral dark를 제외한 팔레트 색상의 불투명도 조정이 허용되지 않습니다. 채도가 있는 색상 중 예외적으로 허용되는 색상은 별도로 표기합니다."** [src:12] 즉 유채색의 알파는 자유 파라미터가 아니라 화이트리스트된 토큰 4종으로만 존재한다. 불투명도 정책을 토큰 레벨 규칙으로 승격한 시스템은 드물다.

```yaml
# 불투명도 조정이 허용되는 유채색 — 이 4종이 전부다 [src:12]
lively-red-800-a24: oklch(0.650 0.220 27.9 / 24%) # LivelyRed800A24 — #F94239 24%
cyan-800-a20: oklch(0.641 0.196 254.6 / 20%) # Cyan800A20 — #1D8BFF 20%
neutral-50-a0: oklch(0.970 0 0 / 0%) # Neutral50A0 — #F5F5F5 0%
neutral-10-a0: oklch(0.985 0 0 / 0%) # Neutral10A0 — #FAFAFA 0%
```

### Semantic color

Semantic 레이어는 스스로를 이렇게 규정한다 — "YDS 컴포넌트의 바탕이 되는 Semantic color system입니다. **YDS 컴포넌트는 시멘틱 컬러를 적극적으로 사용하여 제작되어 있습니다**" [src:13]. 컴포넌트가 팔레트를 직접 참조하지 않는 것이 전제다.

alias는 **5개 군 109종**으로 구성된다 [src:13].

- **`Content/` 12종** — Primary · Secondary · Tertiary · Critical · Disabled · Highlighted · Interactive · Placeholder, 그리고 Inverse 계열(Primary/Secondary/Disabled). 텍스트·아이콘 전경색 축이다.
- **`Background/` 37종** — Primary · SecondaryPage · Transparent · InversePrimary(Snackbar) · Table 계열(Header/Hover) · `Input/*` 6종(Normal · Hover · Error · ErrorHover · Disabled · Contrast) · `Overlay/*` 8종(Dark/Light × Primary/Secondary/Tertiary/Inactive) · `Shade/*` 그라디언트군. 입력 필드의 에러·호버 상태가 별도 축이 아니라 배경 토큰으로 잡혀 있다.
- **`Border/` 9종** — Primary · Secondary · PrimaryActivated(Search) · SecondaryActivated(Input) · Selected · Critical · Disabled · Table · InversePrimary. 활성 테두리를 Search용과 Input용으로 나눠 둔 것이 눈에 띈다.
- **`Button/` 20종** — Primary(+Hover) · Secondary(+Hover) · Highlight(+Hover/Outline) · Destructive(+Hover) · Floating 계열(Light/Dark) · BoxSubtle 계열(Default/Blue × Hover/Outline) · Disabled · OutlineDisabled · Transparent · InverseDefaultHover(TextButton). 아래 `## Components`의 Box button 위계가 토큰 레벨에서 그대로 확인된다.
- **`Support/` 31종** — Benefit · Elite · ElitePlus · Favorite · Holiday · Critical · Positive · Neutral · Normal · Adaptive · Asset · Disabled 12개 의미축과 그 `*Alt` 변형이다.

**`Support/` 군이 이 시스템에서 가장 특이하다.** 보통 semantic 레이어에 success/warning/error 정도를 두는 데 반해, YDS는 **혜택(Benefit) · 엘리트 티어(Elite/ElitePlus) · 찜(Favorite) · 휴일(Holiday)** 을 컬러 토큰 이름으로 승격시켰다 [src:13]. 각각이 문서 다른 층에 대응물을 갖는다 — 멤버십 티어는 팔레트의 Membership Violet 램프와 멤버십 로고 자산 [src:12][src:8], 찜은 Price marker의 "찜 상태" 부가 아이콘 [src:34], 휴일은 날짜 표기 규칙 [src:26]이다. 숙박 예약 도메인이 컬러 토큰 이름에까지 내려와 있는 구조이고, 그래서 차용할 때 가장 조심해야 할 지점이기도 하다.

값까지 수집된 것은 `Background/Shade` 그라디언트군뿐이다. 각 토큰은 4방위(TopToDown · DownToTop · RightToLeft · LeftToRight) 변형을 가지며, 값이 팔레트를 hex가 아니라 **이름으로** 참조한다 — semantic이 palette 위에 얹힌 구조가 값 표기에서 직접 확인된다 [src:13]. Background 37종에서 위에 열거한 20종을 빼면 `Shade/*`가 17종이고, 이는 아래 4계열 × 4방위 + 대각 blue 1종과 정확히 맞아떨어진다.

```yaml
# Background/Shade — 4방위 변형 공통 [src:13]
background-shade-dark: NeutralDark48 -> NeutralDark0
background-shade-gray: Neutral50 -> Neutral50A0
background-shade-light-gray: Neutral10 -> Neutral10A0
background-shade-light: Common100 -> NeutralLight0
background-shade-blue-diagonal: Cyan500 -> Cyan800 # LeftTop -> RightBottom
```

`Background/Shade/LightGrayRightToLeft` 한 항목만 원문에 `NeutralDark48 -> NeutralDark0`으로 인쇄돼 있다 — 나머지 3방위와 어긋나므로 원문 오기로 보이나 여기서는 원문 그대로 기록한다 [src:13]. alias 네이밍의 다른 예로 Layout 문서가 `yds-color-alias-background-primary`를 쓴다 [src:18].

나머지 4개 군은 **이름 체계는 공개돼 있으나 개별 alias가 어느 팔레트 토큰을 가리키는지가 이 문서에 값으로 수집되지 않았다** [src:13]. 이름 체계는 그대로 채택하되 매핑은 원문에서 확인해야 한다.

### 팔레트 밖의 색

두 종류의 색이 UI 팔레트와 혼동되기 쉬우므로 분리해 둔다.

첫째, **2D/3D 그래픽 페이지의 램프는 UI 팔레트와 별개의 일러스트 전용 세트**다 [src:21][src:22]. 그래픽 쪽은 램프 이름부터 다르다 — 무채색 램프가 UI의 `Neutral`이 아니라 **`Natural`**이고, 청록·초록이 **`Mint`**와 **`Green`** 두 램프로 갈라져 있다. UI 팔레트에 `Mint`는 없고, 반대로 `Navy`는 UI 팔레트에만 있다. 그래픽 쪽이 더 넓은 단계(300/400/600/700/950 등)를 갖는 것도 차이다.

혼동은 두 층위에서 일어난다.

**(1) 이름이 달라 대응이 안 보이는 경우** — 그래픽 `Natural`과 UI `Neutral`은 이름이 다른 별개 램프인데 값은 거의 같다. 10 `oklch(0.985 0 0)` `#FAFAFA` · 50 `oklch(0.970 0 0)` `#F5F5F5` · 200 `oklch(0.894 0 0)` `#DCDCDC` 세 단계는 값까지 동일하고 100·900만 갈린다. **동명 충돌이 아니라 이름이 다른 쌍둥이**이므로, 토큰명으로 검색해 맞추면 이 관계 자체가 잡히지 않는다.

**(2) 이름이 같은데 값이 다른 경우** — 실측된 동명 충돌은 `Green 800` 하나이고, 차이가 미세하지 않다. UI의 Green 800은 청록에 가깝고 그래픽 Green 800은 순수 초록이다(OKLCH 색상각 172.3° vs 150.3°). UI Green과 값이 실제로 가까운 그래픽 램프는 `Green`이 아니라 **`Mint`**다 — Mint 50 `oklch(0.963 0.018 179.3)` `#E7F7F3` · Mint 100 `oklch(0.941 0.027 179.6)` `#D9F2EC`가 UI `green-50`·`green-100`과 값까지 일치한다 [src:12][src:21][src:22].

| UI 팔레트 [src:12] | UI 값                                | 그래픽 램프 [src:21][src:22] | 그래픽 값                            |
| ------------------ | ------------------------------------ | ---------------------------- | ------------------------------------ |
| `Neutral 100`      | `oklch(0.925 0 0)` `#E6E6E6`         | `Natural N100`               | `oklch(0.940 0 0)` `#EBEBEB`         |
| `Neutral 900`      | `oklch(0.252 0 0)` `#222222`         | `Natural N900`               | `oklch(0.321 0 0)` `#333333`         |
| `Green 800`        | `oklch(0.640 0.124 172.3)` `#01A484` | `Green 800`                  | `oklch(0.495 0.135 150.3)` `#007635` |
| `Green 800`        | `oklch(0.640 0.124 172.3)` `#01A484` | `Mint M800`                  | `oklch(0.653 0.132 168.4)` `#00A981` |

이름 기준으로 매핑하면 UI Green이 그래픽 Green으로 잘못 이어지고, 값 기준으로 보면 UI Green의 상대는 Mint다. 어느 쪽이든 **UI 토큰의 확정값은 UI 팔레트 쪽이며** [src:12], 그래픽 램프는 일러스트 전용이라 프로덕트 토큰으로 승격하지 않는다.

둘째, 로고 자산에 포함된 KAKAO·NAVER·FACEBOOK 마크 색은 제3자 브랜드 색이며 YDS 팔레트 토큰이 아니다 [src:6]. 한국 앱의 소셜 로그인 경로를 시사하는 자산일 뿐이다.

## Typography

**본문 서체는 Pretendard다.** Typography 문서의 Typeface 항목이 "국문, 영문, 숫자 모두 Pretendard 글꼴을 사용합니다"로 명시한다 [src:14]. 한글·영문·숫자를 한 서체에 묶었으므로 숫자 전용 서체를 따로 두지 않는다 — 가격·날짜·인원수가 화면을 채우는 예약 도메인에서 작지 않은 결정이다. Iconography도 같은 서체를 재사용한다 — "폰트를 활용한 아이콘을 제작시에는 Pretendard 서체를 사용하여 표현합니다" [src:19].

조합 규칙이 같은 항목에 붙어 있다 — "시스템에서 서체 및 굵기를 정의하되 디자이너가 자유롭게 조합하여 사용할 수 있습니다. **정의된 스타일 및 서체 외 사용은 금지합니다**" [src:14]. 조합은 열어 두고 서체·웨이트 집합은 닫아 두는 구조다.

```yaml
# 본문·UI 서체 — 국문·영문·숫자 공통 [src:14]
font-sans: >
  "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif
```

문서가 지정한 것은 **Pretendard 한 가지**이며 [src:14], 위 스택에서 그 뒤에 붙은 시스템 폴백은 카탈로그 관례다. Pretendard는 프리뷰 런타임이 이미 로드하므로 별도 `-src`가 필요 없다.

브랜드 전용 서체는 **잘난체**다. Brand 개요가 "로고, 브랜드 컬러, 전용 서체(잘난체) 등 브랜드를 구성하는 요소"로 직접 명시한다 [src:4]. 소유권도 여기어때컴퍼니 본인에게 있고, 공식 배포처가 "㈜여기어때컴퍼니가 소유하고 있습니다"로 못박는다 [src:42]. 라이선스는 무료이며 인쇄물·광고물·상품·CI/BI 등 상업적 사용을 허용하되 **폰트 파일 자체의 수정·재배포는 금지**한다 [src:42]. 자체 한글 서체를 무료 배포해 브랜딩 자산으로 쓰는 한국 IT 기업 관행의 한 사례다.

```yaml
# 브랜드 디스플레이 서체 — 잘난체 [src:4][src:42]
font-display: >
  "YeogiOttaeJalnan", "Pretendard Variable", Pretendard, system-ui, sans-serif
font-display-src: https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff
```

위 `font-display-src`는 **CSS 엔트리포인트가 아니라 raw `.woff`**다 — 공식 배포 패키지에 `.css`가 존재하지 않는다(파일 인덱스로 `JalnanOTF00.woff` 551,228 bytes 실재 및 CSS 부재를 확인) [src:43]. 따라서 다운스트림은 `@import`가 아니라 로컬 `@font-face` 선언(`font-family: 'YeogiOttaeJalnan'`, `format('woff')`)으로 로드해야 한다 [src:42]. Design Library는 잘난체2·잘난고딕 같은 파생 없이 버전 표기 없는 "잘난체"로만 지칭한다 [src:4].

공통 규칙은 세 가지다 [src:14]. **Letter spacing은 "별도값을 지정하지 않습니다"** — 자간 토큰 자체가 없다. Word break는 "기본적으로 텍스트 줄바꿈은 단어 단위(공백, 띄어쓰기 기준)로 줄바꿈"이다. Text decoration은 Underline/Striketrough 2종이고, "두 줄 이상일때는 Multiline 스타일을 사용합니다".

```yaml
# 타입 스케일 — size / weight / line-height [src:14]
display-l: { size: 32px, weight: 700, line-height: 38px } # Bold(700) · Extrabold(800)
display-m: { size: 24px, weight: 700, line-height: 28px } # Bold(700) · Extrabold(800)
display-s: { size: 20px, weight: 700, line-height: 24px } # Bold(700) · Extrabold(800)
title-l: { size: 18px, weight: 700, line-height: 20px } # Bold(700) · Extrabold(800)
title-m-single: { size: 16px, weight: 500, line-height: 19px } # Medium(500) · Bold(700)
title-m-multi: { size: 16px, weight: 500, line-height: 24px } # Medium(500) · Bold(700)
body-l-single: { size: 15px, weight: 400, line-height: 18px } # Regular(400) · Medium(500) · Bold(700)
body-l-multi: { size: 15px, weight: 400, line-height: 18px } # 원문 그대로 — Singleline과 동일값
body-m-single: { size: 14px, weight: 400, line-height: 17px } # Regular(400) · Medium(500) · Bold(700)
body-m-multi: { size: 14px, weight: 400, line-height: 20px }
body-s-single: { size: 13px, weight: 400, line-height: 16px } # Regular(400) · Medium(500) · Bold(700)
body-s-multi: { size: 13px, weight: 400, line-height: 20px }
caption-l-single: { size: 12px, weight: 400, line-height: 14px } # Regular(400) · Medium(500) · Bold(700)
caption-l-multi: { size: 12px, weight: 400, line-height: 16px }
caption-m: { size: 11px, weight: 400, line-height: 13px } # Regular(400) · Medium(500) · Bold(700)
caption-s: { size: 10px, weight: 400, line-height: 12px } # Regular(400) · Medium(500) · Bold(700)
badge: { size: 9px, weight: 600, line-height: 11px } # Semibold(600) · Bold(700)
```

`body-l-multi`가 Singleline과 같은 15px/18px로 인쇄돼 있다 — 다른 Multiline은 전부 행간이 늘어나므로 원문 오기 가능성이 높으나 원문 그대로 기록한다 [src:14].

UI 컨트롤 전용 스케일이 별도로 존재하며, **전 단계가 Semibold(600) 고정**이다 [src:14]. 본문/제목용 스케일과 컨트롤용 스케일을 분리한 뒤 후자의 웨이트를 한 값으로 못박은 것이 이 시스템의 구조적 선택이다.

```yaml
# UI Typo — 전 단계 Semibold(600) 고정 [src:14]
ui-16: { size: 16px, weight: 600, line-height: 19px }
ui-15: { size: 15px, weight: 600, line-height: 18px } # ≈ 라벨이 크롤에서 누락 — 앞뒤 순서상 Singleline으로 추정
ui-15-multi: { size: 15px, weight: 600, line-height: 22px }
ui-14: { size: 14px, weight: 600, line-height: 17px }
ui-13: { size: 13px, weight: 600, line-height: 16px }
ui-12: { size: 12px, weight: 600, line-height: 14px }
ui-11: { size: 11px, weight: 600, line-height: 13px }
ui-10: { size: 10px, weight: 600, line-height: 12px }
```

9px({typography.badge})부터 32px({typography.display-l})까지 내려앉은 조밀한 스케일은 커머스·예약 밀도에 최적화된 신호다 — 데스크톱 히어로급(48~72px) 단계가 아예 없다 [src:14].

**Text decoration 용법**은 도메인이 그대로 드러난다 [src:14]. Underline은 "링크 이동 등의 버튼 레이블에 사용"하되 **본문 강조용으로는 쓰지 않고**, Striketrough는 "가격의 원가"에 쓴다 — 할인 전 가격 표기가 규칙으로 승격된 여행 커머스의 흔적이다.

## Spacing

Spacing은 "기능별로 섹션을 시각적으로 구분하고 시각적 계층을 구분하기위해 사용되는 요소"로 정의되며, Spacing·Grid·Padding Autolayout에 쓰이고 상·하·좌·우에 적용된다 [src:15].

⚠️ **아래 수치는 공개 값이 아니다(≈).** Spacing 페이지는 토큰명만 노출하고 수치 컬럼은 확인되지 않았다 [src:15]. 값은 같은 문서군의 Radius 네이밍 규칙(`yds-radius-02` = 2px [src:16])을 그대로 적용해 `yds-spacing-NN` = NN px로 읽은 유추다. 토큰명 자체와 Core size 지정은 공개 근거다. 같은 취지의 주석을 **토큰 줄마다** 달아 두었다 — 이 문서에서 파생되는 토큰 카드·사이드카가 값만 떼어 가더라도 추정 표시가 함께 따라가도록 한 것이다.

```yaml
# ≈ 유추값 — 토큰명·Core size 지정만 공개, 수치는 Radius 네이밍 규칙에서 역산 [src:15][src:16]
yds-spacing-02: 2px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-04: 4px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-08: 8px # Core size · ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-10: 10px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-12: 12px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-14: 14px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-16: 16px # Core size · ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-20: 20px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-24: 24px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-28: 28px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-32: 32px # Core size · ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-36: 36px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-40: 40px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-48: 48px # Core size · ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-56: 56px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-64: 64px # Core size · ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
yds-spacing-96: 96px # ≈ 추정 — 수치 미공개, yds-radius 네이밍 규칙에서 역산
```

17단 사다리 중 문서가 **Core size로 표기한 것은 08 / 16 / 32 / 48 / 64 다섯 개뿐**이다 [src:15]. 중요한 것은 이 사다리가 4의 배수 일변도가 아니라는 점이다 — 10 · 14 · 20 · 28 · 36이 나란히 들어 있으므로 **8pt grid 시스템으로 단정하면 오류**다. 기반은 2px다.

레이아웃 여백은 별도로 값이 공개돼 있다 [src:18]:

- **기본 화면 좌우 여백 = 20px** ({spacing.yds-spacing-20})
- **모듈 타입 좌우 여백 = 10px** ({spacing.yds-spacing-10})
- 모듈 포함 섹션 — 좌우 10px + 하단 여백 12px ({spacing.yds-spacing-12})

## Rounded

"컴포넌트에 적용되는 Radius 스타일 정의입니다. **모든 컴포넌트는 아래 Radius 스타일 값 안에서 적용됩니다.**" [src:16] 즉 임의 라운드는 시스템 밖이며, 아래 9종이 닫힌 집합이다.

```yaml
# yds-radius — 값 공개 [src:16]
yds-radius-02: 2px
yds-radius-03: 3px
yds-radius-04: 4px
yds-radius-08: 8px # Core size
yds-radius-10: 10px
yds-radius-12: 12px # Core size
yds-radius-16: 16px
yds-radius-20: 20px # Core size
yds-radius-half: 50%
```

Core size는 08 / 12 / 20 세 개다 [src:16]. 최대 고정값이 20px이고 그 위는 곧바로 {rounded.yds-radius-half}(50%)로 건너뛴다 — **과하게 둥글지 않은 중간 라운드** 성향에, pill·원형은 별도 토큰으로 처리하는 구조다. 실사용 값도 이 범위 안에 있다: Module Container가 {rounded.yds-radius-20}, 모듈과 이어지는 섹션의 상단이 {rounded.yds-radius-16}이다 [src:18].

## Elevation & Depth

그림자 토큰이 **elevation 숫자가 아니라 역할 이름**으로 정의된다 — `flat`/`header`/`dock`/`raised`/`float`/`sheet` 6종이며, 토큰 헤더가 iOS·Android·Web 공통임을 명시한다 [src:17]. 색은 전부 Neutral dark 불투명도 토큰을 이름으로 참조한다 [src:17][src:12].

```yaml
# X / Y / Blur / Color — iOS·Android·Web 공통 [src:17]
yds-shadow-flat: 0 1px 2px oklch(0 0 0 / 6%) # NeutralDark6
yds-shadow-header: 0 4px 6px oklch(0 0 0 / 4%) # NeutralDark4
yds-shadow-dock: 0 -4px 8px oklch(0 0 0 / 6%) # NeutralDark6 — Y가 음수
yds-shadow-raised: 0 2px 16px oklch(0 0 0 / 8%) # NeutralDark8
yds-shadow-float: 0 2px 8px oklch(0 0 0 / 24%) # NeutralDark24
yds-shadow-sheet: 0 4px 20px oklch(0 0 0 / 32%) # NeutralDark32
```

깊이 언어는 얕고 절제되어 있다. 최대 blur가 20이고 알파도 4~32% 범위에 머문다 [src:17]. 위계를 만드는 축은 blur가 아니라 **역할**이며, **6종 전부에 배치 규칙이 문장으로 문서화되어 있다** [src:17]. 어느 표면에 무엇을 쓸지가 수치가 아니라 용법으로 확정되는 시스템이다.

- **{elevation.yds-shadow-flat}** — "Card 형태로 그룹핑된 UI가 반복적으로 가로 또는 세로로 나열될 경우 사용할 수 있습니다" · "Container와 배경의 구분을 **보조**하는 용도로 사용할 수 있습니다". 단, "가장 약한 Level의 Shadow이기 때문에 단독 사용으로 UI를 강조하는 역할을 수행할 수 없습니다" — 강조 금지가 토큰 정의 자체에 박혀 있다.
- **{elevation.yds-shadow-header}** — 유일한 스크롤 연동 토큰이다. "스크린 스크롤 시점이 (Header container height)px 이상부터, Header Container 하단에 Shadow/Header가 노출됩니다. ex) TopNavigation이 있는 경우 스크린 시점 56px 이상 시, Shadow/Header 적용". Header Container에는 "TopNavigation, Tab 또는 Filter와 같은 해당 페이지 전체에 영향을 주는 요소"가 포함될 수 있다.
- **{elevation.yds-shadow-dock}** — "Buttondock에 사용되는 Shadow입니다" · "AndroidNavBar와 자연스럽게 연결되도록 **상단에만** 섀도우가 적용된 타입입니다". Y가 -4인 이유가 여기서 확정된다 — 하단 고정 바가 위로만 그림자를 던져 안드로이드 내비게이션 바와 이어붙는 구조이며, 하단 CTA 바를 전제한 설계를 그대로 노출한다.
- **{elevation.yds-shadow-raised}** — "가장 범용적인 Shadow로 특정 UI(ex. Dialog)를 강조하기 위해 사용할 수 있습니다" · Card 나열 · "Card UI가 Interactive한 요소임(ex.영역 전체가 Touch Area)을 표현" · "Container와 배경의 구분을 **강화**하는 용도". flat과 Card 맥락을 공유하되 flat이 '보조', raised가 '강화'로 갈린다 — 카드가 통째로 탭 영역이면 raised다.
- **{elevation.yds-shadow-float}** — "FAB에 적용된 Shadow로 스크롤과 무관하게 특정 UI가 고정되는 경우에 사용합니다" · "Button이 포함된 CTA 영역을 강조하는 데 도움을 줄 수 있습니다".
- **{elevation.yds-shadow-sheet}** — "BottomSheet와 함께 사용합니다" · "YDS에 포함된 Shadow 스타일 중 **가장 큰 강조 역할**을 수행합니다".

크롬용 두 토큰(header 4% · dock 6%)이 거의 보이지 않을 만큼 얕고, float(24%)·sheet(32%)만 확실히 떠오르는 배분이다 [src:17]. 문서가 문장으로 명시한 양 끝은 flat("가장 약한 Level")과 sheet("가장 큰 강조")이며, 그 사이 순서는 명시돼 있지 않으므로 알파·blur로 읽어야 한다.

## Shapes

시각 언어의 자기 규정은 한 문장으로 압축된다 — "여기어때 그래픽은 **선과 원 같은 기본 도형에서 도출된 형태**를 바탕으로, 심플하면서도 개성 있는 디자인을 구현합니다. **리듬감 있는 구성과 따뜻한 시각 요소**로 사용자에게 친근하고 즐거운 경험을 제공합니다." [src:20] 즉 **기하학 기반 + 따뜻한 톤**의 조합이며, 랜딩이 이를 "A Visual Language for Travel"로 부른다 [src:1].

그래픽은 **2D / 3D 두 타입으로 역할이 분리**된다 [src:20]. 2D는 "여기어때의 그래픽 아이덴티티를 가장 직접적으로 반영하며, 프로덕트 내 직관적인 정보 전달을 목적"으로 하고 주로 기능적 맥락에 쓴다. 3D는 "2D 그래픽을 기반으로 확장된 형태"로 **브랜딩·프로모션·캠페인 같은 감성적 맥락**에 쓰며 현실감과 깊이를 더한다. **프로덕트=2D, 캠페인=3D**라는 이 이원 구조가 일러스트 사용 규칙의 축이다. 그래픽 카테고리도 전부 여행 도메인으로 고정된다 — Travel · Payment & Benefit · Landmark · Flight · Vehicle · Food · Animal & Nature · Building · Object [src:20]. 적용 사례는 별도 Showcase 페이지에 전시된다 [src:23].

아이콘 조형이 이 시스템에서 규칙이 가장 촘촘한 영역이다 [src:19].

- **Solid(면) 기본** — "YDS에서는 Solid(면)아이콘을 기본으로 사용합니다." 라인 아이콘 중심 시스템과 갈리는 지점이다.
- **Grid 20×20px**, 상하좌우 2px padding 포함 — 아이콘은 padding을 제외한 영역 안에 그린다.
- 부득이한 Line 형태의 **Stroke 기본 2px**, "Stroke의 outline이 픽셀에 물리도록 제작하는 것을 권장". 면 안 묘사선은 **1.5px**.
- **비대칭 라운딩이 조형 시그니처** — "형태가 바닥에 닿는 밑 부분의 각은 직선형태로, 상단을 바라보고 있는 윗 부분의 각은 곡선형으로 표현합니다." 아래는 각지고 위는 둥글다.
- **곡선은 정원만** — "가로 세로 비율이 동일한 정원을 활용하여 표현합니다. 정원이 아닌 자유곡선을 활용한 표현은 지양합니다." 유기적 blob은 어휘 밖이다.
- Arrow는 2px Line + 화살표 코 각에 라운드.

네이밍도 규칙화되어 있다. 아이콘은 "동사 대신 명사"이며 대치되는 아이콘은 `_no`를 붙인다(`icn_yds_picture` / `icn_yds_no_picture`) [src:19]. 그래픽은 `Object/graphic_yds_picture_2d` 형식이나, 같은 페이지의 반응형 변형본에 `Object/graphic_yds_2d_picture` 순서로도 인쇄돼 있어 어순이 문서 내에서 일관되지 않다 [src:20].

로고 실루엣은 **가로형 워드마크 단일 체계**다 — BI·CI·멤버십·캠페인 자산 팩 전부가 워드마크이고, 정사각 심볼/마크는 존재하지 않는다 [src:6][src:7][src:8][src:10].

## Components

**공개된 컴포넌트는 단 3종이고, 그나마 spec은 전부 로그인 게이트 뒤에 있다.** Components 개요 자체가 미완성을 공지한다 — "More components are coming soon / 다양한 컴포넌트가 곧 공개됩니다" [src:28]. Box button·Search bar·Price marker의 `spec` 페이지는 "여기어때 컴퍼니 임직원만 접근할 수 있는 콘텐츠입니다"로 막혀 있으므로 [src:38][src:39][src:40], **치수·상태별 색·컴포넌트별 토큰값은 이 문서에 없다.** 아래는 전부 공개된 `usage`·`content` 페이지 근거이며, 없는 스펙은 추론하지 않고 비워 둔다.

Button은 "사용자가 클릭 또는 탭을 통해 특정 작업을 수행하도록 트리거하는 기본 UI 요소"로 정의되고, 변종은 **Box button · Box subtle button · FAB(Floating Action Button) · Icon button · Text button** 5종이다 [src:29]. 아이콘 규칙은 변종 공통이다 — Prefix icon은 "버튼 텍스트의 의미를 직관적으로 보조"하되 "버튼의 의미를 모호하게 만드는 아이콘은 사용을 금지"하고, **Suffix icon은 "Arrow 계열만 가능"**하며 이동·확장·상세 보기를 의미할 때 배치한다 [src:29]. 사이즈는 XLarge / Large / Medium / Small 4종이 존재한다 [src:30].

> 아래 `tsx`는 공개 문서의 위계·타입·상태 명칭을 옮긴 **예시 형태**다. YDS는 코드 API를 공개하지 않으므로(spec 로그인 게이트 [src:38]) 프롭 이름은 벤더의 실제 API가 아니다.

### box-button-primary

"플로우 내 핵심 행동을 유도하는 메인 버튼으로 가장 높은 우선순위를 가집니다." 결제·신청·등록 등 최종 액션에 쓰며, 공개 용례는 PDP·IDP의 "예약하기", 로그인 페이지의 "로그인", 필터 설정의 "적용"이다 [src:31]. 카피 예시는 "N원 결제하기" · "객실 선택" · "대실 예약, 숙박 예약" · "구매하기" · "선택, 적용" [src:32]. 필 색·치수는 공개돼 있지 않다 [src:31][src:38].

```tsx
<BoxButton hierarchy="primary" size="xlarge" suffixIcon="arrow">
  32,000원 결제하기
</BoxButton>
```

### box-button-secondary

"Primary 버튼을 보조하며, 상대적으로 덜 중요한 행동을 제공하기 위해 사용합니다." 다이얼로그의 "닫기", 부가적 액션("자세히 보기")이 공개 용례다 [src:31]. 카피 예시는 "취소" · "닫기" · "예약번호 복사" · "다시 예약" · "숙소 상세" [src:32].

### box-button-highlight

"Primary보다 중요도는 낮지만 반드시 진행해야 하는 기본 행동을 강조하기 위해 사용합니다." 리뷰 작성의 "사진 첨부", 필수 보조 액션에 쓴다 [src:31]. 카피 예시는 "쿠폰 받기" · "사진 첨부" [src:32].

제약이 하나 붙는데 이것이 YDS 고유 규칙이다 — **"단독 사용만 허용(그룹 배치 불가)"** [src:31]. 다른 버튼과 나란히 놓을 수 없다.

### box-button-destructive-primary

"사용자 데이터에 큰 영향을 미치거나 되돌릴 수 없는 작업에 사용합니다." — "예약 취소", "계정 삭제" 같은 치명적 행동이다 [src:31]. 카피 예시는 "예약 취소" · "환불 요청" · "리뷰 삭제" [src:32].

### box-button-destructive-secondary

"Destructive Primary 버튼을 보조하며, 국소적/부분적으로 파괴적 영향을 주는 작업에 사용합니다." 특정 항목만 삭제하는 맥락이며, 공개 용례는 "선택 항목 삭제" · "탑승객 일부 취소"다 [src:31]. 전체 취소(Destructive Primary)와 부분 취소(Destructive Secondary)를 위계로 갈라 놓은 것이 예약 도메인의 흔적이다.

### box-subtle-button

Button 변종 5종 중 하나로 이름과 존재만 공개되어 있다 [src:29]. 위계 표는 Box button 기준으로만 제공되고 [src:31], 이 변종의 전용 spec 페이지는 공개 문서 목록에 없다 — 위계·치수·색은 공개 근거가 없다. 다만 semantic 레이어에 `Button/BoxSubtle` 계열(Default/Blue × Hover/Outline) 토큰이 존재하므로 Default와 Blue 두 갈래가 있다는 것까지는 확인된다 [src:13].

### fab

Floating Action Button. Button 개요에 변종으로 이름만 공개되며 [src:29], FAB 전용 spec 페이지는 공개 문서 목록에 없다 — 배치·치수·색은 공개 근거가 없다. 그림자만은 확정되어 있다 — {elevation.yds-shadow-float}가 "FAB에 적용된 Shadow"로 명시된다 [src:17].

### icon-button

Button 개요에 변종으로 이름만 공개된다 [src:29]. "아이콘만으로 구성된 버튼"이라는 뜻풀이는 이름에서 읽은 카탈로그 편의 표기(≈)이며 문서가 인쇄한 정의가 아니다 — 라벨 유무·치수·색은 공개 근거가 없다. 아이콘 조형 규칙 자체는 YDS 전역 규칙으로 공개돼 있다 — Solid(면) 기본, 20×20px 그리드다 [src:19].

### text-button

Button 개요에 변종으로 이름만 공개된다 [src:29]. "필 없이 텍스트만 노출하는 버튼"이라는 뜻풀이도 마찬가지로 카탈로그 편의 표기(≈)다. 인접해 공개된 규칙은 Typography의 Underline 용법뿐이다 — "링크 이동 등의 버튼 레이블에 사용"하되 본문 강조용으로는 쓰지 않는다 [src:14]. semantic 레이어에는 `Button/InverseDefaultHover`가 TextButton 용도로 존재한다 [src:13].

### search-bar

검색 진입의 기본 컨트롤이며, 공개된 것은 상태 전이와 입력 규약이다 [src:33].

- **Activate** — "Focused 상태에서는 Search Bar가 활성화 상태로 변화하며, 커서와 키보드를 노출합니다. 입력하는 정보에 맞춰 하단 Suggestion 콘텐츠가 변화합니다."
- **Text field** — Placeholder text("사용자가 검색할 수 있는 내용을 간략히 안내")에서 Input text로 이어지고, "사용자의 입력값에 따라 하단 영역에 해당 정보와 일치하는 텍스트가 Highlight 되어 노출됩니다".
- **Keyboard** — "입력될 데이터에 맞는 키보드를 제공"하며 한글·영문 데이터에 맞춰 전환하되, **"입력될 데이터 유형을 알 수 없는 경우에는 한글 키보드를 기본으로 노출합니다."**

마이크로카피 실물은 "지역, 지하철, 숙소로 검색"이다 [src:27]. 치수·상태별 토큰값은 게이트 뒤이나 [src:39], 활성 테두리만은 semantic에 `Border/PrimaryActivated`가 Search용으로 따로 잡혀 있다 [src:13].

### price-marker

**여행·숙박 도메인 시그니처 컴포넌트.** "Price marker는 숙소의 가격 정보를 지도에 제공할 때 사용되는 컴포넌트입니다." [src:34]

타입은 3종이다 [src:34]: `Normal`("기본적으로 사용하는 마커입니다"), 광고 숙소용 마커("광고 숙소에 사용하는 마커입니다"), `Low rank`("판매 랭킹 하위 숙소에 사용하는 마커입니다"). 광고형은 공개 문서가 영문 토큰명을 노출하지 않으므로 아래 예시의 `ad`는 카탈로그 편의 표기(≈)이며 벤더 명칭이 아니다.

용례도 도메인이 그대로 드러난다 [src:34]: "주변 숙소 가격 안내", "예약 마감된 숙소 안내 — 선택한 숙소가 예약 마감된 경우 **'판매 완료'** 상태로 안내합니다", "아이콘을 활용한 부가 정보 제공 — 케이스에 따라 가격 전·후에 아이콘을 배치해 **최저가 보장, 찜 상태** 등의 추가 정보를 안내".

```tsx
<PriceMarker type="normal" state="default" price={32000} />
<PriceMarker type="ad" state="isViewed" price={45000} />
<PriceMarker type="lowRank" state="selected" price={28000} />
```

치수·색은 공개돼 있지 않다 [src:40].

### price-marker-is-viewed

"이미 확인한 숙소에 표시되는 마커"다 [src:34]. **열람 이력을 마커 상태로 토큰화한 것**이 한국 숙박 플랫폼 지도 UX의 특징이다 — 마커가 다수 공존하는 지도 탐색에서 이미 본 숙소를 구분하기 위한 상태다. 시각 처리(색·투명도)는 공개돼 있지 않으며 [src:40], 팔레트 규칙상 임의 알파 감쇠로 이 상태를 만드는 것은 허용되지 않는다 [src:12].

### price-marker-selected

"사용자가 선택한 숙소에 표시되는 마커"다 [src:34]. Default · Is Viewed · Selected 3상태가 지도 위에서 동시에 공존하는 구조이므로 세 상태는 서로 구분 가능해야 한다. 구체 토큰 매핑은 게이트 뒤다 [src:40].

### module-container

컴포넌트 섹션 밖의 Layout 패턴이지만 **토큰값이 공개된 유일한 컨테이너**라 실용 가치가 높다 [src:18].

"YDS 6.0에서는 기본 화면 타입 외 **Jobs To Be Done** 항목 강조가 필요할 경우, 페이지 최상단에 모듈 타입의 컨테이너를 생성할 수 있습니다." · "모듈은 화면 내 Jobs To Be Done을 강조할 수 있으며, **페이지 최상단(ATF) 영역**에 위치합니다." [src:18]

공개 스펙 [src:18]:

- Radius — {rounded.yds-radius-20}
- Background color — `yds-color-alias-background-primary`
- Shadow — {elevation.yds-shadow-flat}
- Width — `(Screen width)-20px`

배치 규칙은 "모듈을 사용할때는 페이지 배경색은 Semantic/Background/Secondary, 모듈 컨테이너의 배경색은 Semantic/Background/Primary로 지정합니다"이며(원문은 `Sementic`/`Bacground` 오타), 모듈 포함 섹션은 좌우 10px·하단 12px, 이어지는 섹션은 상단 {rounded.yds-radius-16}을 갖는다 [src:18]. Shadow가 {elevation.yds-shadow-flat}인 것은 그 토큰의 용법("Container와 배경의 구분을 보조")과 정확히 맞물린다 [src:17].

## Do's and Don'ts

**Do**

- 강조는 {colors.lively-red-800}으로 수렴시킨다 — primary 램프의 이름(Lively red)이 코어 밸류 Lively와 맞물린 시스템이다 [src:12][src:3].
- 팔레트는 semantic을 거쳐 참조한다 — "YDS 컴포넌트는 시멘틱 컬러를 적극적으로 사용하여 제작되어 있습니다"가 semantic 레이어의 자기 규정이고 [src:13], 실제로 semantic 토큰은 hex가 아니라 `Neutral50A0`·`NeutralDark48` 같은 **팔레트 이름**을 값으로 갖는다 [src:12][src:13].
- 상태·의미 색은 팔레트가 아니라 `Support/` 축에서 고른다 — 팔레트에는 Green/Cyan/Yellow라는 색 이름만 있고, Positive·Critical·Neutral 같은 역할 이름은 semantic 레이어에 있다 [src:13][src:12].
- 표면 위계는 blur가 아니라 **역할명 그림자**로 고른다 — 크롬 상단은 {elevation.yds-shadow-header}(스크롤 임계 이후 노출), 하단 고정 바는 {elevation.yds-shadow-dock}, 카드·다이얼로그는 {elevation.yds-shadow-raised}, FAB·고정 CTA는 {elevation.yds-shadow-float}, 바텀시트는 {elevation.yds-shadow-sheet}, 단순 구분 보조는 {elevation.yds-shadow-flat}이다 [src:17].
- 컨트롤 텍스트에는 UI Typo 스케일을 쓴다 — {typography.ui-14}·{typography.ui-13}처럼 Semibold(600) 고정 단계가 본문 스케일과 분리되어 있다 [src:14].
- 버튼 카피는 "순수 명사 종결"을 지향하고, 여러 버튼을 나열할 때 어미를 혼용하지 않는다 [src:30]. **결제만은 예외로 항상 "결제하기"** — "사용자가 안심하고 버튼을 누를 수 있도록" [src:30].
- 버튼 글자 수를 지킨다 — XLarge·Large 최대 16자, Medium·Small 최대 8자(띄어쓰기 포함), 허용 특수문자는 쉼표(,)·쌍점(:)·가운뎃점(・)·붙임표(-)·빗금(/)뿐이다 [src:30].
- 에러 상황에는 '합니다'체 대신 **'해요'체**를 쓴다 — "불필요한 거리감을 줄이고 친근하고 부드럽게 안내" [src:25]. 실제 문장 톤은 "동시 접속자가 많아 지연되고 있어요 / 잠시 후 다시 시도해주세요" 수준이다 [src:27].
- 날짜·시간은 한국식 규칙을 따른다 — 월/일 0 생략(`2025.1.1 월`), 요일 괄호 금지, **박수는 괄호**(`2.3 화 - 2.4 수 (2박)`), 날짜 범위는 하이픈·시간 범위는 물결표, 익일은 `새벽 3시`처럼 시간 명사로, 24시간제에 `00시(자정)`·`12시(정오)` [src:26].
- 나열 구분자를 구분해 쓴다 — 속성은 가운뎃점(`블랙・5성급・호텔`), 카운트는 파이프(`리뷰 2 | 사진 15 | 장소 2`), 지역은 빗금 붙여쓰기(`서초/신사/방배`), 구 명칭은 후치(`신신호텔 제주시티(구. 제주 샹그릴라 호텔앤리조트)`) [src:27].
- 입력 유형을 알 수 없으면 **한글 키보드를 기본**으로 노출한다 [src:33].
- 일러스트는 맥락으로 가른다 — 프로덕트 내 정보 전달은 2D, 브랜딩·프로모션·캠페인은 3D다 [src:20].

**Don't**

- **팔레트 색의 불투명도를 임의로 조정하지 않는다.** "Neutral light, Neutral dark를 제외한 팔레트 색상의 불투명도 조정이 허용되지 않습니다" — 유채색 알파는 {colors.lively-red-800-a24}·{colors.cyan-800-a20}·{colors.neutral-50-a0}·{colors.neutral-10-a0} **4종 화이트리스트가 전부**다 [src:12]. 새 알파가 필요하면 값을 만드는 게 아니라 토큰을 추가하는 체계다.
- 브랜드 레드와 UI primary를 뭉개지 않는다 — Yeogi Red `#F7323F`(`oklch(0.635 0.229 23.9)`)는 로고·인쇄용 마스터브랜드 색이고, 프로덕트 CTA는 Lively red 800 `#F94239`(`oklch(0.650 0.220 27.9)`)다 [src:5][src:12].
- **UI 팔레트와 그래픽 램프를 합치지 않는다** — 동명 충돌은 `Green 800` 1건이고(UI `oklch(0.640 0.124 172.3)` `#01A484` vs 그래픽 `oklch(0.495 0.135 150.3)` `#007635`), 무채색은 아예 이름이 `Neutral`(UI) ↔ `Natural`(그래픽)으로 갈린다. 값이 UI Green에 가까운 그래픽 램프는 `Green`이 아니라 `Mint`이므로 **이름으로 매핑하면 틀린다**. 그래픽 램프는 일러스트 전용이다 [src:12][src:21][src:22].
- 소셜 로그인 마크 색(KAKAO·NAVER·FACEBOOK)을 팔레트 토큰으로 승격하지 않는다 — 제3자 브랜드 색이다 [src:6].
- **정의된 스타일·서체 밖으로 나가지 않는다** — "시스템에서 서체 및 굵기를 정의하되 디자이너가 자유롭게 조합하여 사용할 수 있습니다. 정의된 스타일 및 서체 외 사용은 금지합니다"가 원문이다 [src:14]. 조합은 자유, 집합은 폐쇄다.
- **{elevation.yds-shadow-flat}만으로 UI를 강조하지 않는다** — "가장 약한 Level의 Shadow이기 때문에 단독 사용으로 UI를 강조하는 역할을 수행할 수 없습니다"가 토큰 정의에 명시돼 있다. 강조가 필요하면 {elevation.yds-shadow-raised} 이상으로 올린다 [src:17].
- **Suffix icon에 Arrow 계열 외 아이콘을 넣지 않는다** [src:29]. Prefix icon도 "버튼의 의미를 모호하게 만드는 아이콘은 사용을 금지"다 [src:29].
- **Highlight 버튼을 그룹으로 배치하지 않는다** — 단독 사용만 허용된다 [src:31].
- Underline을 본문 강조에 쓰지 않는다 — 링크 이동 등 버튼 레이블 전용이며, 취소선은 "가격의 원가"에 한정된다 [src:14].
- letter-spacing 토큰을 만들지 않는다 — "별도값을 지정하지 않습니다"가 공식 규칙이다 [src:14].
- **8pt grid로 단정하지 않는다** — 사다리에 10·14·20·28·36이 들어 있는 2px 기반 체계다 [src:15].
- Radius 스케일 밖의 임의 값을 쓰지 않는다 — "모든 컴포넌트는 아래 Radius 스타일 값 안에서 적용됩니다" [src:16].
- 아이콘에 자유곡선을 쓰지 않는다 — "정원이 아닌 자유곡선을 활용한 표현은 지양합니다"이며, 라인이 아니라 Solid(면)가 기본이다 [src:19].
- 지시형 말투("연락하세요")를 쓰지 않고, 확신할 수 없는 표현("안심하세요", "빠르게 환불해드릴게요")도 쓰지 않는다 — 대신 소요 기간을 정확히 안내한다 [src:25]. 축하·환영에서도 "과장되고 감정이 과한 표현"은 부담을 주고 신뢰를 떨어뜨린다 [src:25].
- 혜택 취득에 "다운로드"를 쓰지 않는다 — "'다운로드'는 파일을 로컬 기기에 저장하는 행위에 가까워, 쿠폰이나 포인트 등 혜택 맥락에는 적합하지 않습니다"이며 "받기"가 맞다 [src:32].
- **(도메인 경계)** 여기어때의 도메인 개념 — **대실/숙박 예약**이라는 한국 숙박 시장 고유 상품 구분, 지도 위 광고 마커·판매 랭킹 하위 마커·열람 이력 마커, "판매 완료"·"최저가 보장"·"찜" 같은 재고/혜택 어휘, 예약 취소·환불 요청 플로우, 엘리트 시리즈 멤버십 티어, semantic `Support/` 축에 새겨진 Benefit·Elite·ElitePlus·Favorite·Holiday 같은 도메인 의미축, 파트너센터라는 공급자 표면 — 을 그대로 가져오지 않는다. 차용할 것은 Lively red 단일 악센트, 9~32px 조밀 스케일과 UI Typo 분리, 역할명 그림자, Solid 아이콘의 비대칭 라운딩이라는 **시각 언어**이지 숙박 예약 플랫폼의 제품 개념·흐름·카피가 아니다.
- **(벤더 중립)** "YDS"/"Yeogi Design System"/"여기어때 Design Library" 워드마크, `yds-*` 토큰 prefix(`yds-radius-*`·`yds-spacing-*`·`yds-shadow-*`·`yds-color-alias-*`), `icn_yds_*`·`graphic_yds_*` 자산 네이밍을 생성하는 제품 UI의 카피·헤더·타이틀·라벨·클래스명에 넣지 않는다 — 차용할 것은 시각 언어이지 시스템 이름이 아니다.

## Responsive Behavior

### Breakpoints

`(no published breakpoint system surfaced)` — 39페이지 문서 전수와 직접 재fetch 어디에서도 breakpoint 수치가 공개되지 않는다. 확인되는 유일한 폭 규칙은 **유동 폭**이다: Module Container 스펙이 고정 px이 아니라 `Width = (Screen width)-20px`로 정의된다 [src:18].

| 구간          | 폭          | Key Changes                                                                                                                                  |
| ------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| 기본 화면     | 전 폭 유동  | 좌우 공통 여백 20px 고정, 콘텐츠는 화면폭에 종속 [src:18]                                                                                    |
| 모듈 타입     | 전 폭 유동  | {component.module-container} 폭 = `(Screen width)-20px`, 모듈 좌우 여백 10px, 하단 12px, 이어지는 섹션 상단 {rounded.yds-radius-16} [src:18] |
| 표면 분기     | 폭 무관     | 분기 축이 폭이 아니라 **표면**이다 — 여기어때 APP/WEB ↔ 파트너센터 [src:25]                                                                  |
| 데스크톱 다열 | (근거 없음) | 타입 스케일 상한이 32px({typography.display-l})로 히어로급 단계가 없고 [src:14], 플랫폼 배지는 iOS/Android 중심이다 [src:15][src:16]         |

플랫폼 신호는 모바일·네이티브 우선을 가리킨다. Radius·Spacing·Button·Price marker 문서 상단에 `Develop / iOS: DONE / Android: DONE` 배지가 붙고 Web은 이 배지에 없다 [src:16][src:15][src:29][src:34]. 다만 **Shadow 토큰만 iOS/Android/Web 3플랫폼 공통**으로 표기되므로 웹도 대상 표면이긴 하다 [src:17].

> 다운스트림 프리뷰가 375/768/976/1440 같은 breakpoint를 쓴다면 그것은 **카탈로그 프리뷰 가드 요구사항이지 브랜드 근거가 아니다** — YDS는 어떤 임계 폭도 공개하지 않는다.

### Touch Targets

`(공개된 터치 타깃 수치 없음)` — 버튼 사이즈 토큰과 최소 탭 영역은 spec 페이지에 있을 것으로 보이나 로그인 게이트다 [src:38]. 확인되는 것은 사이즈 4종(XLarge / Large / Medium / Small)의 존재뿐이다 [src:30]. 터치 인터랙션 전제는 문서에 남아 있다 — {elevation.yds-shadow-raised} 지침이 "Card UI가 Interactive한 요소임(ex.영역 전체가 Touch Area)"을 언급하고 [src:17], Search bar가 커서·키보드 노출을 다룬다 [src:33]. 다운스트림은 플랫폼 관례(44×44px 상당)를 적용하는 것이 안전하다.

### Collapsing & Image Behavior

- {component.module-container}: 폭 분기 없이 `(Screen width)-20px`로 늘고 준다 — 이 시스템의 유일한 공개 반응형 폭 규칙이다 [src:18].
- 스크롤 임계는 하나 공개돼 있다 — {elevation.yds-shadow-header}는 스크롤 오프셋이 Header container 높이 이상일 때 노출되며, TopNavigation이 있는 화면의 예시 값이 56px이다 [src:17]. **폭이 아니라 스크롤 위치로 분기하는** 유일한 규칙이다.
- {component.price-marker}: 지도 위 마커이므로 폭이 아니라 지도 줌·밀도가 배치 변수다. 리플로우 규칙은 공개돼 있지 않다 [src:34][src:40].
- 로고 축소 하한은 유일하게 수치가 있다 — BI는 On Screen 높이 **20px**(인쇄 4mm) [src:6], CI는 On Screen 높이 **32px**(인쇄 5mm) [src:7].
- 스크린샷 입력이 없어 단일 뷰포트조차 실측 대조하지 못했다 — 위 항목은 전부 문서 근거이며 관찰 근거가 아니다.

## Known Gaps

- **컴포넌트 spec이 전부 로그인 게이트 뒤다** [src:38][src:39][src:40]. 치수·상태별 색·컴포넌트별 토큰 매핑은 소비자가 직접 정해야 한다. Expressions 섹션도 "Expressions are coming soon" 상태의 빈 껍데기이며 [src:35], Components 개요도 미완성을 공지한다 [src:28].
- **Semantic alias의 팔레트 매핑 값이 이 문서에 없다.** 이름 체계는 5군 109종으로 공개돼 있으나 [src:13], 값까지 수집된 것은 `Background/Shade` 그라디언트군뿐이다. `Content/`·`Border/`·`Button/`·`Support/`의 각 alias가 어느 팔레트 토큰을 가리키는지는 원문에서 확인해야 한다.
- **Spacing 수치가 미공개다** — 토큰명과 Core size 지정만 확인되고, 이 문서의 px 값은 Radius 네이밍 규칙에서 역산한 유추다 [src:15][src:16]. Neutral 램프도 다른 램프와 달리 직접 렌더 측정 단독 근거다 [src:12].
- **breakpoint 수치가 어디에도 없다** — 39페이지 전수와 재fetch 어디에서도 임계 폭이 공개되지 않는다. 확인되는 폭 규칙은 `(Screen width)-20px`라는 유동 폭 하나뿐이고 [src:18], 임계값이 있는 것은 스크롤 축의 Shadow/Header뿐이다 [src:17].
- **자산 이용 약관을 확인할 수 없다.** `resources/asset-policy`는 로그인 게이트이고 [src:37], 푸터의 이용약관 링크는 404이며, 공개된 것은 "Copyright © GC COMPANY Corp. All rights reserved."뿐이다 [src:36]. **어떤 허용적 라이선스도 확인되지 않았다** — 로고·그래픽 자산의 재사용 권리를 가정하지 말 것. 단, 잘난체만은 배포 조건이 별도로 공개돼 있다 [src:42].

## References

1. https://designlibrary.yeogi.com/ — 여기어때 Design Library 랜딩("A Visual Language for Travel" 그래픽 시스템 정의)
2. https://designlibrary.yeogi.com/about/mission/ — Mission(디자인 컴포넌트·그래픽·보이스 앤 톤의 단일 시스템 통합 선언)
3. https://designlibrary.yeogi.com/about/core-value/ — Core value(Simple·Scalable·Lively 정의)
4. https://designlibrary.yeogi.com/brand/overview/ — Brand 개요(전용 서체 잘난체 명시·Brand 하위 구성)
5. https://designlibrary.yeogi.com/brand/color/ — 브랜드 컬러(Yeogi Red·Pantone Red 032 C·CMYK/RGB 스펙)
6. https://designlibrary.yeogi.com/brand/logo/bi/ — BI(가로형 워드마크 자산 팩·On Screen 최소 높이 20px·jp 버전·소셜 로그인 마크)
7. https://designlibrary.yeogi.com/brand/logo/ci/ — CI(법인 아이덴티티·On Screen 최소 높이 32px·영문 버전)
8. https://designlibrary.yeogi.com/brand/logo/membership/ — 멤버십 로고(엘리트 시리즈·비즈 엘리트 시리즈)
9. https://designlibrary.yeogi.com/brand/logo/brand-servcie/ — 브랜드 서비스 로고(블랙·비즈니스·파트너센터·공간대여호스트·부킹허브)
10. https://designlibrary.yeogi.com/brand/logo/campaign/ — 캠페인 로고(콘서트팩·버킷팩·투어팩·지금여기·쓰봉크럽·트립홀릭)
11. https://designlibrary.yeogi.com/foudations/overview/ — Foundations 개요(플랫폼 디자인 팀 운영·Content 3층 구조·푸터 고정)
12. https://designlibrary.yeogi.com/foudations/color/palette-color/ — Palette color(UI 팔레트 9램프·불투명도 정책·Neutral light/dark 사다리·Alpha color 예외 4종)
13. https://designlibrary.yeogi.com/foudations/color/semantic-color/ — Semantic color(자기 규정·Content/Background/Border/Button/Support 5군 109종 alias·Background/Shade 그라디언트군·팔레트 이름 참조 구조)
14. https://designlibrary.yeogi.com/foudations/typography/ — Typography(Typeface = Pretendard 국문·영문·숫자 공통·정의 외 서체 사용 금지·타입 스케일·UI Typo Semibold 고정·letter spacing 미지정·Underline/Striketrough 용법·word break)
15. https://designlibrary.yeogi.com/foudations/spacing/ — Spacing(yds-spacing 토큰 사다리 17단·Core size 5종·iOS/Android 배지)
16. https://designlibrary.yeogi.com/foudations/radius/ — Radius(yds-radius 9종 값·Core size 3종·"모든 컴포넌트는 이 값 안에서")
17. https://designlibrary.yeogi.com/foudations/shadow/ — Shadow(역할명 토큰 6종·X/Y/Blur/NeutralDark α·iOS/Android/Web 공통·6종 전부의 Usage 지침)
18. https://designlibrary.yeogi.com/foudations/layout/ — Layout(YDS 6.0·좌우 여백 20px/10px·Module Container 스펙·yds-color-alias-background-primary)
19. https://designlibrary.yeogi.com/foudations/iconography/overview/ — Iconography(Solid 기본·20×20 grid·stroke 2px/묘사선 1.5px·비대칭 radius·정원 규칙·명사 네이밍·Pretendard 아이콘 제작)
20. https://designlibrary.yeogi.com/foudations/grahpics/overview/ — Graphics 개요(Visual tone·2D/3D 역할 분리·여행 카테고리 9종·그래픽 네이밍)
21. https://designlibrary.yeogi.com/foudations/grahpics/2d_graphics/ — 2D 그래픽(Natural·Mint·Green 등 일러스트 전용 램프 — UI 팔레트와 별개)
22. https://designlibrary.yeogi.com/foudations/grahpics/3d_graphics/ — 3D 그래픽(Natural·Mint·Green 등 일러스트 전용 램프 — UI 팔레트와 별개)
23. https://designlibrary.yeogi.com/foudations/grahpics/showcase/ — Graphics Showcase(그래픽 적용 사례 전시)
24. https://designlibrary.yeogi.com/foudations/content/writing-principle/ — Writing principle(Clear·Concise·Consistent·Approachable·Reliable·중학교 1학년 기준)
25. https://designlibrary.yeogi.com/foudations/content/vocie_and_tone/ — Voice & tone(voice 정의·3축 톤 매트릭스·8개 상황별 Do/Don't·APP WEB↔파트너센터 분기)
26. https://designlibrary.yeogi.com/foudations/content/grammer-mechanics/date-and-time/ — 날짜·시간 표기(0 생략·요일 괄호 금지·박수 괄호·물결표·새벽 표현·24시간제)
27. https://designlibrary.yeogi.com/foudations/content/grammer-mechanics/grammer-and-punctuation/ — 문법·문장부호(구분자 규칙·마이크로카피 실물 예시)
28. https://designlibrary.yeogi.com/components/overview/ — Components 개요("More components are coming soon")
29. https://designlibrary.yeogi.com/components/button/overview/ — Button 개요(변종 5종·Prefix icon 규칙·Suffix icon Arrow 한정)
30. https://designlibrary.yeogi.com/components/button/content/ — Button content(순수 명사 종결·결제 예외·사이즈 4종 글자 수·허용 특수문자·한글맞춤법 제2항)
31. https://designlibrary.yeogi.com/components/button/box-button/box-button-usage/ — Box button usage(위계 5종 정의·용례·Highlight 단독 사용 제약)
32. https://designlibrary.yeogi.com/components/button/box-button/box-button-content/ — Box button content(위계별 카피 예시·동사 선택 규칙·받기 vs 다운로드)
33. https://designlibrary.yeogi.com/components/search-bar/usage/ — Search bar usage(Activate·Keyboard 한글 기본·Text field Highlight)
34. https://designlibrary.yeogi.com/components/price-marker/usage/ — Price marker usage(타입 3종·상태 3종·판매 완료·최저가 보장/찜 아이콘)
35. https://designlibrary.yeogi.com/expressions/overview/ — Expressions 개요(사이트 구조·"Millions ways, One system" 표어·"Expressions are coming soon")
36. https://designlibrary.yeogi.com/resources/overview/ — Resources 개요(Copyright © GC COMPANY Corp. 표기)
37. https://designlibrary.yeogi.com/resources/asset-policy/ — Asset policy(로그인 게이트 — 게이트 사실 자체의 근거)
38. https://designlibrary.yeogi.com/components/button/box-button/box-button-spec/ — Box button spec(로그인 게이트 — 게이트 사실 자체의 근거)
39. https://designlibrary.yeogi.com/components/search-bar/spec/ — Search bar spec(로그인 게이트 — 게이트 사실 자체의 근거)
40. https://designlibrary.yeogi.com/components/price-marker/spec/ — Price marker spec(로그인 게이트 — 게이트 사실 자체의 근거)
41. https://techblog.gccompany.co.kr/여기어때-비주얼-에셋-새롭게-정의하다-a247c28bc5d8 — GC COMPANY 기술블로그(Design Library 아카이브 정의 인용문 1건). 근거 강도: 이 인용문은 2026-07-16 리서치 단계의 fetch로 확보해 독립 검증(3표 일치)을 거쳤고, 이후 재확인 시도는 Medium 인증벽(본문 미로드)에 막혀 원문 대조가 불가능하다 — 인용문 자체는 검증된 fetch 산출물이나 상시 재확인은 되지 않는 소스로 취급할 것
42. https://noonnu.cc/font_page/115 — 여기어때 잘난체 공식 배포처(소유권·라이선스 조건·웹폰트 @font-face 스니펫)
43. https://data.jsdelivr.com/v1/packages/gh/projectnoonnu/noonfonts_four@1.2 — jsDelivr 파일 인덱스(JalnanOTF00.woff 실재 및 CSS 엔트리포인트 부재 검증)