brunch

You can make anything
by writing

C.S.Lewis

by 뱅크샐러드 Jun 25. 2024

뱅크샐러드의 새로운 집(Home) 짓기 - 2편

완공 편


4. 홈 어떤 과정으로 만들어졌나


4-2. 개발


 홈 탭을 추가한다는 것은 단순히 탭 하나가 추가된다는 것이 아니었다. 사용자의 상태에 따라 다른 케이스와 화면으로 이동이 필요한 경로가 필요했고, 무엇 보다 매일 변화하는 정보들을 사용자들이 잘 확인할 수 있어야 했기 때문에 준비해야 될 것들이 많았다. 그래서 우리 팀에서는 한꺼번에 모든 기능을 만들고 나서 QA를 하기보다는, 단계적으로 작업을 해나가면서 QA와 실험을 하기로 했다.


“우리는 지금 속도가 중요한 게 아닙니다. 제품의 완성도가 중요합니다.”

 그동안 뱅크샐러드에서는 빠른 실행과 성과를 확인하기 위해 MVP 제품을 출시하는 데 집중했었다.

 하지만 홈 탭은 뱅크샐러드의 첫 화면이자 첫인상을 담당하는 화면이었기에, 팀에서나 회사에서나 내부에서 만족할 수 있는 퀄리티여야 사용자에게도 선보일 수 있다는 생각이었다.

 이렇게 제품에 집중하여 완성도에 신경 쓸 수 있는 환경이 되니, 개발자도 솔루션에 깊게 고민할 수 있었고 팀원 간 무한 신뢰 아래 다양한 논의를 진행할 수 있었다.

뱅크샐러드 채용 공고 확인하기
MY DATA 산업을 선도하는 뱅크샐러드에서 데이터로 개인이 가장 똑똑해지는 세상을 함께 만들어 나가실 분을 모십니다.



(아래는 뱅크샐러드 홈 탭을 프로젝트에 참여한 실무자들의 인터뷰가 이어집니다.)



Q. 홈을 개발할 때 아마도 뱅크샐러드에서 처음으로 ‘개발 POC’를 거친 것으로 아는데, 어떤 과정으로 진행되었나요? 

*POC(Proof of Concept)란? 특정 아이디어, 또는 신기술 등을 도입할 때 실현 가능성을 검증하기 위한 과정

팀원 소개 : 김재한 님, 김봉균 님


A. 김재한 [Tech Lead Manager]:

 뱅크샐러드 홈은 여러 가지 형태로 표시되는 정보들을 별도의 섹션 형태의 레이아웃을 가진 UI로 표현하여 구성되는데, 이런 형태의 화면을 구현하는 기술들이 몇 가지 있습니다.


 먼저, iOS의 경우 앱스토어의 메인 화면처럼 복잡한 레이아웃 구현을 위해 홈 개발당시 즈음에 도입된 새로운 기술이 있었고, 이 신기술을 적용하여 화면개발을 진행하는 것이 좋을지, 아니면 기존에 사용해 오던 기술을 재활용하는 것이 좋을지 판단 근거를 세울 필요가 있었습니다. Android도 iOS와 마찬가지로 홈 화면 개발 시에 사용할 수 있는 기술이 두 가지 정도 있었고, 이 중에서 어떤 기술을 사용하여 화면개발을 진행하는 것이 좋을지 엔지니어들과 논의를 진행했어요.


 3주 정도 각각의 기술로 구현할 경우의 장단점에 샘플 코드를 작성해 보고 논의하는 시간을 거쳤고, 세부적으로는 주 1회 미팅을 진행하면서 샘플코드와 데모 시연 과정을 통해 어떤 기술을 사용하는 것이 최선의 선택일지 결정하는 시간을 가졌어요. 논의 초반에는 새로운 기술을 적용하기 어려울 것 같다는 의견도 있었지만, PoC 과정을 통해서 이 어려움을 극복할 방법을 찾아낼 수 있었고 결과적으로 최신 기술을 사용하여 홈 화면에 적용했죠.

 PoC를 진행하는 동안 기준이 되었던 목표 세 가지는,   

추후 홈 화면이 업데이트되면서 개선사항을 지속적으로 반영할 수 있도록, 확장성이 있는 형태인지(scalability)

홈 화면 출시 이후 시간이 지나서 제품 전체적인 개선이 필요할 때 Refactoring이 용이한 형태인지

제품 성능(Performance)적인 측면에서 문제없이 빠르게 화면에 필요한 내용들을 표시할 수 있는 방식인지

 이것들을 검증하는 것이었습니다.


 홈 화면은 뱅크샐러드 제품에서 유저가 만나는 가장 첫 번째 화면이기 때문에 빠른 속도로 화면을 구성할 수 있는 것이 매우 중요했고, 뱅크샐러드 전체 제품의 컨텐츠를 요약하여 보여주는 화면이었기 때문에, 화면의 일부 기능에서 오류가 발생하더라도 다른 영역까지 문제가 전파되면 안 된다는 것이 매우 중요했습니다. 그래서 일부 섹션에서 오류가 발생하더라도 홈 화면 전체적으로는 잘 작동할 수 있도록 구조를 설계했습니다.



A. 김봉균 [iOS Engineer] : 

 디자인을 할 때, 글씨 크기부터 레이아웃, 컬러 등 모든 게 선택의 연속이듯 개발도 마찬가지예요. 여러 가지의 구현 방법이 있고, 그중 완성도가 높은 방법을 고르는 선택이 필요하죠. 하나의 목표점이 주어졌을 때 여러 시도를 해보고, 경험을 기반으로 최고의 안을 택할수록 완성도가 높아져요. 그렇게 했을 때 먼 훗날 시간이 지나서 후회를 덜 하고 오래가는 코드가 될 수 있고요. 그런데 그게 사실 쉽지는 않아요. 이 제품이 얼마나 갈지 알 수 없고, 할당된 시간도 한정되어 있기 때문이에요. 홈은 앱의 첫 화면이고, 베팅을 크게 한 프로젝트 이기 때문에 오래갈 기능이라 판단했고 그래서 완성도에 힘썼어요. 기존의 다른 기능을 개발할 때 보다 더 오랜 시간을 들여 여러 선택지를 테스트해봤습니다. 

 홈 화면의 기획과 디자인 과정에서와 마찬가지로 개발도 수많은 이터레이션(iteration)을 거쳤어요. 특히 기존 첫 화면이던 자산 탭은 짧은 시간 내에 개발해야 하는 상황이었던 탓에 설계에 큰 공을 들이지 못해 성능에 문제가 있는 구조로 개발되었어요. 홈탭에서는 같은 실수를 반복하지 않기 위해 설계 단계부터 공을 들였어요. 거의 한 달 동안 PoC에 매진했는데 뱅크샐러드에서 하나의 화면을 만들기 위해 가장 많은 시간을 들였던 순간이었죠.


홈 개발 과정에서 POC 검증 목표 3가지



Q. 개발 과정에서 Phase(단계)를 나눠 작업하셨는데, 그렇게 한 이유와 어떻게 계획을 짜고 진행하셨는지 궁금해요. 


팀원 소개 : 김재한 님, 김봉균 님

A. 김재한 [Tech Lead Manager]:

 홈 화면에서 사용하기 위해 내부적으로 개발한 새로운 화면전환 방식을 적용하기 위해 개발 페이즈를 몇 단계로 분리하여 작업을 진행했는데요.  

 홈 화면에 사용하는 API(네트워크를 통해 앱에서 표시할 정보를 서버로부터 받아오는 과정)는 서버에서 데이터뿐만 아니라 UI를 구성하는 정보(텍스트 칼라, 레이아웃 형태, 화면 터치 시 이동하는 화면정보)까지도 모두 받아와서 화면을 구성하는 '서버 드리븐 UI'방식을 적용할 수 있도록 설계가 되었습니다. 

 이를 통해서 서버에서 어떤 형태로 화면을 그릴지 구성정보를 클라이언트로 전달하고, 클라이언트는 이 정보를 해석하여 화면을 그리는 기술이라고 생각하면 됩니다. 


 그래서 (1) 홈 화면 기능개발과 서버 드리븐 UI 구조설계, (2) 화면 이동 정보를 데이터로 표현해 주는 '스크린 내비게이터'라는 자체기술 개발을 별도의 페이즈로 분리해서 개발을 진행했습니다. 

 처음에는 각각에 작업을 진행하고, 마지막으로 각 분리된 페이즈에서 개발된 내용을 연결하는 작업을 진행했습니다. 


A. 김봉균 [iOS Engineer] : 

 작업량이 많은데 한 걸음에 가면 뇌부하가 생길 수밖에 없잖아요. Phase를 나누면, 끊을 수 있는 단위로 작업을 나눠가서 최종 목표 도달까지 지치지 않을 수 있고 어느 지점에 와있고 이번주에 해야 하는 것이 무엇인지 쉽게 알 수 있어요. 그러다 보니 오히려 작업 속도도 더 빨라지는 게 가장 좋은 점이었어요. 

 저희가 쓴 기술을 왜 선택했는지 좀 더 이야기해보고 싶은데요. 홈에서 섹션의 배치 순서를 바꾸고 싶거나, 특정 아이템을 눌러서 이동하는 화면을 바꾸고 싶을 때 매번 앱을 수정하고 업데이트를 해야 한다면 오랜 시간이 걸려요. 당시 저희는 2주에 한 번씩 앱 정기 업데이트를 하고 있었기 때문에 2주에서 4주까지 기다려야 했어요. 앱 배포 속도가 느리단 점이 추후 홈 개선 속도에 걸림돌이 되지 않도록, 홈 화면이 어떻게 그려질지도 서버에 위임한 거예요. 여러 요소들의 순서를 바꾸고, 이동 화면은 어디인지 정보를 내려주는 것을 서버에서 책임지게 해서 앱 업데이트 없이도 개선에 대한 빠른 검증이 가능해지도록 했어요. 이러한 부분에 시간을 많이 쏟았고, 결과적으로 지금도 이득을 보고 있습니다. 


A. 김재한 [Tech Lead Manager]:

 위에서 언급한 두 개 개발 페이즈를 진행한 이후, 가장 마지막 세 번째 페이즈에서는 'Pre-QA'라는 이름으로 사내 구성원 전원을 대상으로 베타테스트를 진행했습니다. 홈 화면 개발 이전까지는 사내에서 공개적으로 기능을 오픈해서 전사 피드백을 받는 과정이 없었는데, 1개월 동안 내부 베타테스트를 통해서 완성도를 높이고 싶은 욕심이 있었어요. 홈 화면 출시에 대한 의사조율 과정에서 사내 반대의견이 매우 많았거든요. 

 출시되는 제품의 완성도를 높이려면 실제 사용경험에 대한 피드백이 필요했고, 사내 구성원이 150명 정도 되는 상황이니 구성원들의 피드백을 통해 완성도를 높일 수 있다는 생각이 들었죠. 'Pre-QA'는 1차, 2차, 3차 총 세 번에 걸쳐 진행되었고, 이 기간 동안 홈 화면의 완성도를 높일 수 있었습니다. 


A. 김봉균 [iOS Engineer] : 

 홈 화면에 나타나는 변동 금액과 같은 부분도 사내 테스트 의견을 엄청 많이 받았었죠. 정확도뿐 아니라 증가, 감소 표현 등에 대한 제안도요.


단계별로 작업을 나눠 개발을 진행했던 홈 화면


4-3. 보수적으로 길게 실험하기


 홈 탭 출시는 뱅크샐러드 역사상 가장 긴 실험 아래 이루어졌다. 뱅크샐러드에서는 보통 하나의 기능을 출시할 때 2주간 실험을 진행한다. 그러나 홈 탭은 마치 로켓 발사를 준비하듯 114일간 신중하게 실험했다.

 2022년 10월부터 사용자 대상으로 첫 배포를 시작하여 한 달간 전체 사용자의 24% 까지, 그다음 달은 25%부터 50%까지 천천히 홈 탭을 사용자에게 선보였다. 하지만 그 와중에도 여러 단위로 기능 추가가 계속되었고, 실험 속 실험과 같은 형태로 꽤나 복잡한 분석 과정을 거쳐 개선을 했다. 지속적인 모니터링과 함께 실험 결과 분석은 2023년 1월 말까지 계속 됐다. 당시 2차 개선을 위한 인터뷰를 진행했는데, 홈 탭은 전체 사용자의 절반만 확인할 수 있는 상태였기 때문에 아직 홈 탭을 만나본 적 없는 사용자분들로부터 프로토타입에 대한 신선한 관점을 수집해 볼 수 있었다.

 복잡한 과정과 치열한 논의가 계속됐지만, 덕분에 홈 탭은 지표 하락 없이 정말 안정적으로 배포될 수 있었다.


약간의 지표 하락도 용납하지 않는다

 홈 탭의 전체 사용자 대상 배포가 결정되는 순간에는 팽팽한 긴장이 여러 번 있었다. CEO・CDO・CTO・데이터 자문을 비롯한 모든 C 레벨들, 담당 테크 리드・프로덕트 디자이너・DA까지 실무자들이 한 자리에 모두 모여 여러 차례 회의를 했다. 전체 배포를 앞두고 걸림돌이 되었던 것은 ‘예상매출액’ 지표였다. 이때 대두된 내용을 요약하자면 대략 아래와 같다.


홈 탭 실험 의사결정 과정에서 치열한 토론 (요약)

 위와 같은 논의가 거의 평행선처럼 끝나지 않는 순간이 분명 있었다. 회의참여자가 한 명도 빠짐없이 각자의 의견을 내며 열정적으로 논쟁했고, 결국 완벽한 안정성을 확보한 다음 전체 사용자 대상으로 홈 탭을 배포하기로 결정했다. 매출 관련 지표가 하락하는 것을 방어하기 위해, 매우 단순하게 구성되어 있던 ‘인기 금융 상품’ 섹션의 고도화 계획을 빠르게 실행했고, 그 덕에 예상 매출액 지표가 상승하는 것까지 확인할 수 있게 됐다.


인기 금융 상품 섹션 개선 전(왼쪽)과 개선 후(오른쪽)

2023년 1월 말, 홈 탭 출시를 위한 실험을 무사히 종료했고 홈 탭을 뱅크샐러드 전체 사용자에게 출시할 수 있었다.



“뭔가 바뀐다? 그건 다 실험한다고 보면 돼요”



Q. 홈 실험 과정에서 가장 기억에 남는 점이 있다면 무엇일까요? 

팀원 소개 : 이수진 님

A. 이수진 [Data Analyst] : 

 실험했을 때 장기적인 결과까지 안 봤더라면 정말 큰 일 났겠다 싶기도 해요. 실험 중 매출 관련 지표를 보고 문제를 인지했었잖아요. 만약 실험 과정을 거치지 않았더라면 홈 탭이 출시되고 나서 중요한 지표가 계속 떨어져도 ‘뭐지?’ ‘왜 떨어진 거지?’ 하고 의문이었을 거예요. 그럼 아마 수습하기가 더 어려웠겠죠. 또, 매출 지표가 하락했던 것 관련해서, 다행히 중간에 깨닫긴 했지만 처음부터 대비하지 못했던 점이 ‘아무리 생각해도 왜 그랬지?’ 싶어요. 초기 기획 당시에는 사용성 향상이 무조건 가장 중요한 요건이었고 매출이 중요한 지표가 아니었지만, 출시 시점 즈음에는 매출이 정말 중요한 시기였잖아요. 어떻게 보면 매출이 중요한 건 당연한 건데 말이에요. 


 그리고 제가 실험 안에서 실험하는 걸 고안해서 시작을 했는데, 지금에 와서는 아쉬운 점도 있어요. ’ 홀드아웃’이란 실험 방법이 있어요. 실험을 계속하면서, 실험에 영향을 받지 않는 대조군 그룹을 따로 떼어놓는 식이에요. 마치 ‘최종 대조군’ 처럼요. 이 ‘홀드아웃 그룹’과 다른 여러 가지 실험이 모두 적용된 그룹을 최종적으로 비교해서 장기적인 실험 결과를 비교할 수 있는 거예요. 홈 화면에 이 실험 방법을 적용해 봤더라면 더 좋았을 것 같더라고요. 

 

 다만 홈 실험 때 결과를 한 번에 쭉 보고 끝낸 게 아니라, 중간중간 계속해서 새로운 실험이 추가될 때마다 지표를 확인해 개선을 했던 건 좋았어요. 워낙 큰 실험이었으니까요. 홈 프로젝트를 거치고 나서는 확실히 실험에 자신감이 붙었습니다.


홈 탭 실험 방식

5. 출시 다음에는 운영이 있다

 홈탭을 출시하는 과정에서 팀 내에 많은 변동이 있었다. 커리어 개발・창업・이민 준비 등 다양한 이유로 팀원들은 회사를 떠났다. 초기 기획을 함께 이끌어주던 디자이너 동료분도 떠나게 되었고, PM 역할까지 도맡아 했어야 됐다. 과연 홈 탭의 운명은?! … 다음 화에 계속

매거진의 이전글 뱅크샐러드의 새로운 집(Home) 짓기 - 1편
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari