UI GUIDE · 화면 요소와 스타일
모달·토스트·스켈레톤·벤토 그리드처럼 화면에서 본 UI의 이름을 찾고, 언제 쓰는지와 Claude Code·Codex에 시키는 프롬프트까지 확인합니다. 모든 예시는 실제로 동작합니다.
24개 항목·요소 21 · 스타일 3
화면에 놓이는 부품. 이름을 알면 프롬프트 한 줄이 정확해집니다.
요소Drawer · Sheet
햄버거 버튼(≡)을 누르면 옆에서 스르륵 나오는 메뉴. 모바일에서 아래에서 올라오는 선택 창.
요소Dropdown Menu
점 세 개(⋯) 버튼을 누르면 아래에 펼쳐지는 목록. 마지막 줄에 빨간 '삭제'가 있는 그것.
요소Modal
화면 가운데 뜨는 창. 뒤가 어두워지고 클릭이 막힙니다.
요소Badge · Chip
글 제목 옆의 작은 '새 글' 라벨, 아이콘 위의 빨간 숫자, 필터로 고른 태그의 알약.
요소Bento Grid
큰 칸·작은 칸이 섞여 빈틈없이 맞물린 카드 격자.
요소Breadcrumb
제목 위에 작게 '홈 › 가이드 › UI 가이드' 하고 화살표로 이어진 한 줄.
요소Segmented Control
알약 모양 안에서 선택 표시가 미끄러지는 붙은 버튼 묶음.
요소Skeleton
로딩 중에 보이는 회색 블록들. 글자·사진 자리에 깜빡이는 막대.
요소Scrollspy
긴 문서 오른쪽에 붙어 있는 목차. 내리면 지금 읽는 제목이 진하게 따라옵니다.
요소Scrim
모달이 뜰 때 뒤가 어두워지는 그 검은 반투명 막.
요소Steps · Stepper
결제 화면 위쪽에 번호 원 세 개가 선으로 이어져 있고, 지금 단계만 파란 그것.
요소Avatar Group
동그란 프로필 사진 서너 개가 겹쳐 있고 끝에 +12 가 붙은 것.
요소Empty State
아무것도 없을 때 가운데 뜨는 아이콘 + 한 줄 안내 + 버튼.
요소Infinite Scroll
SNS 피드처럼 아래로 내려도 끝이 없고, 끝 근처에서 잠깐 로딩이 돌다 더 붙는 것.
요소Command Palette
⌘K를 누르면 화면 중앙 위에 뜨는 검색창과 결과 목록.
요소Tabs
서류철 탭처럼 위에 라벨이 줄지어 있고, 누르면 아래 내용이 통째로 바뀝니다.
요소Toast
구석에 잠깐 떴다가 사라지는 작은 알림 상자.
요소Tooltip
아이콘 위에 마우스를 올리면 뜨는 작은 검은 말풍선.
요소Pagination
목록 맨 아래 '‹ 1 2 3 … 12 ›' 하고 늘어선 번호 버튼.
요소Focus Ring
Tab 키를 누르면 버튼이나 입력창 둘레에 생기는 파란 테두리.
요소Progress Bar
왼쪽부터 차오르는 가로 막대. 옆에 63% 같은 숫자가 붙기도 합니다.
화면 전체의 인상을 정하는 표현 방식. 이름 하나가 색·보더·그림자 규칙을 함께 실어 나릅니다.
스타일Glassmorphism
뒤가 흐릿하게 비치는 반투명 유리 카드.
스타일Neobrutalism
두꺼운 검은 테두리에 노랑·핑크 색면, 오른쪽 아래로 붙은 딱딱한 그림자.
스타일Neumorphism
배경에서 찰흙처럼 솟아오르거나 눌려 들어간 듯한 버튼.
