복잡한 필터가 적용되는 상품 리스트 개편하기
(feat. 기존에 없던 새로운 컴포넌트까지 도입한 좌충우돌 후기)
(아주 아주 처음은 아니지만) 팀 배정 받고 거의 얼마되지 않은 상황에서 기획을 했던 화면을 소개할까 한다.
증권회사가 취급하는 것들은 주식 외로도 더 다양한 것들이 있다.
대표적으로 '금융상품'으로 분류되는 것들인데, 이를테면 ELS/ELB, 채권, 펀드, RP와 같은 것들이다.
그중에서 ELS, ELB 상품은 기초자산과 연계되어서 수익률이 결정되는 상품인데,
ELS는 Securities 즉 증권형이라 원금이 비보장되는 위험도가 높은 상품이고,
ELB는 Bond 즉 채권형이라 원금이 보장되는 상대적으로 안전한 상품이다.
(개념이 중요한 것은 아니니 여기서 이만 생략 ;;)
금융상품들은 대부분 판매 대상이나 기간이 한정적인 편이라, 주식처럼 매일매일 사고팔 수 있지가 않다.
그래서 살 수 있는 (대게 청약 가능한이라고 칭한다) 상품 리스트를 보여주는 화면이 있다.
지금은 상품 리스트 화면 UIUX 자체를 바꾸는 기획을 하고 있는데, 아직 디자인도 시작 못한 단계라서
1차적으로 진행했던 필터 변경 건에 대해서만 기록을 한다! (2차 개선은 완료되면 또 글을 올리는걸로..ㅎ)
AS-IS 화면
중간 쯤 보면 종목명, 수익률(세전), 지금 청약가능상품만, 적합상품만 버튼이 보인다.
리스트 화면에서 보통 '정렬 기준'과 '필터'가 존재하는데, 그 두가지 성격을 띈 버튼이 혼재되어 있는 것을 알 수 있다.
1. 종목명, 수익률: 정렬기준
- 의미: 오름차순/내림차순
- UI: 별도의 UI나 추가적인 액션 없이 단순히 버튼 클릭 시, 정렬기준이 전환된다.
2. 지금 청약가능상품만: 필터
- 의미: 말그대로 청약 신청 가능한 상품이라는 뜻이다. 다만, 청약은 마감되었지만, 투자자들이 숙려할 수 있는 기간을 제공하는 케이스도 있기 때문에 청약중 리스트에 함께 노출된다. 그래서 지금 청약이 가능한지, 숙려기간인지에 따라 구분이 될 필요가 있다.
- UI: 체크박스 비스무리한.. 알 수 없는 버튼
3. 적합상품만은: 필터
- 의미: 금융상품에 투자하는 투자자들은 투자 성향 검사를 하게 되고, 본인의 투자 성향보다 투자 상품의 위험 등급이 더 높은 상품에 투자하는 경우에 증권회사는 해당 내용을 고지해야 한다. 투자자가 자신의 성향에 어떤 상품이 적합한지를 알 수 있게 하기 위한 요소이다.
- UI: 뜬금없는 토글
보면 알겠지만.. 정렬과 필터는 엄연히 다른 기능이라 명확하게 분리되어 있어야 하고, 고객이 어떤 액션을 하면 어떤 변화가 있을 것이다 라는 기대를 할텐데, 그런 예측이 전혀 되지 않는 구성이었다.
다행스럽게도 ELS, ELB를 담당하는 팀에서 기존 화면보다 좀 더 구체적으로 필터 값을 고객에게 제공하고 싶어했고, 그렇다면!!! 기존 화면에 단순히 버튼을 추가하는 게 아닌, 아예 새롭게 개편해보자~고 설득할 수 있었다.
기획 요건
1. 청약 가능 상품 분리 필요
2. 적합상품 고지 필요
3. 통화: 전체, 원화, 달러 구분
4. 상품유형: 전체, 지수/국내종목형, 해외종목형, 원금지급형, 원금부분지급형 구분
5. 정렬 기준: 수익률순(세전), 종목명순
상품 정보 자체가 워낙 복잡하다 보니 어떻게 하면 지저분하지 않게, 또 정보를 너무 생략하지 않게 보여줄 수 있을지 고민이 많았다. 타 증권사를 찾아봐도 그렇다할 화면이 눈에 띄지 않았고 여러 앱들을 둘러보다가 왠지 이 무드가 딱 적합할 것 같은데? 싶은 도메인을 찾았다.
내가 찾던 정답은 패션 플랫폼에 있었다.
더 나은 방안도 물론 있을 수 있지만, 내 판단으로는 패션 플랫폼들이 배송, 사이즈, 가격, 정렬 기준 등 아주 복잡한 구분값을 필요로 하는 것 같아서 벤치마킹 하기에 적합해보였다.
무신사
무신사는 봄시즌오프, PLUS 배송은 단순히 Y/N로 분리하는 필터 겸 버튼이었고,
성별, 스타일, 컬러, 가격, 사이즈, 브랜드 등은 바텀시트로 올라오는 필터를 제공했다.
정렬 기준은 우측 하단에 따로 추천순/인기순 등을 배치했다.
W컨셉
W컨셉은 Y, N로 구분되는 필터 버튼은 없었지만,
컬러, 가격, 할인/혜택, 브랜드를 바텀시트 필터로 제공했다.
조금 특이하게~ 품절 제외는 체크박스로, 정렬 기준은 무신사와 마찬가지로 우측 하단에 배치했다.
에이블리
에이블리는 무신사와 마찬가지로 오늘출발, 브랜드는 Y/N로 구분하는 필터 버튼을,
정렬 기준과 가격, 색상 등은 풀창 필터를 적용했다.
정렬 기준도 필터에 같이 넣어버린게 조금 특이하다고 할 수 있겠다.
지그재그
개인적으로 가장 괜찮다고 생각했던 지그재그는
직진배송, 빠른출발은 Y/N로 구분되기에 버튼으로,
색상, 상세옵션 등 구체적인 구분값은 풀창 필터로 구성했다.
정렬 기준은 우측 하단에 배치했다.
레퍼런스들을 찾아본게 아마 작년 11-12월 정도였던 것 같은데, 지그재그를 제외한 다른 플랫폼은 조금 더 지그재그스럽게 필터가 고도화 된 것 같다. 아무튼! 지그재그 필터를 벤치마킹 해야겠다고 생각을 했고, 조금씩 우리 플랫폼에 맞게 변형을 했다.
TO-BE 화면
1. 청약가능: Y/N로 구분 가능. 단순 버튼
2. 적합상품: Y/N로 구분 가능. 단순 버튼
- 이 두개 버튼은 다른 것보다 중요도가 높기에 앞쪽에 배치하고, 메인에서 바로 액션 가능하도록 했다. 선택 유무에 따라 UI가 구분되도록 했고.
3. 통화: 전체, 원화, 달러 > 선택 값이 많으니 필터 안으로 배치
4. 상품유형: 전체, 지수/국내종목형, 해외종목형, 원금지급형, 원금부분지급형 > 선택 값이 많으니 필터 안으로 배치
- 이 두개 요소는 좌우로 스와이프 하면 각각 항목들에 대한 선택지가 바텀시트로 올라오게 했다. 레퍼런스를 볼 때 필터가 무조건 풀창팝업으로 연결되는게 좀 귀찮다고 생각했다. 어차피 선택지도 많지 않으니 메인에서 바텀시트 불러오고 바로 원하는 조건을 선택하는 식으로 변경했다.
- 다만, 필터가 ON 된 경우 고객들이 인지하도록 필터 버튼 자체의 UI에도 구분을 주었다.
- 그리고 한 번에 필터값을 주고 싶은 고객들을 위해 모든 조건을 컨트롤 가능한 바텀시트도 추가했다.
5. 정렬 기준: 수익률순, 종목명순 > 우측 하단에 배치, 바텀시트로 선택
요건이 조금 빡빡해서 고민되는 지점이 많았고, 현재 자사 플랫폼에 있는 필터와 다른 새로운 컴포넌트라서 디자인이나 개발에도 기간이 좀 소요됐었다.
그래도 결과적으로 무조건 개선이 필요했던 통일성 없고, 뭘 의도하는지 알기 어려웠던 화면을 내가 원하는 방향으로 진행할 수 있어서 다행,,, 그리고 이렇게 아예 새로운 걸 도입하기 위해서는 상당히 많은 반대와 우려가 있었는데 그런 것들을 다 무릅쓰고 도와주신 나의 든든한 사수에게도 감사하다는 말씀...
위에서 언급한 것처럼, 상품 리스트도 개선하려고 기획 진행 중이니 반영되고 나면 ELS/ELB 청약중 상품 개선 2편을 들고 오겠다 ~ !!
