스택 기반 내비게이션 UX 패턴

1.Bottom Menu(Tab) 간 이동 → 애니메이션 없음

예: 홈, 마켓, 채팅, 내 정보 등 탭 간 이동

🔄동일한 Depth의 평행 구조

✅ 전환 시애니메이션 없음 or fade 정도

✅ Stack이 초기화되거나 보존되기도 함 (앱마다 다름)

이유: 사용자가 “완전히 다른 섹션”으로 이동하는 것으로 인식

2.탭 내부에서 다른 페이지 진입 → Slide 애니메이션

예: 마켓 → 상품 상세, 채팅 → 채팅방

👉탭 내의 “하위 계층”으로 들어가는 동작

✅ 오른쪽 → 왼쪽 슬라이드 전환 (push)

✅ 뒤로가기 시 왼쪽으로 되돌아감 (pop)

이유:계층 이동을 시각적으로 표현 (↔ 탭은 계층 이동 아님)

3.공통 진입 가능한 페이지 (ex. 사용자 프로필)

📌 홈, 마켓, 채팅 등 여러 경로에서 접근 가능

✅ 진입 시에도슬라이드 전환(↔ 전체 앱 중 어디서 와도 동일 UX 유지)

✅ 이전 탭으로 “돌아가는” 것이 아니라,스택 pop으로 원래 위치로 복귀

4.슬라이드 업 등장하는 페이지 (ex. 닉네임 수정, 태그 설정, 이미지 선택 등)

🧭 전체 페이지를 덮는 건 맞지만, 계층적으로“현재 흐름 안에서의 보조 페이지”

✅ 슬라이드 업 등장 (bottom → top)

✅ 상단에 ❌ X 버튼 (뒤로가기와 다른 의미)

사용성 의미:

🔙 ← :뒤로 돌아감

❌ X :흐름을 완전히 종료 / 취소

🧠 이 흐름의 핵심 설계 철학

요소

의미

사용자 인식

탭 간 이동

병렬, 영역 전환

“앱의 메인 섹션을 바꿈”

push (→)

계층 깊어짐

“현재 흐름을 계속 탐색 중”

pop (←)

이전으로 되돌아감

“뒤로”

슬라이드업

보조/서브 작업

“완전한 새 영역은 아님”

X 버튼

흐름 종료 or 취소

“작업을 포기/닫기”

🔍 일반적으로 놓치기 쉬운 네이티브 UX 규칙들

✅ 1.탭마다 독립 스택 유지

각 탭에 자신만의 Stack 있음

홈 → 상품 → 상세 → 마켓 탭 이동 → 다시 홈 탭 → 이전 스택 복원됨

✅ 2.뒤로가기/취소 구분

뒤로가기(←): 진행했던 단계를 되돌림

X: 독립적인 작업(모달/시트)을 “포기”하거나 “닫음”

✅ 3.탭으로 간 후 다시 현재 탭 클릭 시 → Top으로 스크롤

예: 마켓 탭에서 스크롤 → 다른 탭 → 다시 마켓 탭 두 번 클릭 → 맨 위로

✅ 4.홈 → 상세 → 댓글 → 프로필 → 편집 → 저장 → 자동 pop → 이전 스택 복원

사용자 입장에서는 “작업 완료했으니 나왔으면 좋겠음” > 특정 페이지에서 작업 완료 후 자동으로pop()여러 번 발생

✅ 5.앱 상태 복원

앱 종료 후 다시 실행했을 때 이전 Stack 상태 기억

📚 Stackflow로 구현 시 포인트 요약

기능

Stackflow에서 구현 방식

탭 이동

탭 구조 직접 구성 (Stack 별도 유지 고려)

슬라이드 전환

기본push()/pop()

슬라이드업

스타일 다르게 구성한 Activity

X 버튼

pop()orpopTo()+ "닫기 전 처리"

params 전달

push('EditProfile', { name: '홍길동' })

기타 예시

Youtube Music

우측 상단 알림 버튼 클릭 > 활동 페이지 > 우측 상단 검색 버튼 클릭 > 검색으로 여기저기 다니다가 뒤로가기하면 검색 stack이 차근차근 pop되는게 아니라 활동 페이지로 바로 돌아감.

활동 페이지의 우측 상단 프로필 클릭했을때도 마찬가지로, 프로필 하위 메뉴 여기저기 들어갔다가 뒤로가기하면 활동페이지로 바로 돌아감.

그런데 프로필 페이지 > 내 채널 > 검색버튼 클릭했다가 뒤로가기 하면 활동 페이지가 아닌 내채널 페이지로 돌아감.