bottom-cta · vertical · 1to2 · 5to5
아파트 · 빌라·투룸 · 원룸 · 오피스텔 · 분양
이 어두운 화면은 발행값이 아니다. 이 재현이 회색 램프를 뒤집어 칠했고(바탕 gray10 · 글자 white · 보조 글자 gray70 · 선과 채움 gray30), 오렌지 채움은 그대로 두되 오렌지 틴트 배경만 orange2 대신 orange1 16% 혼합으로 바꿨다. 떠 있는 표면의 테두리도 다크에서만 더했다.
단기임대
칩·탭·세그먼트·체크·스위치·타일·정렬은 눌러서 바꿀 수 있다.
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
tab-box 의 선택 표시(테두리·글자색)는 md 에 값이 없어 이 재현이 정했다.
stepper · 132
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
divider · linePadding · lineFull · section
dialog · 340 · 3to7
snackbar · snackbar-vertical
세로형의 바탕은 md 에 값이 없어 가로형과 같은 gray30 을 빌렸다.
tooltip · 260
관리비notification · gray97 · orange2 · blue2 · red2
notification · gray30 · orange1 16% · blue2 · red2
notification-extend · notice-text
loading · empty
조건에 맞는 방을 찾고 있어요
tag · large · medium · small · xsmall · hug / badge
아래 태그·배지 문구(신축·역세권·주차·급매·안심 전세·인기·신규 분양·마감·3D 투어·영상)는 레이아웃 시연용 예시이며 실제 매물의 속성이나 자격을 나타내지 않습니다.
thumbnail · full · half
profile · circle · square
card-info · 12
chart · 매매 · 전세 · 월세 · 전체
아래 화면의 지역명·주간 가격·방 구성·매물 설명과 ‘4주 이상 할인’ 표기는 레이아웃 시연용 더미 데이터입니다. 실제 매물이나 할인 조건을 나타내지 않습니다.
아래 화면의 단지명·주소·분양가·세대수·방문 수·알림 수와 ‘청약중’·‘특별공급 청약 오늘’·‘특별공급 청약 D-3’·‘인기’ 표기는 레이아웃 시연용 더미 데이터입니다. 실제 분양 단지나 청약 일정·인기 순위를 나타내지 않습니다.
아래 화면의 단지·동·호수, 예상 가격과 제안가, 받은 제안 수, 중개사무소명, 날짜·마감일, 제안 근거와 ‘제안 도착’·‘제안 모두 반영됨’·‘읽음’·‘중개사’ 표기는 레이아웃 시연용 더미 데이터입니다. 실제 거래 제안이나 중개사무소의 자격을 나타내지 않습니다.
아래 화면의 기사 제목·날짜·조회 수·좋아요 수, 새 글 표시(제목 뒤 오렌지 점)와 공지 제목·날짜는 레이아웃 시연용 더미 데이터입니다. 실제 기사나 공지를 나타내지 않습니다.
히어로 사진은 회색 면, 로고는 워드마크 없이 심볼, 카테고리 아이콘은 집 아이콘 하나, 메타의 눈·엄지 아이콘은 글자, 새 글 표시는 점으로 줄였다. 뉴스 카드 베이지(#F3EDE9)는 orange 틴트, 검정 광고 버튼(#000000)은 gray10, Spoqa Han Sans 는 Pretendard, 히어로 제목 600 은 700 으로 칠했다. 본문 폭과 히어로 높이(360 → 300)는 이 틀에 맞춰 줄였고, 1100px 아래에서는 헤더·광고 버튼을 숨기고 뉴스를 2열 이하로 접는다.
아래 화면의 동네 이름과 시세 패널 표기는 레이아웃 시연용 더미 데이터입니다. 실제 지역 시세를 나타내지 않습니다.
검색창·선택 카테고리의 오렌지와 화면 서체는 실제 웹의 값 대신 orange1·Pretendard 로 칠했다.