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

어떤 집을 찾고 계세요?

아파트 · 빌라·투룸 · 원룸 · 오피스텔 · 분양

단기임대

버튼

칩·탭·세그먼트·체크·스위치·타일·정렬은 눌러서 바꿀 수 있다.

button-primary · 48 · 44 · 40 · 32 · 28 · 24

button-primary-disabled · 44 · 32

theme · 44

disabled

bottom-cta · vertical · 1to2 · 5to5

방문 예약 원하는 시간을 고르면 중개사가 확인해요

floating-button · 72

button-gray30 · grayOpacity08 on photo

선택 · 필터

chip · chip-selected · 32

36 · selected gray30

theme · lineGray30 · bgOrange2

주차 가능 반려동물

checkbox · radio-button · switch

chip-filter · 60

filter · active · selected · normal

tab · 52

tab-filter

tab-box · orange · gray

전체 59㎡ 84㎡ 114㎡
1년 3년 5년 전체

tab-box 의 선택 표시(테두리·글자색)는 md 에 값이 없어 이 재현이 정했다.

stepper · 132

2

rating · control 40 · readonly 16

slider · knob 20

최소최대

bottom-sheet · selector

정렬

tile · linePrimary · lineGray90 · gray

오피스텔준비 중

입력 · 내비게이션

text-field · default · focus · error · disabled

top-bar · 52

매물 상세

search-bar · 52 / 40

bottom-navigation · 68

홈 지도 관심 MY

divider · linePadding · lineFull · section

알림 설정
공지사항
자주 묻는 질문
로그아웃

피드백 · 오버레이

dialog · 340 · 3to7

관심 목록에서 뺄까요? 최근 본 방에는 남아 있어요.

snackbar · snackbar-vertical

관심 목록에 담았어요관심 탭에서 다시 볼 수 있어요
신고가 접수됐어요

세로형의 바탕은 md 에 값이 없어 가로형과 같은 gray30 을 빌렸다.

tooltip · 260

관리비
관리비에 포함된 항목 수도·인터넷·청소비가 포함되고 전기·가스는 따로 내요.

notification · gray97 · orange2 · blue2 · red2

입주 가능일이 바뀌었어요
관심 단지에 새 매물이 올라왔어요
계약 만기가 90일 남았어요
본인 확인이 만료됐어요

notification-extend · notice-text

청약 일정 안내 관심 등록한 단지의 접수가 곧 시작돼요.
내 집 내놓기 여러 중개사의 제안을 한 번에 받아 보세요.
  • 중개보수는 거래 금액에 따라 달라요.
  • 계약 전 등기부등본을 꼭 확인하세요.

loading · empty

조건에 맞는 방을 찾고 있어요

조건에 맞는 방이 없어요 필터를 바꿔 다시 찾아보세요

콘텐츠

tag · large · medium · small · xsmall · hug / badge

아래 태그·배지 문구(신축·역세권·주차·급매·안심 전세·인기·신규 분양·마감·3D 투어·영상)는 레이아웃 시연용 예시이며 실제 매물의 속성이나 자격을 나타내지 않습니다.

신축 역세권 주차 급매 안심 전세
인기 신규 분양 마감 3D 투어 영상

thumbnail · full · half

[매물 사진] 역삼동
투룸 · 엘리베이터 있음

profile · circle · square

중개사[이름 A]
[이름 B]
[사무소]

card-info · 12

시세 조회 우리 집, 지금 얼마일까? 주소만 입력하면 바로 알려드려요

chart · 매매 · 전세 · 월세 · 전체

매매 전세 월세 전체

화면 재현 — 앱

아래 화면의 지역명·주간 가격·방 구성·매물 설명과 ‘4주 이상 할인’ 표기는 레이아웃 시연용 더미 데이터입니다. 실제 매물이나 할인 조건을 나타내지 않습니다.

아래 화면의 단지명·주소·분양가·세대수·방문 수·알림 수와 ‘청약중’·‘특별공급 청약 오늘’·‘특별공급 청약 D-3’·‘인기’ 표기는 레이아웃 시연용 더미 데이터입니다. 실제 분양 단지나 청약 일정·인기 순위를 나타내지 않습니다.

아래 화면의 단지·동·호수, 예상 가격과 제안가, 받은 제안 수, 중개사무소명, 날짜·마감일, 제안 근거와 ‘제안 도착’·‘제안 모두 반영됨’·‘읽음’·‘중개사’ 표기는 레이아웃 시연용 더미 데이터입니다. 실제 거래 제안이나 중개사무소의 자격을 나타내지 않습니다.

화면 재현 — 웹 홈

아래 화면의 기사 제목·날짜·조회 수·좋아요 수, 새 글 표시(제목 뒤 오렌지 점)와 공지 제목·날짜는 레이아웃 시연용 더미 데이터입니다. 실제 기사나 공지를 나타내지 않습니다.

히어로 사진은 회색 면, 로고는 워드마크 없이 심볼, 카테고리 아이콘은 집 아이콘 하나, 메타의 눈·엄지 아이콘은 글자, 새 글 표시는 점으로 줄였다. 뉴스 카드 베이지(#F3EDE9)는 orange 틴트, 검정 광고 버튼(#000000)은 gray10, Spoqa Han Sans 는 Pretendard, 히어로 제목 600 은 700 으로 칠했다. 본문 폭과 히어로 높이(360 → 300)는 이 틀에 맞춰 줄였고, 1100px 아래에서는 헤더·광고 버튼을 숨기고 뉴스를 2열 이하로 접는다.

화면 재현 — 웹 아파트 지도

아래 화면의 동네 이름과 시세 패널 표기는 레이아웃 시연용 더미 데이터입니다. 실제 지역 시세를 나타내지 않습니다.

검색창·선택 카테고리의 오렌지와 화면 서체는 실제 웹의 값 대신 orange1·Pretendard 로 칠했다.