UX라이팅을 간결하고 명확하게 쓰기 위한 9가지 팁
#UX라이팅 #UI컴포넌트 #유형별메시지
� 한 줄 요약
- 유형별 메시지와 UI 컴포넌트 별 UX라이팅 작성 팁
✔️ UX라이팅에 대한 질문을 많이 받는 요즘이에요. '요즘IT에 필진으로 지원했는데, 떨어졌네요.'는 단어가 갑자기 떠올라서 의식의 흐름대로 이야기해 봤고요. �
✔️ 그 질문들이 정말 일정해요. 'UX라이팅을 적용해서 해요체를 쓰고자 하는데, 다른 구성원들과 의견이 달라요.' 즉, UX라이팅은 '해요체'다라고 생각하는 분들이 많다는 거죠.
✔️ 저는 그에 대한 답으로 '해요체는 브랜드의 보이스톤을 나타내는 것 중 하나이지, 중요한 가치를 어떻게 담아내느냐를 정의하는게 필요하다'라고 전달하죠.
✔️ 그래도 사람들은 '아니, UX라이팅은 해요체니까 구성원을 어떻게 설득하는게 좋아요?'라고 계속 물어봐요. 그에 대해서 다시 위에 처럼 똑같이 말을 반복하곤 하는데요. 3번은 이야기해야 이해하시더라고요.
✔️ UX라이팅은 친근하게 말하는게 아니라, 사용자와 친밀해지는 것도 아니고, 명확하고 간결하게 그리고 사용자가 서비스를 온전히 이용할 수 있도록 안내하는게 중요하다고 말하죠.
✔️ UX라이팅은 외면적으로, 단편적으로 보이스톤만 보이기 때문에 어쩔 수 없는 이해도 문제라고 생각해요. 그럼 이걸 어떻게 풀어낼 수 있을까? 저는 오늘도 이걸 고민하죠.
✔️ 자료를 찾다가 닐슨 노먼 그룹의 'How User Read on the Web'이라는 아티클을 봤어요. 간단하게 요약하자면 다음과 같은데요.
✔️ 짧은 문구는 사용성을 58% 향상시키고, 빠르게 훑어볼 수 있는 구조는 47%를 향상시킨다고 해요. 또한, 단순하고 객관적인 내용으로 작성하면 27%의 추가 사용성 향상 효과가 있다고 해요.
✔️ 여기에 보이스톤 이야기는? 없어요. 주요 맥락을 살펴보면, 문구를 간결하게 유지하되 명확해야 한다는 거예요. 왜냐면 사용자가 가능한 빠르게 목표에 도달할 수 있게 도와야 하기 때문이죠.
✔️ 빠르게 목표에 도달하기 위해서는 문구가 누구나 이해하기 쉬워야 해요. 전문 용어와 기술 용어를 피하거나, 쉽게 풀어서 설명해야 한다는 거죠.
✔️ 일관성도 중요해요. 사용자가 서비스를 이용할 때, 서비스 전체 콘텐츠가 일관된 내용을 유지해야 하거든요. 이때, 보이스톤도 나오는데요. 브랜딩을 강화하는 측면으로 이야기 해요. 사용성과는 거리가 좀 있죠.
✔️ 닐슨 노먼 그룹의 연구는 차치하고, 그러면 UX라이팅을 잘 나타내는 간결하고 명확한 문구를 작성하기 위해선 어떻게 해야 할까요? 바로, 메시지 유형에 대한 이해도를 높이는 거예요.
✔️ 수많은 내용을 다 정리는 할 수 없고, 자주 보이거나 필요하다고 생각되는 유형들을 가지고 왔으니 함께 볼까요? (사실 우리 회사 가이드에 있는 내용 살짝..)
1. 안내 메시지
작업 완료 또는 서비스 내에서 특정 기능 사용 방법을 단계별로 안내하는 메시지
✔️ 안내 메시지는 사용자가 올바른 행동을 취할 수 있게 유도하는 메시지예요. 필수 입력을 설명하는 양식으로 구성된 경우가 많아요. 또한, 작업이 끝났다는 내용을 전달할 때도 사용하죠.
2. 오류 메시지
사용자 또는 서비스에 발생한 문제를 알리고 해결 방법을 안내하는 메시지
✔️ 오류 메시지는 404 페이지, 비밀번호 입력 오류, 본인인증 실패 등등 다양한 오류가 발생했을 때 사용할 수 있는데요. 오류 메시지는 사용자 맥락에 기반해서 문제와 그 원인을 명확하게 안내해야 해요.
✔️ 다음으로 해결책 또한 명확하게 제시해야 하죠. 그래야 사용자가 빠르게 다음 단계로 넘어갈 수 있으니까요. 만약, 이 해결책을 제대로 제시하지 못한다면, 사용자는 이탈할 거예요.
✔️ 최근에 404 에러 레퍼런스 찾다가 발견한 페이지인데요. innocent라는 음료를 만드는 브랜드예요. 애니메이션을 활용해서 재미있게 404 페이지를 표현했더라고요. 그냥 떠올라서 한 번 보시라고.. 링크
3. 확인 메시지
변경된 상태를 사용자에게 알리는 메시지
✔️ 확인 메시지는 사용자에게 변경된 상태를 알려 안심시켜요. 또한, 사용자가 행한 행위에 대해 세부 정보를 안내하죠. 사용자는 이 메시지를 보고 '제대로 하고 있구나'라고 느낄 거예요.
✔️ 확인 메시지는 보통 발생하거나 영향을 미치는 일에 대해 알려요. 예를 들어, '이 파일을 지우면 다시는 복원할 수 없어요.'와 같이 미래의 일을 알려주는 방식이죠.
4. 경고 메시지
사용자에게 일어날 수 있는 잠재적인 문제나 위험을 경고하여 문제가 일어나지 않거나 대처하기 쉽게 만드는 메시지
✔️ 경고의 내용과 사용자가 경고를 무시할 경우 어떤 일이 발생하는지 명확하게 안내해요. 사용자에게 일어날 수 있는 문제를 명확히 안내하고, 문제를 피하기 위해 무엇을 할 수 있는지 설명해줘요.
✔️ 또한, 사용자 맥락에 따라 행동과 결과에 초점을 두고 설명하는데요. 이때, 사용자가 이해하기 쉬운 용어로 작성해야 해요. 어려운 기술 용어나 전문 용어는 꼭 풀어서 써야 해요.
5. 버튼 문구
사용자가 경험을 이어 나가거나, 행동을 계속 할지에 대해 결정할 수 있도록 안내하는 역할
✔️ 버튼 문구는 사용자에게 사용 가능한 옵션을 안내해요. 다음 단계로 넘어갈 때 많이 사용 하는데요. 예상되는 결과와 일치하도록 명확하고 설명적인 내용을 넣어야 하죠.
✔️ 그렇기 때문에 사용자가 버튼을 눌렀을 때, 발생할 일을 구체적이고 명확한 행동 지침을 담은 문구를 작성해야 하죠.
6. 양식 레이블
하위 콘텐츠를 요약하여 전달하는 역할
✔️ 양식 레이블은 텍스트 필드에 어떤 내용이 들어가야 하는지, 어떤 유형이 들어가야 하는지 등을 알려줘요. 텍스트 필드 외에도, 체크박스나 라디오 박스 등 다양한 UI 컴포넌트에서 사용해요.
7. 플레이스홀더
사용자에게 문구 입력 방식과 구체적인 예시를 안내하는 역할
✔️ 플레이스홀더는 문구 입력 방식과 구체적인 예시를 텍스트 상자 안에 표시해주는 역할을 해요. 사용자가 어떤 내용을 입력해야 하는지 쉽게 이해할 수 있도록 돕는 기능이죠.
✔️ 이때 주의해야 할 점이 있는데요. 레이블을 반복해서 적으면 안 돼요. 예를 들어, 레이블이 이메일이라면 플레이스홀더에 '이메일을 적어주세요'라는 반복된 표현 대신에, 구체적인 이메일 형식을 알려주세요.
8. 공백 상태 문구
사용자에게 정보를 제공하고, 행동을 유도하며, 동시에 페이지에 이상이 없음을 안내하는 역할
✔️ 공백 상태 문구는 현재 데이터가 없음을 안내해줘요. 사용자를 안내하는 지침 또는 제안을 넣기도 하고, 검색 결과가 없음을 알리기도 하죠.
✔️ 가장 대표적인 예시는 배민이 아닐까 해요. 배민은 자신의 브랜드 특성을 활용해 공백 상태를 잘 표시하고 있어요. 다만, 한 가지 아쉬운 점은 찜을 바로 할 수 있도록 이동할 수 있는 경로가 없다는 점이에요.
9. 페이지 타이틀과 헤더 메시지
각 콘텐츠의 맥락과 추가 정보를 안내하는 역할
✔️ 페이지타이틀과 헤더 메시지는 사용자 맥락을 구축하고 동시에 지원해주는 역할을 하는데요. 사용자의 위치를 알려주거나, 빠르게 필요한 정보를 훑어볼 수 있게 도와줘요.
✔️ 사용자는 해당 내용만 보고 필요한 내용을 잡아낼 수 있거든요. 그렇기 때문에 작성할 때는 해당 영역의 기능과 역할이 분명하게 드러나도록 작성해줘야 해요.
