앱 이동 구조와 메뉴 아이콘
햄버거, 케밥, 미트볼 메뉴 아이콘은 각각 무엇이 다른가요? 햄버거는 가로줄 세 개로 전체 메뉴를 열고, 케밥은 세로 점 세 개, 미트볼은 가로 점 세 개로 항목별 추가 동작을 뜻합니다.
사용자가 화면 사이를 어떻게 오가는지 정하는 요소들입니다. 앱의 뼈대라서 가장 먼저 정합니다.
이름과 미리보기
미리보기를 누르면 멈추고, 다시 누르면 재생합니다.
하단 탭 바
Bottom tab bar
자주 가는 곳 3~5개를 화면 아래에 고정
드로어
Navigation drawer
옆에서 밀려 나오는 전체 메뉴
무한 스크롤
Infinite scroll
끝에 닿으면 다음 내용을 계속 불러옴
페이지네이션
Pagination
1, 2, 3 쪽 번호로 나눠 보여 줌
브레드크럼
Breadcrumb
홈 > 카테고리 > 상품처럼 현재 위치를 보여 주는 경로
햄버거
Hamburger menu
가로줄 세 개. 전체 메뉴 열기
케밥
Kebab menu
세로 점 세 개. 이 항목에 대한 추가 동작
미트볼
Meatball menu
가로 점 세 개. 케밥의 가로형
와플·벤토
Waffle / Bento menu
점이나 네모 아홉 개. 다른 앱·서비스로 이동
이렇게 씁니다
- 자주 가는 목적지가 5개 이하라면 햄버거보다 하단 탭 바가 낫습니다. 숨겨 둔 메뉴는 덜 눌립니다.
- 케밥은 "이 줄에 대한 동작(수정·삭제)"에만 씁니다. 화면 전체 메뉴로 쓰면 헷갈립니다.
- 무한 스크롤 화면에는 푸터를 두지 않습니다. 계속 밀려나서 누를 수가 없습니다.
- 끝이 있는 목록(검색 결과·주문 내역)은 페이지네이션이나 [더 보기] 버튼이 낫습니다.
복사해서 쓰는 프롬프트
앱 기본 구조
모바일 앱 기본 구조를 만들어 줘. - 하단 탭 바(Bottom tab bar) 4개: 홈, 검색, 저장, 내 정보. 현재 탭은 아이콘과 글자 모두 강조. - 목록 항목마다 오른쪽에 케밥 메뉴(Kebab menu). 누르면 수정·삭제가 담긴 바텀시트(Bottom sheet). - 홈 피드는 무한 스크롤(Infinite scroll), 검색 결과는 [더 보기] 버튼 방식.
참고한 게시물: @uxwoodytips, @uxwoodytips