NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

디자인

고객을 위한 마이크로카피: ②플레이스홀더·에러&성공메시지

 

마이크로카피는 화면 구성에 포함된 모든 텍스트를 말한다. 즉, 고객 행동을 유도하며 고객 경험에 영향을 미치는 문구와 단어들로 고객이 문제를 겪지 않도록 방지하고, 어려움을 해결할 수 있게 도와주는 중요한 역할을 한다.

 

이전 글에서 버튼과 대기화면을 통한 마이크로카피의 중요성에 관해 설명한 데 이어 이번 글에서는 플레이스홀더, 그리고 에러와 성공 메시지에서 보이는 마이크로카피에 대해 설명해 보겠다.

 
마이크로카피 플레이스홀더

 

 

플레이스홀더

플레이스홀더는 텍스트 입력 필드 또는 선택이 필요한 폼 요소에 새겨진 짧은 문장이나 단어를 말한다. 잘 설계된 플레이스홀더는 고객의 입력이 필요한 상황에서 참여를 유도하는 좋은 트리거가 될 수 있으므로 작성에 신경을 써야 한다.

 

① 타당한 이유가 없다면 쓰지 않는다.

빈 곳을 채워야 하는 강박으로 아무 이유 없이 레이블에 있는 내용을 플레이스홀더에 그대로 쓰는 경우가 있다. 하지만 그저 공간을 채우기 위해 플레이스홀더를 사용해서는 안 된다.

 

플레이스홀더를 사용하면 레이블, 플레이스홀더에 모두 텍스트가 작성돼 화면에서 제공되는 텍스트의 양이 많아진다. 그래서 화면이 비좁고 복잡하다고 느껴지며 고객의 할 일이 많은 것처럼 보인다.

 

플레이스홀더를 사용하지 않으면 입력 필드가 빈 곳으로 남게 돼 고객의 시선을 더욱 사로잡을 수 있다. 아이트래킹 연구에 따르면 고객의 시선은 비어있는 필드에 끌린다고 한다. 따라서 레이블만으로 입력해야 하는 내용이 충분히 이해되고 입력에 어려움이 없으면 플레이스홀더를 쓰지 않는 것이 좋다.

 

스카이스캐너

스카이스캐너 플레이스홀더

 

여행객 정보를 입력하는 화면이며, 5개의 입력 필드가 존재한다. 인풋 필드와 드롭다운 박스에 플레이스홀더가 사용되지 않았다. 고객은 레이블만으로도 입력 필드에 무엇을 작성해야 하는지 충분히 이해할 수 있으며, 별다른 힌트가 필요 없기 때문이다. 플레이스홀더를 사용하지 않아 화면에서 쓰인 텍스트의 양이 적어졌고, 덕분에 화면의 복잡성이 내려갔다.

 

② 가이드나 사례를 제시한다.

어떤 식으로 작성하면 되는지 방향성을 제시하거나 예시를 들어준다. 가이드나 사례를 제시한다면 고객이 작업자의 의도대로 내용을 입력하게 유도할 수 있다. 또 입력에 관한 단서를 줘 고객의 어려움을 해소하며 참여를 이끌 수 있다.

 

가이드나 사례를 제시하지 않으면 고객은 답변을 작성하는데 많은 고민이 들어 끝내 작성하지 않을 수 있다. 그래서 고객을 생각하게 만들거나 작성하기 어려운 곳, 그리고 고객마다 중구난방으로 작성될 수 있는 곳에 플레이스홀더로 가이드나 사례를 제시하면 좋다.

 

화해

화해 플레이스홀더

 

화해 앱에서 상품의 좋은 점, 나쁜 점 그리고 꿀팁을 작성하는 리뷰 작성 화면이다. 플레이스홀더에 어떤 내용을 작성하면 되는지 자세하게 가이드를 제시했다. 유의미한 내용들이 리뷰에 작성되도록 유도하기 위함이다.

 

다만 플레이스홀더가 길면 고객이 읽는 데 시간이 소요되기 때문에 '사용하신 제품의 자세한 리뷰를 남겨주세요’나 ‘사용하시면서 아쉬웠던 사용감을 작성해주세요'처럼 이미 메뉴명이나 레이블을 통해 인지하고 있는 내용을 삭제했으면 더 좋았을 것이다.

 

핀터레스트

핀터레스트 플레이스홀더

 

자기소개를 적는 화면에 ‘브랜드 스토리와 판매상품에 관해 작성하면 된다’라는 가이드를 제시해주고 있다.

 

가이드 외 ‘커뮤니티에 회원님에 대해 알릴 좋은 기회입니다.’ 문구로 입력을 유도하는 장치도 있다. 문장이 짧으면 쉽고 빠르게 읽을 수 있기 때문에 ‘커뮤니티에 회원님을 알릴 좋은 기회입니다’로 문장의 길이를 최대한 단축하면 더 나았을 것이다.

 

토스

토스 플레이스홀더

 

왼쪽은 ‘돈 같이 모으기' 기능에서 ‘모임’ 명을 설정하는 화면이다. 플레이스홀더에 적힌 ‘여행 회비'가 예시임이 무의식적으로 인지되기 때문에 플레이스홀더에 ‘예’, ‘ex’라는 워딩을 작성하지 않았다. 간결한 플레이스홀더를 위해 필요 없는 텍스트를 삭제한 것으로 보인다.

 

오른쪽은 토스 증권의 검색 화면이다. ‘OO을 검색해보세요’로 예시를 들어주고 있다. 진입할 때마다 예시어가 바뀌며 분야를 나타내는 ‘게임, 커피’, 상품을 나타내는 ‘비비고, 에어팟’이 나오기도 한다. 이를 통해 토스 증권에서 상품까지 검색할 수 있음을 알 수 있다.

 

③ 카테고리를 제공한다.

검색 가능한 카테고리를 제공할 시 고객은 무엇을 입력할 수 있는지 알게 된다. 결과적으로 잘못된 검색어를 입력할 가능성이 줄어들고, 다양한 검색어 입력을 유도할 수 있다.

 

에어비앤비

에어비앤비 플레이스홀더

 

검색 인풋 필드를 누르면 검색 화면으로 이동하게 된다. 검색 화면에서 설정할 수 있는 카테고리를 플레이스홀더에서 알려주고 있다. 카테고리만 제공한다면 딱딱한 느낌이 들었을 텐데 ‘어디로 여행 가세요?’라는 질문형 문구가 더해져 부드럽고 친절한 느낌을 준다.

 

다만 ‘어디든지, 언제든 일주일, 게스트 추가’라고 적은 부분이 에어비앤비에서 제공하는 기능을 한 번에 설명하는지는 의문이다. ‘여행지, 날짜, 인원수’로 제공하는 것이 더 기능을 이해하기 더 명확해 보인다.

 

야놀자

야놀자 플레이스홀더

 

숙소 검색 화면에서 플레이스홀더를 통해 무엇을 검색할 수 있는지 알려준다. ‘수영장, 애견 동반으로도 찾을 수 있어요'로 수영장이 있는 숙소, 애견 동반 가능 숙소가 제공되는 것을 알 수 있다. 이렇듯 검색 가능한 카테고리를 제공하면 자연스레 새로운 상품이나 기능 홍보가 함께 이뤄질 수 있다.

 

④ 광고 문구를 제공한다.

검색창 플레이스홀더에 광고 문구를 사용할 수도 있다. 고객이 검색을 시도할 시 자연스레 텍스트를 읽게 되며 새로운 상품이나 혜택을 홍보할 수 있는 장점이 있다. 커머스 앱 중 고객이 무엇을 검색할 수 있는지 이미 인지하고 있는 서비스에 주로 사용된다.

 

무신사

무신사 플레이스홀더

 

검색창 플레이스홀더에서 할인 혜택을 알려줘 구매를 유도하고 있다. 커머스 앱의 고객은 ‘브랜드, 상품명' 등 무엇을 검색할 수 있는지 이미 인지하고 있기 때문에 광고 문구를 작성한 것으로 보인다.

 

화해

화해 플레이스홀더

 

검색창 플레이스홀더에서 상품을 홍보하고 있다. 다만 해당 상품을 왜 홍보해주는 것인지, 인기가 있는 상품인지 새로 나온 상품인지 등을 플레이스홀더 문장만으로는 알 수 없어 아쉽다.

 

입력값이 없이 플레이스홀더만 있는 상태에서 검색창 아이콘을 누르면 상품의 브랜관으로 이동된다. 고객이 직접 입력해야 하는 수고를 덜 수 있지만, 익숙하지 않은 UX이기 때문에 안내가 필요했을 텐데 아쉬운 부분이다.

 

 

에러 메시지

에러 메시지는 실패나 오류같이 ‘고객 행동이 완료되지 못했음’을 알리는 메시지이다. 에러 메시지는 문제를 직면한 고객이 프로세스를 완료할 수 있도록 도와주는 역할을 하므로 서비스 내에서 중요하다.

 

① 문제의 원인을 명확하게 알려준다.

고객에게 현재 상황이 발생한 이유를 명확하게 알려준다. 이는 문제 해결의 힌트로 작용할 수 있다. 문제의 원인 대신 완료되지 않은 상태만 제공하면 고객은 실패를 쉽게 납득할 수 없으며, 부정적인 감정이 들 수 있다. 그리고 실패한 원인을 모르기 때문에 반복해서 시도할 수도 있다. 따라서 모든 에러 메시지에선 문제의 원인을 명확하게 알려줘야 한다.

 

토스

토스뱅크 에러메시지

 

송금이 실패했음을 알려주는 화면이다. ‘계좌 잔액 부족' 타이틀로 문제의 원인을 말해주면서 송금 실패 상태를 우회적으로 알려준다. ‘송금에 실패했어요'와 같은 부정적인 언어를 사용하지 않아 고객이 느낄 수 있는 부정적 감정을 최소화했다.

 

당근마켓

당근마켓 에러 메시지

 

휴대폰 번호 입력 필드에서 전화번호 입력이 불가능한 이유를 알려준다. '사용할 수 없는 전화번호예요' 같이 상태를 알려주는 것보다 사용할 수 없는 이유를 명확히 알려줘 고객의 의문을 줄였다. 부가적으로 본인 외 다른 고객이 휴대폰 번호를 사용한 경우를 고려해 에러 메시지를 작성했다. 다만 고객센터 문의를 하기 위해선 어느 페이지에 진입해야 하는지 알려주면 더 좋을 듯하다.

 

② 해결책을 제시한다.

마이크로카피로 문제 해결을 위한 방법을 알려준다. 해결책을 제시하면 고객은 문제 해결을 위해 무엇이 필요한지 고민할 필요가 없다. 따라서 프로세스를 완료하도록 유도할 필요가 있는 곳에서 마이크로카피로 해결책을 제시해야 한다.

 

토스 증권

토스 증권 에러 메시지

 

토스 증권에서 주식 구매가 불가능할 시 제공되는 화면이다. ‘계좌 잔액이 부족해요' 타이틀로 문제 원인을 알려준다. 서브 문구에선 ‘토스 증권 계좌에 부족한 돈을 채우겠다’는 해결책을 제시한다. 고객은 부족한 돈이 얼마인지 계산할 필요가 없고, ‘채우기' 버튼을 누르면 토스 증권계좌 송금 화면으로 이동하기 때문에 문제를 쉽게 해결할 수 있다. 부가적으로 남은 금액은 계좌로 돌려준다고 안내해 고객의 의문을 바로 해소해 준다.

 

③ 인간적이고 딱딱하지 않게 말한다.

에러 메시지는 때론 서비스 오류나 고객 실수로 나타나기 때문에 협박이나 명령조처럼 들리지 않게 작성하는 것이 중요하다. 그리고 에러, 실패 같은 부정적인 단어나 전문적인 기술 용어를 사용하지 않는다. 고객 지향적으로 에러 메시지를 작성하면 에러에 대한 부정적 감정을 줄일 수 있으며, 친절한 서비스라고 느낄 수 있다.

 

마이리얼트립

마이리얼트립 에러 메시지

 

닉네임 입력 인풋 필드이다. 주황색 UI로 닉네임 입력이 실패한 걸 알려주며, 에러 메시지인 ‘닉네임을 입력해주세요.’로 해결책을 제시한다. 명령조가 아닌 ‘~ 해주세요' 같은 부탁조를 사용했으며, 같은 의미인 ‘필수항목입니다' 문구보다 친절하고 부드럽게 들린다.

 

 

성공 메시지

고객 행동이 성공적으로 완료되었을 때 보여주는 메시지이다. 고객 행동에 관한 피드백을 주기 때문에 중요하며 잘 설계된 성공 메시지는 긍정적이고 즐거운 경험을 제공할 수 있다.

 

① 고객 작업이 완료되었다는 확신을 준다.

마이크로카피를 통해 고객 작업이 성공적으로 완료된 것을 확인해 준다. 이를 통해 고객은 자기 행동에 문제가 없는 걸 직접 확인할 수 있다.

 

토스

토스 성공 메시지

 

송금이 완료된 걸 알려주는 화면이다. ‘OO님에게 OO원을 보냈어요'처럼 간결한 타이틀로 고객의 행동에 관한 결과를 알려준다. 고객은 누구에게 얼마를 송금했는지 다시 한번 확인할 수 있다.

 

② 행동이 아닌 고객에 대해 이야기한다.

프로필 사진 업로드 시 ‘사진을 성공적으로 업로드했습니다’가 아닌 ‘멋진 사진이군요!’처럼 프로세스 그 자체가 아닌 고객에 대해 언급하는 게 좋다. 고객에 대한 이야기로 기분 좋게 만들 수 있으며, 더 끈끈한 관계를 맺을 수 있기 때문이다.

 

무신사

무신사 입력 필드

 

닉네임 입력이 완료되었을 때 입력 필드이다. ‘멋진 닉네임이네요!’라고 고객이 입력한 닉네임에 대해 칭찬하고 있다. 실제 사람과 이야기하는 듯한 느낌을 전달하며, 같은 뜻을 전달하는 ‘사용 가능한 닉네임입니다' 보다 더 인간적이기 때문에 고객을 더욱 기분 좋게 한다.

 

 

플레이스홀더, 에러·성공 메시지 check list

이 글을 종합해 플레이스홀더, 에러·성공 메시지 작성 시 다시 한번 확인해야 할 사항은 아래와 같다.

 

1) 플레이스홀더

  • 레이블로 입력해야 하는 내용이 충분히 이해되고, 입력 시 어려움이 없다면 플레이스홀더를 사용하지 않는다.
  • 작성하기 어려운 곳이나 서비스 의도와 다르게 작성될 수 있는 곳엔 가이드나 사례를 제공한다.
  • 검색할 수 있는 카테고리가 다양하면, 플레이스홀더에서 해당 카테고리 검색 안내를 지원한다.

 

2) 에러 메시지

  • 문제의 원인을 명확하게 알려준다.
  • 고객이 문제를 빠르게 해결하도록 해결책을 함께 제시한다.
  • 친절하게 말하며 부정적인 단어나 전문적인 기술 용어를 사용하지 않는다.

 

3) 성공 메시지

  • 고객 행동이 성공적으로 완료되었다는 확신을 준다.
  • 프로세스 그 자체가 아닌 프로세스를 진행한 고객에 관해 이야기한다.

 

플레이스홀더는 고객 입력이 원활하게 이뤄지도록 도움을 주기 때문에 적합한 내용이 작성되었는지 확인해야 한다. 에러 메시지는 고객이 프로세스를 완료할 수 있도록 실질적인 문제 해결을 도와주는 역할이기 때문에 사용성 측면에서 잘 표현됐는지 주의해야 한다. 또한 성공 메시지는 고객이 진행한 프로세스에 관해 최종 확인을 할 수 있어서 어떤 마이크로카피를 작성할지 꼭 유념해야 한다. 다음 편에서는 고객 문의와 공백 상태 화면의 마이크로카페에 관해 살펴보겠다.

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

댓글 0

김태희

`우아한형제들`의 프로덕트 디자이너입니다. 비즈니스 목표 도달을 위해 프로덕트의 문제점을 발견하고 해결하는 데에 관심이 많습니다. UX부터 협업까지 제품과 관련된 스터디를 즐기며 실무에 적용하는 것을 좋아합니다.

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.