[Retrospect] 스택, 스크린 그리고 네비게이션 이벤트들(1)

최초 시각화 작업 및 와이어 프레임

나는 새로운 것에 대한 호기심이 많은 편이다. 코드 스테이츠에서 배운 것을 가지고 새로운 무언가를 해보고 싶었다. 마침 팀원들도 이미지 처리와 딥러닝에 관심이 많은 친구들이었고, 뜻이 맞아 앱에 도전해보기로 했다.

이 전 SAFU에서 간단한 CRUD를 포함한 기초적인 SPA를 경험해본 직후라 그런지, 혹은 리액트를 배웠기에 리액트 네이티브는 러닝 커브가 낮을 거라는 위안을 너무 믿은 탓인지 처음에는 어려울 게 있어봐야 얼마나 있을까 하고 조금 쉽게 생각했던 것 같다. 역시 방심은 독과 같다.
사실 리액트 네이티브에 대한 진입장벽이 없는 것은 사실이다. 다만 리액트 내비게이션이 생소했을 뿐...

---

1. 문제의 시작 - 리액트 네이티브에서는 리액트 내비게이션을 사용한다.

첫 번째 협업 프로젝트였던 SAFU에서는 화면 전환에 대한 어려움이 하나도 없었다. 고민을 할 것조차 없었던 것이 웹에서의 화면 전환은 너무나도 당연하고 익숙한 개념이었기 때문이다. 라우터를 활용해서 제어할 수 있었고, 더욱 간단하게는 html의 <a> 태그를 사용해서도 원하는 화면으로 이동하게 할 수 있었다. 각 화면 간의 이동은 history에 담기고  이 history 객체를 통해 뒤로 가기 등으로 컨트롤할 수도 있다. 곧 하나의 스택을 관리하는 개념이다.

그러나 앱에서의 화면 전환은 새로운 개념이었다. 스크린과 스택은 그 자체를 이해하는 데에는 어려움이 없었지만, 그것들이 내비게이션 바와 어떻게 연결이 되는 것인지 직접 경험하면서 부딪혀보기 전에는 이해하기 힘들었다. 당연히 이런 개념이 존재하는지조차 몰랐기 때문에 '웹에서처럼 라우터 같은 것으로 컨트롤하겠거니' 생각하고 있었다. 그래서 이전 프로젝트처럼 메뉴 컴포넌트를 사용하려고 했었는데, 이 계획이 오히려 리액트 내비게이션을 이해하기 더 힘들게 만든 약간의 고정관념이었던 것 같다.

2. 해결의 실마리 - 서비스의 성격에 맞는 내비게이션 사용하기

React Navigation | React Navigation

위 공식문서를 읽다 보면 내비게이션의 두 가지 종류가 나온다. 바로 Tab Navigation과 Drawer Navigation이다. 이 내비게이션들은 단순히 다른 종류의 테마 정도로 치부하면 안 된다. 단순한 시각적인 차이만 존재하는 것이 아니기 때문이다. 

각 내비게이션의 특징

• Tab Navigation : 하단에 고정( = 높은 엄지손가락의 활용 = 한 손 컨트롤이 가능)되어있으며, 어느 스크린에서든 각 탭을 통해 각 기능에 쉬운 접근/화면 전환이 가능

• Drawer Navigation : 상단에 내비게이션 헤더를 표시하는 게 보편적이며, 이를 통해서 사용자는 현재 본인이 어느 서비스에 얼마나 깊이 들어와 있는지 파악이 가능

각 내비게이션의 특징에 맞추어 사용자들이 길을 잃지 않을 정도의 간단한 서비스 구조라면 Tab Navigation을 선택하는 것이 맞고, 반대로 복잡한 구조를 가지고 있다면 Drawer Navigation을 사용하는 것이 맞다고 생각했다. 팀원들과의 회의는 만장일치로 결론이 났고, Tab Navigation을 사용하게 되었다.

3. 문제에 적용 - 어디까지 고려할 것인가?

하지만 본격적으로 내비게이션을 적용하기 전에 한 가지 더 고려해야 할 사항이 있었다. 바로 어느 버전의 내비게이션을 사용할 것인가였다. 약 복용 관리 서비스인 만큼 출시된 지 시간이 지난 디바이스를 사용하는 분들도 있을 수 있다는 생각이 들어서 4.x 버전을 사용했다. 물론 5.x 버전도 안정화되어있다고 공식문서에는 나와있으나, 프로젝트의 마일스톤에 스케줄을 맞춰야 했기에 충분한 시간을 갖고 찾아보는 데에는 한계가 있었다. 아래와 같이 4.x 버전으로 내비게이터를 만들어주었다.

최초에 아이콘 assets 들을 제작하기 전에는 oblador.github.io/react-native-vector-icons 사이트를 참고하여 아이콘으로 제작했다가 추후에 assets 정리가 끝나고 업데이트해주었다.

react-native-vector-icons directory

4. 결과 -  그래서 알게 된 점은?

하단 탭 내비게이션도 하나의 스택이라고 볼 수 있다. 이 부분이 처음에는 정말 이해가 안 갔다. 하단에 탭으로 만들어진 내비게이션의 시각적인 부분으로만 이해하려 해서 그런 것 같다. 모양이 아니라 구조를 먼저 상상하고 그 스택을 구성한 스크린에 접근할 수 있는 트리거들을 아이콘으로 만들어 하단에 배치했다고 생각하니 마음이 편안해졌다. 앞으로도 컴퓨터의 입장, 코드의 시각으로 바라보는 훈련이 필요한 것 같다.

하지만 내비게이션과의 싸움은 아직 끝나지 않았다. 내비게이션이벤트가 궁금하다면 아래 링크로!

[Retrospect] / 스택, 스크린 그리고 네비게이션 이벤트들(2)