이 글에는 쿠팡 파트너스 링크가 있으며, 구매 시 일정액의 수수료를 받습니다.
바이브코딩 UI 용어 총정리, AI에게 화면 수정 요청하는 법
바이브코딩 UI 용어를 11개 카테고리 표로 정리하고, AI에게 화면을 고쳐 달라고 할 때 부품 이름을 어떻게 불러야 하는지 알려 드립니다. AI가 자주 빼먹는 ⚠️ 아홉 줄을 따로 모았고, 실제로 붙여 넣어 쓸 수 있는 요청 문장 예시도 덧붙였습니다.
바이브코딩 UI 용어를 알아야 하는 이유
바이브코딩(코드를 직접 짜지 않고 AI에게 말로 설명해 앱을 만드는 방식)으로 앱을 만들다 보면, 화면의 어떤 부품을 고쳐 달라고 AI에게 말해야 하는 순간이 계속 옵니다. 그런데 그 부품 이름을 모르면 설명이 길어지고, AI는 엉뚱한 곳을 고칩니다. "화면 뜨면 나오는 거 그거"라고 말하는 순간 시간이 새어 나가는 셈입니다.
이 글은 그 문제를 겨냥한 앱 UI 용어 정리표입니다. 원문은 인스타그램 @juuouse의 쥬하 님이 Notion에 공개한 "바이브코딩 앱 UI 용어 정리본"이고, 이 글은 그 표를 읽기 좋게 옮겨 실은 재정리입니다. 창작이 아니라는 점을 먼저 밝혀 둡니다. 표 안의 용어와 설명은 원문 그대로이고, 원문 주소는 글 끝에 있습니다.
원문이 내세우는 원칙은 한 줄입니다. 「화면 뜨면 나오는거 뭐지 그거 해줘」는 ❌, 「스플래시 @@이렇게 수정 해줘」는 ⭕️. 이름을 아는 순간 수정 시간이 줄어든다는 뜻입니다.
내용은 두 덩어리입니다. UI를 참고할 수 있는 사이트 10곳, 그리고 UI 컴포넌트(화면을 이루는 버튼, 입력칸, 목록 같은 부품) 용어 11개 카테고리 표입니다. 표는 한글 이름, 영어 이름, 한 줄 설명으로 되어 있습니다. 표에 ⚠️가 붙은 줄이 아홉 개 있는데, 원문 작성자가 AI에게 지시할 때 놓치기 쉽다고 표시한 것들입니다. 이 아홉 줄이 정리본의 알맹이입니다.
한글 이름과 영어 이름을 같이 알아 두면 좋은 이유
AI 코딩 도구는 한글 이름도 대부분 알아듣지만, 실제 코드 안에서는 영어 이름을 씁니다. 예를 들어 "하단 탭바"라고 말해도 AI가 코드에서 찾는 것은 TabBar나 BottomNav 같은 이름입니다. 요청할 때 "하단 탭바(Tab Bar)"처럼 둘을 같이 적으면 AI가 헷갈릴 여지가 줄어듭니다.
UI 참고 사이트 10곳
원문 표를 그대로 옮겼습니다. 어느 사이트를 어떻게 활용하라는 설명은 원문에 없고, 링크와 한 줄 소개만 있습니다.
| 바로가기 | 뭐하는 곳 | 링크 |
|---|---|---|
| Apple HIG | 애플 공식 가이드 | 바로가기 |
| Apple 디자인 팁 | 애플 공식 (위와 동일) | 바로가기 |
| Material Design 3 | 구글 공식 가이드 | 바로가기 |
| Flutter 위젯 | Material 목록 보기 편한 버전 | 바로가기 |
| Ionic 컴포넌트 | 실제 코드 이름 94개 | 바로가기 |
| daisyUI | 컴포넌트 이름 세트 (MIT) | 바로가기 |
| Uiverse | 복붙 UI 조각 7,440개 (MIT) | 바로가기 |
| Penpot | 오픈소스 디자인 도구 | 바로가기 |
| IBM Carbon | 오픈소스 디자인 시스템 | 바로가기 |
| Mobbin | UI 레퍼런스 모음 | 바로가기 |
열 곳을 넷으로 묶으면 머리에 잘 들어옵니다.
- 공식 가이드 셋: Apple HIG, Apple 디자인 팁, Material Design 3
- 컴포넌트 이름 목록 셋: Flutter 위젯, Ionic, daisyUI
- 복붙, 도구, 시스템 셋: Uiverse, Penpot, IBM Carbon
- 레퍼런스 모음 하나: Mobbin
참고 사이트 활용 순서 (편집자 제안)
원문에 활용법이 없어서 처음 쓰는 사람을 위한 순서를 제안합니다.
- 만들 앱이 아이폰 위주면 Apple HIG를, 안드로이드 위주면 Material Design 3을 먼저 훑습니다. 두 곳은 각 운영체제에서 "이 부품은 이렇게 생기고 이렇게 동작해야 한다"는 기준입니다.
- 부품 이름이 궁금하면 Ionic이나 daisyUI의 컴포넌트 목록을 엽니다. 부품마다 그림과 이름이 같이 있어 이름을 찾기 쉽습니다.
- 다른 앱은 이 화면을 어떻게 만들었는지 보고 싶으면 Mobbin에서 비슷한 앱 화면을 찾습니다.
- 마음에 드는 화면을 찾으면 캡처해서 AI에게 "이 화면처럼 만들어 줘"와 함께 부품 이름을 같이 알려 줍니다.
MIT 표시는 누구나 자유롭게 가져다 쓸 수 있는 오픈소스 라이선스라는 뜻입니다. 그래도 상업용으로 쓸 때는 각 사이트의 라이선스 안내를 한 번 확인하는 편이 안전합니다.
UI 컴포넌트 용어 11개 카테고리 표
여기부터가 본체입니다. 카테고리 열한 개, 각각 표 하나입니다. 표 안의 ⚠️ 표시와 문구는 원문 그대로 두었습니다.
① 화면 뼈대
| 한글 | 영어 | 설명 |
|---|---|---|
| 스플래시 | Splash | 앱 켜면 1~2초 뜨는 로고 화면 |
| 온보딩 | Onboarding | 처음 켰을 때만 나오는 안내 2~4장 |
| 앱바 | App Bar · Navigation Bar | 맨 위 제목 줄. 화면마다 바뀜 |
| 툴바 | Toolbar | 앱바 안에 버튼들이 들어가는 줄 |
| 하단 탭바 | Tab Bar · Bottom Nav | 앱 전체 구역 4~5개. ⚠️ 5개 넘기지 말 것 |
| 세이프 에어리어 | Safe Area | 노치·홈바에 가리면 안 되는 여백. ⚠️ AI가 제일 자주 빼먹음 |
| 콘텐츠 | Content · Scroll View | 가운데 스크롤 영역 |
| 그리드 | Grid | 가로 칸 나누기 |
| 푸터 | Footer | 화면 아래 고정 영역 |
이 표에서 ⚠️가 둘입니다. 하단 탭바는 5개를 넘기지 말 것, 그리고 세이프 에어리어. 세이프 에어리어는 노치(화면 위쪽 카메라 자리)와 홈바(화면 아래 가로 막대)에 가리면 안 되는 여백인데, 원문은 이것을 AI가 제일 자주 빼먹는다고 적어 놓았습니다. 화면 전체를 손볼 때 지시문에 "세이프 에어리어" 한 단어를 넣어 두면 됩니다.
② 화면 이동
| 한글 | 영어 | 설명 |
|---|---|---|
| 스택 | Stack Navigation | 화면을 쌓고 빼기 |
| 푸시 | push | 새 화면을 위에 쌓기 |
| 팝 | pop | 한 장 빼서 뒤로 가기 |
| 리플레이스 | replace | 현재 화면을 갈아끼우기. ⚠️ 로그인 성공 뒤엔 이것 |
| 뒤로가기 | Back Button | 앱바 왼쪽. 모달에선 ✕ |
| 탭 | Tabs | 한 화면 안에서 내용 전환 |
| 세그먼트 | Segment · Segmented Button | 붙어 있는 버튼 2~4개. 화면 위쪽 |
| 드로어 | Navigation Drawer · Menu | 옆에서 밀려 나오는 판 |
| 햄버거 버튼 | Menu Button | ☰ 눌러서 드로어 열기 |
| 내비게이션 레일 | Navigation Rail | 가로 화면용 세로 메뉴 |
| 브레드크럼 | Breadcrumb | 현재 위치 표시 |
| 딥링크 | Deep Link | 링크 누르면 앱 특정 화면으로 |
| 백 제스처 | Back Gesture | 왼쪽 끝에서 오른쪽으로 쓸어 뒤로 가기 |
스택 안에서 push, pop, replace 세 동작이 갈립니다. 화면을 종이처럼 쌓는다고 생각하면 쉽습니다. push는 새 종이를 위에 얹고, pop은 맨 위 종이를 빼고, replace는 맨 위 종이를 다른 종이로 바꿔 끼웁니다.
여기서 ⚠️는 replace 하나입니다. 로그인 성공 뒤에는 push가 아니라 replace를 써야 한다는 뜻입니다. 로그인 후 뒤로가기를 누르면 로그인 화면으로 되돌아가는 앱을 본 적이 있다면, 그게 이 차이입니다.
③ 목록
| 한글 | 영어 | 설명 |
|---|---|---|
| 리스트 | List | 세로로 줄줄이 |
| 아이템 | Item · ListTile | 리스트 한 줄 |
| 리스트 헤더 | List Header | 목록 위 구역 이름 줄 |
| 디바이더 | Divider | 구분선 |
| 스와이프 액션 | Item Sliding · Swipe | 항목을 밀면 나오는 버튼 |
| 드래그 정렬 | Reorder | 꾹 눌러 잡고 순서 바꾸기 |
| 무한 스크롤 | Infinite Scroll | 끝까지 내리면 다음 것이 자동으로 |
| 풀 투 리프레시 | Refresher | 위에서 당기면 새로고침 |
| 카드 | Card | 네모 상자 하나로 묶은 덩어리 |
리스트, 아이템, 리스트 헤더, 디바이더가 뼈대입니다. 스와이프 액션, 드래그 정렬, 무한 스크롤, 풀 투 리프레시가 동작입니다. 이 표에 ⚠️는 없습니다.
④ 입력
| 한글 | 영어 | 설명 |
|---|---|---|
| 인풋 | Input · TextField | 한 줄 글자 칸 |
| 플레이스홀더 | Placeholder | 흐리게 미리 써 있는 예시 글자 |
| 텍스트에어리어 | Textarea | 여러 줄 넣는 큰 칸 |
| OTP 인풋 | Input OTP | 인증번호 칸. 한 칸에 숫자 하나 |
| 비밀번호 토글 | Password Toggle | 눈 아이콘으로 가렸다 보였다 |
| 검색바 | Searchbar | 돋보기 있는 검색창 |
| 셀렉트 | Select | 값 하나 고르기. 앱에선 시트로 열림 |
| 체크박스 | Checkbox | 여러 개 고를 수 있음 |
| 라디오 | Radio | 딱 하나만 골라짐 |
| 토글 스위치 | Toggle · Switch | 켰다 껐다 |
| 유효성 검사 | Validation | 조건 안 맞으면 막기. ⚠️ 이 단어 꼭 말할 것 |
| 인라인 에러 | Field Error | 틀린 칸 바로 아래 빨간 글씨 |
입력 폼을 고칠 때는 "유효성 검사"라는 단어를 꼭 말하라는 것이 이 표의 ⚠️입니다. 이메일 칸에 골뱅이(@)가 없으면 막는다든지, 비밀번호가 8자보다 짧으면 막는다든지 하는 규칙이 여기에 들어갑니다. 틀린 칸 바로 아래 빨간 글씨는 인라인 에러(Field Error)라는 별도 이름이 있습니다.
⑤ 고르기
| 한글 | 영어 | 설명 |
|---|---|---|
| 슬라이더 | Range · Slider | 막대를 끌어서 값 정하기 |
| 데이트피커 | DatePicker | 눌러서 여는 날짜 선택 |
| 타임피커 | TimePicker | 시간 선택 |
| 휠 피커 | Picker | 돌돌 굴려서 고르기. 앱 전용 |
| 칩 | Chip · Tag | 둥근 알약 라벨 |
| 태그 입력 | Tag Input | 엔터 치면 칩으로 바뀜 |
| 별점 | Rating | 별 다섯 개 |
| 수량 스텝퍼 | Number Stepper | − 2 + |
| 파일 업로더 | File Upload | 사진·파일 올리기 |
휠 피커는 앱 전용이라고 적혀 있습니다. 아이폰에서 알람 시간을 맞출 때 돌리는 그 원통형 선택기입니다. 나머지는 이름만 알면 됩니다.
⑥ 누르는 것
| 한글 | 영어 | 설명 |
|---|---|---|
| 프라이머리 | Primary | 꽉 찬 색. 화면에서 제일 중요한 하나 |
| 세컨더리 | Secondary | 테두리만. 두 번째 |
| 고스트 · 텍스트 | Ghost · Text | 배경 없이 글자만. 「취소」 |
| 디스트럭티브 | Destructive | 삭제. 빨강 |
| 아이콘 버튼 | Icon Button | 아이콘만 |
| FAB | Floating Action Button | 오른쪽 아래 대표 버튼. ⚠️ 한 화면에 하나 |
| FAB 리스트 | FAB List · Speed Dial | FAB 누르면 위로 펼쳐짐 |
| 메뉴 | Menu | 눌러서 여는 선택지 목록 |
| 터치 영역 | Tap Target | ⚠️ 최소 44pt × 44pt (px 아님) |
| 프레스드 | pressed | 누르는 순간 |
| 디스에이블드 | disabled | 못 누르게 회색 |
| 로딩 | loading | 처리 중. ⚠️ 제출 버튼은 이걸로 잠글 것 |
| 햅틱 | Haptic | 누를 때 오는 진동 |
⚠️가 셋으로 가장 많은 표입니다. FAB는 한 화면에 하나입니다. 터치 영역은 최소 44pt × 44pt이고, px가 아니라 pt라는 점을 원문이 따로 못 박았습니다. pt(포인트)는 기기 화면 밀도와 상관없이 눈에 보이는 크기를 맞추는 단위이고, px(픽셀)는 화면의 점 하나입니다. 고해상도 휴대폰에서 44px로 만들면 손가락으로 누르기 어려울 만큼 작아질 수 있습니다.
제출 버튼은 loading 상태로 잠가야 합니다. 제출 버튼이 여러 번 눌려 같은 주문이나 글이 두 번 들어가는 문제가 있다면 이 한 줄이 답입니다.
버튼 등급도 이 표에 있습니다. 프라이머리(꽉 찬 색, 화면에서 제일 중요한 하나), 세컨더리(테두리만), 고스트와 텍스트(글자만, 「취소」), 디스트럭티브(삭제, 빨강), 아이콘 버튼입니다.
⑦ 띄우는 것
| 한글 | 영어 | 설명 |
|---|---|---|
| 모달 | Modal | ⚠️ 앱에선 아래에서 올라오는 전체 화면 |
| 바텀시트 | Bottom Sheet | 아래에서 올라오는 판. 위에 손잡이 |
| 액션시트 | Action Sheet | 아래에서 올라오는 선택지 목록 |
| 알럿 | Alert Dialog | 가운데 뜨는 확인 창 |
| 팝오버 | Popover | 눌러서 여는 작은 판 |
| 툴팁 | Tooltip | 꾹 누르면 뜨는 작은 설명 |
| 토스트 · 스낵바 | Toast · Snackbar | 잠깐 떴다 사라지는 알림 |
| 로딩 오버레이 | Loading | 화면 전체를 막고 기다리게 함 |
| 백드롭 | Backdrop · Scrim | 뒤를 어둡게 덮는 층 |
모달에 ⚠️가 붙어 있습니다. 앱에서 모달은 아래에서 올라오는 전체 화면이라는 것입니다. 웹에서는 가운데 뜨는 창을 흔히 모달이라고 부르기 때문에 헷갈리기 쉽습니다. 앱에서 가운데 뜨는 확인 창은 알럿(Alert Dialog)이라는 다른 이름입니다.
⑧ 상태 · 표시
| 한글 | 영어 | 설명 |
|---|---|---|
| 스피너 | Spinner | 빙글빙글 도는 것 |
| 프로그레스 바 | Progress Bar | 차오르는 막대 |
| 스켈레톤 | Skeleton | 회색 네모 반짝. 스피너보다 세련됨 |
| 배지 | Badge | 안 읽은 개수. 숫자나 점 |
| 엠프티 스테이트 | Empty State | 내용이 없을 때 화면. ⚠️ AI가 99% 빼먹음 |
| 오프라인 배너 | Offline State | 인터넷 끊겼을 때 |
| 아바타 | Avatar | 동그란 프로필 |
| 썸네일 | Thumbnail | 작은 정사각 이미지 |
| 라벨 · 노트 | Label · Note | 입력칸 이름표와 보조 설명 |
엠프티 스테이트는 목록이 비었을 때 보여 줄 화면입니다. 원문은 AI가 99% 빼먹는다고 씁니다. 처음 가입한 사람이 아무 글도 없는 빈 화면만 보고 앱이 고장 났다고 생각하는 일이 여기서 생깁니다. 세이프 에어리어와 함께 "화면 전체를 만들어 달라"고 할 때 따로 챙겨야 하는 두 가지입니다.
⑨ 움직이고 바뀌는 것
| 한글 | 영어 | 설명 |
|---|---|---|
| 스왑 | Swap | 누르면 아이콘이 다른 걸로 바뀜 |
| 테마 컨트롤러 | Theme Controller | 다크 모드 켜고 끄는 스위치 |
| 아우라 | Aura | 요소 뒤에 은은하게 퍼지는 빛. daisyUI 고유 |
| 텍스트 로테이트 | Text Rotate | 한 자리에서 단어만 계속 바뀜 |
| 3D 호버 카드 | Hover 3D Card | 마우스 따라 카드가 기울어짐 |
| 호버 갤러리 | Hover Gallery | 한 자리에서 사진만 넘어감 |
| 카운트다운 | Countdown | 숫자가 굴러가며 줄어듦 |
| 래디얼 프로그레스 | Radial Progress | 동그랗게 차오르는 진행률 |
| 스테이터스 | Status | 살아 있는지 알려주는 작은 점 |
아우라(Aura)는 daisyUI 고유 이름이라고 표시돼 있습니다. daisyUI를 쓰지 않는 프로젝트에서는 AI가 이 이름을 모를 수 있으니 "요소 뒤에 은은하게 퍼지는 빛"이라는 설명을 같이 적어 주는 편이 낫습니다.
⑩ 묶고 겹치는 것
| 한글 | 영어 | 설명 |
|---|---|---|
| 조인 | Join | 여러 요소를 붙여서 한 덩어리로. daisyUI 고유 |
| 스택 | Stack | 카드를 겹쳐서 쌓아둠 |
| 인디케이터 | Indicator | 요소 모서리에 붙여두는 표시 |
| 마스크 | Mask | 이미지를 도형 모양으로 잘라냄 |
| 필드셋 | Fieldset | 입력칸 여러 개를 테두리로 묶음 |
| 필터 | Filter | 칩으로 고르면 나머지가 접힘 |
| 밸리데이터 | Validator | 조건을 맞췄는지 바로 표시 |
| 컬랩스 | Collapse | 하나만 접었다 폈다. 아코디언의 낱개 |
| 메가메뉴 | Megamenu | 메뉴를 누르면 크게 펼쳐지는 판 |
조인(Join)도 daisyUI 고유입니다. 여기의 스택(Stack)은 카드를 겹쳐 쌓는 것이라, ② 화면 이동의 스택(Stack Navigation)과 이름만 같고 다른 부품입니다. AI에게 말할 때는 "카드 스택"과 "스택 내비게이션"처럼 구분해 부르면 혼동이 없습니다.
⑪ 보여주는 틀
| 한글 | 영어 | 설명 |
|---|---|---|
| 챗 버블 | Chat Bubble | 대화 말풍선. 좌우로 나뉨 |
| Kbd | Keyboard | 키보드 키 모양 (⌘ + K) |
| 독 | Dock | 화면 아래 붙는 아이콘 줄. 탭바의 daisyUI 이름 |
| 캘린더 | Calendar | 달력 그 자체. 화면에 붙박이 |
| 디프 | Diff | 가운데 손잡이로 비교. before / after |
| 목업 · 브라우저 | Mockup Browser | 브라우저 창 틀 |
| 목업 · 윈도우 | Mockup Window | 프로그램 창 틀 |
| 목업 · 폰 | Mockup Phone | 휴대폰 틀 |
| 목업 · 코드 | Mockup Code | 코드 창 틀 |
독(Dock)은 하단 탭바의 daisyUI 이름입니다. 원문에서 "daisyUI 고유"로 표시된 용어는 아우라와 조인 둘이고, 독은 "탭바의 daisyUI 이름"으로 적혀 있습니다.
AI가 빼먹는 ⚠️ 아홉 줄 모아 보기
표 열한 개에 흩어진 ⚠️를 한자리에 모았습니다. AI에게 지시할 때 빠뜨리기 쉬운 것들입니다.
| 항목 | 주의 내용 | 어느 표 |
|---|---|---|
| 하단 탭바 | 5개 넘기지 말 것 | ① 화면 뼈대 |
| 세이프 에어리어 | AI가 제일 자주 빼먹음 | ① 화면 뼈대 |
| 리플레이스 | 로그인 성공 뒤엔 이것 | ② 화면 이동 |
| 유효성 검사 | 이 단어 꼭 말할 것 | ④ 입력 |
| FAB | 한 화면에 하나 | ⑥ 누르는 것 |
| 터치 영역 | 최소 44pt × 44pt (px 아님) | ⑥ 누르는 것 |
| 로딩 | 제출 버튼은 이걸로 잠글 것 | ⑥ 누르는 것 |
| 모달 | 앱에선 아래에서 올라오는 전체 화면 | ⑦ 띄우는 것 |
| 엠프티 스테이트 | AI가 99% 빼먹음 | ⑧ 상태 · 표시 |
이 아홉 줄을 한 번에 점검하고 싶다면, 화면을 다 만든 뒤 AI에게 아래 문장을 그대로 붙여 넣으면 됩니다.
지금 만든 화면들을 아래 기준으로 점검하고, 안 맞는 곳은 고쳐 줘.
1. 하단 탭바는 5개 이하
2. 모든 화면에 세이프 에어리어 적용
3. 로그인 성공 후 이동은 push가 아니라 replace
4. 입력 폼마다 유효성 검사와 인라인 에러 표시
5. FAB는 한 화면에 하나만
6. 누를 수 있는 요소는 최소 44pt × 44pt
7. 제출 버튼은 처리 중에 loading 상태로 잠금
8. 모달은 아래에서 올라오는 전체 화면
9. 목록이 비었을 때 보여 줄 엠프티 스테이트
점검 결과를 항목별로 "통과 / 수정함"으로 알려 줘.
바이브코딩 UI 용어로 AI에게 요청하는 순서
원문에 절차라고 할 만한 것은 「스플래시 @@이렇게 수정 해줘」 한 줄뿐입니다. 그 한 줄을 동작으로 풀면 이렇게 됩니다.
- 고치고 싶은 부품이 11개 카테고리 중 어디인지 고릅니다. ① 화면 뼈대부터 ⑪ 보여주는 틀까지 하나입니다.
- 그 표의 "설명" 열을 읽어 내 부품과 맞는 줄을 찾습니다. "앱 켜면 1~2초 뜨는 로고 화면"이면 스플래시(Splash)입니다.
- 찾은 이름을 문장 맨 앞에 두고 바꿀 내용을 이어 붙입니다. 원문 형태 그대로 쓰면 「스플래시 @@이렇게 수정 해줘」이고, "@@" 자리에 바꿀 내용이 들어갑니다.
- 그 줄에 ⚠️가 있으면 그 문구도 지시문에 같이 적습니다. 입력 폼이면 "유효성 검사", 제출 버튼이면 "loading 상태로 잠가 줘", 버튼 크기면 "44pt × 44pt"입니다.
"@@" 자리에 무엇을 쓰나
원문은 "@@"에 실제로 무엇을 어떻게 적는지, 어떤 도구에 넣는지 정하지 않았습니다. 요령은 간단합니다. 부품 이름, 바꿀 속성(색, 크기, 위치, 시간, 동작), 바꿀 값을 한 문장에 넣습니다. 아래는 표의 용어로 만든 예시입니다. 그대로 복사해 값만 바꾸면 됩니다.
스플래시(Splash) 화면에서 로고를 화면 정중앙에 두고, 배경은 흰색으로,
표시 시간은 1초로 줄여 줘.
하단 탭바(Tab Bar)를 홈, 검색, 알림, 내 정보 4개로 정리하고,
알림 탭에 안 읽은 개수를 배지(Badge)로 표시해 줘.
세이프 에어리어는 꼭 지켜 줘.
회원가입 폼의 이메일 인풋(Input)에 유효성 검사를 넣어 줘.
형식이 틀리면 칸 바로 아래에 인라인 에러(Field Error)로
"이메일 형식을 확인해 주세요"를 빨간 글씨로 보여 줘.
제출 버튼은 처리 중에 loading 상태로 잠가 줘.
로그인 성공 후 홈 화면으로 갈 때 push 말고 replace로 바꿔 줘.
홈에서 뒤로가기를 눌러도 로그인 화면이 다시 나오면 안 돼.
즐겨찾기 리스트(List)가 비어 있을 때 보여 줄 엠프티 스테이트(Empty State)를 만들어 줘.
가운데에 안내 문구 한 줄과 "둘러보러 가기" 프라이머리(Primary) 버튼 하나.
어떤 도구에 넣나
이 문장들은 특정 도구에 묶여 있지 않습니다. 클로드 코드, 커서(Cursor), 코덱스처럼 코드를 직접 고치는 AI 도구라면 채팅 입력창에 그대로 붙여 넣으면 됩니다. 러버블(Lovable)이나 볼트(Bolt) 같은 웹 기반 앱 빌더도 대화창에 같은 문장을 쓰면 됩니다. 도구가 화면 캡처를 받는다면 고칠 부분을 캡처해 함께 올리면 정확도가 더 올라갑니다.
원문 작성자와 함께 걸린 자료
이 글의 가치는 표에 있습니다. 표는 전부 쥬하(@juuouse) 님이 만든 것이고, 이 글은 표가 그대로 보이도록 옮기고 ⚠️를 따로 묶은 뒤 요청 문장 예시를 덧붙인 것입니다. 원문에는 바이브코딩 시작 노트, UI 총정리 노트, API와 MCP 정리본 링크도 걸려 있는데, 그 내용은 원문 페이지에 들어 있지 않아 여기에도 싣지 않았습니다. 궁금한 점은 원문 작성자 인스타그램 @juuouse로 문의하라고 적혀 있습니다.
자주 묻는 질문
바이브코딩할 때 UI 용어를 꼭 알아야 하나요?
알면 수정 속도가 확실히 빨라집니다. "화면 뜨면 나오는 거 그거"처럼 설명하면 AI가 엉뚱한 곳을 고치기 쉽고, "스플래시"처럼 이름을 부르면 한 번에 알아듣습니다. 전부 외울 필요는 없고, 고칠 때마다 표에서 찾아 쓰면 됩니다.
AI가 가장 자주 빼먹는 화면 요소는 무엇인가요?
원문 기준으로는 세이프 에어리어와 엠프티 스테이트입니다. 세이프 에어리어는 "AI가 제일 자주 빼먹음", 엠프티 스테이트는 "AI가 99% 빼먹음"으로 표시돼 있습니다. 화면 전체를 만들어 달라고 할 때 두 단어를 지시문에 넣어 두면 됩니다.
모달과 알럿은 무엇이 다른가요?
원문 정의로 앱에서 모달은 아래에서 올라오는 전체 화면이고, 알럿은 가운데 뜨는 확인 창입니다. 웹에서는 가운데 뜨는 창도 모달이라고 부르는 경우가 많아 헷갈리기 쉬우니, 앱을 만들 때는 둘을 구분해 부르는 편이 정확합니다.
버튼 크기는 몇으로 해야 하나요?
원문은 터치 영역을 최소 44pt × 44pt로 두라고 적었고, px가 아니라 pt라는 점을 따로 강조합니다. 고해상도 화면에서 px 기준으로 만들면 실제로 누르기 어려울 만큼 작아질 수 있습니다.
로그인 후 뒤로가기를 누르면 로그인 화면이 다시 나오는 이유는 무엇인가요?
로그인 성공 뒤 화면을 push로 쌓았기 때문일 가능성이 큽니다. 원문은 로그인 성공 뒤에는 현재 화면을 갈아끼우는 replace를 쓰라고 표시했습니다. AI에게 "로그인 성공 후 이동을 replace로 바꿔 줘"라고 요청하면 됩니다.
이 글은 쥬하(@juuouse) 님이 Notion에 공개한 "바이브코딩 앱 UI 용어 정리본"을 재정리한 것입니다. 표의 용어와 설명은 원문 그대로이고, 참고 사이트 활용 순서, 용어 보충 설명, 요청 문장 예시는 편집자가 덧붙였습니다.
출처: app.notion.com/…