안을 스크롤해 보세요 — 창에 보이는 만큼이 viewport
지금 보이는 영역
본문 폭 제한 · 가운데 정렬
가로로 나란히세로로 쌓기
스크롤하다 붙음화면에 고정
기준 상자 안 좌표로그 기준 상자
카드를 누르면 맨 위로 — 숫자가 클수록 위
겹침 순서
상자보다 긴 설명 문장이 넘칠 때 어떻게 보여줄지 정하는 것이 overflow 입니다. 잘라낼까, 스크롤할까, 말줄임할까.
넘칠 때 처리… 말줄임
drawer로 바꾸고 ☰ 를 눌러보세요 — 이름에 올리면 그 칸이 켜집니다
상단 띠
앱의 상단 바
측면 메뉴
아이콘만
☰로 여닫음
첫 큰 영역
본문
보조 영역
옆 패널
하단
safe area 보기
빨간 빗금은 기기가 가리는 곳. 버튼·글자는 초록 점선 안에 두어야 잘리지 않습니다. 아래 이름에 올리면 해당 부위가 켜집니다.
기기 테두리
카메라 홈
최상단 OS 띠
안전 영역
하단 막대
점선이 손가락이 닿는 실제 영역. 아이콘은 같아도 누르는 칸은 44px
누를 최소 크기 44px
팀 일정을 한 곳에흩어진 캘린더를 5분 만에 합치세요
3,200개 팀이 쓰고 있어요ACMEGlobexInitechHooli
Free₩0
Pro₩9,900
Team₩29,000
무료 체험 기간은?
14일, 카드 등록 없이.
언제든 해지되나요?
네, 클릭 한 번이면 됩니다.
the fold — 여기 위가 첫 화면
단어에 올리면 그 구역으로 스크롤 — 랜딩은 위에서 아래로 이 순서
첫 인상 + 버튼
로고·후기·숫자
기능 소개
요금제
자주 묻는 질문
마지막 행동 유도
스크롤 전 첫 화면
주문 #1024
왼쪽 줄을 누르면 오른쪽이 바뀜
목록 + 상세
이름이메일비밀번호
G · SSO로 계속
로그인·가입
주문 요약상품 2₩38,000
배송무료
합계₩38,000
결제 화면
필터·기간을 바꾸면 숫자와 차트가 바뀌고, 선 차트 위에 올리면 tooltip이 뜹니다
상단 거르기
기간
큰 숫자
▲▼ 증감
미니 추이
시간 추이
항목 비교
비율
범례
올리면 값
가볍고 튼튼한 데일리 백팩. 15인치 노트북 수납.
★★★★☆ 4.6 · “수납이 넉넉해요”
문의 3건 · 평균 답변 2시간
같은 자리 내용 전환선택된 탭
보기 방식 전환
버튼 아래 목록명령 목록
주간 리포트방문자 12% 증가, 전환율 유지
리포트
신규 가입 분석모바일 가입이 절반을 넘었어요
분석
알림 설정 개편꼭 필요한 알림만 남겼어요
공지
정보 상자카드 격자
표정렬·선택 되는 표
목록목록 한 줄
사람 표시여러 명접속 중
눌러서 고르는 라벨붙어 있는 라벨× 로 지움
숫자 알림점 알림NEW 같은 딱지
프로젝트_최종_진짜최종_v3.pdf
올리거나 Tab으로 가면 짧은 설명이 뜸
짧은 설명 말풍선
배송은 얼마나 걸려요?
평일 기준 1–2일이에요.
교환·환불은요?
받은 날부터 7일 안에 가능해요.
해외 배송도 되나요?
지금은 국내만 가능해요.
접었다 펴기
1 / 4여름 세일최대 40%
2 / 4신상품이번 주 입고
3 / 4무료 배송3만 원 이상
4 / 4회원 혜택첫 구매 쿠폰
옆으로 넘기기점(dots)
뒤를 막는 창대화상자뒤 어두운 막같은 말
안 막는 패널뒤를 막지 않음
아래서 올라옴끌어 닫는 손잡이
줄을 누르면 오른쪽에서 상세가 밀려 들어옴
옆에서 밀려오는 상세
저장했어요실행 취소
화면 아래에 잠깐 떴다가 저절로 사라짐
잠깐 뜨는 알림되돌리기 달린 토스트
새 버전이 나왔어요. 새로고침하면 적용돼요.
직접 닫기 전까지 남아 있음 — 토스트와 차이
닫을 때까지 남는 안내
배포 전에 환경 변수를 확인하세요.
팁.env.example을 복사해 시작하면 빠뜨리지 않아요.
그다음 빌드를 실행합니다.
본문 속 강조 상자
썸네일을 누르면 화면 가득 — ← → 로 넘기기
사진 크게 보기
짧은 대기퍼센트끝을 모를 때
하하늘디자인 시스템 초안을 올렸어요. 버튼 상태 8종까지 정리했습니다.
회색 뼈대번쩍 지나가는 빛
아직 할 일이 없어요첫 할 일을 추가하면 여기에 쌓여요
0건 화면 + 다음 행동
목록을 불러오지 못했어요네트워크 연결을 확인해 주세요
다시 불러오는 중…
불러왔어요 · 12건
실패 화면다시 시도
“ne”, “ty” 처럼 몇 글자만 — ↑↓ Enter, 빈칸에서 Backspace는 삭제
입력이 칩으로추천 목록
모달Ctrl K
modal뒤를 막는 창
bottom sheet아래서 올라옴
⌘K 명령 검색
- 로그인 버그 수정
- 대시보드 차트
- 온보딩 문구
- 다크 모드
점 손잡이를 끌거나, 손잡이에서 ↑↓ 키
끌어서 옮기기잡는 손잡이
회의 일정 변경내일 10시 → 11시
청구서 도착9월 사용료 안내
줄을 왼쪽으로 밀어보세요 ← (마우스는 끌거나 클릭)
밀면 나오는 버튼
default
hover
focus
active
disabled
loading
success
error
직접 해보기 →
마우스를 올리고(hover), Tab으로 가보고(focus), 눌러보세요(active) — 클릭하면 loading → success / error
평소
올렸을 때
키보드로 왔을 때
누르는 중
못 누름
처리 중
성공
실패
“간격은 8의 배수로” 한 줄이면 화면이 정돈됩니다
간격 단계8의 배수
숫자가 클수록 떠 보입니다 — 모달이 가장 높음
높이그림자
Display 32Heading 22Body 15 — 본문은 이 크기Caption 12
글자 크기 4단계
Surface 위의 글자카드·시트의 바탕이 surface, 그 위 글자색이 on-surface
primarysurfaceon-surface
주 색바탕 면그 위 글자색
저장 완료 — success
용량 90% 사용 — warning
결제 실패 — danger
새 기능 안내 — info
의미가 정해진 색
경계 폭 640/1024폭에 따라 바뀜
linear
ease-out
ease-in-out
부드럽게 넘어가기지속 시간 200ms속도 곡선
카드 제목이 길어지면 줄 수를 고정해 잘라냅니다. 두 줄까지만 보여주고 나머지는 말줄임표로 처리하면 카드 높이가 들쭉날쭉해지지 않습니다.
N줄에서 말줄임
PROJECT바이브 대시보드3일 전 · 팀 A주간 방문자 추이를 한눈에 보는 내부 도구
크기·굵기·색의 위계
숫자가 바뀌어도 자리가 흔들리지 않아야 표가 편합니다
숫자 폭 고정
fill은 찌그러집니다 — 목록 썸네일은 cover
cover 잘라 채움 / contain 여백
'/><circle cx='150' cy='150' r='44' fill='%23FFE08A'/><path d='M0 300 90 200l60 60 50-40 100 90v90H0z' fill='%230D3D38'/><path d='M0 340 110 265l80 55 110-45v125H0z' fill='%23061A1A'/></svg>)
공정 대시보드한눈에 보는 이번 주 수율
overlay
끄면 글자가 사진에 묻힙니다 — “글씨가 안 보여요”의 답
큰 대표 사진어두운 그라데이션 막
회색 자리를 먼저 잡아두면 화면이 덜컹이지 않습니다
자리 먼저 잡기늦게 불러오기
웹은 Lucide · 선택된 탭만 filled — 이모지와 섞지 않기
Lucide 한 세트선 / 채움16 / 20 / 24
UI/UX 치트시트받은편지함문서
vibe-coding.euiyun.com/ui-ux/cheatsheet.html
UI/UX 비주얼 치트시트geniuskey.github.io
탭 아이콘 32×32공유 미리보기 1200×630
dark mode
알림 설정
중요한 소식만 받아보세요
이메일 알림
구글·안드로이드
애플
MS·오피스
웹 기본값
기업용
밝기 축
THIS WEEK수율 96.4%
여백·얇은 선·색 한두 개
반투명 + 블러 유리판
같은 색 면을 그림자로만 구분
굵은 테두리 + 딱딱한 그림자
수율 96.4%Lot 1,284▲ 1.8%p리포트 →
크기 다른 타일 격자
이 발표 자료의 스타일
‘’에 맞는 부품이 없어요
영어 이름이나 한글 뜻으로 다시 찾아보세요. 지금 이 화면이 바로 empty state입니다.
'/><circle cx='200' cy='120' r='38' fill='%23FFE08A'/><path d='M0 300 90 200l60 60 50-40 100 90v90H0z' fill='%230D3D38'/></svg>)