고민하게 된 계기

• 공식문서도 보고 구글링해서 다른 분들 개발한 것보니까 보통 네비게이션 구조 설계할 때 디자인적인 것을 더 신경쓰는 것 같음
• 어디부터 어디까지 tab이 보여야된다, 보이면 안된다에 따라 실제 페이지간의 구조와는 약간 다르게 설계하는 것
• 예를 들자면, 일기 앱의 경우 핵심은 일기 목록과 달력페이지
  • 달력페이지와 일기목록은 Tab
  • 일기 CRUD는 Stack
  • 기능적 최상위로 생각하면 Tab이 상단 네비 Stack이 하단 네비

• 하지만 디자인적으로 생각한다면 일기 CRUD에서는 BottomTab이 보이면 안됨
  • Stack이 상단네비 Tab이 하단 네비에 위치해야함

질문

웹 개발에서 경로는 명확하게 표시되며 프로젝트의 구조와 조직에 대한 중요한 정보를 전달하기 때문에 라우트 간의 계층적 관계를 명확하고 직관적으로 설계한다. 하지만 React Native에서는 경로가 사용자에게 직접적으로 나타나지 않기 때문에 페이지 중첩 관계를 더 중요하게 여기는 것 같다.

• 모바일 네비게이션에서 페이지 중첩 관계가 웹 개발보다 덜 중요하게 여겨지는 이유는 무엇인지
• 코드의 복잡성을 줄이기 위한 타협인지, React Native가 추구하는 네비게이션 설계 방향의 차이인지

질문에 대한 답

모바일 네비게이션에서 페이지 중첩 관계가 웹 개발보다 덜 중요하게 여겨지는 이유는 무엇인지

가장 큰 이유는 브라우저와 모바일 플랫폼 간의 페이지 렌더링 방식의 차이이다.

브라우저는 사용자가 페이지에 접근할 때마다 코드를 읽고 필요한 리소스를 번들링하여 페이지를 띄운다. 하지만 모바일은 페이지를 모두 완성한 다음에야 화면을 교체한다.

따라서 웹개발은 페이지가 URL 로 직접 매핑이 되다보니 URL 을 통해서 경로 구조나 계층 구조를 쉽게 파악할 수 있도록 작성을 하는게 대부분인데, 앱 개발은 화면전환이 URL로 매핑되지 않다보니 네비게이션 구조가 코드 내에서 정의가 된다.

때문에 모바일에서는 경로 정보가 덜 중요해지고 페이지에서 필요한 정보가 경로에 의존하지 않게 된다.

코드의 복잡성을 줄이기 위한 타협인지, React Native가 추구하는 네비게이션 설계 방향의 차이인지

위와 같은 이유로 모바일 에서는 웹보다는 더 유연하게 디자인 중심적으로 사용자에 초점을 맞춰서 타협을 하는 편이다. 물론 코드적으로는 웹처럼 계층구조로 갈 때 보다 네비게이션 코드가 복잡하고 가독성이 많이 떨어지는 편이다.

이런 문제를 해결하기 위해 목적별로 네비게이션을 분리하는 것을 추천한다.

최상위 네비게이션인 MainStackNav 안에 목적별로 네비게이션을 나눠서 페이지에 따라 분리하는 방식으로 디자인을 따라가면서 최대한 유지보수하는데 용이한 방향 구현한다.

최상위 네비게이션은 앱의 주요 내비게이션 흐름을 정의할때 사용한다.

네비게이션이 구조가 복잡해지면 최상단에서 고려해야될 것들이 많아지게 되니 초기 설계가 더욱 중요하다.