모든 도구 브랜드 룩북

Yeogi Eottae (여기어때)

빨간 한글 워드마크 아래 바다 전망 객실 사진과 노란 별점, 파란 검색·지도 버튼, 오른쪽 아래 쿠폰 적용가

한국소비자라이프스타일이커머스따뜻한modern-minimalhumanism고딕compactroundflat라이트한글 지원출시 2018개정 2026

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

  • 브랜드명: 여기어때 / Yeogi Eottae. 대표 디지털 서비스는 숙소·항공·투어를 찾고 예약하는 여기어때 웹과 앱이다.
  • 한 줄 정체성: 여행지와 날짜를 고르면, 큰 숙소 사진 옆에서 평점·거리·쿠폰 적용가를 비교하게 한다.
  • 공식 디자인 철학: 공식 브랜드 가이드의 문장은 「모든 사람들의 삶에 놀라운 경험이 끊이지 않도록 하기 위해 노력합니다」다. 2026 브랜드 가이드는 제목에 잘난체·잘난체 고딕, 본문에 Pretendard, 영문에 Campton을 지정한다. 로고의 직선과 곡선을 제목 글꼴에도 이어 붙인다.
  • 시그니처 요소 1개: 빨간 한글 워드마크와 흰 예약 목록 위의 노란 별점. 액션은 파랑, 할인은 빨강, 가격은 검정으로 분리하고 객실 사진이 가장 넓은 면을 차지한다.
  • 자료 범위: 공식 공개 자료는 2026년 브랜드 가이드와 잘난체 소개다. UI 디자인 시스템 전용 문서는 공개 확인하지 못해 is_official: false로 둔다. 서비스 UI의 색·글꼴·상태는 2026-10-15 공식 웹 CSS에서 확인했다. released_year는 잘난체 첫 공개 시기 2018년 기준(추정), last_major_revision은 공식 가이드 202603판이다.

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 친근한, 경쾌한, 명확한
  • 무드 설명: 빨강은 로고와 할인 정보에 모이고, 넓은 면은 흰색과 숙소 사진에 맡긴다. 객실명·노란 평점·회색 거리·굵은 가격이 같은 순서로 이어져 빠르게 비교된다. 잘난체는 프로모션 제목에, Pretendard는 탐색·가격·예약 조건에 쓴다.
  • 비주얼 스타일: 모던 미니멀 + 휴머니즘
  • 밀도(Density): Compact — 결과 한 행에 숙소 종류·이름·거리·평점·평가 수·원가·적용가·남은 객실 수를 담는다.
  • 모서리 성향: Round — 결과 사진 약12px, 검색 조건 알약과 모바일 거르기 칩은 완전히 둥글다. 평점·회원가 배지는 작은 곡률이다(사진·배지 수치는 화면 관찰 기반 추정).
  • 평면성: Flat — 숙소 행에는 외곽 틀이나 그림자가 없다. 사진과 가는 가로선으로 행을 나눈다.

Color System

컬러 시스템 (CSS 변수)

브랜드 가이드의 Young Red #F7323F와 서비스 UI의 Lively Red #F94239, 실제 웹 워드마크의 #FF4752를 구별한다. 아래 Primary 500만 공식 CI 값이며 나머지 Primary 사다리는 재사용을 위한 보간값(추정)이다. 파랑·무채·역할 색은 현행 웹 CSS의 값을 옮겼다. --support-positive도 파랑이므로 완료·확정에 임의의 초록을 넣지 않는다.

:root {
  --color-primary-50: #FFF5F5;   /* Lively Red-50 · 오류 입력 */
  --color-primary-100: #FFEDEA;  /* Lively Red-100 · 할인 안내 */
  --color-primary-200: #FFC8CC;  /* (추정) CI 보간 */
  --color-primary-300: #FF9CA3;  /* (추정) CI 보간 */
  --color-primary-400: #FB626D;  /* (추정) CI 보간 */
  --color-primary-500: #F7323F;  /* 공식 Young Red */
  --color-primary-600: #DA2835;  /* (추정) CI 보간 */
  --color-primary-700: #B4212C;  /* (추정) CI 보간 */
  --color-primary-800: #8B1B23;  /* (추정) CI 보간 */
  --color-primary-900: #60141A;  /* (추정) CI 보간 */
  --color-web-logo: #FF4752;    /* 공식 웹 SVG 클래스 실측 */
  --color-sale: #F94239;        /* lively-red-800 · 할인·오류 */
  --color-sale-strong: #EA2013; /* lively-red-900 */
  --color-secondary-50: #F2F8FF;
  --color-secondary-100: #E3F0FF;
  --color-secondary-200: #D0E6FF;
  --color-secondary-300: #ADD4FF;
  --color-secondary-400: #80BDFF;
  --color-secondary-500: #1D8BFF; /* button-primary */
  --color-secondary-600: #006CE0; /* button-primary-hover */
  --color-action: #1D8BFF;
  --color-action-hover: #006CE0;
  --color-rating: #FFB803;       /* support-rating */
  --color-rating-soft: #FFCD4E;  /* 화면 별점 배지 · yellow-700 */
  --color-member: #49627A;       /* support-neutral · 회원가 */
  --color-benefit: #01A484;      /* support-benefit · 적립 */
  --color-neutral-0: #FFFFFF;
  --color-neutral-10: #FAFAFA;
  --color-neutral-50: #F5F5F5;
  --color-neutral-100: #E6E6E6;
  --color-neutral-200: #DCDCDC;
  --color-neutral-300: #BBBBBB;
  --color-neutral-400: #999999;
  --color-neutral-500: #8B8B8B;
  --color-neutral-600: #707070;
  --color-neutral-700: #5C5C5C;
  --color-neutral-800: #474747;
  --color-neutral-900: #222222;
  --color-neutral-1000: #000000;
  --color-success-bg: #E3F0FF;   /* support-positive-alt */
  --color-success-fg: #1D8BFF;   /* support-positive */
  --color-warning-bg: #FFF4D8;   /* support-warning-alt */
  --color-warning-fg: #FFB803;   /* support-warning */
  --color-error-bg: #FFEDEA;     /* support-critical-alt */
  --color-error-fg: #F94239;     /* support-critical */
  --color-info-bg: #F5F7FA;      /* support-neutral-alt */
  --color-info-fg: #49627A;      /* support-neutral */
  --bg-base: #FFFFFF;
  --bg-subtle: #F5F5F5;
  --bg-note: #F5F7FA;
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(0,0,0,.4);
  --text-primary: #222222;
  --text-secondary: #8B8B8B;
  --text-tertiary: #BBBBBB;
  --text-placeholder: #999999;
  --text-on-primary: #FFFFFF;
  --text-disabled: #DCDCDC;
  --border-default: #E6E6E6;
  --border-subtle: #F5F5F5;
  --border-strong: #DCDCDC;
  --border-focus: #243B52;       /* border-focus-visible */
  --font-ui: Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-title: 'Jalnan', '여기어때 잘난체', 'Apple SD Gothic Neo', sans-serif;
  --font-title-gothic: 'JalnanGothic', '여기어때 잘난체 고딕', 'Apple SD Gothic Neo', sans-serif;
  --font-latin: Campton, Pretendard, 'Segoe UI', sans-serif;
}
  • 파랑은 조작: 검색·지도 보기·로그인/회원가입과 체크 상태에 #1D8BFF. 빨간 로고를 이유로 모든 버튼을 빨강으로 만들지 않는다.
  • 노랑은 평가: 평점 배지 안에 검정 별·숫자를 함께 넣는다. 붉은 할인 안내와 붙여 놓아도 역할이 섞이지 않는다.
  • 남색은 회원가: 작은 #49627A 배지 뒤에 검정 가격을 잇는다. 할인가는 원가 취소선과 같은 묶음이다.
  • 테마: 확인한 서비스 화면과 CSS는 라이트다. 공식 다크 전환·다크 토큰 문서가 없어 theme_modes: [light]로 기록한다.

Typography

타이포그래피

  • 폰트 페어링: 한글 UI와 가격은 Pretendard(공식 가이드·실제 웹 일치). 브랜드 프로모션 제목은 여기어때 잘난체 / 잘난체 고딕, 영문 브랜드 카피는 Campton(2026 가이드). 잘난체는 네모틀을 채우는 굵기와 곡선·직선의 조합으로 친근하고 즐거운 성격을 만든다. 잘난체 고딕은 같은 모듈·자소를 유지하며 가독성을 높여 솔직하고 경쾌한 성격을 만든다. 공식 소개의 구성은 한글11,172자·라틴95자·특수문자967자·딩뱃127자다. 실제 예약 UI 전체에 제목용 잘난체를 깔지 않는다.
  • 폰트 대체: 외부 글꼴을 로드하지 않는 예시는 브랜드 서체 이름 뒤에 Apple SD Gothic Neo·맑은 고딕·시스템 산세리프를 잇는다.
  • 위계 (size / weight / line-height / letter-spacing; 웹 관찰 기반 수치, 세부 자간은 추정):
    • Display: 32px / 700 / 40px / -0.03em — 홈 사진 위 여행 제목
    • H1: 24px / 700 / 32px / -0.02em — 검색 결과 수
    • H2: 20px / 700 / 28px / -0.02em — 추천 숙소 구획
    • H3: 18px / 700 / 24px / -0.02em — 숙소 이름
    • Body Large: 16px / 600 / 24px / -0.02em — 검색 조건
    • Body: 14px / 400 / 20px / -0.01em — 거리·평가 수·필터
    • Body Small: 12px / 400 / 16px / -0.01em — 숙소 분류·원가·혜택 안내
    • Caption: 11px / 600 / 15px / 0 — 남은 객실·회원가
    • Price: 20px / 700 / 26px / -0.03em — 천 단위 쉼표 + 원. 119,040원처럼 숫자와 단위를 붙인다.

Spacing

스페이싱

  • Base unit: 4px (추정). 목록 사진과 글은 20px 내외, 필터와 목록은 32px 안팎으로 구분한다.
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
}
  • Container: 실제 1280px 창에서는 1200px 본문·좌우40px. 왼쪽 필터288px·중간32px·결과880px이다. ⑫는 900px 프리뷰에 맞춰 비율을 줄이고 모바일375px에서는 왼쪽 필터를 상단 칩으로 바꾼다.

Border Radius

Border Radius

사진12px·검색 알약·작은 평점3~4px은 화면 관찰값(추정)이다. 카드 전체를 둥근 판으로 감싸지 않는다.

:root {
  --radius-none: 0;
  --radius-sm: 4px;      /* 평점·회원가·쿠폰 안내 */
  --radius-md: 8px;      /* 버튼 */
  --radius-lg: 12px;     /* 숙소 사진·지도 */
  --radius-xl: 16px;     /* 큰 검색 입력 묶음 */
  --radius-full: 9999px; /* 조건 검색·모바일 필터 칩·찜 원 */
}

Shadow / Elevation

Shadow / Elevation

숙소 결과 행은 그림자가 없다. 떠 있는 지도 버튼과 앱 안내만 낮게 띄운다. 아래 그림자 값은 쓰임을 재현한 추정값이다.

:root {
  --shadow-none: none;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);  /* 작은 팝오버 */
  --shadow-md: 0 4px 16px rgba(0,0,0,.12); /* 모바일 지도 보기 */
  --shadow-lg: 0 8px 24px rgba(0,0,0,.16); /* 앱 안내 띠 */
  --shadow-xl: 0 16px 40px rgba(0,0,0,.2); /* 예약 조건 창 */
}

Iconography

Iconography

  • 스타일: 자체 Filled 아이콘과 Outline 조작 아이콘 혼합. 검색 조건의 달력·인원·메뉴는 채움, 찜은 회색 채움 하트, 평점은 검정 채움 별이다. 필터·화살표·시설은 선으로 읽힌다.
  • Stroke 굵기: 20px 격자에서 약1.5~2px(추정). 메뉴는 실제 공식 SVG에서 2px 두께의 가로 막대 세 개다.
  • 모서리 처리: 검색·시설 선의 끝과 이음은 둥글게, 달력과 메뉴는 직선형.
  • 추천 라이브러리: Lucide를 기본 선 아이콘 대체로 쓰되 평점 별·찜 하트·달력·인원은 채움 형태로 맞춘다.

Component Guide

컴포넌트 가이드 (상태별 CSS)

실제 웹 CSS에 있는 버튼 기본·hover·오류·disabled의 역할 색을 따른다. Active·Loading의 세부 동작은 추정이다. 결과 행은 사진 + 정보 + 오른쪽 아래 가격, 다음 행은 얇은 가로선으로 나눈다.

Button

.yg-btn { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 16px; border:1px solid transparent; border-radius:var(--radius-md); font:600 14px/20px var(--font-ui); cursor:pointer; transition:background-color var(--duration-fast) var(--ease-out); }
.yg-btn--primary { background:var(--color-action); color:var(--text-on-primary); }
.yg-btn--primary:hover { background:var(--color-action-hover); }
.yg-btn--primary:active { background:var(--color-action-hover); transform:translateY(1px); }
.yg-btn--secondary { background:var(--bg-base); border-color:var(--color-action); color:var(--color-action); }
.yg-btn--secondary:hover { background:var(--color-secondary-100); }
.yg-btn--secondary:active { background:var(--color-secondary-200); }
.yg-btn--ghost { background:var(--bg-subtle); color:var(--text-primary); }
.yg-btn--ghost:hover { background:var(--color-neutral-100); }
.yg-btn--ghost:active { background:var(--color-neutral-200); }
.yg-btn--danger { background:var(--color-sale); color:var(--text-on-primary); }
.yg-btn--danger:hover, .yg-btn--danger:active { background:var(--color-sale-strong); }
.yg-btn:disabled { background:var(--color-neutral-10); color:var(--text-disabled); border-color:var(--border-subtle); transform:none; cursor:not-allowed; }
.yg-btn:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
.yg-btn.is-loading { position:relative; color:transparent; pointer-events:none; }
.yg-btn.is-loading::after { content:''; position:absolute; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:yg-spin .7s linear infinite; }
.yg-btn--secondary.is-loading::after, .yg-btn--ghost.is-loading::after { border-color:var(--border-strong); border-top-color:var(--color-action); }
@keyframes yg-spin { to { transform:rotate(360deg); } }

Input

.yg-input { min-height:44px; width:100%; padding:10px 14px; border:1px solid transparent; border-radius:var(--radius-md); background:var(--bg-subtle); color:var(--text-primary); font:400 14px/22px var(--font-ui); }
.yg-input::placeholder { color:var(--text-placeholder); }
.yg-input:hover { background:var(--color-neutral-100); }
.yg-input:focus { outline:2px solid var(--border-focus); outline-offset:1px; }
.yg-input[aria-invalid='true'] { border-color:var(--color-error-fg); background:var(--color-primary-50); }
.yg-input:disabled { background:var(--color-neutral-10); color:var(--text-disabled); cursor:not-allowed; }
.yg-check { appearance:none; width:18px; height:18px; margin:0; border:1px solid var(--border-strong); border-radius:3px; background:var(--bg-base); flex:none; }
.yg-check:checked { background:var(--color-action); border-color:var(--color-action); }
.yg-check:checked::after { content:'✓'; display:block; color:white; font:700 14px/16px var(--font-ui); text-align:center; }

Card

.yg-stay { display:grid; grid-template-columns:45% minmax(0,1fr); gap:20px; padding:20px 0; border-bottom:1px solid var(--border-default); background:var(--bg-base); }
.yg-stay__photo { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1.65; }
.yg-stay__name { margin:2px 0 4px; font:700 18px/24px var(--font-ui); color:var(--text-primary); }
.yg-stay__price { margin-top:auto; text-align:right; font:700 20px/26px var(--font-ui); }
.yg-card--highlight { background:var(--bg-note); border-radius:var(--radius-lg); padding:16px; }
.yg-card--outlined { border:1px solid var(--border-default); border-radius:var(--radius-md); padding:16px; }

Badge / Tag

.yg-tag { display:inline-flex; align-items:center; gap:3px; padding:2px 5px; border-radius:var(--radius-sm); font:600 11px/16px var(--font-ui); white-space:nowrap; }
.yg-tag--solid { background:var(--color-member); color:var(--text-on-primary); }
.yg-tag--subtle { background:var(--color-error-bg); color:var(--color-sale); }
.yg-tag--outline { border:1px solid var(--border-default); color:var(--text-secondary); }
.yg-score { display:inline-flex; align-items:center; gap:2px; padding:2px 5px; border-radius:var(--radius-sm); background:var(--color-rating-soft); color:var(--text-primary); font:700 12px/16px var(--font-ui); }
.yg-chip { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border:1px solid var(--border-default); border-radius:var(--radius-full); background:var(--bg-base); color:var(--text-primary); font:600 12px/18px var(--font-ui); white-space:nowrap; }

Navigation

.yg-nav { height:76px; padding:0 40px; display:flex; align-items:center; gap:40px; border-bottom:1px solid var(--border-default); background:var(--bg-base); }
.yg-condition { display:flex; align-items:center; gap:10px; min-height:42px; padding:0 14px; border-radius:var(--radius-full); background:var(--bg-subtle); font:600 13px/18px var(--font-ui); }
.yg-condition__rule { height:24px; width:1px; background:var(--border-default); }
.yg-nav__account { margin-left:auto; display:flex; align-items:center; gap:20px; }

Motion

Motion

목록은 움직이는 장식보다 조건 변경·예약 상태를 읽는 데 집중한다. 실제 서비스의 전환 시간은 공개 문서로 확인하지 못해 아래 값은 추정이다.

:root {
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(.2,0,0,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce) {
  .yg-btn { transition:none; }
  .yg-btn:active { transform:none; }
  .yg-btn.is-loading::after { animation:none; }
}

Anti-patterns

Anti-patterns

1. 빨강을 검색 버튼과 넓은 헤더 면에 쓰지 않는다 — 현행 UI의 검색·지도·로그인은 파랑이다. 빨강은 로고와 쿠폰·남은 객실 안내에 모인다. 2. 모든 글을 잘난체로 쓰지 않는다 — 잘난체는 제목용이다. 숙소 이름·거리·평점·가격은 Pretendard로 정리한다. 3. 숙소 행마다 테두리와 그림자를 두르지 않는다 — 큰 사진·오른쪽 정보·행 사이 가는 선만 남긴다. 4. 할인율만 두고 기준가와 적용가를 지우지 않는다 — 회색 취소선 원가, 회원가 배지, 굵은 최종 가격을 같은 묶음으로 둔다. 5. 평점과 평가 수를 떼어 놓지 않는다 — 노란 별점 바로 옆에 2,184명 평가를 붙이고 거리·남은 객실 수와 다른 줄에 둔다.

Sources

출처

  1. https://gccompany.co.kr/
  2. https://gccompany.co.kr/font
  3. https://drive.google.com/file/d/1jKSMqqf2SUQwyikH8vjQU9iZbj-bGjvZ/view
  4. https://www.yeogi.com/
  5. https://www.yeogi.com/domestic-accommodations?keyword=%EA%B0%95%EB%A6%89
  6. https://www.yeogi.com/domestic-accommodations/74942
  7. https://static.yeogi.com/_next/static/css/1d90e79fd8d06f0e.css

Yeogi Eottae (여기어때) 이름과 로고는 각 권리자의 상표입니다.