컴포넌트
리블 화면을 이루는 공용 컴포넌트 51개예요. 비슷한 것은 하나로 합쳤고, 화면 한 곳에서만 쓰는 조립 조각 47개는 아래 '화면 블록'에 따로 모았어요.
레이아웃#
헤더 · 푸터 · 바 · 도크처럼 화면의 틀
MasonryGrid실물메이슨리 격자
높이가 다른 카드를 벽돌처럼 쌓을 때.
FsOverlay · Button iconOnly실물전체화면
차트·지도·트리맵 전체화면.
Header · MobileTopBar · Sidebar · NoticeBar · TickerBar · MarketStrip · Footer실물합친 이름 푸터 · 시장 바 · 폰 위쪽 바 · 공지 바 · 사이드바 · 티커 바 · 홈 탭PC 머리 줄
앱 틀 - 머리 줄·옆 레일·공지·티커·아래 줄. 화면마다 새로 만들지 않아요(틀 고정).
PageTopBar · PageHero · MarketingFooter · ReadProgress실물합친 이름 소개 페이지 푸터 · 소개 첫 화면 · 읽기 진행 막대소개 페이지 위쪽 바
검색으로 들어오는 읽는 페이지의 틀 - 위쪽 바·첫 화면·푸터·읽기 진행.
PageHeader실물화면 제목 줄
앱 화면 맨 위 제목 줄(틀 고정).
AppBackHeader실물뒤로 가기 머리
상세 화면의 뒤로 가기 머리.
Dock실물도크
PC 오른쪽 도크.
카드#
내용을 담는 면
Card실물합친 이름 표면 · 지수 종류 토글 · 지수 방식 토글 · 면적 단위카드 골격
내용을 담는 면은 모두 Card - 테두리 없는 면 + 제목(CardHead)이고, 조작은 제목 줄 오른쪽(넓으면 아랫줄), 카드 밖 CardBar는 나란한 칸 윗선 맞춤(spacer)에만 써요. 세그먼트(Seg)·접는 세그먼트(Seg collapse)도 여기 있어요.
InsightRow실물합친 이름 읽을거리 카드 · 읽을거리 썸네일읽을거리 줄
읽을거리 한 줄(썸네일 있음·없음).
PickList · PickRows실물합친 이름 골라 보기 목록단지 목록 카드
제목 있는 카드에 단지 줄을 여러 개 담을 때 써요. 줄은 이름·값·메타 한 줄이고, 같은 라벨은 묶음 머리(group)에 한 번, 5줄 뒤는 더 보기(visible)로 접되 링크는 그대로, 줄 사이는 8px이에요.
ComplexRow실물합친 이름 최근 본 단지 · 허브 단지 카드 · 기준별 단지 탭 · 지역 유형 카드단지 한 줄
단지 한 줄(아바타·이름·메타·값)을 늘어놓을 때 써요. 카드 안은 flat, 고를 거리는 tile이고 아바타는 4단계(18·28·32·40)예요.
RankingRow실물단지 줄
홈·스크리너 표의 단지 행(열 맞춤·관심·비교). 홈 첫 화면 번들 때문에 따로 둬요.
칩#
고르고 알리는 작은 알약
버튼#
누르면 무언가 일어나는 것
Button실물합친 이름 아이콘 버튼 · 정보 탭 넘기기버튼
누르면 무언가 일어나는 모든 버튼 - 채움·테두리·도구줄·원형·아이콘만(variant="ghost" iconOnly)까지.
Switch실물스위치
바로 반영되는 켜고 끄기 하나.
AutoPauseButton실물자동 넘김 멈춤
저절로 넘어가는 띠·티커를 멈추고 다시 돌리기(한 상태).
DetailLink문서합친 이름 CTA 링크 · 단지 링크상세 링크
모양 없는 이동 링크예요. 손이 닿을 때 미리 당겨 빠르게 열고, 클릭을 셀 곳은 track 속성(where·what)을 주면 한 번만 세요.
입력#
값을 넣거나 고르는 것
SearchField실물합친 이름 검색 열기검색 입력
글자로 찾는 입력 - 검색창, 검색을 여는 버튼 모양까지.
Slider실물합친 이름 분포 범위슬라이더
범위(가격·세대수)를 끌어서 고를 때. 분포 막대를 함께 둘 수 있어요.
TileGrid실물합친 이름 지역 필터 · 빠른 조건 타일타일 격자
지역·브랜드·시공사·교통·학교처럼 그림 있는 항목을 여러 개 놓고 고를 때.
TextField실물합친 이름 FieldError · 고르기 칸 · 체크박스글자 입력칸
검색이 아닌 글자 입력 - 이메일·이름 바꾸기·계획 이름·날짜·댓글·여러 줄 의견(multiline). 크기 3(sm·md·lg) · 면 2(field·bare) · 오류 문장 연결(FieldError) · 고르기 칸(SelectField) · 체크박스(Checkbox, 크기 sm·md).
오버레이#
화면 위에 잠깐 뜨는 것
데이터 시각화#
숫자의 흐름을 그리는 것
Sparkline실물합친 이름 시장 칸 부품스파크라인
숫자 옆 한 줄 추세.
Chart실물미니 차트
작은 선·막대 그래프(카드 안).
ChartFrame문서차트 틀
큰 차트의 틀 - 설정·기간·전체화면.
LineChart · Bars실물글 속 그래프
글 속 서버 그림(자바스크립트 없이).
FngGauge실물심리 게이지
0~100 심리·위치를 반원·막대 게이지로.
MapPreview실물위치 미리보기
위치 미리보기 지도.
Treemap실물트리맵
면적으로 비중을 보여 주는 트리맵.
IndexTile실물지수 타일
지수 하나를 타일로.
RankingTable실물합친 이름 지표 열 머리 · 실거래 표 · 지수 표 · 관심 목록 표단지 표
정렬·열 고르기가 있는 표. 단지 표가 기준이에요.
표시#
값과 글을 읽히게 하는 것
피드백#
불러오는 중 · 비어 있음 · 오류
미디어#
로고 · 아바타 · 아이콘
화면 블록#
공용 부품을 조립해 화면 한 곳에서 쓰는 조각이에요. 다른 화면에서 같은 일이 필요하면 블록을 베끼지 말고 위의 부품으로 조립해요.
단지·유형 상세
단지 상세에 쌓이는 카드와 차트
AgencyNoticeCard실물공공 공급 안내 카드
서울 단지 상세에서 같은 시도의 공공 공급(SH) 공고를 알려요. 서울이 아니면 그리지 않아요.
AiForecastCard실물AI 전망 카드
단지의 AI 가격 전망과 근거를 보여 줘요. 예측이라 보장하지 않는다는 말이 늘 붙어요.
BuyCostCard실물매입 비용 카드
대표가 기준으로 취득세 · 중개보수 같은 사는 데 드는 돈을 셈해요.
ComplexExtras실물단지 이야기 카드
단지를 한눈에 설명하는 짧은 글이에요. 함께 보는 단지 · 허브 링크 카드가 같은 파일에 있어요.
DockExtras실물도크 이야기 카드
도크 안에 넣는 단지 이야기 · 허브 카드예요. 단지 데이터를 스스로 받아 와요.
HousingKeyStats실물유형 핵심 지표
빌라 · 오피스텔 같은 유형 상세의 핵심 지표 묶음이에요.
JeonseCostCard실물전세 비용 카드
보증금 기준으로 전세에 드는 돈(중개보수 · 보증보험)을 셈해요.
KeyStats실물핵심 정보
단지 상세의 핵심 정보(가격 · 세대 · 입지)를 접고 펴요.
NoticeCard실물공고 카드
청약 · 임대 · 공매 공고의 핵심을 묻는 순서대로 보여 줘요.
PeersCard실물주변 단지 비교
같은 시군구 단지와 평당가를 견줘요. 시군구 데이터를 스스로 받아 와요.
PresaleCard실물분양가 카드
분양 당시 가격과 지금 대표가를 견줘요. 분양 정보가 없으면 그리지 않아요.
PriceChart실물가격 차트
단지 상세의 메인 차트예요. 실거래 점 · 시세선 · 전세를 함께 그려요.
RegionSupplyCard실물지역 공급 카드
시도의 입주 예정 물량을 해마다 보여 줘요. 공개 데이터를 스스로 받아 와요.
TargetAlert실물목표가 알림
단지가 정한 가격에 닿으면 알려 줘요. 로그인하면 설정할 수 있어요.
TradeHighlights실물실거래 요약
최근 거래 · 최고가 · 평형별 거래를 한눈에 보여 줘요. 평형을 고르면 차트와 함께 바뀌어요.
TypeOutlookCard실물유형 전망 카드
빌라 · 오피스텔 같은 유형의 지역 전망을 한 장으로 보여 줘요.
시장
시장 탭의 목록 카드와 지수 차트
AxisLeaders실물축별 대장 단지
세대수 · 학군 같은 축에서 앞서는 단지를 줄 세워요.
Breadth실물시장 폭
오른 단지와 내린 단지의 비율로 시장이 얼마나 넓게 움직이는지 보여 줘요.
MarketBriefCard실물시장 브리핑
AI가 쓴 시장 한 단락과 심리 게이지예요.
Movers실물오른·내린 단지
1년 변동이 큰 단지를 오른 쪽 · 내린 쪽으로 보여 줘요.
NewBuilds실물새 아파트
준공이 가까운 단지를 모아요.
PopularComplexes실물많이 본 단지
요즘 많이 본 단지를 공개 집계에서 받아 와요.
ReadsCard실물읽을거리 카드
인사이트 글 · 공지를 모은 카드예요.
RecentTrades실물최근 실거래
오늘 공개된 거래를 단지 줄로 보여 줘요.
TradeMovers실물거래가 움직인 단지
직전 거래보다 크게 오르거나 내린 거래를 모아요.
IndexChart실물지수 차트
지역 지수의 흐름을 그려요. 값 줄이 함께 움직여요.
RegimeInsight실물시장 국면 카드
지금 시장이 어느 국면인지 공개 검증 데이터로 보여 줘요.
RegionLeaders실물지역 대장 단지
지역마다 가장 앞서는 단지를 모아요.
스크리너
조건 고르기 · 저장한 조건 · 지역 고르기
RegionMapPicker문서지도 지역 선택
지도 위에서 시군구를 눌러 고르는 선택기예요.
ColumnManager실물컬럼 편집
표에 보일 컬럼을 고르고 순서를 바꿔요. PC는 팝오버, 폰은 아래 시트예요.
FacetFilter실물조건 묶음
지역 · 브랜드 · 시공사 · 교통 조건을 한 창에서 골라요.
FacetPicker실물브랜드·시공사 고르기
검색 줄과 로고 목록에서 브랜드 · 시공사를 골라요.
ConditionBar실물조건 바
고른 조건 칩과 결과 수 · 초기화를 한 줄로 보여 줘요.
MyScreeners실물내 스크리너
저장한 조건 묶음을 이름으로 불러와요. 로그인하면 기기 사이에 이어져요.
QuickMyScreeners실물내 스크리너 칩
저장한 조건을 홈 위 칩으로 바로 불러와요.
SavedScreenerRow실물저장한 조건 줄
저장한 조건 하나를 이름 · 조건 요약 · 동작과 함께 보여 줘요.
QuickScreen실물빠른 스크리너
홈의 짧은 스크리너예요. 지역 · 가격 · 세대수를 몇 번 눌러 걸러요.
구독 · 계정
받아보기 · 수신 거부 · 계정
글
글 본문과 글 끝 덧붙임
임장 계획
방문 지도와 담기