📱디자인
AI와 협업하는 앱 UI 용어 가이드
스플래시, 온보딩, 앱바 등 앱 개발 시 필수 UI 용어와 디자인 리소스를 정리한 실용 가이드
↗ 원본 링크#UI/UX#앱개발#디자인시스템#용어정리
AI와 협업하는 앱 UI 용어 가이드
> "화면 뜨면 나오는 거 뭐지 그거 해줘" ❌
> "스플래시 이렇게 수정해줘" ✅
AI에게 UI 수정을 요청할 때 정확한 용어를 알면 작업 시간을 크게 줄일 수 있습니다.
유용한 디자인 리소스
공식 가이드
▸
Apple HIG: 애플 공식 디자인 가이드
▸
Material Design 3: 구글 공식 디자인 시스템
▸
Flutter 위젯: Material 컴포넌트 목록
컴포넌트 라이브러리
▸
Ionic: 94개 실제 코드 컴포넌트
▸
daisyUI: MIT 라이선스 컴포넌트 세트
▸
Uiverse: 7,440개 복붙 가능한 UI 조각 (MIT)
디자인 도구
▸
Penpot: 오픈소스 디자인 도구
▸
IBM Carbon: 오픈소스 디자인 시스템
▸
Mobbin: iOS/Android UI 레퍼런스 모음
기본 화면 구성 요소
앱 시작 화면
▸
스플래시 (Splash): 앱 실행 시 1~2초 나타나는 로고 화면
▸
온보딩 (Onboarding): 첫 실행 시 보여주는 2~4장의 안내 화면
상단 영역
▸
앱바 (App Bar): 화면 최상단의 제목 영역
▸
툴바 (Toolbar): 앱바 안에 버튼들이 들어가는 영역
하단 영역
▸
탭바 (Tab Bar): 앱 전체 구역을 나누는 하단 네비게이션 (최대 5개 권장)
▸
푸터 (Footer): 화면 하단 고정 영역
중간 영역
▸
콘텐츠 (Content): 가운데 스크롤 가능한 영역
▸
그리드 (Grid): 가로 칸 나누기 레이아웃
▸
세이프 에어리어 (Safe Area): 노치나 홈바에 가려지지 않는 안전 영역 ⚠️ AI가 자주 빠뜨리는 부분!
화면 이동 용어
스택 네비게이션 (Stack Navigation)
▸
푸시 (push): 새 화면을 위에 쌓기
▸
팝 (pop): 한 장 빼서 뒤로 가기
▸
리플레이스 (replace): 현재 화면 교체 (로그인 성공 후 사용)
네비게이션 요소
▸
뒤로가기 (Back Button): 앱바 왼쪽 버튼 (모달에서는 ✕)
▸
탭 (Tabs): 한 화면 안에서 콘텐츠 전환
활용 팁
정확한 용어를 사용하면 AI와의 협업이 훨씬 효율적입니다. 특히 세이프 에어리어는 AI가 자주 놓치는 부분이니 명시적으로 요청하세요!