2020년 9월 V 컬러링 오픈 후 작년까지 운영 및 고도화를 진행하면서 크고 작은 이슈들이 있었습니다. 앱과 웹 간의 인터페이스 연동 도중 세션의 누락, UX 개편을 통한 홈 화면 전체 변경, 회원 체계 개편 등… 심지어 그 와중에 iOS가 15 버전으로 업그레이드 되면서 주소창이 하단으로 내려가게 되는 현상으로 인해 화면에 이상한 여백이 나타나는 오류가 발생하기도 했고, 플레이어에서 비디오가 로드되기 전 이미지를 먼저 불러오는데 iOS15에서는 썸네일 로드 후 비디오 재생 직전 화면이 깜박이는 현상이 나타나기도 했습니다. 굉장히 오랜 시간 공을 들여 해결했던 두 가지 이슈의 처리 방법은 따로 정리할 예정입니다.
1. iOS15에서 화면 이동 시 흰 여백이 생기는 현상
2. iOS15에서 비디오 재생 직전 화면이 깜박이는 현상
신규 기능 및 운영과제, 기존 개발 오류에 대한 이슈가 쏟아지는데 설상가상으로 위와 같은 (혼자만 발견한) 이슈도 나타나니 혼자 개발하는 입장에서 굉장히 당혹스러웠습니다. 게다가 급변하는 FE 환경의 특성상 새롭게 도입하고 싶은 기술이 많은데 바쁜 와중에 그런 사치?는 꿈도 꿀 수 없었죠.
다행히 작년 하반기에는 함께 업무를 처리해줄 좋은 동료도 들어왔고, 올해는 작년 대비 개발해야 할 신규 기능이나 운영 과제가 (현재까지는) 많지 않은 상황입니다. 그래서 올해는 제 오랜 숙원 사업(?)이었던 성능 최적화 및 코드 품질 개선을 반드시 이루어 보고자 합니다. 생각만 해도 가슴이 설레네요! ㅋㅋㅋ
많은 도전이 있을 수 있겠지만 우선 중점적으로 처리하고 싶은 내용은 다음과 같습니다.
1. 상태 관리 방식의 변경 (Redux에서 React Query로)
2. Resize 시점의 코드 정리
3. iOS 비디오 렌더링 방식 변경
4. 운영 과제 수행 중 발생하는 이슈 대응 과정 기록
우선 상태 관리 방식의 변경부터 말하자면 기존의 Redux는 React 개발자라면 반드시 사용해야 할 세트 같은 개념의 라이브러리였습니다. 데이터의 상태는 크게 각 컴포넌트에서 독립적으로 사용되는 로컬 상태와, 전체 어플리케이션에서 공통으로 사용되는 글로벌 상태로 나눌 수 있는데요, Redux는 어플리케이션 전체에 하나의 store를 두고 거기서 공통의 상태를 관리해 주는 라이브러리입니다. 사실 Redux 자체도 굉장히 훌륭하고 아주 유용하게 쓰이고 있지만 Redux에서 상태 관리를 하기 위해서는 액션 처리, 리듀서에서의 작업 수행, 실제 처리 시의 dispatch 등 조금 복잡하게 코드를 작성해야 합니다. 심지어 서버 통신 같은 비동기 처리에서의 데이터 동기화 같은 경우 코드가 그다지 깔끔하게 동작하지 않습니다. 리듀서는 동기적으로 동작하지만 액션은 비동기로 동작하고, 스토어에 액션을 던지면서도 해당 상태가 정확히 어느 시점에 변경되는지 알 수 없는 어려움이 생기게 됩니다.
이러한 문제를 해결하기 위해 혜성처럼 SWR과 React Query라는 상태 관리 라이브러리가 등장하게 되었습니다. 이 두 가지 라이브러리는 기존의 Redux의 문제점을 깔끔하게 해결해주고, 심지어 Redux에서 제공하지 못하는 여러 기능을 제공해 줍니다. 이에 관해서도 앞으로 천천히 Research를 하며 V 컬러링에 가장 적합한 라이브러리를 적용할 예정입니다.
두 번째는 Resize 시점의 코드 정리입니다. 위에서 설명한 iOS15에서의 화면 여백 문제는 화면의 스크롤 여부와 팝업 여부, 키패드의 등장 여부 등 여러 가지 요인이 복합적으로 얽혀 있는 이슈였습니다. 당연히 해결하기도 쉽지 않았고 현재 다행히 해결은 되었으나, 정확한 조사나 정리된 내용 없이 그냥 케이스별로 무작정 해결 방법을 찾아 임시 방편으로 땜빵한 느낌이라 어쩐지 찜찜한 느낌이 계속 남아있습니다. 지금도 간헐적으로 스크롤 이슈들이 발생하기도 하구요. 그래서 케이스 별로 원인을 정확히 파악하고, OS별로 충분한 테스트를 거쳐 정리된 소스를 만들고자 합니다. 진정한 크로스 브라우징이죠. ㅎㅎ
세 번째는 iOS 비디오 렌더링 방식의 변경입니다. 사실상 이 문제는 해결하지 못할 가능성이 큽니다. 현재 안드로이드의 경우 아래위로 swipe를 할 때 이전의 데이터와 이후 데이터를 하나씩 함께 받아와서 swipe를 하는 시점에 직전/직후의 썸네일을 미리 보여줍니다. 하지만 iOS의 경우 안드로이드와 동일한 로직을 적용하면 플레이어가 재생되지 않는 오류가 있습니다. 그 이유는 iOS의 경우 사용자가 액션을 취하기 전까지는 소리가 자동으로 재생되지 않는 OS 정책이 있는데, V 컬러링은 고객의 요구사항에 따라 음소거를 해제한 후 swipe를 하면 그 다음 비디오에서도 소리가 자동으로 재생되어야 하기 때문입니다. 이런 이유로 안드로이드와 iOS의 비디오 영역이 따로 구현되어 있으며, iOS는 이전 데이터와 이후 데이터를 미리 받지 않고 로드되는 시점에 비디오를 재생하기 때문에 swipe를 하는 도중 직전/직후의 썸네일을 보여주지 못하고 있습니다. 다행히 화면이 깜박이는 현상을 해결함으로써 어느 정도 속도 이슈는 해결하였으나, 어쨌든 안드로이드와 같은 smooth한 효과는 보여주지 못하고 있습니다.
이 문제는 해결되지 못할 가능성이 더 크지만 그래도 시간 나는 대로 해결 방안을 찾아볼 예정입니다.
(추가) 네 번째는 운영 과제 수행 중 발생하는 이슈 대응 과정의 기록입니다. 그때그때 방법을 찾아서 해결하고 끝내도 상관없지만, 어떤 과정을 거쳐 문제를 해결했는지 기록해 두고 싶어 추가하였습니다.
그 밖에도 시시때때로 업데이트되는 React의 최신 버전 및 webpack (빌드 도구) 의 최신 버전 적용, 새로운 라이브러리 적용 등 시도하고 싶은 것이 많지만 일단 지금은 리액트 버전 하나만 올려도 바로 에러가 나네요. 아무래도 상용에 서비스되고 있는 중요한 B2C 서비스이기 때문에 다른 솔루션과는 달리 변화에 보수적일 수밖에 없는 건 어쩔 수 없는 것 같습니다. 그럼에도 불구하고 올해는 작은 것부터 하나씩 바꿔 나가 보고 싶네요. 이런 작은 도전과 변화가 더 나은 코드를 만들고, 나아가 사용자에게 더 빠르고 편리한 UX를 제공할 수 있을 거라고 생각합니다!
2022년 4월 5일에 작성함.
