일상 속에서 마주치는 사용성 문제들에 대해서 이야기해보고 싶다는 소소한 목표를 티스토리에서 실천하기로 했다.

원래 UI 예뻐서 + 뭔가 본인 프로필 관리에 더 적합할 것 같아서 브런치로 갈아타려다가 캡쳐한 이미지 쑥쑥 복붙하는 거 안되는 바람에 화가 나서 티스토리로 돌아옴. 글러들에게 최고의 플랫폼은 뭐 무슨 소리에요 제가 n개의 글쓰기 플랫폼 써봤는데 딱히 상업작가 하고 싶은 사람 아니면 매력 못 느끼겠음. (혹시 보시는 분들 중 관계자 계시면 브런치 영업 환영합니다 UI 예뻐서 쓰고 싶거든요) 그리고 브런치는 글 제목이 일정 길이 이상이 되면 볼 때 안 예뻐.. 저는 말이 많단 말이에욧

아무튼 이 카테고리 첫 글은 우리카드 홈페이지 이야기.

우리카드 홈페이지에 들어갔다가 너무나 충격적인 메인화면 디자인을 목도했다. 뭐 사실... 그렇게 충격적일 거 뭐 있나 싶다가도 소개팅에 나갔더니 상대가 한가운데에 케찹이 엄청 튄 티셔츠를 입고 나온 것 같은 정도의 충격은 받았기에 게시물씩이나 작성해 봄.

보통 메인화면 상단에 슬라이드 배너가 있으면, 지금 사용자가 몇 번째 배너를 보고 있으며 총 몇 개의 배너가 있는지를 보여주는 작은 원(그림 왼쪽)이 있게 마련이다. 지금 있는 페이지가 눈에 띄는 색으로 표시되는 게 기본. 그런데 왜... 넘어가는 화살표는 가로로 되어 있는데 원은 세로로 정렬되어 있어요... 왜...? 심지어 화살표 가시성 실화입니까

이렇게 불만 가득했던 나의 머릿속에 불현듯 이런 생각이 스친다.

'아! 요즘은 누가 PC 접속을 해~ 다들 모바일 환경으로 쓰지! PC 버전 리뉴얼이 좀 늦어진 게 아닐까?'

그래서 모바일 버전으로 접속해보았습니다.

어마어마한 갯수의 슬라이드 배너를 보고 저는 그만 기절하고 말았습니다.

PC와 모바일 환경이 너무 판이하다는 것도 문제가 있지만은 여기는 그 이야기를 하는 포스트는 아니고..

아니 23개 언제 다 넘기고 있냐고여 ㅋㅋㅋㅋㅋㅋ 저거 넘기다가 터널 증후군 말기 될 듯ㅋㅋㅋㅋㅋㅋ

뭔가 이벤트를 기획하면.. 그것을 상단 배너에 대충 구겨넣지 마십시오.. 상단 슬라이드 배너는 창고가 아닙니다. 가장 눈에 띄어야 하는 정보를 보여주는 소중한 공간입니다.

오픈마켓 중 UI가 제일 깔끔해서 내가 애용하는 11번가를 보자. 보통 진행 중인 행사가 너무 많아서 2~30개의 배너가 반드시 슬라이드되어야 하는 환경인 경우(ex 오픈마켓) 저렇게 어마어마한 갯수의 동그라미를 그려놓는 대신 깔끔하게 숫자를 쓴 다음 반드시 모아보기 기능을 만드는 것이 상식인데... 님들 상식에 어긋나셨습니다.

내가 아.. 카드사 홈페이지는 다 이런가? 하고 생각나는 카드사 홈페이지 몇 군데를 돌아봤으나..

좌/우측 화살표 가시성 ★★★★★

상단 배너 갯수 5개 (내 생각엔 많지도 적지도 않은 최적의 갯수)

색상 포인트 ★★★★★ 내가 어느 지점에 와 있는지 매우 명확하게 보여줌

화살표 가시성 ★★★★ 좋은 편이나 큼지막하질 않고 저쪽 흰색 카드형태만 움직이게 되어 있는 게 많이 익숙하진 않아서 별 하나 뺌

상단 배너 갯수 8개 (읽어보긴 좀 많은 듯함)

색상 포인트 ★★★☆ 갯수가 흰색으로 되어 있어서 잘 안 보임. 깔끔함을 위해선 좋은 선택이었을 듯.

화살표 가시성 ★★★★★ 대박 잘 보임ㅋㅋ

상난 배너 갯수 8개 (역시 좀 많지 싶음)

색상 포인트 ★★☆ 내 모니터 색상 탓인지 눈에 잘 안 띔. 차라리 채워진 색은 그대로 두고 비활성화된? 색은 더 옅은 회색으로 하거나 stroke만 주는 편이 낫지 않았을까 싶음. 그리고 삼성카드는

이렇게 엄청 느리게 움직여서 다소 정신없고 답답함 ㅋㅋㅋㅋㅋㅋ 모션 주는 건 좋은데 나는 개인적으로 저렇게 나에게 기다림을 요하는 거 싫어한다. 답답하니깐 그냥 홈페이지 들어와서 한 5초 동안 메인 배너 쭉 훑어보게 해주세요 저 시간 없그든요..

아무튼 어디도.. 세로+가로 환장 콜라보 디자인을 채택한 곳은 없었다.

우리카드 UI는 개중 국민카드와 가장 흡사한데, 국민카드 홈페이지를 벤치마킹했다고 해도 무리 없는 수준의 유사도이지만 레이아웃만 비슷하다고 디자인 수준이 비슷한 것은 네버 아님을 깨달음.

우리카드 메인 좌측에는 메인화면에서 바로 들어갈 수 있는 주요 메뉴가 자리잡고 있는데... 아니 뭔 메인화면에서 이렇게 정신없이 움직여야 씁니까 ㅋㅋㅋㅋ 회원정보변경 같은 것은 그냥.. 내 정보에서 들어가서 변경하게 해 줘요 메인에다가 욱여넣지 말구..

좀더 확실한 비교를 위해 상단 국민카드, 하단 우리카드를 두고 비교해 보기로 한다.

당장 보이는 문제점만 정리해도

(1) 메뉴 바

국민카드는 My, 카드, 금융, 서비스, 혜택 등 직관적인 메뉴명을 채택하고 있다. 그러나 우리카드의 경우 '카드라이프', '모바일라이프' 등 제목만 보면 대관절 안에 뭐가 들었을지 짐작이 안 가는 메뉴가 상단바에 떡하니 자리잡고 있음. (카드라이프 메뉴 클릭 시 항공, 웨딩, 골프, 반려동물 관련 혜택들이 노출된다.)

(2) 메인 상단 슬라이드 배너

국민카드와 동일한 디자인의 화살표와 원형 시그널을 채택하고 있지만 위치가 너무 화면 한가운데라 가시성이 떨어지며, 화살표는 가로/원은 세로로 디자인에 일관성이 떨어진다. PC에서는 그나마 화살표 클릭으로 이동하니 다행이지, 모바일에서 스와이프 형식으로 움직여야 한다면 나는 가로와 세로 중 어느 방향으로 스와이프해야 하나?

(3) 좌측 메인메뉴

국민카드는 카드이용내역, 결제예정금액, 명세서, 즉시결제, 분실신고, 사용등록으로 사람들이 카드사 홈페이지에 들어오는 이유가 되는 메뉴들을 배치해 두었지만, 우리카드는 발급상황조회, 카드사용등록, 명세서, 결제예상금액, 승인내역, 선결제, 보유카드조회, 회원정보변경, 포인트조회, 이용한도조회, 분실신고, 고객상담센터 어휴 숨차 를 메인에 넣어놓았다. 실제로 국민카드 홈페이지 메인에 위치한 6개 메뉴 중 3개(결제예정금액, 분실신고, 사용등록)는 내가 실제 홈페이지에 접속해서 제일 먼저 찾아본 적이 있는 메뉴들이었다. 메인에 shortcut 메뉴를 만든다는 것은 사용자가 이것저것 찾지 말고 바로 클릭할 수 있게 하기 위함이지, 메인화면에서도 무언가를 열심히 찾게 하기 위한 장식용 기능이 아니다.

UX Problem은 이렇게 아주 사소한 데에서 비롯되고 또 해결된다고 생각한다. 마치 삼다수 500ml 병과 1.5L 병의 뚜껑이 똑같아서 한 병의 뚜껑을 잃어버려도 다른 걸 갖다 끼울 수 있어 좋은 것처럼. (생산단가의 문제인지는 모릅니다. 방금 1.5L 삼다수 병 뚜껑 잃어버려서 빈 500ml 병 뚜껑 끼다가 생각 났음)

원래 개인적으로 리디자인 플젝까지 진행한 다음 포스팅하려고 했는데, 일단 후딱 우리카드 리뉴얼되기 전에 포스팅 하려고 먼저 올림. 리디자인 프로젝트를 해볼지는 일단 졸업논문 발표하고 나서 생각하겠습니다. 선생님 교수님 하늘님 잘못했어요 제가 게을렀어요

우리카드 홈페이지의 사용성과 심미성이 조속히 개선되기를 바라며 포스팅 마무리하겠습니다. 안뇽

P.S. 브런치에 대한 광광문

나는 브런치에 Ctrl+C Ctrl+V로 이미지 삽입이 안 된다는 사실에 너무나 충격을 받아 "나의 카카오가 그럴 리 없어!!"를 연발하며 우리의 친구 구글에 '브런치 복붙 이미지' '브런치 이미지 업로드 붙여넣기' 등의 키워드로 검색을 돌려 보았다. 그리고 아래의 게시물을 발견했다.

https://brunch.co.kr/@princox/63

이 글에는 브런치가 복붙 이미지 업로드가 불가능하다는 내용과, 그 아래에 바탕화면에서 드래그 앤 드롭으로 이미지를 업로드할 수 있다고 합니다. 라는 각주가 달려 있다. ㅋ ㅋㅋㅋㅋㅋ ㅋ ㅋ ㅋㅋㅋ ㅋ ㅋㅋㅋㅋㅋㅋㅋ

참 내 아니 됐고 바탕화면에 뭘 저장하고 싶지 않다고요 내가 브런치에 글쓰겠다고 바탕화면에다가 뭘 저장해야 되나ㅋㅋㅋ;; 그리고 이 글이 2017년에 쓰인 글인데도 불구하고 아직까지 복붙 이미지업로드 기능을 추가하지 않았다는 점에서 나는 브런치에 매우 불만이 크다. 카카오 브런치 팀 듣고 계십니까 저의 목소리를~~~! 티톨 버렸으면 브런치 잘하자 진짜

(나는 디지털 게시물에도 꼭 추신을 붙이는 버릇이 있다. 항상 그러는 것은 아니고 이 내용을 본문에 삽입할 적당한 위치를 찾지 못했는데 꼭 하고 싶은 말일 때 붙입니다.)