[모아동] 웹에서는 괜찮았는데 앱에서는 깨졌다 - WebView와 앱 버전의 문제

모아동은 웹 서비스지만, React Native 기반 앱에서도 WebView를 통해 주요 화면을 함께 사용하고 있습니다.

특히 동아리 상세페이지부터는 웹뷰를 그대로 공유하는 구조입니다.

 

저는 웹을 주로 개발하고 있어서 앱쪽은 잘 모르는 상태였습니다. 그래서 제대로 생각을 못 했던 것 같습니다.

웹 상세페이지의 UI 개선을 마친 후, 웹은 릴리즈를 했습니다.

앱에서도 이후 업데이트를 통해 변경된 UI가 적용될 것이라 막연히 생각했던게 잘못된 생각이었습니다.

웹 배포 이후, 이상이 없는지 확인해보기 위해 앱 화면을 들어가서 보고 팀원들과 이야기하며 시작되었죠...

 

---

 

웹에서는 괜찮았는데, 앱에서는 깨졌다...

웹 릴리즈 이후, 앱 화면에서 상세페이지 UI를 확인해보고 있었습니다. 그리고 아래와 같은 화면을 저는 보게되었죠...

기존의 앱 내부에 있는 동아리 상세 탑바와 그 아래 새롭게 웹에서 추가된 동아리명 탑바가 겹쳐져서 보이는 문제였던 것입니다.

처음에는 단순히 앱도 이후 배포를 마치면 앱 내부의 탑바를 제거할 것이었기 때문에 문제가 없을 것이라 생각했습니다.

오히려 단순하게 생각하여 웹 릴리즈를 앱 릴리즈 이후로 해야하나, 고민을 하며 그게 불가능하니 브랜치를 하나 더 만들자 그런 이야기를 하고 있었습니다.

 

그러나, 앱을 하시는 분의 이야기를 들어보니 그런 문제가 아니었습니다.

당장 웹 배포를 리버트한다고 해서, 앱에서 탑바를 제거하고 그냥 업데이트한다고 해서 바로 웹처럼 갱신되는게 아니었습니다.

---

긴급 회의, 그리고 우리가 몰랐던 전제

웹을 개발하고 있는 사람과 앱을 개발하고 있는 사람 사이에 소통이 제대로 되지 않는 것 같아

상황 설명을 위해 긴급 온라인 회의를 진행하게 되었습니다.

 

그렇게 상황 설명을 들으면서 어떤 오해를 하고 있었는지 알게되었습니다.

앱에서 말하는 업데이트를 웹과 동일 선상에 놓고 생각하고 있었기 때문에 지금까지 문제가 대화가 잘 안 되고 있었던 것이었습니다.

즉, 앱에서도 업데이트를 하면 웹처럼 변경된 구조를 사용자가 바로 볼 수 있을 것이라고 착각했던 것 같습니다...

"앱에 버전이 있다"

 

라는 말을 듣고 조금씩 이해가 되기 시작하더라구요...

앱을 쓸 때, 사용자가 업데이트 버튼을 클릭하여 직접 업데이트를 하지 않으면 바뀌지 않는 것이 생각났습니다.

 

웹은 배포하면 모든 사용자들이 즉시 최신 화면을 볼 수 있었기 때문에 생각하지 못 했지만,

앱은 자동 업데이트를 꺼둔 사용자, 직접 스토어에서 업데이트하지 않은 사용자 등은 이미 배포된 과거 버전의 앱을 보게 된다는 것을 전혀 고려하지 못 했습니다.

 

따라서 업데이트하지 않은 사용자들을 위한 이전 버전의 멀쩡한 UI가 있어야했던 것입니다.

그래서 지금처럼 배포해버린 상태에서 앱이 배포를 하더라도 업데이트하지 않은 사용자들은 깨진 UI를 계속해서 봐야하는 상황이 문제였던 것을 알게되었습니다.

 

정말 머리가 아팠고, 또 전혀 생각하지 못 했던 것이라 신기하면서도 웹과 앱을 어떻게 맞춰나가야 하는 것인지 갈피를 잡는 것이

힘들었던 것 같아요

---

해결 방안 : 라우트를 나누자!

해결하려하니, 결국 기존에 새로 개선된 UI 작업이 진행된 상세페이지는 리버트를 통해 웹에서 되돌린 후,

업데이트 하지 않은 사용자들을 위해 개선 전 상세페이지 UI도 남겨놓는 방법이 있었습니다.

즉, 상세페이지 라우트를 나누는 것이 현재로서 가장 쉬운 개선 방법이었습니다.

 

따라서, RN에서 주소를 수정하는 것과 React에서 기존 상세페이지의 라우트를 분리하고 기존 상세페이지 UI도 유지하도록 

하는 작업을 할당하여 빠르게 진행하기로 했습니다.

한번에 많은 양의 정보가 들어와 어느정도 이해가 되면서도 정확히 이해한게 맞는지 어려웠습니다.

당장은 현재 기존 상세페이지를 신규 상세페이지 UI로 덮어씌운 것을 기존 상세페이지와 신규 상세페이지 각각의 UI를 모두 유지할 수 있도록 해야한다는 것만 이해했습니다.

그에 따라 "앱 버전 관리를 위해 웹뷰 라우터를 분리한다"라는 이슈를 저와 다른 한 분인 선배가 함께 페어프로그래밍을 하기로 했습니다

---

떨리는 페어프로그래밍

해결 방향이 정해진 뒤에는 각자 역할을 나눠 개발을 진행했는데,

아직 정확히 어떻게 라우트를 나눠야할지 모르겠어서 선배의 도움을 많이 받았습니다.

 

직접 이슈를 생성하고 공동 작업자 설정을 하여 디스코드를 통해 제 화면을 공유하며 진행했습니다.

저에게는 이번이 두 번째 페어프로그래밍이어서... 아직까지는 많이 긴장되었던 것 같네요

 

실시간 화면 공유라는게 조금 부담이었지만, 혼자였다면 오래 고민했을 포인트들을 선배에게 물어보며

서로 의견을 공유하면서 진행할 수 있어서 의외로 정리도 잘 되고 이해가 쉽게 되었어요

시작하기전에는 명확하지 않았던 이해가 라우트를 나누고, 어떻게 나눌지 고민하면서 선배에게 계속 질문하고 그렇게 완벽히 이해할 수 있었습니다.

 

레거시 상세페이지를 하나 더 생성하여 기존 상세페이지 UI를 다시 복구하고 각각을 조건에 맞게 라우팅해주는 작업을 진행했습니다. 상황을 이해하고나니, 생각보다 간단하게 해결이 되어서 금방 끝낼 수 있었습니다. 

커밋을 할 때도, 공동 작업자를 설정하여 함께 커밋할 수 있는 것도 알게되었고,

이 작업 이후 릴리즈도 하게 되었는데 그 역시 처음이어서 재밌었습니다!

 

긴장도 됐지만, 짧은 시간에 문제를 혼자 정의하지 않아도 됐고, 잘 모르는 영역인 앱을 혼자 판단하지 않고 결정의 근거를 명확히 정리하며 할 수 있어서 함께 문제를 바라보는 것이 생각보다도 더 좋았습니다.

 

---

 

이번 일을 겪으면서 가장 크게 느낀 건

웹뷰를 쓴다고 해서 웹과 앱이 같은 배포 단위를 가지는 건 아니다.

 

인 것 같습니다.

 

웹은 즉시 보이지만, 앱은 버전을 관리해야 한다는 것을 몰랐고 이 사실을 이번 이슈를 통해 몸소 체감할 수 있었습니다.

다음 글에서는 이번에 실제로 적용했던 웹뷰 라우트 분리 구조에 대해 자세히 다뤄보려 합니다.🙂