Swap-X 프로젝트 회고 - 병합과 리뉴얼
들어가며
최근 아이오트러스트의 D’CENT 앱에서 Swap-X라는 리뉴얼 프로젝트를 배포했습니다.
기존에는 두 개의 독립된 서비스로 제공되던 Swap과 Exchange를 하나로 통합해 사용자 경험을 개선했고,
다섯 개의 서비스 제공자를 하나로 묶어 사용자가 더 나은 교환비를 선택할 수 있도록 개선했습니다.
이번 프로젝트는 기술적 도전 과제, 요구사항, 성능 개선, 모니터링 등의 요소를 모두 포함한 큰 과정이었습니다.
프로젝트 진행 중 생긴 우려와 이를 해결한 방법도 함께 다루며, 이 회고를 통해 얻은 교훈을 공유하고자 합니다.
프로젝트 배경과 목표
프로젝트의 배경
Swap과 Exchange의 전환율 차이
블록체인 지갑인 D’CENT 앱은 다양한 서비스 제공자를 통해 자산을 교환할 수 있는 사용자에게 Swap과 Exchange라는 개별 서비스를 제공해 왔습니다.
하지만 Exchange에 비해 Swap의 전환율이 상대적으로 낮은 문제가 있었습니다.
원인을 분석하던 중, UI 흐름에서도 독특한 상황을 포착하였습니다.
- Swap 서비스는 보편적인 UI 흐름을 가지고 있었고
- Exchange 서비스는 독특한 UI 흐름을 가지고 있었습니다.
이는 예상하던 바와 다른 결과를 만들어 냈기 때문에, 아래와 같은 요구사항이 나타났습니다.
- Swap: UX를 향상 및 기능적 이슈에 대한 전환율 개선
- Exchange: 보편적인 UI 흐름을 통한 전환율 향상
해당 요구사항을 바탕으로 리뉴얼 프로젝트를 시작하게 되었습니다.
목표 설정
최초의 목표는 Swap의 전환율을 Exchange 수준으로 끌어올리는 것이었습니다.
이를 위해 두 기능의 UI 흐름을 통합해 사용자 경험을 개선하고,
추가적으로 더 많은 서비스 제공자를 도입해 최적의 교환비를 제공하는 기능을 추가했습니다.
최종적으로 본 프로젝트인 Swap-X의 전환율을 Exchange와 동일하거나 그 이상으로 끌어올리는 것이 핵심 목표였습니다.
프로젝트 진행 과정
기능 병합 및 사용자 경험 개선
개선된 UI/UX
첫 번째 과제는 Swap과 Exchange 서비스를 하나의 화면에 통합하는 것이었습니다.
기존에는 두 기능이 각각 별도의 탭으로 구분하여 제공되었기 때문에 사용자는 어느 서비스를 이용해야 할지 스스로 판단해야 했습니다.
단일화된 현재 UI에선 사용자가 원하는 자산 교환 기능을 보다 직관적으로 사용할 수 있도록 통합했습니다.
주요 개선 사항:
단일화된 UI:
두 기능이 동일한 인터페이스 내에서 작동하여 사용자는 더 이상 화면을 전환할 필요가 없어졌습니다.
거래 방식에 상관없이 From과 To 자산만 설정하면 견적을 확인하고 교환이 가능하도록 했습니다.
UX 개선:
사용자가 최소한의 동작으로 자산을 설정할 수 있도록 하여 전체 교환 프로세스를 단순화했습니다.
예를 들어, 상단 이미지처럼 4번의 액션을 2번으로 줄였습니다.
다중 서비스 제공자 도입
Swap-X의 기능: 다섯 개의 서비스 제공자를 하나로 묶은 서비스
기존 D’CENT 앱의 Swap 서비스는 하나의 서비스 제공자만을 사용했으나,
이번 리뉴얼을 통해 다섯 개의 서비스 제공자를 도입해 견적을 자동으로 비교할 수 있게 했습니다.
사용자는 이제 복잡한 절차 없이 최적의 견적을 제공받게 되었기에 더 나은 거래 조건을 선택할 수 있습니다.
주요 기능:
최적의 견적 제공:
- 별도의 설정 없이도 여러 서비스 제공자 중 가장 좋은 견적을 자동으로 선택해 제공합니다.
새로운 서비스 제공:
- Swap과 Exchange뿐만 아니라 Cross Swap 기능도 제공하게 되어 더 다양한 교환 옵션을 선택할 수 있습니다.
- 다른 EVM 체인을 교환할 때, 적은 수량의 자산도 교환할 수 있게 되었습니다.
전환율 및 오류 모니터링과 분석
이번 프로젝트에서는 기존의 GTM 데이터 분석과 더불어 실시간 오류 모니터링 시스템을 도입하여, 운영 중 발생하는 오류를 Slack으로 실시간 전송하도록 설정했습니다.
이를 통해 전환율이 저하되는 구간을 신속히 파악하고, 문제를 즉각적으로 수정할 수 있었습니다.
전환율 모니터링:
- GTM 데이터 분석을 통해 전환율이 낮아지는 구간을 빠르게 파악해 대응했습니다.
오류 모니터링:
- 실시간 Slack 알림을 통해 오류 발생 시 즉각 대응이 가능해졌습니다.
- 최초 릴리즈 이후에도 빠르게 수정하여 배포할 수 있도록 진행하였습니다.
우려 사항과 극복 과정
매출에 직접적인 영향
매출 - 이미지 출처
Swap과 Exchange는 D’CENT 앱에서 수익을 창출하는 주요 서비스이기 때문에,
두 서비스의 전환율을 극대화하면서도 성능과 안정에 대한 균형을 맞추는 것이 중요한 과제였습니다.
중요도가 높은 만큼 즉각적인 공유를 통해 이슈를 동료와 함께 검토하면서 서비스 성능을 극대화하기 위한 노력이 필요하였습니다.
기술적 도전
코드를 정리하는 과정 - 이미지 출처
개발자의 시선으로 이번 프로젝트의 가장 큰 도전 과제는 레거시 시스템 제거 및 새로운 지갑 모델 도입이었습니다.
구형 지갑 모델은 성능이 떨어지고 유지보수 비용이 높았기 때문에 이를 개선해야 했으며,
Webview 프로덕트로서 가지고 있는 다른 Webview 의존성의 기술 부채를 함께 해결해야 했습니다.
도메인 부족:
- 비즈니스 로직의 흐름 자체를 이해해야 보다 좋은 제품을 개발할 수 있기 때문에 이를 이해하기 위해 4~5개의 저장소를 따라가 메서드를 검토하고 요청과 응답을 직접 확인해야 했습니다.
새로운 지갑 모델 적용:
- 앞서 언급한 대로 구형 지갑 모델은 유지보수 비용이 높았습니다.
- 따라서 성능과 유지보수성을 개선하기 위해 구형 지갑 모델을 제거하고 신형 지갑 모델로 전환했습니다.
성과와 배운 점
성과
Exchange만큼 끌어올린 Swap의 전환율
이번 프로젝트를 통해 D’CENT 앱은 Swap과 Exchange 기능의 통합을 성공적으로 이루어냈고, 사용자 경험을 크게 개선할 수 있었습니다.
하지만 아쉽게도 Swap-X는 전환율에 대해 드라마틱한 변화를 주진 못했습니다.
서비스 차원
Swap-X의 전환율은 최초 목표한 만큼 Exchange에 근접한 전환율을 만들어냈으나 그 이상의 수치를 만들어내지 못했습니다.
원인에 대한 가설 중 하나는 사용자의 적응 시기입니다.
새로운 UI/UX 통합으로 사용자들이 낯설어하는 경향이 있었습니다.
특히, 타 서비스에선 하나의 탭에 Swap과 Exchange가 동시에 제공되는 형태가 드물기에 익숙해지는 데 시간이 필요할 것으로 예상됩니다.
따라서 모수를 조금 더 집계하여 Action Item을 설정하고 개선을 위한 꾸준한 관심이 필요합니다.
기술적 차원
최적 교환비 제공 기능과 단순화된 UX로 사용자에게 보다 발전한 서비스를 제공할 수 있게 되었습니다.
성능 최적화 및 실시간 모니터링 시스템 도입을 통해 서비스 안정성도 높아졌습니다.
성능과 구조를 개선하여 특정 문제가 발생하였을 때, 수정이 필요한 부분을 보다 빠르게 찾을 수 있게 되었고 이를 쉽게 배포할 수 있게 되었습니다.
배운 점
라이브러리 핸들링
지갑 모델 내의 라이브러리 중 WebAssembly를 사용하는 라이브러리가 존재하였습니다.
따라서 번들링 과정에서 이를 위한 wasm 플러그인을 설정하였으나 legacy 플러그인이 충돌하면서 IOS 개발 환경이 동작하지 않았습니다.
무작정 모델을 수정하여 browser 환경으로 통일하기엔 지갑 모델 자체는 nodejs 환경이었기 때문에 동작 과정의 차이로 이슈가 발생하였습니다.
이를 해결하기 위해 동료분의 도움으로 호환성 문제를 해결함으로써 종속성 이슈에 대응할 수 있었습니다.
멀티체인 경험
하나의 체인에서 Web3 서비스를 경험해 보았지만, 멀티체인 서비스인 Swap, Exchange에선 몰랐던 배경들이 나타났습니다.
예를 들어 같은 체인끼리 발생하는 거래는 모두 Swap이라 생각하였는데 Exchange를 통한 거래가 가능하였고, Cross Swap에 대해 처음 인지하게 되었습니다.
UI/UX 통합의 중요성
사용자 경험 개선을 위한 UI/UX 통합 과정에서, 사용자들이 새로운 UI에 적응하는 데 시간이 필요하다는 점을 깊이 이해하게 되었습니다.
특히, 기존에 잘 사용되던 흐름을 변경하는 것은 사용자들에게 혼란을 줄 수 있으며, 이러한 변화를 효과적으로 전달하기 위한 교육이나 가이드라인이 필요하다는 것을 깨달았습니다.
향후 프로젝트에서는 사용자 피드백을 더욱 적극적으로 반영하고, 변화에 대한 적응 과정을 도울 수 있는 방안을 모색할 것입니다.
모니터링 시스템의 필수성
실시간 오류 모니터링 시스템 도입을 통해 문제 발생 시 즉각 대응할 수 있었습니다.
이는 전환율이 저하되는 구간을 신속히 파악하고, 수정 작업을 빠르게 진행하는 데 큰 도움이 되었습니다.
앞으로도 이러한 모니터링 시스템을 지속적으로 개선하고, 자동화된 경고 시스템을 추가하여 개발 주기를 단축시키고, 서비스의 신뢰성을 높이는 데 힘쓸 것입니다.
마치며
Swap-X 프로젝트는 여러 기술적 도전과 우려 사항을 극복하며, 사용자 경험을 한 단계 향상시킬 수 있는 귀중한 경험이었습니다.
비록 기대한 만큼의 드라마틱한 변화는 이루지 못했지만, 이번 과정을 통해 많은 교훈을 얻었고, 향후 개선 방향에 대한 명확한 비전을 갖게 되었습니다.
사용자와의 소통을 강화하고, 실시간 데이터 분석을 통해 더 나은 서비스를 제공하기 위해 지속적으로 노력할 것입니다 :)