핵심 비유
'쇼핑몰 층별 안내도' 비유 — 큰 쇼핑몰에 들어가면 길을 잃지 않는 건 곳곳에 '현재 위치'와 '층별 안내'가 있기 때문이다. 앱의 하단 탭바·헤더·뒤로가기가 바로 이 길잡이다. 그런데 안내 메뉴가 너무 많으면 오히려 헷갈린다. 그래서 앱 하단 탭은 보통 3~5개다 — 핵심 길만 보여주고 나머지는 안으로 숨긴다.
핵심 포인트
- 네비게이션은 "나 지금 어디 있고, 어디로 갈 수 있나" 를 항상 알려주는 길잡이다.
- 하단 탭은 3~5개가 적정 — 너무 많으면 아이콘이 작아지고 선택 장애를 부른다. 높이 56px, 아이콘 24px.
- 현재 위치 강조가 필수 — 지금 있는 탭은 색/굵기로 구분해야 길을 잃지 않는다.
- 아이콘 + 라벨 병행 — 아이콘만 있으면 무슨 기능인지 추측해야 한다.
- 핵심 기능만 탭에 노출하고, 부가 기능(설정·알림 등)은 '더보기'나 마이페이지 안으로 — 점진적 공개(E1)와 연결.
- 탭 순서에도 규칙이 있다 — 가장 많이 쓰는 '홈'을 보통 맨 왼쪽, '내 정보(마이)'를 맨 오른쪽에. 회사마다 비슷한 이유는 사용자가 이미 그 위치에 익숙하기 때문(일관성, E1).
교사 팁
"각자 폰 하단 탭이 몇 개인지 세어보세요"로 시작한다(design-sense navigation-pattern classGuide). 대부분 45개라는 걸 발견하면 "왜 회사들이 약속한 듯 45개일까?"를 토론 — 인지 부하·터치 크기·선택 장애로 자연스럽게 연결된다. design-sense 분석 탭에 인기 앱 스크린샷을 올려 탭 개수·라벨 유무·현재 위치 강조를 확인하고, "탭에 없는 기능은 어디로 갔을까?"로 정보 위계를 추적한다.
좋은 예 vs 나쁜 예
- ✅ 4개 탭(홈·검색·찜·마이): 핵심만 노출, 직관적, 현재 위치 강조. (design-sense
navigation-pattern)
- ❌ 7개 탭(홈·검색·찜·장바구니·알림·설정·마이): 한눈에 안 들어옴, 아이콘이 작아 구분 어려움, 선택 장애.
- ✅ 유튜브 하단 탭(홈·Shorts·구독·보관함): 4개로 핵심 길만, 현재 탭은 진하게 강조. ❌ 탭에 라벨 없이 아이콘만 6개: 무슨 기능인지 매번 추측해야 함.
실습·평가
- 실습: '학교 급식 앱'을 만든다면 하단 탭 4개를 뭘로 할지 정하고, 나머지 기능 5개는 어디에 숨길지 짝 토론 → 탭바 스케치.
- O/X 퀴즈: "기능이 많을수록 하단 탭을 늘려 다 보여주는 게 좋다." → X (3~5개 유지, 나머지는 안으로)