쥬하 · @juuouse

안녕하세요! 쥬하입니다. 바이브코딩 앱 UI 정리본 가져왔어요! :) 바이브코딩 시작, 웹페이지 노트도 링크 걸어놓을게요!

바이브코딩 시작 노트

바이브코딩 UI 총정리 노트

🩶 UI 참고할 수 있는 사이트 바로가기

바로가기	뭐하는 곳	링크
Apple HIG	애플 공식 가이드	https://developer.apple.com/design/human-interface-guidelines/
Apple 디자인 팁	“	https://developer.apple.com/design/tips/
Material Design 3	구글 공식 가이드	https://m3.material.io/components
Flutter 위젯	Material 목록 보기 편한 버전	https://docs.flutter.dev/ui/widgets/material
Ionic 컴포넌트	실제 코드 이름 94개	https://ionicframework.com/docs/components
daisyUI	컴포넌트 이름 세트 (MIT)	https://daisyui.com/components/
Uiverse	복붙 UI 조각 7,440개 (MIT)	https://uiverse.io/
Penpot	오픈소스 디자인 도구	https://penpot.app/
IBM Carbon	오픈소스 디자인 시스템	https://carbondesignsystem.com/
Mobbin	UI 레퍼런스 모음	https://mobbin.com/discover/apps/ios/

🩶 UI 컴포넌트 용어 모음

「화면 뜨면 나오는거 뭐지 그거 해줘」 ❌ 「스플래시 @@이렇게 수정 해줘」 ⭕️

이름을 아는 순간 수정 시간을 줄일 수 있어요 ☺️

① 화면 뼈대

한글	영어	설명
스플래시	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	화면 아래 고정 영역

② 화면 이동

한글	영어	설명
스택	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	왼쪽 끝에서 오른쪽으로 쓸어 뒤로 가기

③ 목록

한글	영어	설명
리스트	List	세로로 줄줄이
아이템	Item · ListTile	리스트 한 줄
리스트 헤더	List Header	목록 위 구역 이름 줄
디바이더	Divider	구분선
스와이프 액션	Item Sliding · Swipe	항목을 밀면 나오는 버튼
드래그 정렬	Reorder	꾹 눌러 잡고 순서 바꾸기
무한 스크롤	Infinite Scroll	끝까지 내리면 다음 것이 자동으로
풀 투 리프레시	Refresher	위에서 당기면 새로고침
카드	Card	네모 상자 하나로 묶은 덩어리

④ 입력