사전 76항목 · 자체 제작◆ 도입 후보
ui-menu가 웹 UI에 이름을 붙여 줬다면, app-menu는 같은 일을 모바일 앱에서 한다. 모바일은 이름을 아는 순간 플랫폼 관례가 따라온다. '아래에서 올라오는 판'이 바텀시트인 걸 알면 손잡이·높이 단계·바깥 탭 닫기가 같이 오고, '앱 켜면 뜨는 로고 화면'이 스플래시인 걸 알면 초기화가 끝나면 자동 전환한다는 관례가 온다. 차별점은 네이티브 매핑이다. 정식 명칭을 SwiftUI·Flutter·React Native의 실제 컴포넌트명까지 연결해(탭바 → TabView·BottomNavigationBar·Tab.Navigator), Expo나 Flutter로 앱을 만들 때 바로 시킬 수 있게 했다. 그리고 웹/앱 경계를 짚는다. 모달은 앱에선 아래서 올라오는 풀스크린이고, 셀렉트는 드롭다운이 아니라 시트로 여는 게 관례다. 마지막으로 모바일이 자주 빠뜨리는 것(세이프에어리어·탭 타깃 44pt·엠프티 스테이트)을 체크리스트로 붙였다. 생성기가 아니라 이름·요청 문장·빠짐 점검을 주는 사전이다. 코드는 사람이 짠다. iOS·안드로이드 앱을 AI로 만드는 사람에게 도입 후보.
실물부터, 설치 전에 전부 만져보세요
아래는 이미지가 아니라 이 스킬이 담고 있는 진짜 HTML입니다. 눌러 보세요.모바일은 이름만 대면
관례가 따라와요
모바일 앱 UI 전용. 웹 UI 는 ui-menu 를 쓴다. 같은 단어라도 앱과 웹의 관례가 다르다. 모달은 앱에선 아래서 올라오는 풀스크린, 셀렉트는 드롭다운이 아니라 시트로 연다. 네이티브 열은 SwiftUI · Flutter · React Native 의 실제 컴포넌트명.
스플래시 Splash
"앱 켜면 뜨는 로고 화면"앱이 뜨는 동안 잠깐 보이는 로고 화면. 로딩을 가려 준다.
SwiftUI: LaunchScreen · Flutter: flutter_native_splash · Expo: expo-splash-screen스택 · 푸시/팝 Stack (push / pop)
"화면 쌓기"화면을 카드처럼 쌓고(push) 한 장씩 빼서(pop) 뒤로 가는 기본 이동 방식.
SwiftUI: NavigationStack · Flutter: Navigator.push/pop · RN: Stack.Navigator모달 (풀스크린) Modal (fullscreen)
"전체를 덮는 창"화면 전체를 덮으며 올라오는 창. 모바일에서 '모달'은 보통 이 풀스크린을 뜻한다.
스플래시 화면을 넣어줘. 로고 가운데, 초기화 끝나면 자동으로 첫 화면으로 넘어가게.
플랫폼 관례까지
한 문장에 넣어요
모바일은 이름만 정확히 대면 플랫폼 관례(세이프에어리어·44pt·바텀시트)가 따라옵니다. 웹 UI는 ui-menu를 쓰세요.
[어느 화면][컴포넌트 이름][개수·상태][플랫폼 관례]
✕
설정 화면 만들어줘
○
설정 화면을 그룹 리스트로. 세이프에어리어 지키고, 로그아웃은 맨 아래 디스트럭티브 버튼, 탭 대상은 44pt 이상으로
이런 말엔
이런 이름을 써요
오른쪽에 SwiftUI · Flutter · React Native 의 실제 이름까지 붙어 있어요.
"앱 켜면 뜨는 로고 화면"스플래시SwiftUI: LaunchScreen · Flutter: flutter_native_splash · Expo: expo-splash-screen"화면 쌓기"스택 · 푸시/팝SwiftUI: NavigationStack · Flutter: Navigator.push/pop · RN: Stack.Navigator"세로로 줄줄이"리스트SwiftUI: List / LazyVStack · Flutter: ListView.builder · RN: FlatList"한 줄 입력칸"텍스트 필드SwiftUI: TextField · Flutter: TextField · RN: TextInput"막대 끌어서 값"슬라이더SwiftUI: Slider · Flutter: Slider / RangeSlider · RN: Slider"꽉 찬 색 버튼"프라이머리 버튼"전체를 덮는 창"모달 (풀스크린)"빙글빙글 도는 것"스피너SwiftUI: ProgressView · Flutter: CircularProgressIndicator · RN: ActivityIndicator
헷갈리는 짝
하단 탭바, 이럴 때 써요
↔ 앱 전체 구역이면 탭바, 한 화면 안 전환이면 세그먼티드
하단 탭바를 홈·검색·알림·마이 4개로. 현재 탭은 강조, 아이콘 위 라벨까지.
하단 탭바 Tab Bar · Bottom Nav
"아래 메뉴 4개"앱 전체를 4~5개 구역으로 나누는 하단 바. 이걸로 앱의 큰 뼈대가 잡힌다.
SwiftUI: TabView · Flutter: BottomNavigationBar / NavigationBar · RN: Tab.NavigatorAI가 앱 관례를
먼저 챙겨요
스킬로 깔아 두면 세이프에어리어 · 44pt · 시트 같은 관례를 말하지 않아도 넣어요.
/plugin marketplace add hanmariyang/giting-skills
/plugin install app-menu@giting
① 화면 뼈대 8
온보딩
Onboarding앱바
App Bar · Navigation Bar라지 타이틀
Large Title하단 탭바
Tab Bar · Bottom Nav세이프 에어리어
Safe Area스크롤 뷰
Scroll View하단 고정 바
Bottom Bar| 한글 | 영문 | 네이티브 | 이렇게 말해도 | AI에게 이렇게 |
|---|---|---|---|---|
| 스플래시 | Splash | SwiftUI: LaunchScreen · Flutter: flutter_native_splash · Expo: expo-splash-screen | "앱 켜면 뜨는 로고 화면" | 스플래시 화면을 넣어줘. 로고 가운데, 초기화 끝나면 자동으로 첫 화면으로 넘어가게. |
| 온보딩 | Onboarding | · | "처음 켰을 때 안내" | 온보딩을 3장으로. 마지막 장에 시작하기 버튼, 한 번 본 사람에겐 다시 안 뜨게 저장까지. |
| 앱바 | App Bar · Navigation Bar | SwiftUI: .toolbar / navigationTitle · Flutter: AppBar · RN: header | "맨 위 제목 줄" | 앱바에 가운데 제목, 왼쪽 뒤로가기, 오른쪽 더보기 버튼을 넣어줘. |
| 라지 타이틀 | Large Title | SwiftUI: navigationBarTitleDisplayMode(.large) · iOS 관례 | "큰 제목" | 설정 화면 위에 라지 타이틀로 제목을 크게, 스크롤하면 앱바로 접히게 해줘. |
| 하단 탭바 | Tab Bar · Bottom Nav | SwiftUI: TabView · Flutter: BottomNavigationBar / NavigationBar · RN: Tab.Navigator | "아래 메뉴 4개" | 하단 탭바를 홈·검색·알림·마이 4개로. 현재 탭은 강조, 아이콘 위 라벨까지. |
| 세이프 에어리어 | Safe Area | SwiftUI: safeAreaInset / ignoresSafeArea · Flutter: SafeArea · RN: SafeAreaView | "노치 피하기" | 모든 화면을 세이프 에어리어 안에 배치해줘. 하단 버튼이 홈 인디케이터에 안 가리게. |
| 스크롤 뷰 | Scroll View | SwiftUI: ScrollView · Flutter: SingleChildScrollView / ListView · RN: ScrollView | "가운데 스크롤 영역" | 본문을 스크롤 뷰로. 앱바와 탭바는 고정, 가운데만 스크롤되게. |
| 하단 고정 바 | Bottom Bar | · | "맨 아래 붙은 버튼" | 상세 화면 맨 아래에 고정 바를 두고, 그 안에 구매하기 프라이머리 버튼을 넣어줘. 세이프 에어리어 지키게. |
③ 목록 10
리스트
List리스트 항목
List Item · ListTile섹션 헤더
Section Header스와이프 액션
Swipe Action드래그 정렬
Reorder · Drag to sort무한 스크롤
Infinite Scroll · Pagination당겨서 새로고침
Pull to Refresh카드
Card추천 카드
For You Card추억 카드
Memory Card| 한글 | 영문 | 네이티브 | 이렇게 말해도 | AI에게 이렇게 |
|---|---|---|---|---|
| 리스트 | List | SwiftUI: List / LazyVStack · Flutter: ListView.builder · RN: FlatList | "세로로 줄줄이" | 알림을 리스트로. 항목마다 아이콘·제목·시간, 스크롤 부드럽게 재활용되게. |
| 리스트 항목 | List Item · ListTile | SwiftUI: 셀 안 HStack · Flutter: ListTile · RN: 커스텀 row | "목록 한 줄" | 설정 리스트 항목을 왼쪽 아이콘, 가운데 제목, 오른쪽 현재 값과 › 화살표로 만들어줘. |
| 섹션 헤더 | Section Header | · | "목록 중간 구역 이름" | 설정을 계정·알림·정보 3개 섹션으로 나누고 각 위에 섹션 헤더를 붙여줘. |
| 스와이프 액션 | Swipe Action | SwiftUI: .swipeActions · Flutter: Dismissible / Slidable · RN: Swipeable | "밀면 나오는 삭제 버튼" | 메일 항목을 왼쪽으로 밀면 삭제(빨강), 오른쪽으로 밀면 읽음 처리 버튼이 나오게 해줘. |
| 드래그 정렬 | Reorder · Drag to sort | SwiftUI: .onMove · Flutter: ReorderableListView · RN: DraggableFlatList | "꾹 눌러 순서 바꾸기" | 할 일 리스트를 꾹 눌러 드래그로 순서 바꿀 수 있게 하고, 바뀐 순서를 저장해줘. |
| 무한 스크롤 | Infinite Scroll · Pagination | · | "끝까지 내리면 더 나옴" | 피드를 무한 스크롤로. 바닥 근처에서 다음 페이지 불러오고, 로딩 중엔 하단에 스피너. |
| 당겨서 새로고침 | Pull to Refresh | SwiftUI: .refreshable · Flutter: RefreshIndicator · RN: RefreshControl | "위에서 당기면 새로고침" | 피드에 당겨서 새로고침을 넣어줘. 당기는 동안 스피너, 끝나면 부드럽게 사라지게. |
| 카드 | Card | SwiftUI: RoundedRectangle 배경 · Flutter: Card · RN: View + shadow | "네모 상자로 묶은 것" | 상품을 카드로. 위에 이미지, 아래 제목·가격, 그림자와 둥근 모서리로. |
| 추천 카드 | For You Card | · | "이번 주 추천" | 홈 맨 위에 '이번 주 추천' 카드를 넣고, 제목 아래에 '매주 월요일 새로 채워져요'를 적어줘. 카드를 누르면 추천 목록 화면으로 가게 해줘. |
| 추억 카드 | Memory Card | · | "1년 전 오늘" | 홈에 '1년 전 오늘' 카드를 넣어 그날 사진 한 장과 날짜를 크게 보여 주고, 누르면 그날 사진을 넘겨 볼 수 있게 해줘. 그날 기록이 없으면 카드를 숨겨줘. |
④ 입력받는 것 13
텍스트 필드
Text Field플레이스홀더
Placeholder여러 줄 입력
Textarea · Multiline키보드 피하기
Keyboard AvoidanceOTP 입력
OTP Input비밀번호 토글
Password Toggle검색바
Search Bar셀렉트 (시트)
Select · Picker체크박스
Checkbox라디오
Radio토글 스위치
Toggle · Switch유효성 검사
Validation인라인 에러
Inline Error| 한글 | 영문 | 네이티브 | 이렇게 말해도 | AI에게 이렇게 |
|---|---|---|---|---|
| 텍스트 필드 | Text Field | SwiftUI: TextField · Flutter: TextField · RN: TextInput | "한 줄 입력칸" | 이메일 텍스트 필드를 만들어줘. 키보드는 이메일 타입, 자동 대문자 끄고, 지우기 ✕ 버튼까지. |
| 플레이스홀더 | Placeholder | · | "흐리게 미리 쓰인 예시" | 이메일 칸에 플레이스홀더로 'you@example.com'을 흐리게 넣어줘. |
| 여러 줄 입력 | Textarea · Multiline | SwiftUI: TextField(axis:.vertical) / TextEditor · Flutter: TextField(maxLines) · RN: TextInput(multiline) | "긴 글 입력칸" | 후기 입력을 여러 줄 입력으로. 최대 500자, 아래에 글자 수 카운터까지. |
| 키보드 피하기 | Keyboard Avoidance | SwiftUI: 기본으로 피함(.ignoresSafeArea(.keyboard) 를 쓰지 말 것) · Flutter: Scaffold(resizeToAvoidBottomInset) · RN: KeyboardAvoidingView(behavior: iOS 는 "padding") | "키보드가 입력칸을 가려" | 입력칸이 키보드에 가리지 않게 해줘. 키보드가 올라오면 시트째 그 위로 올라가고, 바깥을 누르면 키보드가 내려가게. |
| OTP 입력 | OTP Input | iOS: textContentType(.oneTimeCode) 로 자동완성 · 칸 UI는 커스텀 | "인증번호 칸" | 6자리 OTP 입력을 만들어줘. 문자 자동완성 연동, 다 채우면 자동 제출. |
| 비밀번호 토글 | Password Toggle | · | "눈 아이콘으로 보기" | 비밀번호 칸 오른쪽에 눈 아이콘을 넣어 눌러서 보이기/가리기 토글되게 해줘. |
| 검색바 | Search Bar | SwiftUI: .searchable · Flutter: SearchBar · RN: 커스텀 TextInput | "돋보기 검색창" | 목록 위에 검색바를 넣고, 입력하면 실시간으로 목록이 걸러지게(디바운스) 해줘. |
| 셀렉트 (시트) | Select · Picker | · | "하나 고르는 칸" | 국가 선택을 셀렉트로. 누르면 바텀시트로 목록이 뜨고, 고르면 값이 칸에 채워지게. |
| 체크박스 | Checkbox | · | "여러 개 고르기" | 약관 동의를 체크박스로. 전체 동의 하나와 개별 항목들이 연동되게. |
| 라디오 | Radio | · | "딱 하나만 고르기" | 배송 방법을 라디오로 3개. 하나만 선택되고 기본값은 첫 번째로. |
| 토글 스위치 | Toggle · Switch | SwiftUI: Toggle · Flutter: Switch · RN: Switch | "켰다 껐다" | 알림 설정을 토글 스위치로. 켜면 바로 반영, 실패하면 원래대로 되돌리게. |
| 유효성 검사 | Validation | · | "조건 안 맞으면 막기" | 회원가입 폼에 유효성 검사를 넣어줘. 이메일 형식·비번 8자 이상, 안 맞으면 제출 막고 칸 아래 에러. |
| 인라인 에러 | Inline Error | · | "틀린 칸 아래 빨간 글씨" | 유효성 실패 시 해당 칸 테두리를 빨강으로, 바로 아래 인라인 에러 문구를 띄워줘. |
⑤ 골라 넣는 것 7
슬라이더
Slider데이트 피커
Date Picker휠 피커
Wheel Picker칩
Chip · Tag별점
Rating수량 스텝퍼
Stepper사진 업로드
Photo / File Upload| 한글 | 영문 | 네이티브 | 이렇게 말해도 | AI에게 이렇게 |
|---|---|---|---|---|
| 슬라이더 | Slider | SwiftUI: Slider · Flutter: Slider / RangeSlider · RN: Slider | "막대 끌어서 값" | 가격 범위를 슬라이더로. 최소·최대 손잡이 두 개, 현재 값이 위에 말풍선으로. |
| 데이트 피커 | Date Picker | SwiftUI: DatePicker · Flutter: showDatePicker · RN: DateTimePicker | "날짜 고르기" | 예약 날짜를 데이트 피커로. 오늘 이전은 못 고르게, 고르면 시트가 닫히며 값 반영. |
| 휠 피커 | Wheel Picker | SwiftUI: Picker(.wheel) · Flutter: CupertinoPicker · RN: Picker | "돌돌 굴려 고르기" | 시간을 휠 피커로. 시·분이 각각 굴러가고 가운데 값이 선택되게. |
| 칩 | Chip · Tag | Flutter: Chip / FilterChip · SwiftUI·RN 커스텀 | "둥근 알약 라벨" | 관심사를 칩으로 여러 개. 누르면 채워지고(선택), 여러 개 고를 수 있게. |
| 별점 | Rating | · | "별 다섯 개" | 후기 별점을 다섯 개로. 반 개 단위 허용, 탭과 드래그 둘 다로 매기게. |
| 수량 스텝퍼 | Stepper | SwiftUI: Stepper · Flutter·RN 커스텀 | "− 숫자 +" | 장바구니 수량을 스텝퍼로. 1 미만은 못 내려가게, 재고 넘으면 + 비활성. |
| 사진 업로드 | Photo / File Upload | iOS: PhotosPicker · Flutter: image_picker · RN: expo-image-picker | "사진 올리기" | 프로필 사진 업로드를 넣어줘. 갤러리·카메라 선택 시트, 권한 거부 시 안내까지. |
⑥ 누르는 것 11
세컨더리 버튼
Secondary Button텍스트 버튼
Text · Ghost Button디스트럭티브 버튼
Destructive Button아이콘 버튼
Icon ButtonFAB (플로팅 버튼)
Floating Action Button메뉴
Menu · Context Menu탭 타깃
Tap Target비활성 상태
disabled로딩 버튼
loading button햅틱
Haptic| 한글 | 영문 | 네이티브 | 이렇게 말해도 | AI에게 이렇게 |
|---|---|---|---|---|
| 프라이머리 버튼 | Primary Button | · | "꽉 찬 색 버튼" | 결제 화면 하단 고정 바에 '결제하기' 프라이머리 버튼을 폭 꽉 차게 넣어줘. |
| 세컨더리 버튼 | Secondary Button | · | "테두리만 버튼" | 프라이머리 옆에 '나중에' 세컨더리 버튼을 테두리만으로 나란히 넣어줘. |
| 텍스트 버튼 | Text · Ghost Button | · | "배경 없는 글자 버튼" | 모달 좌상단에 '취소'를 텍스트 버튼으로 배경 없이 넣어줘. |
| 디스트럭티브 버튼 | Destructive Button | SwiftUI: role: .destructive · 확인은 confirmationDialog | "삭제 빨간 버튼" | 계정 삭제를 디스트럭티브 버튼(빨강)으로, 누르면 액션시트로 한 번 더 확인받게. |
| 아이콘 버튼 | Icon Button | · | "아이콘만 있는 버튼" | 앱바 오른쪽에 공유 아이콘 버튼을 넣고, 탭 영역은 44pt 이상 확보해줘. |
| FAB (플로팅 버튼) | Floating Action Button | Flutter: FloatingActionButton · SwiftUI·RN 커스텀(overlay) | "오른쪽 아래 동그란 +" | 목록 화면 오른쪽 아래에 + FAB을 하나 두고, 누르면 새 글 모달을 올려줘. |
| 메뉴 | Menu · Context Menu | SwiftUI: Menu · Flutter: PopupMenuButton · RN: 커스텀 | "더보기 눌러 나오는 목록" | 항목 오른쪽 ⋯ 를 누르면 수정·공유·삭제 메뉴가 뜨게. 삭제는 디스트럭티브로. |
| 탭 타깃 | Tap Target | · | "누르는 영역 크기" | 작은 아이콘 버튼들의 탭 타깃을 최소 44pt로 키워줘. 아이콘은 그대로, 눌리는 영역만. |
| 비활성 상태 | disabled | · | "회색으로 못 누르게" | 약관 미동의면 다음 버튼을 비활성(회색·안 눌림)으로, 동의하면 활성화되게. |
| 로딩 버튼 | loading button | · | "누르면 스피너 도는 버튼" | 제출 버튼을 누르면 로딩 상태로 잠그고 스피너를 돌려줘. 끝나면 원래대로. |
| 햅틱 | Haptic | iOS: UIFeedbackGenerator · Flutter: HapticFeedback · RN: Haptics | "누를 때 진동" | 결제 성공에 성공 햅틱, 유효성 실패에 경고 햅틱을 넣어줘. |
⑦ 위에 띄우는 것 9
모달 (풀스크린)
Modal (fullscreen)바텀시트
Bottom Sheet액션시트
Action Sheet알럿
Alert Dialog팝오버
Popover툴팁
Tooltip토스트 · 스낵바
Toast · Snackbar로딩 오버레이
Loading Overlay스크림 · 백드롭
Scrim · Backdrop| 한글 | 영문 | 네이티브 | 이렇게 말해도 | AI에게 이렇게 |
|---|---|---|---|---|
| 모달 (풀스크린) | Modal (fullscreen) | · | "전체를 덮는 창" | 이미지 뷰어를 풀스크린 모달로. 위에서 아래로 쓸어내리면 닫히게. |
| 바텀시트 | Bottom Sheet | SwiftUI: .presentationDetents · Flutter: showModalBottomSheet · RN: BottomSheet | "아래에서 반쯤 올라오는 판" | 필터를 바텀시트로. 반높이·전체높이 두 단계, 위 손잡이로 끌어 조절, 바깥 탭하면 닫힘. 안에 입력칸이 있으면 키보드가 올라올 때 시트째 그 위로. |
| 액션시트 | Action Sheet | SwiftUI: confirmationDialog · Flutter: showModalBottomSheet · iOS UIAlertController(.actionSheet) | "아래에서 뜨는 선택지 목록" | 삭제를 누르면 액션시트로 '삭제(빨강)'와 '취소'를 띄워줘. |
| 알럿 | Alert Dialog | SwiftUI: .alert · Flutter: showDialog(AlertDialog) · RN: Alert | "가운데 뜨는 확인창" | 저장하지 않고 나갈 때 알럿으로 '변경사항을 버릴까요?' 확인을 받아줘. |
| 팝오버 | Popover | · | "눌러서 여는 작은 판" | 정보 아이콘을 누르면 팝오버로 짧은 설명 판이 그 옆에 뜨게 해줘. |
| 툴팁 | Tooltip | · | "꾹 누르면 뜨는 설명" | 낯선 아이콘을 길게 누르면 툴팁으로 이름이 뜨게 해줘. |
| 토스트 · 스낵바 | Toast · Snackbar | Flutter: SnackBar · SwiftUI·RN 커스텀 오버레이 | "잠깐 떴다 사라지는 알림" | 삭제하면 스낵바로 '삭제됨'과 '실행취소' 버튼을 3초간 띄워줘. |
| 로딩 오버레이 | Loading Overlay | · | "화면 전체 막고 기다리기" | 결제 처리 중에만 로딩 오버레이로 화면을 막고 가운데 스피너를 띄워줘. |
| 스크림 · 백드롭 | Scrim · Backdrop | · | "뒤를 어둡게 덮는 층" | 바텀시트 뒤에 스크림을 깔고, 스크림을 탭하면 시트가 닫히게 해줘. |
⑧ 상태 · 표시 10
스피너
Spinner · Activity Indicator프로그레스 바
Progress Bar스켈레톤
Skeleton배지
Badge스트릭
Streak엠프티 스테이트
Empty State오프라인 배너
Offline Banner아바타
Avatar썸네일
Thumbnail상태 점
Status Dot| 한글 | 영문 | 네이티브 | 이렇게 말해도 | AI에게 이렇게 |
|---|---|---|---|---|
| 스피너 | Spinner · Activity Indicator | SwiftUI: ProgressView · Flutter: CircularProgressIndicator · RN: ActivityIndicator | "빙글빙글 도는 것" | 데이터 불러오는 동안 가운데 스피너를 띄우고, 오면 목록으로 바꿔줘. |
| 프로그레스 바 | Progress Bar | · | "차오르는 막대" | 업로드 진행을 프로그레스 바로. 퍼센트 숫자도 옆에 같이. |
| 스켈레톤 | Skeleton | · | "회색 네모 반짝" | 목록 로딩 중에 실제 카드 모양의 스켈레톤을 반짝이게 보여주고, 오면 교체해줘. |
| 배지 | Badge | SwiftUI: .badge · Flutter: Badge · RN: 커스텀 | "안 읽은 개수" | 탭바 알림 아이콘에 안 읽은 개수 배지를, 99 넘으면 99+ 로 표시해줘. |
| 스트릭 | Streak | 공식 컴포넌트 없음 · 직접 그린다 (iOS 는 WidgetKit 으로 홈 화면 위젯까지) | "연속 기록" | 홈 위쪽에 연속 일수를 큰 숫자로, 그 아래 일~토 칸을 두고 한 날은 체크로 채운 스트릭을 넣어줘. 오늘 아직 안 했으면 오늘 칸만 비워 둬. |
| 엠프티 스테이트 | Empty State | · | "내용 없을 때 화면" | 장바구니가 비면 엠프티 스테이트로 그림·'담은 게 없어요'·'구경하러 가기' 버튼을 보여줘. |
| 오프라인 배너 | Offline Banner | · | "인터넷 끊김 안내" | 네트워크가 끊기면 상단에 오프라인 배너를, 다시 연결되면 자동으로 내려가게 해줘. |
| 아바타 | Avatar | · | "동그란 프로필" | 프로필 아바타를 동그랗게. 이미지 없으면 이름 첫 글자를 배경색과 함께 보여줘. |
| 썸네일 | Thumbnail | · | "작은 미리보기 이미지" | 목록 항목 왼쪽에 정사각 썸네일을. 비율 유지하며 꽉 채워 자르고, 로딩 전엔 회색 자리. |
| 상태 점 | Status Dot | · | "초록 점 빨간 점" | 아바타 오른쪽 아래에 온라인이면 초록 상태 점을 겹쳐 보여줘. |
"아래에서 올라오는 판"에는 이름이 있다
모바일 앱을 만들다 보면 이런 요청을 하게 된다. "아래에서 반쯤 올라오는 판 만들어줘." AI는 대충 알아듣지만, 그 이름이 바텀시트인 걸 아는 순간 요청이 달라진다. 위에 손잡이, 반높이·전체높이 두 단계, 바깥 탭하면 닫힘까지 한 번에 통한다.
app-menu는 그 말을 정식 명칭으로 옮기는 사전이다. ui-menu의 모바일판. 웹이 아니라 iOS·안드로이드 앱 UI를 다룬다.
웹과 앱은 관례가 다르다
이 사전이 웹용 ui-menu와 갈라지는 지점이다. 같은 단어라도 앱에서는 다르게 동작한다.
- 모달: 웹은 화면 가운데 뜨는 작은 창, 앱은 아래에서 올라오는 전체 화면
- 셀렉트: 웹은 드롭다운, 앱은 아래에서 시트로 열림
- 호버: 앱에는 마우스가 없다. 길게 누르기로
그래서 웹 요청을 앱에 그대로 심으면 어색해진다. 이 사전은 그 경계를 짚어 앱 관례로 바꿔 제안한다.
네이티브 이름까지 연결한다
app-menu의 차별점은 네이티브 매핑이다. 76항목 중 39항목에 SwiftUI·Flutter·React Native의 실제 컴포넌트명이 붙어 있다.
- 하단 탭바 → SwiftUI
TabView· FlutterBottomNavigationBar· RNTab.Navigator - 바텀시트 → SwiftUI
.presentationDetents· FluttershowModalBottomSheet· RNBottomSheet - 당겨서 새로고침 → SwiftUI
.refreshable· FlutterRefreshIndicator· RNRefreshControl
Expo나 Flutter로 앱을 만들 때, 이름만 알면 프레임워크 컴포넌트로 바로 이어진다.
모바일이 자주 빠뜨리는 것
앱 UI에는 웹에 없는 관례가 있고, AI가 특히 자주 빠뜨린다. 이 사전은 그것들을 체크리스트로 붙였다.
- 세이프 에어리어: 하단 버튼이 홈 인디케이터에 가리지 않게
- 탭 타깃 44pt, 아이콘 버튼이 손가락보다 작지 않게. px가 아니라 pt/dp
- 엠프티 스테이트: 목록이 비었을 때 흰 화면이 아니라 안내를
- 로딩 버튼 잠금: 제출 중 다시 못 누르게, 중복 요청 방지
다시 켜게 만드는 부품
0.3.0에서 셋을 더했다. 사람들이 앱을 다음 날 다시 여는 자리에 쓰는 부품이다.
- 스트릭: 며칠 연속 했는지 큰 숫자와 요일 칸으로. 끊기기 전에 돌아오게
- 추천 카드: 정해진 때마다 새로 채우는 묶음. 언제 바뀌는지 같이 적는다
- 추억 카드: 예전 사진·기록을 그날 날짜와 함께 다시 꺼낸다
알림을 눌렀을 때 그 화면으로 바로 여는 딥링크, 안 읽은 개수를 붙이는 배지와 같이 쓴다.
쓰는 법 세 가지
- 사람이 찾기: 아래 사전에서 "아래에서 올라오는 판" 같은 별칭으로 정식 명칭과 요청 문장을 찾아 복사한다
- Claude Code: 설치하면 AI가 모바일 UI를 만들 때 정식 명칭·플랫폼 관례·네이티브 컴포넌트명으로 짚는다
- 다른 AI: llms.txt 한 줄이면 어떤 AI든 이 사전을 통째로 읽는다. giting.kr/skills/app-menu/llms.txt