"그거 좀 이쁘게 해줘"가 안 먹히는 이유는 실력이 아니라 단어입니다.
레이아웃 · 베젤 · 사이드바 · 엘리먼트 이름 · 테마까지 — 이름을 알면 주문이 됩니다.
바이브 코딩 세미나 시리즈 · geniuskey
왼쪽에 메뉴 같은 거 있고, 위에 띠 하나 있고, 버튼은 좀 더 예쁘게… 아 그리고 폰에서도 잘 되게.
좌측에 240px 고정 사이드바, 상단에 56px 앱 바. 버튼은 primary / secondary 두 종류, 라운드 12px. 모바일(<768px)에서는 사이드바를 햄버거 드로어로.
머릿속엔 그림이 있는데 부를 이름이 없다. 그래서 "그거", "저거"로 설명하게 됩니다.
모호한 말은 AI가 알아서 해석합니다. 매번 다른 화면이 나오는 게 당연합니다.
"위에 있는 거 좀 내려줘"는 어느 것인지 모릅니다. 고치다 멀쩡한 데가 깨집니다.
외우지 않아도 됩니다. "아, 저게 그거였구나" 한 번만 연결되면, 다음부터는 프롬프트에 자연스럽게 나옵니다.
마지막 장에 치트시트 한 장과 화면 주문서 템플릿을 드립니다.
읽는 법 — 민트 밑줄 용어에 마우스를 올리면 같은 장 그림에서 그 부분이 켜지고(클릭하면 고정), 노란 점선 용어는 그 부품이 나온 장을 미리 보여줍니다(클릭하면 이동). 위 다섯 칸을 누르면 해당 장으로 갑니다.
버튼·카드·화면 전체 — 웹의 모든 요소가 이 4겹 상자입니다.
padding = 테두리 안쪽 숨통 → "버튼이 너무 꽉 껴요"의 답.
margin = 테두리 바깥 거리 → "요소들이 너무 붙었어요"의 답.
| 이렇게 말하는 대신 | 이렇게 |
|---|---|
| 버튼이 답답해요 | padding 12px 20px |
| 카드가 서로 붙었어요 | gap 16px |
| 테두리 좀 둥글게 | border-radius 12px |
| 선 얇게 한 줄 | border 1px solid |
| 내용이 벽에 붙었어요 | 컨테이너 padding 24px |
flex row 가로 한 줄 · flex column 세로 한 줄 ·
grid 격자.
정렬은 가운데 정렬(center) · 양끝 정렬(space-between)만 알아도 대부분 됩니다.
sticky 스크롤하다 특정 위치에서 붙음(헤더가 상단에 고정되는 그것) · fixed 화면에 완전히 고정 · absolute 부모 기준 좌표로 얹기.
z-index 위아래 순서(모달이 가려지면 이 얘기) · overflow scroll 넘치면 스크롤 · truncate / ellipsis 넘치면 …로 자르기.
헤더는 sticky로 상단 고정하고 z-index 높게. 목록은 flex column, gap 12px. 제목이 길면 한 줄로 truncate 처리해줘. 본문 영역만 overflow-y: auto 로 스크롤되게.
"모달이 뒤에 깔려요" → z-index · "글자가 넘쳐 흘러요" → overflow · "스크롤하면 헤더가 사라져요" → sticky · "화면이 두 번 스크롤돼요" → height 100% / 100vh 충돌.
이름에 올리면 칸이, 칸에 올리면 이름이 켜집니다 — 클릭하면 고정, 가만히 두면 자동으로 순회합니다.
항상 펼쳐진 상태. 데스크톱 업무용 화면의 기본. "240px 고정 사이드바".
아이콘 폭만 남긴 얇은 사이드바. "레일로 접어두고 hover 시 펼치기" — 카드에 올려 보세요.
평소엔 숨어 있고 ☰ 누르면 밀려 나옴. 뒤를 덮는 어두운 막이 스크림.
모바일 하단 탭. 엄지로 닿는 자리라 앱에서는 사이드바보다 이걸 씁니다.
데스크톱은 240px 고정 사이드바, 태블릿은 아이콘 레일, 모바일은 햄버거 드로어(스크림 포함) + 하단 탭 4개로 해줘.
하단 탭 바는 safe-area-inset-bottom 만큼 패딩 줘서 홈 인디케이터에 안 겹치게 해줘.
제품 소개부터 가입까지 한 장. 히어로부터 아래로 읽힙니다.
KPI 카드 + 추이 차트 + 필터. 현황을 한눈에.
왼쪽 목록에서 고르면 오른쪽 상세. 메일·이슈함 구조.
섹션 목록 + 항목 폼. 스위치는 누르면 즉시 저장.
가운데 카드 하나 — 입력 2개 + 주 버튼 + SSO.
첫 사용 안내. 일러스트 + 한 줄 + 단계 점 + 다음 버튼.
없는 주소일 때. 이유 한 줄 + 홈으로 버튼 — 막다른 길 금지.
입력 폼 + 주문 요약(합계 고정). 길면 스테퍼로.
사내 수율 도구를 만들어줘. 화면은 대시보드(KPI 카드 + 추이 차트) · 목록-상세(왼쪽 Lot 목록) · 설정 3개. 로그인은 SSO 버튼 하나, 없는 주소는 404 페이지(홈으로 버튼), 첫 접속엔 3단계 온보딩.
랜딩 페이지를 이 순서로 만들어줘. 내비 바(sticky) → 히어로(헤드라인 · 서브카피 · CTA 2개) → 로고 띠 → 피처 3열 → 후기 → 가격표 3플랜(가운데 추천) → FAQ 아코디언 → CTA 섹션 → 푸터. 헤드라인과 CTA는 폴드 위(첫 화면)에 다 보이게.
수율 대시보드를 만들어줘. 상단 필터 바(날짜 범위 + 라인 셀렉트 + 일/주/월 세그먼티드), KPI 카드 3개(큰 숫자 + 전주 대비 델타 + 스파크라인), 본문은 수율 추이 라인 차트와 라인별 바 차트. 차트엔 호버 툴팁과 범례, 숫자는 tabular-nums로 자리 맞춤. 좋음은 초록 · 나쁨은 빨강.
화면에서 가장 하고 싶은 행동 딱 하나. 색이 꽉 찬 버튼. 이 행동을 CTA라고 부릅니다.
회색 또는 테두리만. 테두리형은 아웃라인 버튼이라고 부르면 바로 통합니다.
배경 없이 글자만. 링크처럼 보이지만 동작은 버튼.
되돌릴 수 없는 행동은 빨강. "삭제는 destructive 스타일로"라고 주문하세요.
아이콘만 있는 정사각 버튼. ⋯는 더보기(케밥/미트볼) 메뉴 버튼.
우하단에 떠 있는 동그란 버튼. 머티리얼(안드로이드)의 상징적 부품.
"버튼 만들어줘" 대신 "primary 버튼 하나 + ghost 취소 버튼" — 위계가 정해지면 AI가 색과 크기를 스스로 맞춥니다.
위 작은 글자는 레이블, 안쪽 흐린 안내는 플레이스홀더, 아래 설명은 헬퍼 텍스트.
여러 개를 동시에 고를 때. 네모.
여럿 중 하나만 고를 때. 동그라미.
켜고 끄는 설정. 누르는 즉시 적용됩니다(저장 버튼 없음) — 눌러 보세요.
범위 값 조절(볼륨·가격대). 손잡이는 썸, 막대는 트랙(채워진 쪽은 액티브 트랙).
눌러서 목록에서 고르기. 검색까지 되면 콤보박스·오토컴플리트.
돋보기가 붙은 입력. 입력 안 왼쪽 아이콘은 leading icon, 오른쪽은 trailing icon.
입력이 틀렸을 때 빨간 테두리 + 아래 메시지. "인라인 검증"이라고 주문합니다.
같은 층위의 화면을 갈아타기. 밑줄이 있는 게 현재 탭(액티브) — 눌러 보세요.
같은 화면의 보기 방식만 바꾸는 알약형 스위치. 애플 쪽에서 즐겨 씁니다.
"지금 여기" 경로 표시. 깊은 구조에서 길 잃지 않게 해줍니다.
목록을 페이지로 끊기. 스크롤로 계속 불러오는 방식은 무한 스크롤.
버튼을 눌러 뜨는 명령 목록. 마우스 오른쪽으로 뜨면 컨텍스트 메뉴.
여러 단계를 순서대로. "3단계 스테퍼로 나눠줘"처럼 주문합니다.
탭 vs 세그먼티드 — 탭은 다른 내용으로 이동, 세그먼티드는 같은 내용의 표현만 변경. 이 구분을 말해주면 화면 구조가 제대로 잡힙니다.
2026-09-21 · 공정기술팀
한 덩어리 정보를 담는 상자. 목록을 카드 그리드로 보여달라는 주문이 가장 흔합니다.
한 줄씩 쌓인 목록. 줄 왼쪽 아이콘·오른쪽 화살표를 leading/trailing이라 부릅니다.
| Lot | 수율 ↓ |
|---|---|
| A-113 | 98.2% |
| A-114 | 96.7% |
행·열 표. 정렬·필터·고정 헤더가 붙으면 데이터 그리드입니다.
아바타는 사람 표시(이니셜·사진), 배지는 숫자·점 알림. 여러 개 겹치면 아바타 그룹.
작은 알약형 라벨. 지우기(✕)가 붙으면 필터용 입력 칩.
마우스를 올렸을 때만 뜨는 짧은 설명. 길면 툴팁이 아니라 팝오버로.
눌러서 접고 펴는 영역 — 직접 눌러 보세요. FAQ·설정 화면의 단골.
좌우로 넘기는 배너. 아래 점들이 페이지 인디케이터(dots).
이 작업은 되돌릴 수 없습니다.
답할 때까지 뒤를 막는 창. 뒤의 어두운 막이 스크림(백드롭·오버레이). 확인용 짧은 것은 컨펌 다이얼로그.
누른 요소 옆에 붙어 뜨는 작은 패널. 뒤를 막지 않아 계속 쓸 수 있습니다.
카카오톡 · 메일 · 링크 복사
아래에서 올라오는 패널. 모바일에서 모달 대신 씁니다. 위 손잡이는 그래버.
잠깐 떴다 사라지는 알림. 안드로이드/머티리얼에선 스낵바(되돌리기 버튼 포함).
사라지지 않고 자리를 차지하는 안내 띠. 문서 안의 강조 박스는 콜아웃.
모달은 흐름을 끊고, 논모달(팝오버·토스트)은 안 끊습니다. 끊을지 말지를 정해서 주문하세요.
짧은 대기(1초 내외)에. 길어지면 답답해 보입니다.
끝이 보이는 작업에. 퍼센트·남은 개수를 함께 보여주면 신뢰가 생깁니다.
들어올 내용의 회색 뼈대. 목록·카드 로딩의 요즘 기본값.
데이터가 0건일 때의 화면. 그림 + 한 줄 설명 + 다음 행동 버튼이 정석.
로딩 중에는 스켈레톤, 데이터 0건이면 엠프티 스테이트(안내 문구 + 생성 버튼), 실패하면 에러 상태(재시도 버튼)까지 같이 만들어줘.
AI는 "잘 된 경우"만 그려주기 쉽습니다 — 로딩 · 빈 상태 · 에러 세 가지를 요구하는 습관이 아마추어와 프로를 가릅니다.
가로:세로 비율. 썸네일은 16:9, 사진은 4:3, 프로필은 1:1 — 고정해야 목록이 가지런합니다.
틀과 비율이 다를 때 — 늘리면 찌그러지고, cover는 잘라서 꽉, contain은 여백 두고 통째로.
사진 위 글자가 묻히면 어두운 그라데이션 오버레이를 깝니다. "글씨가 안 보여요"의 답.
이미지가 오기 전 회색 자리를 잡아두면 화면이 덜컹이지 않고 그 자리에 채워집니다. 화면 밖 이미지는 lazy 로딩.
웹은 Lucide, 안드로이드는 Material Symbols, iOS는 SF Symbols. 이모지와 섞으면 조잡해 보입니다.
선만 그린 아웃라인과 속을 채운 필드. 탭 바에선 선택된 탭만 filled — 그게 "지금 여기" 표시입니다.
자리로 정합니다 — 16px 글자 옆, 20px 버튼 안, 24px 툴바·탭 바. 선 굵기도 하나로.
브라우저 탭의 작은 아이콘(32×32)이 파비콘. 링크 공유 때 뜨는 큰 그림은 OG 이미지(1200×630).
썸네일은 16:9 + object-fit: cover, 로딩 중엔 회색 플레이스홀더, 히어로 사진엔 어두운 오버레이. 아이콘은 이모지 말고 Lucide outline 20px로 통일, 선택된 탭만 filled. 파비콘도 만들어줘.
달력에서 날짜 고르기. 시작·끝을 고르면 date range picker — 사이가 칠해집니다. 기간 필터의 정석.
점선 영역에 끌어 놓거나 눌러서 선택. 올려 보세요 — 켜지는 게 드래그 오버 상태.
입력칸 안에 칩으로 쌓이는 태그 입력, 치는 중에 후보가 뜨는 오토컴플리트. 검색되는 셀렉트는 콤보박스.
⌘K(Ctrl+K)로 여는 검색형 명령창. 치면 화면 이동·명령이 목록으로. 메뉴 많은 도구의 필수품.
⋮⋮ 핸들을 잡고 끌어 순서 바꾸기. 들린 줄과 놓일 자리 표시까지 주문하세요.
편집 화면 없이 그 자리에서 고치기. 누르면 입력칸 + ✓/✕로 바뀝니다. 표·제목 수정에 딱.
모바일에서 줄을 옆으로 밀면 뒤에서 삭제·보관 버튼이 나옵니다. 메일 앱의 그것.
끝에 닿으면 알아서 더 불러오기 vs 눌러서 더 보기. 아래에 푸터가 있으면 더 보기가 안전합니다.
기간 필터는 date range picker, 첨부는 드롭존(드래그 오버 표시), 담당자는 오토컴플리트 태그 입력. ⌘K 커맨드 팔레트로 화면 이동, 목록 순서는 드래그 핸들로, 제목은 인라인 편집, 긴 목록은 더 보기 버튼.
| 헷갈리는 둘 | 구분하는 한 문장 | 프롬프트에 쓸 때 |
|---|---|---|
| 모달 vs 팝오버 | 모달은 뒤를 막는다(스크림). 팝오버는 안 막는다. | 확인은 모달, 필터는 팝오버 |
| 토스트 vs 배너 | 토스트는 사라진다. 배너는 자리를 차지하고 남는다. | 저장 완료는 토스트 |
| 탭 vs 세그먼티드 | 탭은 다른 내용으로, 세그먼티드는 같은 내용의 보기 방식. | 일/주/월은 세그먼티드 |
| 사이드바 vs 드로어 | 사이드바는 항상 있고, 드로어는 눌러야 나온다. | 모바일은 드로어로 전환 |
| 칩 vs 배지 | 칩은 누를 수 있는 라벨, 배지는 숫자·점 표시. | 태그는 칩, 알림 수는 배지 |
| 베젤 vs 패딩 | 베젤은 기기 테두리(하드웨어), 패딩은 화면 안 여백. | 여백은 언제나 padding |
| 플레이스홀더 vs 레이블 | 플레이스홀더는 입력하면 사라진다 — 그래서 레이블이 따로 필요. | 레이블은 항상 밖에 |
| 스피너 vs 스켈레톤 | 스피너는 "기다려", 스켈레톤은 "이런 게 올 거야". | 목록 로딩은 스켈레톤 |
줄에 마우스를 올리면 두 부품의 실물을 나란히 띄웁니다 — 클릭하면 그 부품이 나온 장으로 이동합니다.
"버튼 만들어줘"라고만 하면 default 하나만 나옵니다. 상태 이름을 말하면 AI가 hover·disabled·loading을 알아서 다 만들어 줍니다.
버튼에 hover / focus-visible / disabled / loading 상태를 전부 넣어줘. 제출 중에는 버튼을 disabled + 스피너로.
| primary | 브랜드 강조색 (주 버튼·링크) |
| surface / bg | 카드·배경 면의 색 |
| on-surface | 그 면 위에 올라가는 글자색 |
| muted | 보조 설명용 흐린 글자 |
| semantic | success·warning·danger·info |
토큰 = 이름 붙인 숫자. "간격은 8의 배수, 라운드는 12px, 그림자는 1단계, 글자 크기는 4단계로 고정해줘" 한 줄이면 화면 전체가 정돈됩니다.
화면 기본은 산세리프, 세리프는 읽을거리, 모노는 코드·ID. 한글 웹폰트는 Pretendard.
"굵게" 대신 숫자로. 본문 400, 제목 700~800. 한 화면에 굵기는 2~3단계만.
줄과 줄 사이. 1.2는 답답하고 본문은 1.5~1.7. "글이 빽빽해요"의 답.
글자 사이 간격. 큰 제목은 -0.02em로 조이고, 작은 영문 라벨은 넓게.
본문은 왼쪽 정렬. 가운데 정렬은 제목·짧은 문구에만 — 긴 글엔 쓰지 않기.
넘치면 자르고 "…". 한 줄 truncate, n줄 line-clamp. 카드 제목의 필수 주문.
크기·굵기·색으로 읽는 순서를 만듭니다. 제목 → 본문 → 캡션 순으로 눈이 가야.
숫자 폭을 고정해 자릿수를 맞춤. 기본은 들쭉날쭉, 표·대시보드는 tabular-nums.
본문은 Pretendard 16px · 행간 1.6 · 왼쪽 정렬, 제목은 700에 자간 -0.02em. 카드 제목은 2줄 line-clamp, 표의 숫자 열은 tabular-nums로 오른쪽 정렬해줘.
레이아웃이 바뀌는 경계 폭. "768px 아래에서는 1열로"처럼 숫자로 말하면 정확합니다.
좁은 화면을 먼저 만들고 넓은 쪽을 더하는 순서. 요즘 웹의 기본 전략입니다.
%·1fr처럼 늘어나는 값과 240px 고정값. 사이드바는 고정, 본문은 유동이 흔한 조합.
모바일 퍼스트로 만들고, 브레이크포인트는 640 / 1024 두 개만 써줘. 카드 그리드는 1열 → 2열 → 3열, 사이드바는 1024px 미만에서 드로어로 전환.
아래 세 개는 완전히 같은 화면입니다. 라운드·그림자·버튼 모양·구분선 두께만 그 진영의 규칙을 따랐습니다 — 눌러서 세 진영을 나란히 비교해 보세요.
공정기술팀 · 오늘
둥근 알약 버튼 · 색면 앱 바 · 그림자로 높이 표현 · FAB · 스낵바. 안드로이드·구글 앱의 문법.
얇은 구분선 · 중앙 정렬 타이틀 · 파란 텍스트 버튼 · 세그먼티드 · 바텀 시트. iOS·macOS의 문법. 애플 공식 가이드 이름은 HIG.
공정기술팀 · 오늘
작은 라운드(4px) · 은은한 테두리 · 입력 아래 강조선 · 정보 밀도 높음. Windows·Office·Teams의 문법.
테마 = 디자인 시스템(색·간격·부품 모양의 규칙 묶음). 이름 하나만 대면 수백 가지 결정이 한 번에 정해집니다.
| 같은 물건 | 머티리얼 (Google · Android) | 쿠퍼티노 (Apple · iOS/HIG) |
|---|---|---|
| 상단 바 | Top app bar | Navigation bar (중앙 타이틀) |
| 하단 탭 | Navigation bar / bottom nav | Tab bar |
| 잠깐 뜨는 알림 | Snackbar (되돌리기 포함) | Toast / Alert |
| 선택지 시트 | Bottom sheet | Action sheet |
| 주 액션 버튼 | FAB (떠 있는 원형) | 화면 하단 꽉 찬 버튼 / 우상단 Done |
| 켜고 끄기 | Switch (보라) | Toggle (초록) |
| 보기 전환 | Tabs | Segmented control |
| 아이콘 세트 | Material Symbols | SF Symbols |
"안드로이드 느낌으로" → "Material 3 스타일로, FAB와 스낵바 사용"
"아이폰 앱처럼" → "Cupertino/HIG 스타일, 하단 탭 바와 액션 시트"
iOS 화면에 FAB, 안드로이드 화면에 중앙 정렬 타이틀 — 사용자는 이유는 몰라도 "싼 앱 같다"고 느낍니다. 한 테마를 골라 끝까지.
디자인 규칙이 아니라 간격·색을 짧은 클래스로 쓰는 방식. AI가 가장 잘 쓰는 도구. 요즘 기본값.
중립적 회색 + 라운드 8px
Tailwind 기반의 현대적 기본값. "shadcn/ui 스타일로"라고 하면 지금 SaaS 느낌이 나옵니다.
사내 업무 페이지에서 흔히 보는 파란 버튼. 익숙하지만 "좀 옛날 느낌"으로 읽힙니다.
| 이름 | 값 |
|---|---|
| A-113 | 98.2% |
표·폼·필터가 많은 내부 관리 도구에 강함. MUI는 머티리얼의 React 구현체.
Office·Teams와 나란히 놓을 화면이라면 이쪽이 자연스럽습니다.
테마와 별개인 밝기 축. "라이트/다크 둘 다 지원, 시스템 설정 따라가게"라고 주문합니다.
Tailwind + shadcn/ui 스타일로, 라이트/다크 모드 둘 다. 라운드 12px, 그림자는 약하게.
여섯 칸 모두 같은 카드입니다 — 스타일 이름 하나가 배경·테두리·그림자·글자를 한꺼번에 바꿉니다.
여백·얇은 선·색 한두 개. 가장 안전한 기본값 — 위계는 글자 크기 대비로.
컬러 배경 위 반투명 + 블러 유리판. 밋밋한 배경에선 안 보이고, 글자 명암비 주의.
같은 색 면을 볼록·오목 그림자로만 구분. 부드럽지만 버튼이 잘 안 보임.
굵은 검정 테두리 + 원색 + 딱딱한 그림자. 랜딩·포트폴리오용, 업무 도구엔 과함.
크기가 다른 타일을 한 격자에(도시락). KPI 요약에 인기 — 간격·라운드는 통일.
어두운 면 + 빛나는 테두리·글자. AI·개발 도구 느낌 — 네온은 포인트에만.
전체는 Linear 같은 미니멀(흰 배경 · 1px 테두리 · 그림자 거의 없음), KPI 요약만 벤토 그리드로. 글래스모피즘은 모달 배경에만(blur 12px), 뉴모피즘은 쓰지 마 — 버튼 명암비 4.5:1 유지.
| #4F46E5 | 헥사 코드 — 색을 지정하는 표준 표기. 색을 정확히 옮길 때 씁니다. |
| on-color | 그 색 위의 글자색. "파란 버튼에 흰 글자"가 primary/on-primary. |
| contrast | 명암비. 본문은 4.5:1 이상이어야 읽힙니다. |
| semantic | 의미가 정해진 색 — success(초록)·warning(노랑)·danger(빨강)·info(파랑). |
| gradient | 두 색이 섞이는 면. "보라→민트 그라데이션"처럼. |
| opacity | 투명도. 유리 같은 흐린 배경은 blur(글래스모피즘). |
| transition | 상태가 바뀔 때 부드럽게 넘어가기. 200ms가 무난한 기본값. |
| duration | 지속 시간. 150~300ms가 "빠릿하다"는 느낌의 구간. |
| easing | 속도 곡선. ease-out은 빨리 시작해 천천히 멈춤 — 대부분 이걸로. |
| micro-interaction | 버튼 눌림, 좋아요 하트 튐 같은 작은 반응. |
| skeleton / fade-in | 내용이 들어올 때 깜빡임 없이 스며들게. |
| reduced motion | 움직임에 민감한 사용자를 위해 애니메이션을 끄는 설정. 존중해야 합니다. |
호버와 전환은 200ms ease-out, 카드가 나타날 때만 살짝 fade-up. 과한 애니메이션은 넣지 말고, prefers-reduced-motion이면 전부 끄게 해줘.
키보드로 이동할 때 "지금 여기"를 알려주는 테두리. 지우지 말 것.
키보드만으로도 모든 버튼에 도달할 수 있어야 합니다.
본문 4.5:1, 큰 글자 3:1 이상. 회색 글씨가 예뻐 보여도 흐리면 실패.
손가락으로 누를 영역은 44×44px 이상. 아이콘만 작게 두면 안 눌립니다.
이미지·아이콘 버튼에 이름을 달아주는 속성. 눈으로 못 읽는 사용자를 위한 이름표.
빨강만으로 오류를 표현하면 색약 사용자는 못 봅니다 — 아이콘·글자를 함께.
프롬프트 한 줄로 챙길 수 있습니다 — "접근성 지켜줘: 포커스 링 유지, 명암비 4.5:1, 아이콘 버튼엔 aria-label"
먼저 유저 플로를 글로 정리하고, 그다음 와이어프레임(HTML)만 만들어줘. 확인하면 색·컴포넌트를 입혀 프로토타입으로 발전시키자.
첨부 스크린샷 ②번(필터 칩)을 세그먼티드 컨트롤로 바꾸고, ①번 레일은 Linear 사이드바처럼 호버하면 펼쳐지게. 배치는 대략 이래: +------+----------------------+ | MENU | [chip] [chip] [chip] | | | [ card ] [ card ] | +------+----------------------+ 모르는 부분은 먼저 각 영역의 UI 용어 이름부터 알려줘.
오른쪽 노란 점선 단어에 올리면 오늘 본 실물이 다시 뜹니다 — 클릭하면 그 장으로.
◯◯◯ 도구를 만들어줘. Tailwind + shadcn/ui, 미니멀 스타일, 라이트/다크 모드 둘 다. [화면] 대시보드 + 목록-상세 + 설정, 로그인은 SSO 버튼 하나, 없는 주소는 404. [레이아웃] 상단 56px 앱 바 + 좌측 240px 고정 사이드바 + 본문. 컨테이너 max-width 1200px. [내용] 본문은 카드 그리드(데스크톱 3열 / 태블릿 2열 / 모바일 1열, gap 16px). [부품] 검색 입력, 필터는 칩, 행 클릭 시 상세는 팝오버가 아니라 모달로. [상태] 로딩은 스켈레톤, 0건은 엠프티 스테이트(생성 버튼 포함), 실패는 재시도 버튼이 있는 에러 상태. [토큰] 간격 8의 배수, 라운드 12px, 그림자 약하게, 글자 크기 4단계(Display/Heading/Body/Caption). [글자] 본문 16px · 행간 1.6, 카드 제목은 2줄 line-clamp, 숫자 열은 tabular-nums. [반응형] 모바일 퍼스트, 브레이크포인트 640/1024. 1024px 미만에서 사이드바는 드로어로. [접근성] 포커스 링 유지, 명암비 4.5:1 이상, 아이콘 버튼에 aria-label. 먼저 와이어프레임 수준으로 만들고 스크린샷을 보여줘. 확인하면 스타일을 입히자.
대괄호 아홉 칸 전부 오늘 배운 단어로만 쓰여 있습니다. 이름이 막히는 칸은 스크린샷에 번호를 달아 함께 붙이세요.
프로젝트 성격에 맞게 한 번 고쳐두면 CLAUDE.md에 넣어 매번 자동 적용할 수 있습니다.
viewport 보이는 영역 · container 폭 제한 · grid/column 격자 · gutter/gap 간격 · padding 안쪽 · margin 바깥 · radius 라운드 · sticky/fixed 고정 · z-index 겹침 · overflow 넘침
header/app bar 상단 띠 · sidebar 측면 메뉴 · rail 아이콘만 · drawer 햄버거 · hero 첫 큰 영역 · main 본문 · aside/panel 보조 · footer 하단 · bottom nav 하단 탭
bezel 기기 테두리 · notch 카메라 홈 · status bar 최상단 OS 띠 · safe area 안전 영역 · home indicator 하단 막대 · touch target 44px 누를 최소 크기
landing 소개·가입 · dashboard 현황판 · list-detail 목록+상세 · settings 설정 · auth 로그인 · onboarding 첫 안내 · 404 에러 · 랜딩은 hero → social proof → features → pricing → FAQ → CTA · above the fold 첫 화면
filter bar 상단 거르기 · date range 기간 · KPI card 큰 숫자 · delta ▲▼ 증감 · sparkline 미니 추이 · line 추이 · bar 비교 · donut 비율 · legend/tooltip 범례·값
primary 주 행동 · secondary/outline 보조 · ghost/text 글자만 · destructive 위험 · icon button 아이콘만 · FAB 떠 있는 원형 · CTA 그 화면의 목표 행동
text field 입력 · label 이름 · placeholder 흐린 예시 · helper text 아래 설명 · checkbox 다중 · radio 단일 · switch 즉시 켬/끔 · slider 범위 · select 목록 · validation 검증
tabs 내용 전환 · segmented 보기 전환 · breadcrumb 현재 경로 · pagination 페이지 · menu/dropdown 명령 목록 · stepper 단계
card 정보 상자 · list item 목록 줄 · table/data grid 표 · avatar 사람 · chip/tag 라벨 · badge 숫자 알림 · tooltip 짧은 설명 · accordion 접기 · carousel 넘기기
modal/dialog 막는 창 · scrim/backdrop 어두운 막 · popover 안 막는 패널 · bottom sheet 아래서 올라옴 · toast/snackbar 사라지는 알림 · banner 남는 안내
spinner 짧은 대기 · progress 퍼센트 · skeleton 회색 뼈대 · empty state 0건 화면 · error state 실패 화면 + 재시도
date range picker 기간 · dropzone 파일 끌어 놓기 · tag input/autocomplete · command palette ⌘K · drag & drop 정렬 · inline edit 제자리 수정 · swipe action · load more 더 보기
default · hover · focus · active · disabled · loading · success · error — "전부 넣어줘"라고 한 줄 쓰면 끝
spacing 8의 배수 · radius 12px · elevation/shadow 높이 · type scale 글자 단계 · primary/surface/on-surface 색 역할 · semantic 의미색
line-height 1.6 행간 · weight 400/700 굵기 · letter-spacing 자간 · line-clamp 말줄임 · hierarchy 위계 · tabular-nums 숫자 · aspect ratio 16:9 · object-fit cover 잘라 채움 · icon set Lucide · favicon 탭 아이콘
Material 3 구글·안드로이드 · Cupertino/HIG 애플 · Fluent MS·Office · Tailwind + shadcn/ui 웹 기본값 · Ant/MUI 기업용 · dark mode 밝기 축 · 스타일 minimal · glass · neumorphism · brutalism · bento
점선 단어에 올리면 실물 미리보기, 클릭하면 그 장으로 — 복습용으로 쓰세요. 다음 장에는 이 단어들을 직접 눌러 보는 웹 페이지가 있습니다.
앞 장의 단어들을 전부 실제로 동작하는 부품으로 옮긴 웹 페이지 한 장. 이름이 기억나지 않을 때는 모양으로 먼저 찾으세요.
vibe-coding.euiyun.com/ui-ux/cheatsheet.html
디자인 감각이 없어도 됩니다. 지목할 이름과 숫자, 그리고 잘 안 될 때의 화면을 요구하는 것 — 이 셋이 바이브 코딩으로 만든 화면을 "만들어본 것"에서 "쓸 수 있는 것"으로 바꿉니다.
화면의 모든 칸과 부품에는 이미 이름이 있었습니다. 그 이름이 곧 프롬프트입니다.
부록: 비주얼 치트시트 ↗
함께 보기:
프롬프트 엔지니어링 ·
슬라이드 자료 만들기 ·
실습 워크숍 ·
바이브 코딩 입문