||
당근에서 중고거래를 하며 당근페이를 사용해보셨나요? 누구에게 무엇을 얼마에 팔았는지, 또는 누구로부터 무엇을 얼마에 샀는지 확인하려면 어디를 봐야 할까요?
당근페이는 당근 서비스 곳곳에서 쓰여요. 중고거래 채팅방에서 송금할 때, 당근 픽업으로 음식을 주문할 때, 동네걷기 이벤트로 당근머니를 받을 때 모두 당근페이가 사용되죠.
이런 다양한 거래내역은 ‘당근페이 이용내역’ 화면에서 상세하게 확인할 수 있는데요. 사용자는 이 화면에서 송금과 결제, 충전과 출금 등 모든 금융 활동의 맥락을 상세히 파악할 수 있죠.
당근페이의 모든 거래를 담아내는 화면인 만큼, 이용내역 화면은 당근페이 서비스의 성장과 함께 끊임없이 발전해왔어요.
안녕하세요. 저는 당근페이팀에서 프론트엔드 엔지니어로 일하고 있는 예나(Yena)에요. 오늘은 저희 팀에서 안정성을 최우선으로 지키면서도 빠르게 변화하는 요구사항에 유연하게 대응하기 위해 GraphQL을 도입한 경험을 공유하려고 해요.
1. 이용 내역의 역사① 단순했던 원시 이용내역
당근페이 서비스 초기, 이용내역 화면은 매우 단순한 구조였어요. 거래 날짜, 거래 상대방, 금액 등 기본 정보를 행과 열로 정리한 테이블 형태였죠. REST API 응답도 이런 필수 필드 몇 가지로만 구성되어 있었어요.
프론트엔드의 역할도 명확했어요. 서버에서 전달받은 title, content와 같은 값을 테이블 형태로 화면에 그려내기만 하면 됐죠. 어떤 거래인지, 금액이 어떻게 계산되는지는 프론트엔드가 알 필요 없었어요. 서버가 화면에 표시될 텍스트부터 노출 순서까지 결정해서 내려주는 전형적인 서버 드리븐 UI(Server-Driven UI) 구조였죠.
이런 접근 방식은 초기 단계에서 빠른 개발과 여러 이용내역 사이 일관된 UI를 보장하는 데 효과적이었어요. 하지만 서비스가 성장하면서 새로운 도전 과제들이 나타나기 시작했죠.
② 더 설명이 필요한데? — 1차 진화
서비스가 성장하면서 새로운 기능들이 추가되기 시작했어요. 돈을 보내는 사람과 받는 사람 사이에서 당근페이가 안전하게 돈을 보관해주는 ‘안심결제’ 서비스가 대표적이죠. ‘결제 진행 중’, ‘결제 완료’, ‘결제 취소’ 같은 다양한 거래 상태를 사용자에게 명확하게 안내해야 했어요. 요구사항은 계속 늘어났어요. 특정 거래에는 영수증을 제공해야 했고, 거래 내역과 실제 대화를 연결하기 위해 채팅방으로 이동하는 기능도 필요했죠.
UI도 점점 복잡해졌어요. 중요한 안내사항은 따로 강조하고, 테이블 사이 구분선을 추가했으며, 최종 금액은 볼드 처리로 눈에 띄게 표시했어요. 각 거래별로 필요한 추가 액션 버튼까지도 서버에서 정의를 내려줘야 했죠.
초기의 단순한 테이블 구조는 어느새 복잡한 서버 드리븐 UI로 변했어요. 새로운 디자인 요소가 추가될 때마다 서버 엔지니어와 인터페이스 설계 논의가 필요했고, 때로는 인터페이스를 변경하고 논의하기보단, 않고 기존 디자인에서 표현할 수 있는 대안을 찾기도 했어요.
③ 더이상은 못 참아! — 2차 진화
당근 카드와 당근 통장이 출시되면서 이용내역은 완전히 새로운 차원의 복잡도를 갖게 됐어요. 카드 결제 내역, 통장 입출금 내역, 적립에 영향을 주는 가맹점 위치정보, 전월 실적 안내까지 — 표시해야 할 정보가 방대해졌죠.
동시에 당근알바, 당근모임 등 당근페이를 사용하는 서비스도 계속 늘어났어요. 기존의 단순한 테이블 형태로는 이 모든 정보를 효과적으로 전달할 수 없었고, 복잡한 내역을 이해하지 못한 사용자들의 문의도 증가했어요.
이제는 사용자에게 거래 맥락을 더 친절하고 직관적으로 안내해야 한다는 팀 내 공감대가 형성됐어요. 더 이상 기술적 한계를 이유로 디자이너의 제안을 거절할 수만은 없는 상황이 됐죠. 근본적인 변화가 필요한 시점이었어요.
그렇게 이용내역 개편 프로젝트가 시작됐어요. 사용자에게 복잡한 거래 맥락을 더 친절하게 안내하고, 향후 디자인 변경에도 유연하게 대응할 수 있는 구조를 만드는 것이 목표였죠.
2. 새로운 해결책을 찾다① 새로운 접근의 필요성
그동안 서버 드리븐 UI는 우리에게 많은
🦼
오늘도 엔지니어가 된다고 말했다 - 당근페이 이용 내역 개편기
생성 일시
2025/10/16 04:00
최종 편집 일시
2025/10/16 04:11
태그
당근
파일과 미디어