UI 커스터마이징이 가능한 PG사, 토스페이먼츠
안녕하세요. 유아이볼팀입니다. 그동안 모바일 위주로만 아티클을 발행했는데 이제부터는 UI/UX가 잘 되어 있는 웹사이트도 구독자분들에게 소개하려고 해요. 그 중에서 구독자 분들이 자주 보지 못했던 웹사이트, PG사인 토스페이먼츠를 콘텐츠를 준비했어요.
토스페이먼츠를 처음 알게 된 계기는 토스의 웨비나였어요. '귤메달'이라는 브랜드가 토스의 PG사를 사용하며 좋은 경험을 공유한 웨비나였는데요. 그때 저도 나중에 결제 페이지를 만들게 된다면 꼭 토스를 사용해야겠다고 결심했어요. 요즘 신입 디자이너들이 가고 싶어하는 회사 중 하나로 토스가 꼽히는 이유는, 아무래도 사용성과 UI/UX의 중요성을 잘 알고 이를 실제 업무 프로세스에 적용하기 때문인 것 같아요. 토스페이먼츠는 B2B 서비스임에도 불구하고 UI/UX를 소홀히 하지 않고, 사용하면서 큰 불편함 없이 자연스럽게 이용할 수 있어 정말 인상 깊었어요.
그럼, 조금 더 자세히 ‘토스페이먼츠’에 대해 알아볼까요?
이런 부분이 좋았어요.
✅ UI 커스터마이징이 가능한 PG 서비스
유아이볼은 이제 막 시작한 스타트업이에요. 소규모 팀이라 개발 인력이 한정되어 있어 별도로 UI를 개발하지 않고, 토스에서 제공하는 UI를 API로 가져와 저희 플랫폼에서 바로 사용할 수 있다는 점이 매력적이었어요. 레이아웃부터 버튼 스타일, 색상까지 원하는 대로 변경할 수 있어서 비개발자 입장에서도 정말 편리했죠. 특히, 이미지에서 보시는 것처럼 radius 값, 테두리 두께와 색상, 배경색, 버튼 텍스트 크기 등 세부적인 부분까지 수정이 가능해 디자이너로서 굉장히 만족스러웠어요.
✅ 한눈에 확인할 수 있는 현 매출액과 메뉴 구조
또한 회사의 입장에서 메인 페이지에서 가장 중요한 것은 1) 이번 달 매출을 한눈에 확인할 수 있는지, 2) 그 외 중요한 정보에 빠르게 접근할 수 있는지라고 생각해요. 토스는 이러한 사용자 니즈를 명확하게 파악하고 UI/UX를 설계한 점이 정말 좋았어요. 메인 페이지에 들어가면 중앙에서 매출액을 바로 확인할 수 있고, 이후 중요한 서비스로 이동하거나 공지사항을 쉽게 확인할 수 있어 각 회사의 비즈니스 여정에서 큰 불편함이 없다는 점이 인상적이었어요.
출처: pinterest이 화면은 핀터레스트에서 'PG 메인 UI'로 검색했을 때 나온 결과입에요. 핀터레스트에 있는 UI들도 디자인이 잘 되어 있지만, 토스의 메인 페이지는 그보다도 더 뛰어난 디자인과 설계, 기능적인 면에서 탁월하다는 생각이 들었어요. 역시 토스 설계팀이 정말 열일하고 있다는 느낌을 받았아요.
✅ 내가 원하는 방식으로 볼 수 있는 정산내역
토스페이먼츠가 사용성이 뛰어난 PG 서비스라고 강조하지만, 실제로 사용하기 전까지는 그 '사용성'이 구체적으로 어떤 부분인지 다소 모호하게 느껴질 수 있다고 생각해요. 하지만 정산 내역에서 다양한 필터링 옵션을 통해 사용자가 원하는 정보를 정확하게 찾아볼 수 있도록 필터 정렬을 잘 설계한 점이 인상적이었어요.
또한 다양한 필터를 사용해 원하는 테이블만 따로 볼 수 있고, 기간이나 정산 계좌 같은 항목도 개별적으로 설정할 수 있어요. 게다가 정산 내역을 요약, 건별, 일자별, 결제수단별로 확인할 수 있어서 매우 편리했어요.
✅ 토스페이먼츠 하나로 상품을 등록하고 복제, 수정, 삭제, 노출까지
토스페이먼츠를 통해 상품 등록, 복제, 수정, 삭제, 노출까지 모두 가능한 기능이 제공되는데요. 이런 기능을 시스템에서 직접 개발하려면 많은 비용과 시간이 소요되는데, 이를 PG사에서 자체적으로 제공하는 점이 신선했고, 운영 효율성 면에서도 정말 유용하다고 느꼈어요.
그러나 아쉬운 부분도 있었어요.
다크모드 대응이 되지 않음
유아이볼은 콘텐츠를 더 돋보이게 하기 위해 다크 모드를 사용하고 있어요. 하지만 토스페이먼츠에서 다크 모드를 지원하지 않아 약간 어색한 구조를 사용하고 있습니다. 레디우스 적용 방법이나 다크 모드가 지원된다면, 저희 웹사이트의 톤앤매너와 더 잘 맞았을 것 같아요.
현재 토스페이먼츠에서는 배경색을 변경할 수 있지만, 배경색을 어둡게 설정하면 '결제 방법'이라는 타이틀의 텍스트 색상을 흰색으로 바꿔야 하는데, 그 부분을 변경할 수 없는 것이 아쉬워요. 또한 '신용/체크카드'와 '카드사 선택' 같은 버튼 색상도 변경하고 싶지만, 그 역시 불가능해 디자인의 완성도가 다소 떨어졌어요. 결국 저희 유아이볼에서는 아쉽게도 흰색 배경의 기본 UI를 사용하게 되었어요.
테이블에 있는 정보가 더 있다는 인지가 덜 함
이번에 토스페이먼츠를 분석하면서 테이블 영역이 더 있다는 것을 알게 되었어요. 이런 경우, 토스에서 자주 사용하는 그라데이션 컴포넌트를 활용하면 사용자들에게 스크롤을 통해 다음 테이블 정보를 인식시킬 수 있고, 토스의 디자인 컴포넌트가 더욱 통일감 있게 보일 것 같아요.
아이콘에 대한 오인지 요인이 높음
여러분은 이 두 이미지의 차이를 느끼실 수 있을까요? 저는 햄버거 메뉴를 클릭하면 메뉴가 열릴 줄 알았는데, 실제로는 그냥 메뉴가 닫히더라고요. 이런 경우에는 다른 아이콘을 사용하는 게 더 좋았을 것 같아요.
예시예를 들어 '<<' 버튼을 누르면 메뉴가 사라지고, 화면을 좀 더 넓게 보고 싶으면 '>>' 버튼을 눌러 메뉴를 다시 표시하는 흐름을 적용하면 사용자들이 더 명확하게 이해할 수 있을 것 같아요.
몇 가지 아쉬운 점이 있었지만, 전반적으로 토스페이먼츠에 큰 만족을 느꼈습니다. UI/UX 설계 외에도 고객 경험이 중요한데, 다른 PG사들은 이메일을 보내면 3일 후에 답장이 오곤 했지만, 토스페이먼츠는 직원들이 당일에 바로 답장을 주어 관련 업무를 신속하게 처리할 수 있었어요. 이번 아티클 발행에 동의해주신 토스페이먼츠 담당자분들에게도 감사드립니다.
