공통 화면 패턴
부품 하나보다 부품을 어떻게 놓는지가 화면의 인상을 정해요. 모바일·PC·차량이 모두 따르는 조합 규칙이에요.
카드 = 면 + CardHead(제목 옆 조작)#
조작은 그것이 바꾸는 카드의 제목 줄 오른쪽에 두고, 넓으면 제목 아랫줄로 내려가요. 면에는 테두리가 없고, 카드 밖 바는 나란한 칸의 윗선을 맞출 때만(spacer) 써요.
핵심 정보
매매 기준
예시조작 자리
세대수1,184세대
준공2011년
조작 없는 카드
제목 줄 오른쪽이 비어 있어요
세대수1,184세대
실제로 눌러 보려면 카드 골격 문서를 보세요.
숫자 = 값 · 변화 · 출처#
값은 t-val 계열(표 숫자)로 크게, 변화율은 알약으로, 바로 아래에 출처와 기준을 붙여요.
최근 실거래
15억 7,000만84㎡
+8.4%1년
이렇게 써요
- 단위는 값보다 작고 흐리게 붙여요.
- 억·만 단위로 끊어 읽히게 적어요(15억 7,000만).
이렇게 하지 않아요
- 상승을 초록으로 쓰지 않아요.
- 출처 없는 숫자를 내지 않아요.
잘리지 않는 줄#
라벨은 줄지 않고, 이름과 값은 넘치면 …로 잘려요. 격자 자식은 min-w-0을 가져야 긴 글자가 열을 밀지 않아요.
시공사삼성물산 · 현대건설 · 대우건설 · 포스코이앤씨 컨소시엄
주소서울특별시 마포구 신촌로 2길 19, 4층(동교동)
불러오는 중 · 빈 상태#
불러오는 동안은 내용 자리에 뼈대를 두고, 비었을 때는 다음 행동을 줘요.
불러오는 중
.skeleton - 자리를 미리 잡아 화면이 밀리지 않아요
빈 상태
EmptyState - 무엇이 없고 어떻게 하면 되는지
“조건에 맞는 단지가 없어요” 아래에 “조건 초기화” 버튼을 둬요. 빈 상태 문서에서 눌러 볼 수 있어요.
문장#
화면의 모든 글은 해요체로, 사용자가 아는 말로 써요.
이렇게 써요
- 버튼은 일어날 일을 동사로 적어요("관심 단지에 담기").
- 같은 동작은 끝까지 같은 이름이에요 - 담기 → "담았어요".
- 오류는 무엇이 왜 안 됐고 어떻게 하면 되는지 적어요.
이렇게 하지 않아요
- "제출", "확인"처럼 무슨 일이 일어날지 모르는 라벨을 쓰지 않아요.
- 사과하거나 모호하게 적지 않아요("문제가 발생했습니다").
- 시스템 말(웹훅·캐시)을 사용자에게 보여 주지 않아요.
강조 상자#
글 안에서 따로 묶어 보여 줄 것(요약 · 알림 · 지금 단계)은 테두리도 면도 없이 빛만 두른 상자에 담아요. 팀 아티클의 요약 카드와 같은 상자예요.
요약
숫자마다 출처와 기준일을 붙여요.
- 클래스는
ai-soft-glow하나(빛 = box-shadow라 면을 만들지 않아요). 리블 Open에서는 GlowBox · Callout이 이것만 써요. - 구분선·테두리로 칸을 나누지 않아요. 간격으로 나누고, 강조할 칸 하나에만 빛을 둘러요. 표의 행 선과 코드 칸은 그대로 둬요.
- 한 화면에 강조 상자를 여러 개 겹쳐 쓰지 않아요.