brunch

브런치북 전지적 PM 시점 11화

라이킷 115 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김긍정 Mar 09. 2021

잘 녹인 UX Writing, 열 구구절절 안 부럽다.

직접 바꿔본 뱅크샐러드 랜딩페이지 카피와 UI | 코드스테이츠 PMB4

좋은 기술만큼 쉬운 카피가 중요한 이유

프로덕트 매니저에 관심이 가는 이유 중 하나는 마이크로 카피를 기획할 수 있기 때문이다. 지금까지 내가 쓴 PM 관련 글들을 보면 약어는 풀네임과, 영어는 한글로 함께 설명해왔다. 나는 기획서든 가사든 브런치든 글을 쓸 때 '그 누구도 상처 받지 않을 것'이란 나만의 원칙을 되새긴다. 다양성을 존중함과 동시에 내 글을 읽는 모든 사람들이 그 어떤 소외감도 느끼지 않길 바라기 때문이다.

하루는 기다리던 열차 시간이 애매해 서울역 맥도날드에서 버거를 먹으려는데 키오스크 앞을 쩔쩔매며 계속 순서를 양보하시는 한 할머님을 보게 되었다. 내 차례가 되어 살펴보니, 홈 화면이 [주문하시려면 터치하세요]라 여태껏 시작을 못하신 거였다. 터치나 스크롤이 어르신들 입장에선 메뉴판이 없거나 잘린 셈이었다. 훗날 할머니가 되어 iOS 150ver.2의 아이폰 100S를 써야한다 상상해보니 숨이 턱 막혔다 ㅎㅅㅎ,,

지금도 세대차이를 느끼는데 우리가 평생 기술의 발전을 따라갈 수 있을까?

그 날 혼자 버거를 먹으며

1) 기존 화면에 [주문하시려면 여기를 눌러주세요]로 '터치'를 친절히 설명한 카피로 바꾸면 어떨까?2) 캐셔 캐릭터랑 움짤처럼 깜빡이는 버튼을 추가해 [주문하시겠어요?]로 누르도록 유도하면 어떨까?3) 아니 근데 키오스크 앞은 당연히 주문하러 온 거니까
'맛있는 버거를 먹어볼까요?'라는 메인 카피 아래 [좋아요!] 버튼은 어떨까 등 별 상상을 다해봤다.

사진 출처 : 박막례 할머니 채널

찾아보니 키오스크로 어려움을 겪는 분들을 위해 실버 크리에이터분들이나 노인복지회관 공식 유튜브 등에서 사용 방법들을 차근차근 알려주고 있다.

물론 프로덕트에 맞는 타겟 연령층과 페르소나 등을 염두해 카피를 쓰고 브랜딩을 진행하겠지만, 서비스를 기획하는 사람이라면 디지털 소외가 일어나지 않도록 신경 써야 한다고 생각한다 :')

금융이 쉬워진다. 기술과 카피의 조화

디지털 소외를 느끼기 쉬운 또 하나의 분야는 금융이다. 최근 화제가 된 토스의 다큐멘터리를 인상 깊게 보았고, 보안에 대한 걱정을 덜게 되어 나도 한번 사용해 보았다. 확실히 쉽고 빠르다는 느낌이 들었다. 지난 포스팅에서 나는 카드사와 은행사의 정보가 다를 수 있음을 몰랐던 고객의 카드 등록 플로우를 개선하는 기획을 했다. 하지만 정보를 고지한다고 해서 문제점을 해결한 건 아니었다. 그런데 토스는 문자 인증으로 앱 내에서 회원가입을 진행해 해당 문제점을 해결했다. 어렵고 복잡한 금융을 쉽고 간편하게 바꾼 것에는 절차를 줄인 기술과 더불어 쉽고 설득적인 카피도 한몫하고 있었다.

대출 카피 사진 출처 : 토스피드

앱을 다운만 하고 이탈하는 상황을 방지하기 위해 계좌 등록을 웰컴 선물로 둔갑한(?)것이다. 그래서 개인정보 노출이 우려되는 [계좌등록]이란 표현을, 마치 고객이 혜택을 받는 듯 [500원 받기]로 바꾼 것이 인상적이었다. 또 대표적인 예시로 대출을 갚았을 때 딱딱한 알림 대신 격려해주는 카피가 있다. 같은 내용이라도 사용자의 마음을 이해하는 카피에 실제로 지표가 좋아지고 민원을 넣는 창구에 힘이 된다는 응원을 받았다고 한다. 이렇듯 전략적인 텍스트는 더 높은 클릭률과 고객의 신뢰, 이미지 브랜딩 등을 한 번에 잡는 중요한 요소가 될 수 있다.

뱅크샐러드! 아니 이게 머선129

최근 공인인증서 유효기간이 만료되면서 뱅크샐러드에 연동해둔 정보들이 끊어졌다. 특히 케이뱅크는 아이디/비밀번호 연동이 안되어 공인인증서로 연동을 해야 했다. 사실 공인인증서뿐만 아니라 은행 홈페이지를 이용할 때도 수많은 보안 프로그램을 설치해야 하는 등 온라인으로 금융 서비스를 이용할 때 여전히 불편한 점이 많다. 사실 불편하다고 해서 꼭 안전한 것만은 아닌데 (...) 여전히 금융은 풀어야 할 숙제가 많다.

기존 뱅크샐러드 랜딩페이지 화면

본론으로 돌아가, 공인인증서 연동을 위해 오랜만에 뱅크샐러드 랜딩페이지를 접하게 되었다. 주관적인 견해지만, 한 화면에 텍스트가 너무 많아서 모든 문구가 눈에 들어오지 않는다는 느낌을 받았다. 특히 오른쪽 사진의 경우 4개의 정보를 한 화면에 담고 있어 아쉬웠다. 요즘 프로덕트 디자인과 UX Writer 직무에 관심이 많아 랜딩페이지를 분석하며 개선되었으면 하는 부분은 리디자인 해보았다 :')

뱅크샐러드 랜딩페이지 분석 (9단계)

: CTA - CTA2 - 설명 - CTA3 - 기능 설명 - 보도자료 - CTA4 - 도움말 - CTA5 / 설명, 정보 고지

1단계 (CTA : 앱 다운로드)

기존 메인 카피 : 데이터를 맛보다, 뱅크샐러드 / 서브 카피 : 지금 시작하세요 / CTA 카피 : 앱 다운로드

좌 : 뱅크샐러드 / 우 : 리디자인

최근 뱅크샐러드는 로고와 메인 카피가 바뀌었다. (신경꺼도 내 돈 관리 -> 데이터를 맛보다) 개인적으로 데이터를 맛본다는 표현이 한 번에 와 닿지 않았으나, 전체 카피를 보고 나니 지향하는 방향을 알 수 있었다.

모을 맛 나게, 불릴 맛 나게, 내 입맛에 딱 맞게!
이게 바로 데이터의 맛
나만을 위한 데이터 레시피로 살맛 나는 생활, 뱅크샐러드.

내 맘대로 바꿔본 뱅크샐러드 마이크로카피

메인 카피 : 담백한 자산관리, 뱅크샐러드 / 서브 카피 : 나만을 위한 데이터 레시피

CTA 카피 : iOS로 맛보기, Android로 맛보기 (= 앱 스토어 추가)

카피에 직접적인 맛을 표현하면 좋을 것 같아, 샐러드와 어울리면서도 건강한 느낌의 '담백한'을 골랐다. 기존 카피인 '내 돈 관리'는 가계부의 느낌이라, 지향하는 방향인 다양한 카테고리를 '자산관리'로 바꿔 보았다. (몸도 시간도 자산이니까!) '지금 시작하세요'와 '앱 다운로드'도 샐러드 브랜딩에 맞는 신규 카피들을 살려 표현해 보았다. CTA의 경우 구글 플레이스토어로만 연동이 되어있어, 앱스토어 버튼도 추가했다. Adobe XD로는 세 번째 작업인데 웹 사이즈는 처음이라 어려웠다. 특히 간격이 너무 어렵다!!!

2단계 (CTA : 공동인증서 복사하기)

기존 메인 카피 : PC -> 앱으로 인증서 복사하기 / 서브 카피 : step 1, 2, 3 / CTA카피 : 복사하기

좌 : 뱅크샐러드 / 우 : 리디자인

2단계의 경우 설명 영상을 첨부하고, 기존 사진 설명은 [설명 더보기] 탭으로 바꿔보았다. 휴대폰과 PC 기종에 따라 화면이 조금씩 다르기 때문에, 여기서 해결되지 못하면 네이버 블로그나 유튜브 검색을 오가는 과정이 반복된다. 본인에게 해당하는 경우에 따라 똑같이 보고 따라 할 수 있도록 영상을 첨부했고, 두 버튼의 경우 컬러의 차이를 주어 [복사하기]에 클릭을 유도했다.

3단계 (설명)

메인 카피 : 누적 다운로드, 연동 관리 금액, 보안사고 / 서브 카피 : 500만, 150조 원, 0건

4단계 (CTA : 보안정책 알아보기)

메인 카피 : 가장 혁신적인 금융 앱

서브 카피 : 앱스토어 무료 앱 전체 1위, 금융부문 1위 / 구글 플레이 선정 '올해의 가장 혁신적인 앱' 수상 / 실제 사용자들이 극찬하는 앱 서비스! / 미국 은행들도 사용하는 암호화 기술로 보안 걱정 NO!

CTA카피 : 보안정책 알아보기

좌 : 뱅크샐러드 / 우 : 리디자인 (3단계 + 4단계)

내 맘대로 바꿔본 뱅크샐러드 마이크로카피

메인 카피 : 금융에 혁신을 담다. / 서브 카피 : 미국 은행, 국방부가 사용하는 암호화 기술

CTA 카피 : 보안정책 알아보기

우선 메인 카피와 디자인은 뱅크샐러드에서 강조하는 '혁신'을 샐러드 브랜딩에 맞춰 '담다'로 표현했다.

혁신을 담았다는 느낌 표현을 위해, 보안카피를 굵은 검정테의 휴대폰 시안으로 골라 그대로 담았다. '미국 은행, 국방부가 사용하는 암호화 기술'로 텍스트 수를 줄이고, 비밀번호 화면과 패치를 더해 기존 4단계의 [보안정책 알아보기] CTA 목적에 맞춰 보안을 강조하는 방향으로 리디자인 했다.

개인적으로 기존 3번째 서브 카피 '실제 사용자들이 극찬하는 앱 서비스'는 다른 카피에 비해 설득적이지 못하다 생각했고, 별점 후기 사진도 텍스트가 너무 많아 시선을 분산시킨다고 생각해 과감히 없앴다. 또 '보안 걱정 NO!'라는 문구가 되려 신뢰도를 떨어트리는 말투라고 생각해 이를 없앴다. (토스에서는 카피를 쓸 때 잔가지를 없애는 것을 Weed cutting, 잡초제거라고 표현한다.)

5단계 (기능설명)

메인 카피 : 통합 자산조회, 자동 가계부, 금융비서, 맞춤상품 추천

주관적인 의견이지만 한 화면에 텍스트도 사진도 너무 많다. 가장 중요한 건 메인 카피로 시선이 안 간다. 뱅크샐러드가 왜 이렇게 디자인을 했을까 고민해 보았는데, 그들의 우선순위는 '한눈에 보여주기'였던 것 같다. (아님 말고,, 머쓱타드) 그래서 토스나 카카오뱅크처럼 한 페이지에 기능을 하나씩 디자인 하기보다, 한 화면에 네 가지 메인 카피를 담고 그걸 클릭하면 소개 문구를 볼 수 있도록 리디자인했다.

리디자인 한 5단계 화면

리디자인 한 5단계 버튼 클릭시 나오는 기능 화면 (5.5단계랄까,,)

내 맘대로 바꿔본 뱅크샐러드 마이크로카피

메인 카피 : 내 돈을 한눈에 [통합 자산 조회] / 언제 어디서나 [자동 연동 가계부] /

똑똑한 [나만의 금융비서] / 데이터로 분석한 [맞춤상품 추천]

6단계 (보도자료)

메인 카피 : 정부의 마이데이터 사업, 핵심 시범 기업 선정

좌 : 뱅크샐러드 / 우 : 리디자인

로고는 리뉴얼된 버전으로 바뀌어 있는데 왜 정보는 업데이트하지 않았을까? 랜딩페이지다 보니 큰 신경을 안 쓰는 듯했지만, 4단계 금융부문 무료 앱 전체 1위도 현재 76위라 해당 연도를 기재할 필요성이 보였다. 6단계 역시 2018년도 자료에 머물러 있어 아쉬움이 남았고, 사실 이 단계가 필요한지도 의문이 들었다. 메인 카피를 4단계 서브 카피로 쓰면 불필요한 단계를 줄일 수 있다. 하지만 정부 사업에 핵심 기업으로 선정된 보도자료의 구성이 필요하고 중요하다는 가정하에, 기사 사진과 하단 바를 추가해 리 디자인했다.

7단계 (CTA : 웹서비스)

메인 카피 : 뱅크샐러드 웹 서비스 / 서브 카피 : 맞춤 금융상품 추천부터 가계부 PC버전까지!

CTA 카피 : 이용해보기

좌 : 뱅크샐러드 / 우 : 리디자인

내 맘대로 바꿔본 뱅크샐러드 마이크로카피

메인 카피 : 뱅크샐러드 가계부를 pc로 즐기는 법 / 서브 카피 : 담백한 자산관리, 철저한 데이터 식단

CTA 카피 : 홈페이지로 맛보기

우선 원 시안은 배너 형태로, 뱅크샐러드의 기존 일러스트 배경의 디자인이었다. 웹 서비스를 소개하고 홈페이지로 유도하는 구간이라, 그래프가 담긴 노트북 사진으로 pc버전의 장점과 특징을 직관적으로 표현해 보았다.

개인적으로 나는 메인 카피를 가운데 위치시켜야 눈에 더 잘 들어온다고 생각해, 메인카피와 서브카피의 위치를 바꾸었다. 메인카피 역시 pc버전의 장점을 극대화하는 게 좋을 것 같아 기존 서브 카피인 '가계부 pc버전'을 메인 카피로 바꾸었다. CTA카피는 맨 첫 화면, [iOS로 맛보기]와 [Android로 맛보기]와 같은 역할이라 생각해 [홈페이지로 맛보기]의 노란색 버튼으로 브랜딩을 통일했다.

8단계 (도움말)

메인 카피 : 도움말

기존 뱅크샐러드 화면

도움말의 경우 6개의 질문이 가운데 정렬로 나열되어 있고, 이를 클릭하면 해당 설명이 왼쪽 정렬로 나열된다. 개인적으로 왜 이렇게 디자인했을까 고민해 봤는데 디자인을 한 게 아닌 것 같다. ㅎㅅㅎ. 개발팀에서 필요하니 텍스트로 넣은 느낌이랄까,, 저 구성이 필요하다면 제목만이라도 볼드 처리와 함께 폰트 사이즈를 키우고, 구성이 필요치 않다면 하단과 같이 메인 홈페이지 도움말 탭으로 이동할 수 있도록 바꿔보았다.

도움말 리디자인 (입력 시 홈페이지 도움말 탭으로 이동)

8단계 (CTA : 앱 다운로드 / 정보 고지)

CTA 카피 : GET IT ON Google Play, Download on the App Store

+ 오늘의 TMI

사실 이 포스팅은 코드스테이츠의 PM 부트캠프 과제로, 하나의 앱 서비스를 정해 랜딩페이지를 분석하고 가설을 세워 A/B 테스트로 설계해 보는 미션이다. 그런데 내가 UX Writing과 UI를 새로 디자인 해버려 분량 조절에 실패했다,, (욕심이 많아 과제를 시킨대로 잘 안하는 편,,ㅎ) 고로 다음 포스팅에서는 제가 개선한 디자인으로 바꿨을 때, 어떤 지표들을 움직일 수 있을지 [PM의 숨은 고객마음 찾기]가 연재됩니다 :')