ko/design.md 카탈로그 프리뷰 — 이 카탈로그는 어떤 브랜드와도 제휴·후원 관계가 없습니다. 이 화면은 공식 배포본이 아닌 공개 자료 기반 비공식 재현이며, 표시된 상품·가격·평점·거래·채용 정보는 레이아웃 시연용 더미 데이터입니다.
서비스 UI

국내여행 준비 모두 NOL에서

숙소 · 티켓 · 항공 · 해외투어티켓

[배너 이미지 — 카피 포함]

버튼 · 포커스

버튼에 마우스를 올리거나 Tab 키로 포커스를 옮겨 보세요.

button-primary · 52 · r16 / 44 · r12 (가정)

button-primary-pressed · hover · 눌림

disabled

button-secondary · 외곽선 capsule 32 · 약면 (가정)

약면 · pressed (가정)

button-banner-cta · 28 · r8

focus-ring · 2px · offset 2 / -2

무료취소

carousel-arrow · 44 r12 / 48 r16 · shadow-2

scroll-top-button · 크기 · 외곽선 (가정)

모바일 '지도' 필 버튼 · shadow-3 · 치수 (가정)

'전체 사진' 버튼 · shadow-3 · 모양·치수 (가정)

[숙소 사진]

검색

검색창을 눌러 포커스 테두리를 확인해 보세요.

search-bar-pc · 48 · max 400 · capsule

search-bar-chip

국내숙소 [검색어]

search-bar-mobile · 44 · 1.5px · capsule

search-bar-mobile · 상세 · 회색 채움

국내숙소 [검색어]

헤더 · 탭 · 내비게이션

탭과 하단 내비 항목은 눌러서 바꿀 수 있어요.

header-action · min 64×52 · r16

hover

찜

service-tab-pc · 선택 · 강조 · 비선택 — 선택색·밑줄 (가정)

service-tab-mobile · min 32 · capsule

bottom-nav · 57 · 활성 굵기

칩 · 필터

section-chip-selected · section-chip · PC 42 · 글자 16 (가정)

모바일 36

filter-chip · 36 · PC / 모바일

가격 무료취소 조식포함 수영장

filter-panel · 320 · r16 · 토글 (가정)

필터
가격
[최저][최고]
편의시설
주차 수영장 조식

filter-bottom-sheet · 상단 r28 · scrim · 그림자 (가정)

필터
무료취소 조식포함 주차

배지 · 공지 · 배너

badge-notice · 모바일 20 / PC 26

아래 배지 문구(공지·신규오픈·지금예매·좌석우위·선착순쿠폰·1박·인증·방송예정)와 멤버십 등급 글자(다이아·골드·플래티넘)는 레이아웃 시연용 예시이며 실제 상품의 판매 상태·혜택·인증이나 회원 등급을 나타내지 않습니다.

공지 공지

badge-new · 22 · 말풍선

신규오픈 지금예매

badge-label · r6 · 인증 r4 · 치수 (가정)

좌석우위 선착순쿠폰 1박 인증
방송예정

멤버십 등급 글자 · 다이아 · 골드 · 플래티넘

다이아 골드 플래티넘

notice-bar · PC r16 / 모바일 r12

아래 공지 제목과 가입 혜택 문구는 레이아웃 시연용이며 실제 공지나 혜택 조건을 나타내지 않습니다.

공지NOL 인터파크 서비스 통합 안내
공지NOL 인터파크 서비스 통합 안내

signup-banner · 바탕 (가정)

login-gradient-banner · 1px brand-border · r16 · 계산 그라디언트 (가정)

[로그인 안내 문구]

coupon-closed-row · r16 (가정)

아래 ‘쿠폰 마감’ 표기는 레이아웃 시연용이며 실제 쿠폰 발급 상태를 나타내지 않습니다.

쿠폰 마감

footer

서비스 이용약관 광고제휴문의 [링크] [사업자 정보]

카드

card-hotel-pick · 3:4

아래 카드의 숙소명·공연명·공연장·공연 일정·라이브 제목, 가격·할인율·원가·회원가·입실 시간(‘숙박 15:00~’), 별점·리뷰 수, 역 출구·도보 시간과 순위 숫자, ‘4성급’·‘좌석우위’·‘선착순쿠폰’·‘방송예정’·‘다른 날짜 확인’·‘예약마감’ 표기는 레이아웃 시연용 더미 데이터입니다. 실제 상품의 가격·평점·등급·순위·혜택이나 판매 상태를 나타내지 않습니다.

[숙소 사진] [숙소명 A] 300,000원~
[숙소 사진] [숙소명 B] 16%323,970원~
[숙소 사진] [숙소명 C] 377,000원~
[숙소 사진] [숙소명 D] 다른 날짜 확인

card-ticket-rank · 3:4 · 순위

[포스터]1 [공연명 A — 제목이 두 줄까지 들어갑니다] [공연장 A] 26.12.22 ~ 27.02.28 좌석우위
[포스터]2 [공연명 B] [공연장 B] 26.11.24 ~ 27.03.14
[포스터]3 [공연명 C] [공연장 A] 26.08.16 ~ 26.11.15 좌석우위
[포스터]4 [공연명 D] [공연장 C] 26.09.06 ~ 26.11.15

card-live · 240:360 · r16

[라이브 썸네일]방송예정 [라이브 제목 A]
[라이브 썸네일]방송예정 [라이브 제목 B]
[라이브 썸네일] [라이브 제목 C]

card-listing · PC 가로형 · 3:2 r12 · 마감

[숙소 사진 3:2][배지 이미지]
4성급 호텔 [숙소명 E] [역] 3번 출구 도보 1분 4.8(37) 선착순쿠폰
숙박 15:00~52%900,000 회원가431,665원~
[숙소 사진 3:2]
4성급 호텔 [숙소명 F] [역] 5번 출구 도보 4분 4.6(112)
숙박 예약마감

화면 재현 — 웹 홈

nol home · desktop · 가입 배너 바탕 (가정)

아래 화면의 공지 제목·가입 혜택 문구, 배너 장수(‘5 / 16 +’), 공연명·공연장·공연 일정·순위 숫자, 숙소명·할인율·가격과 ‘신규오픈’·‘지금예매’·‘좌석우위’·‘다른 날짜 확인’ 표기는 레이아웃 시연용 더미 데이터입니다. 실제 상품·가격·순위·혜택이나 판매 상태를 나타내지 않습니다.

화면 재현 — 모바일

nol home · mobile · 가입 배너 바탕 (가정)

아래 화면의 공지 제목·가입 혜택 문구, 배너 장수(‘2 / 16 +’)와 ‘신규오픈’·‘지금예매’ 표기는 레이아웃 시연용 더미 데이터입니다. 실제 공지·혜택이나 판매 상태를 나타내지 않습니다.

stay detail · mobile · 갤러리 r20 · 하단바 버튼 치수 (가정)

아래 화면의 숙소명·역 출구·도보 시간, ‘3성급’·‘인증’·‘무료취소’·‘쿠폰 마감’ 표기, 별점·리뷰 수, 사진 장수(‘1 / 87’), 날짜·요일·인원과 ‘DayUse’·숙박 가격은 레이아웃 시연용 더미 데이터입니다. 실제 숙소의 등급·인증·평점·가격이나 취소 조건을 나타내지 않습니다.