UX/UI
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼과 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 사용자가 멈추거나 불안해하지 않도록 마이크로카피를 설계하는 기준을 살펴봅니다.
버튼과 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 사용자가 멈추거나 불안해하지 않도록 마이크로카피를 설계하는 기준을 살펴봅니다.
작은 문장이 사용자의 다음 행동을 결정합니다
사용자는 서비스를 이용하면서 수많은 문장을 만납니다. 버튼과 메뉴, 입력창의 안내 문구, 오류 메시지처럼 화면 안에서 사용자의 행동을 돕는 짧은 문장을 마이크로카피라고 합니다.
마이크로카피는 크기가 작아 디자인 마지막 단계에 작성해도 되는 요소처럼 보입니다. 하지만 사용자가 현재 상태를 이해하고 다음 행동을 결정하는 데 직접적인 영향을 줍니다.
의미가 모호한 버튼은 클릭을 망설이게 합니다. 입력 조건을 뒤늦게 알려주면 사용자는 이미 작성한 내용을 다시 수정해야 합니다. 원인을 설명하지 않는 오류 메시지는 같은 실패를 반복하게 만들고, 결과를 알려주지 않는 완료 화면은 행동이 정상적으로 처리되었는지 불안하게 합니다.
좋은 마이크로카피는 문장을 멋있게 꾸미는 작업이 아닙니다. 다음 네 가지 질문에 짧고 분명하게 답하는 UX 설계입니다.
지금 어떤 상태인가?
무엇을 해야 하는가?
행동하면 어떤 결과가 생기는가?
문제가 생기면 어떻게 해결하는가?
문구는 사용자의 흐름을 따라가야 합니다
마이크로카피는 하나의 버튼이나 오류 문구만 따로 작성해서 완성되지 않습니다. 사용자가 화면에 들어온 순간부터 행동을 마친 이후까지 연결해서 살펴봐야 합니다.
문의 폼을 예로 들면 다음과 같은 역할이 필요합니다.
시작 전에는 기대를 설정합니다.
프로젝트에 관해 알려주세요. 내용을 검토한 뒤 영업일 기준 2일 이내에 답변드리겠습니다.
사용자는 무엇을 작성하며 언제 답변을 받을 수 있는지 예상할 수 있습니다.
입력 전에는 조건을 안내합니다.
PDF, DOC, PNG, JPG 파일을 최대 10MB까지 첨부할 수 있습니다.
실패한 이후에 파일 조건을 알리는 것보다 불필요한 재작업을 줄일 수 있습니다.
행동할 때는 결과를 예고합니다.
프로젝트 문의 보내기
버튼을 누르면 어떤 일이 발생하는지 알 수 있습니다.
오류가 발생하면 복구 방법을 알려줍니다.
파일이 10MB를 초과했습니다. 더 작은 파일을 선택해 주세요.
완료된 뒤에는 결과와 다음 단계를 안내합니다.
문의가 접수되었습니다. 입력하신 이메일로 접수 내용을 보냈으며 영업일 기준 2일 이내에 답변드리겠습니다.
이 문장들이 하나의 흐름으로 연결될 때 사용자는 서비스를 신뢰하고 다음 단계로 이동할 수 있습니다.
버튼은 행동과 결과를 함께 알려줘야 합니다
구체적인 동사를 사용하세요
확인, 완료, 다음 같은 표현은 화면의 맥락을 이미 알고 있을 때만 의미가 분명합니다. 사용자는 버튼을 눌렀을 때 정보가 저장되는지, 신청이 제출되는지, 다음 화면으로만 이동하는지 판단하기 어려울 수 있습니다.
가능하면 사용자가 실행하는 행동과 결과를 함께 표현합니다.
모호한 표현 | 더 명확한 표현 |
|---|---|
확인 | 선택한 일정 확인하기 |
완료 | 프로필 저장하기 |
제출 | 프로젝트 문의 보내기 |
다음 | 결제 정보 입력하기 |
등록 | 새 프로젝트 등록하기 |
변경 | 비밀번호 변경하기 |
버튼 문구가 항상 길어야 하는 것은 아닙니다. 화면 제목과 주변 설명에서 맥락이 충분히 제공된다면 저장하기, 예약하기처럼 짧게 작성할 수 있습니다.
중요한 기준은 사용자가 버튼을 누르기 전에 결과를 예상할 수 있는가입니다.
한 버튼에는 하나의 행동만 담습니다
저장하고 다음 단계로 이동처럼 버튼 하나가 여러 결과를 만들면 사용자가 예상하기 어려울 수 있습니다. 실제로 저장과 이동이 동시에 이루어진다면 문구나 주변 안내에서 이를 설명해야 합니다.
작업을 임시로 보관할 수 있다면 임시 저장과 제출하기를 구분합니다. 미리보기와 공개처럼 결과가 다른 행동도 각각의 버튼으로 제공하는 것이 좋습니다.
행동의 중요도도 시각적 위계와 맞아야 합니다. 화면의 핵심 행동에는 Primary 버튼을 사용하고, 취소나 이전 단계 이동은 Secondary 또는 Text 버튼으로 구분합니다.
되돌리기 어려운 행동은 결과를 감추지 마세요
계정 삭제, 결제 취소, 작성 내용 초기화처럼 되돌리기 어려운 행동을 확인이라는 표현으로 감추면 안 됩니다.
버튼 자체에서 결과를 분명하게 보여줍니다.
계정 삭제하기
예약 취소하기
작성 내용 모두 지우기
확인 창에서도 예와 아니요보다 선택 이후의 상태를 표현하는 편이 안전합니다.
Before
예약을 취소하시겠습니까?
[아니요] [예]
After
예약을 취소하면 선택한 일정이 해제됩니다.
[예약 유지하기] [예약 취소하기]
사용자는 질문의 긍정과 부정을 다시 해석하지 않고 원하는 결과를 바로 선택할 수 있습니다.
같은 행동에는 같은 용어를 사용합니다
같은 행동을 한 화면에서는 등록, 다른 화면에서는 추가, 또 다른 화면에서는 생성이라고 표현하면 서로 다른 기능처럼 느껴질 수 있습니다.
서비스에서 자주 사용하는 핵심 용어를 정하고 일관되게 사용해야 합니다.
계정: 가입 / 생성 / 등록 중 하나 선택
콘텐츠: 게시물 / 포스트 / 글 중 하나 선택
구매: 주문 / 결제의 의미 구분
저장: 임시 저장 / 변경 저장 / 제출의 차이 정의
삭제: 보관 / 숨김 / 영구 삭제의 차이 정의
용어 통일은 문체의 문제가 아니라 학습 비용의 문제입니다. 사용자가 한 번 이해한 규칙을 다른 화면에서도 그대로 사용할 수 있을 때 서비스 전체가 더 단순하게 느껴집니다.
안내와 오류 메시지는 사용자가 복구할 수 있게 작성합니다
입력 조건은 행동 전에 알려주세요
사용자가 행동한 뒤에야 조건을 알려주면 불필요한 실패가 발생합니다. 미리 알 수 있는 조건은 입력란 가까이에 먼저 표시해야 합니다.
비밀번호에 필요한 글자 수와 조합
파일의 형식과 최대 용량
전화번호나 사업자번호의 입력 방식
예약과 주문의 취소 가능 시간
사용자 이름에 사용할 수 없는 문자
제출 이후 수정 가능 여부
입력 조건을 모두 긴 문장으로 표시하면 화면이 복잡해질 수 있습니다. 사용자가 입력하는 동안 조건별 충족 여부를 보여주거나, 필요한 시점에 짧은 도움말을 제공할 수 있습니다.
안내 문구는 필드 이름을 그대로 반복할 필요가 없습니다.
Before
이메일을 입력하세요.
After
답변받을 이메일 주소를 입력해 주세요.
어떤 정보를 입력해야 하는지뿐 아니라 해당 정보가 어디에 사용되는지도 알려주면 사용자가 더 정확하게 입력할 수 있습니다.
오류 메시지에는 원인과 해결 방법이 필요합니다
잘못된 요청입니다, 오류가 발생했습니다 같은 문구는 문제가 있다는 사실만 전달합니다. 사용자는 무엇을 바꿔야 하는지 알 수 없어 같은 행동을 반복할 수 있습니다.
사용자가 직접 해결할 수 있는 문제라면 다음 세 가지를 포함합니다.
어디에서 문제가 발생했는가?
무엇이 잘못되었는가?
어떻게 수정할 수 있는가?
Before
입력값이 올바르지 않습니다.
After
이메일 주소에
@가 없습니다. 주소 형식을 다시 확인해 주세요.
Before
업로드에 실패했습니다.
After
파일이 10MB를 초과했습니다. 더 작은 파일을 선택해 주세요.
Before
예약할 수 없습니다.
After
선택한 시간의 예약이 마감되었습니다. 다른 시간을 선택해 주세요.
사용자가 직접 해결할 수 없는 오류라면 책임을 사용자에게 돌리지 않습니다. 현재 상태와 데이터의 처리 여부, 다시 시도할 수 있는 시점을 안내해야 합니다.
일시적으로 결제를 처리하지 못했습니다. 결제는 완료되지 않았으며 잠시 후 다시 시도해 주세요.
현재 서버 연결이 원활하지 않습니다. 작성한 내용은 이 기기에 임시로 보관했습니다.
정확한 원인을 알 수 없는 상황에서 존재하지 않는 이유를 단정해서는 안 됩니다. 확인된 사실과 사용자가 취할 수 있는 행동까지만 안내하는 것이 안전합니다.
오류는 발생 위치 가까이에 표시합니다
이메일 형식 오류는 이메일 입력란 근처에 표시하고, 파일 문제는 첨부 영역에서 보여주는 것이 좋습니다. 화면 상단에 모든 오류를 한꺼번에 표시하면 사용자가 문제가 발생한 위치를 찾기 어렵습니다.
폼을 제출했을 때 여러 오류가 있다면 첫 번째 오류로 포커스를 이동시키고, 각 필드에서도 개별 원인을 확인할 수 있도록 구성합니다. 색상만으로 오류를 구분하지 말고 아이콘과 설명을 함께 사용해야 합니다.
성공한 결과도 분명하게 알려주세요
제출이나 저장 이후 아무런 반응이 없으면 사용자는 버튼을 다시 누르거나 작업이 실패했다고 생각할 수 있습니다.
완료되었습니다보다 어떤 작업이 완료되었는지 구체적으로 알려줍니다.
변경한 프로필이 저장되었습니다.
예약이 취소되었으며 결제 금액은 영업일 기준 3일 이내에 환불됩니다.
프로젝트 문의가 접수되었습니다.
이후에 해야 할 행동이 있다면 함께 안내합니다.
이메일 인증 링크를 보냈습니다. 받은 편지함에서 인증을 완료해 주세요.
신청이 완료되었습니다. 마이페이지에서 진행 상태를 확인할 수 있습니다.
좋은 완료 메시지는 사용자의 불안을 줄이고 다음 행동까지 자연스럽게 연결합니다.
좋은 마이크로카피는 실제 화면과 흐름에서 검수합니다
문구 하나만 떼어 놓고 보면 자연스러워도 전체 화면 안에서는 정보가 반복되거나 중요한 조건이 늦게 나타날 수 있습니다.
마이크로카피를 검수할 때는 다음 다섯 가지 기준을 사용할 수 있습니다.
1. 명확성
사용자가 문장을 한 번 읽고 의미를 이해할 수 있는지 확인합니다.
내부 전문 용어나 상태 코드를 그대로 사용하지 않았는가?
행동을 구체적인 동사로 표현했는가?
주어가 없어도 행동의 대상이 명확한가?
두 가지 이상으로 해석될 가능성이 없는가?
운영자에게 익숙한 정책 이름이 사용자에게도 익숙한 것은 아닙니다. 꼭 필요한 용어라면 처음 등장할 때 짧게 설명합니다.
2. 타이밍
필요한 정보가 사용자의 행동보다 먼저 제공되는지 확인합니다.
입력 조건을 제출 후에 알리고 있지 않은가?
결제와 삭제의 영향을 실행 전에 설명했는가?
긴 작업이라면 예상 시간을 안내했는가?
사용자가 기다리는 동안 진행 상태를 알 수 있는가?
문구의 내용이 정확해도 너무 늦게 나타나면 사용자를 돕지 못합니다.
3. 행동과 결과
버튼을 누른 뒤 발생하는 일을 예상할 수 있는지 확인합니다.
확인,다음,완료가 지나치게 사용되지 않았는가?저장과 제출처럼 결과가 다른 행동을 구분했는가?
되돌리기 어려운 행동이 명확하게 표시되었는가?
주요 행동과 보조 행동의 시각적 위계가 맞는가?
4. 복구 가능성
문제가 생겼을 때 사용자가 다음 행동을 선택할 수 있어야 합니다.
오류가 발생한 위치를 알 수 있는가?
원인과 수정 방법을 함께 설명하는가?
입력한 내용이 유지되는지 알려주는가?
재시도, 이전 단계 또는 고객 지원 경로가 있는가?
오류 메시지의 목적은 잘못을 지적하는 것이 아니라 사용자가 흐름으로 돌아오게 돕는 것입니다.
5. 일관성과 실제 환경
서비스 전체에서 같은 언어 규칙을 사용하는지 확인합니다.
같은 대상과 행동에 같은 용어를 사용하는가?
존댓말과 문장 부호의 방식이 통일되어 있는가?
오류와 성공 메시지의 문체가 일관적인가?
모바일 화면에서 버튼과 안내 문구가 깨지지 않는가?
번역했을 때 길이가 늘어나도 레이아웃이 유지되는가?
스크린 리더가 상태 변화를 인식할 수 있는가?
마이크로카피는 디자인 파일에서만 검토해서는 부족합니다. 실제 데이터와 오류 상태를 넣은 화면에서 확인해야 합니다. 긴 사용자 이름, 예상보다 큰 숫자와 여러 줄의 번역 문구도 테스트하는 것이 좋습니다.
잘 쓴 문구는 사용자의 관심을 끄는 표현보다 사용자가 멈추지 않게 돕는 표현에 가깝습니다. 좋은 마이크로카피가 눈에 띄지 않는 이유는 사용자가 별도의 해석 없이 목적을 달성할 수 있기 때문입니다.
4PS는 사용자 흐름과 화면, 기능과 문구를 하나의 경험으로 설계합니다. 서비스에서 같은 문의나 입력 오류, 중간 이탈이 반복된다면 기능뿐 아니라 사용자가 마주하는 언어도 함께 점검해 보세요.
Latest Blogs
UX/UI
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼과 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 사용자가 멈추거나 불안해하지 않도록 마이크로카피를 설계하는 기준을 살펴봅니다.
버튼과 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 사용자가 멈추거나 불안해하지 않도록 마이크로카피를 설계하는 기준을 살펴봅니다.
작은 문장이 사용자의 다음 행동을 결정합니다
사용자는 서비스를 이용하면서 수많은 문장을 만납니다. 버튼과 메뉴, 입력창의 안내 문구, 오류 메시지처럼 화면 안에서 사용자의 행동을 돕는 짧은 문장을 마이크로카피라고 합니다.
마이크로카피는 크기가 작아 디자인 마지막 단계에 작성해도 되는 요소처럼 보입니다. 하지만 사용자가 현재 상태를 이해하고 다음 행동을 결정하는 데 직접적인 영향을 줍니다.
의미가 모호한 버튼은 클릭을 망설이게 합니다. 입력 조건을 뒤늦게 알려주면 사용자는 이미 작성한 내용을 다시 수정해야 합니다. 원인을 설명하지 않는 오류 메시지는 같은 실패를 반복하게 만들고, 결과를 알려주지 않는 완료 화면은 행동이 정상적으로 처리되었는지 불안하게 합니다.
좋은 마이크로카피는 문장을 멋있게 꾸미는 작업이 아닙니다. 다음 네 가지 질문에 짧고 분명하게 답하는 UX 설계입니다.
지금 어떤 상태인가?
무엇을 해야 하는가?
행동하면 어떤 결과가 생기는가?
문제가 생기면 어떻게 해결하는가?
문구는 사용자의 흐름을 따라가야 합니다
마이크로카피는 하나의 버튼이나 오류 문구만 따로 작성해서 완성되지 않습니다. 사용자가 화면에 들어온 순간부터 행동을 마친 이후까지 연결해서 살펴봐야 합니다.
문의 폼을 예로 들면 다음과 같은 역할이 필요합니다.
시작 전에는 기대를 설정합니다.
프로젝트에 관해 알려주세요. 내용을 검토한 뒤 영업일 기준 2일 이내에 답변드리겠습니다.
사용자는 무엇을 작성하며 언제 답변을 받을 수 있는지 예상할 수 있습니다.
입력 전에는 조건을 안내합니다.
PDF, DOC, PNG, JPG 파일을 최대 10MB까지 첨부할 수 있습니다.
실패한 이후에 파일 조건을 알리는 것보다 불필요한 재작업을 줄일 수 있습니다.
행동할 때는 결과를 예고합니다.
프로젝트 문의 보내기
버튼을 누르면 어떤 일이 발생하는지 알 수 있습니다.
오류가 발생하면 복구 방법을 알려줍니다.
파일이 10MB를 초과했습니다. 더 작은 파일을 선택해 주세요.
완료된 뒤에는 결과와 다음 단계를 안내합니다.
문의가 접수되었습니다. 입력하신 이메일로 접수 내용을 보냈으며 영업일 기준 2일 이내에 답변드리겠습니다.
이 문장들이 하나의 흐름으로 연결될 때 사용자는 서비스를 신뢰하고 다음 단계로 이동할 수 있습니다.
버튼은 행동과 결과를 함께 알려줘야 합니다
구체적인 동사를 사용하세요
확인, 완료, 다음 같은 표현은 화면의 맥락을 이미 알고 있을 때만 의미가 분명합니다. 사용자는 버튼을 눌렀을 때 정보가 저장되는지, 신청이 제출되는지, 다음 화면으로만 이동하는지 판단하기 어려울 수 있습니다.
가능하면 사용자가 실행하는 행동과 결과를 함께 표현합니다.
모호한 표현 | 더 명확한 표현 |
|---|---|
확인 | 선택한 일정 확인하기 |
완료 | 프로필 저장하기 |
제출 | 프로젝트 문의 보내기 |
다음 | 결제 정보 입력하기 |
등록 | 새 프로젝트 등록하기 |
변경 | 비밀번호 변경하기 |
버튼 문구가 항상 길어야 하는 것은 아닙니다. 화면 제목과 주변 설명에서 맥락이 충분히 제공된다면 저장하기, 예약하기처럼 짧게 작성할 수 있습니다.
중요한 기준은 사용자가 버튼을 누르기 전에 결과를 예상할 수 있는가입니다.
한 버튼에는 하나의 행동만 담습니다
저장하고 다음 단계로 이동처럼 버튼 하나가 여러 결과를 만들면 사용자가 예상하기 어려울 수 있습니다. 실제로 저장과 이동이 동시에 이루어진다면 문구나 주변 안내에서 이를 설명해야 합니다.
작업을 임시로 보관할 수 있다면 임시 저장과 제출하기를 구분합니다. 미리보기와 공개처럼 결과가 다른 행동도 각각의 버튼으로 제공하는 것이 좋습니다.
행동의 중요도도 시각적 위계와 맞아야 합니다. 화면의 핵심 행동에는 Primary 버튼을 사용하고, 취소나 이전 단계 이동은 Secondary 또는 Text 버튼으로 구분합니다.
되돌리기 어려운 행동은 결과를 감추지 마세요
계정 삭제, 결제 취소, 작성 내용 초기화처럼 되돌리기 어려운 행동을 확인이라는 표현으로 감추면 안 됩니다.
버튼 자체에서 결과를 분명하게 보여줍니다.
계정 삭제하기
예약 취소하기
작성 내용 모두 지우기
확인 창에서도 예와 아니요보다 선택 이후의 상태를 표현하는 편이 안전합니다.
Before
예약을 취소하시겠습니까?
[아니요] [예]
After
예약을 취소하면 선택한 일정이 해제됩니다.
[예약 유지하기] [예약 취소하기]
사용자는 질문의 긍정과 부정을 다시 해석하지 않고 원하는 결과를 바로 선택할 수 있습니다.
같은 행동에는 같은 용어를 사용합니다
같은 행동을 한 화면에서는 등록, 다른 화면에서는 추가, 또 다른 화면에서는 생성이라고 표현하면 서로 다른 기능처럼 느껴질 수 있습니다.
서비스에서 자주 사용하는 핵심 용어를 정하고 일관되게 사용해야 합니다.
계정: 가입 / 생성 / 등록 중 하나 선택
콘텐츠: 게시물 / 포스트 / 글 중 하나 선택
구매: 주문 / 결제의 의미 구분
저장: 임시 저장 / 변경 저장 / 제출의 차이 정의
삭제: 보관 / 숨김 / 영구 삭제의 차이 정의
용어 통일은 문체의 문제가 아니라 학습 비용의 문제입니다. 사용자가 한 번 이해한 규칙을 다른 화면에서도 그대로 사용할 수 있을 때 서비스 전체가 더 단순하게 느껴집니다.
안내와 오류 메시지는 사용자가 복구할 수 있게 작성합니다
입력 조건은 행동 전에 알려주세요
사용자가 행동한 뒤에야 조건을 알려주면 불필요한 실패가 발생합니다. 미리 알 수 있는 조건은 입력란 가까이에 먼저 표시해야 합니다.
비밀번호에 필요한 글자 수와 조합
파일의 형식과 최대 용량
전화번호나 사업자번호의 입력 방식
예약과 주문의 취소 가능 시간
사용자 이름에 사용할 수 없는 문자
제출 이후 수정 가능 여부
입력 조건을 모두 긴 문장으로 표시하면 화면이 복잡해질 수 있습니다. 사용자가 입력하는 동안 조건별 충족 여부를 보여주거나, 필요한 시점에 짧은 도움말을 제공할 수 있습니다.
안내 문구는 필드 이름을 그대로 반복할 필요가 없습니다.
Before
이메일을 입력하세요.
After
답변받을 이메일 주소를 입력해 주세요.
어떤 정보를 입력해야 하는지뿐 아니라 해당 정보가 어디에 사용되는지도 알려주면 사용자가 더 정확하게 입력할 수 있습니다.
오류 메시지에는 원인과 해결 방법이 필요합니다
잘못된 요청입니다, 오류가 발생했습니다 같은 문구는 문제가 있다는 사실만 전달합니다. 사용자는 무엇을 바꿔야 하는지 알 수 없어 같은 행동을 반복할 수 있습니다.
사용자가 직접 해결할 수 있는 문제라면 다음 세 가지를 포함합니다.
어디에서 문제가 발생했는가?
무엇이 잘못되었는가?
어떻게 수정할 수 있는가?
Before
입력값이 올바르지 않습니다.
After
이메일 주소에
@가 없습니다. 주소 형식을 다시 확인해 주세요.
Before
업로드에 실패했습니다.
After
파일이 10MB를 초과했습니다. 더 작은 파일을 선택해 주세요.
Before
예약할 수 없습니다.
After
선택한 시간의 예약이 마감되었습니다. 다른 시간을 선택해 주세요.
사용자가 직접 해결할 수 없는 오류라면 책임을 사용자에게 돌리지 않습니다. 현재 상태와 데이터의 처리 여부, 다시 시도할 수 있는 시점을 안내해야 합니다.
일시적으로 결제를 처리하지 못했습니다. 결제는 완료되지 않았으며 잠시 후 다시 시도해 주세요.
현재 서버 연결이 원활하지 않습니다. 작성한 내용은 이 기기에 임시로 보관했습니다.
정확한 원인을 알 수 없는 상황에서 존재하지 않는 이유를 단정해서는 안 됩니다. 확인된 사실과 사용자가 취할 수 있는 행동까지만 안내하는 것이 안전합니다.
오류는 발생 위치 가까이에 표시합니다
이메일 형식 오류는 이메일 입력란 근처에 표시하고, 파일 문제는 첨부 영역에서 보여주는 것이 좋습니다. 화면 상단에 모든 오류를 한꺼번에 표시하면 사용자가 문제가 발생한 위치를 찾기 어렵습니다.
폼을 제출했을 때 여러 오류가 있다면 첫 번째 오류로 포커스를 이동시키고, 각 필드에서도 개별 원인을 확인할 수 있도록 구성합니다. 색상만으로 오류를 구분하지 말고 아이콘과 설명을 함께 사용해야 합니다.
성공한 결과도 분명하게 알려주세요
제출이나 저장 이후 아무런 반응이 없으면 사용자는 버튼을 다시 누르거나 작업이 실패했다고 생각할 수 있습니다.
완료되었습니다보다 어떤 작업이 완료되었는지 구체적으로 알려줍니다.
변경한 프로필이 저장되었습니다.
예약이 취소되었으며 결제 금액은 영업일 기준 3일 이내에 환불됩니다.
프로젝트 문의가 접수되었습니다.
이후에 해야 할 행동이 있다면 함께 안내합니다.
이메일 인증 링크를 보냈습니다. 받은 편지함에서 인증을 완료해 주세요.
신청이 완료되었습니다. 마이페이지에서 진행 상태를 확인할 수 있습니다.
좋은 완료 메시지는 사용자의 불안을 줄이고 다음 행동까지 자연스럽게 연결합니다.
좋은 마이크로카피는 실제 화면과 흐름에서 검수합니다
문구 하나만 떼어 놓고 보면 자연스러워도 전체 화면 안에서는 정보가 반복되거나 중요한 조건이 늦게 나타날 수 있습니다.
마이크로카피를 검수할 때는 다음 다섯 가지 기준을 사용할 수 있습니다.
1. 명확성
사용자가 문장을 한 번 읽고 의미를 이해할 수 있는지 확인합니다.
내부 전문 용어나 상태 코드를 그대로 사용하지 않았는가?
행동을 구체적인 동사로 표현했는가?
주어가 없어도 행동의 대상이 명확한가?
두 가지 이상으로 해석될 가능성이 없는가?
운영자에게 익숙한 정책 이름이 사용자에게도 익숙한 것은 아닙니다. 꼭 필요한 용어라면 처음 등장할 때 짧게 설명합니다.
2. 타이밍
필요한 정보가 사용자의 행동보다 먼저 제공되는지 확인합니다.
입력 조건을 제출 후에 알리고 있지 않은가?
결제와 삭제의 영향을 실행 전에 설명했는가?
긴 작업이라면 예상 시간을 안내했는가?
사용자가 기다리는 동안 진행 상태를 알 수 있는가?
문구의 내용이 정확해도 너무 늦게 나타나면 사용자를 돕지 못합니다.
3. 행동과 결과
버튼을 누른 뒤 발생하는 일을 예상할 수 있는지 확인합니다.
확인,다음,완료가 지나치게 사용되지 않았는가?저장과 제출처럼 결과가 다른 행동을 구분했는가?
되돌리기 어려운 행동이 명확하게 표시되었는가?
주요 행동과 보조 행동의 시각적 위계가 맞는가?
4. 복구 가능성
문제가 생겼을 때 사용자가 다음 행동을 선택할 수 있어야 합니다.
오류가 발생한 위치를 알 수 있는가?
원인과 수정 방법을 함께 설명하는가?
입력한 내용이 유지되는지 알려주는가?
재시도, 이전 단계 또는 고객 지원 경로가 있는가?
오류 메시지의 목적은 잘못을 지적하는 것이 아니라 사용자가 흐름으로 돌아오게 돕는 것입니다.
5. 일관성과 실제 환경
서비스 전체에서 같은 언어 규칙을 사용하는지 확인합니다.
같은 대상과 행동에 같은 용어를 사용하는가?
존댓말과 문장 부호의 방식이 통일되어 있는가?
오류와 성공 메시지의 문체가 일관적인가?
모바일 화면에서 버튼과 안내 문구가 깨지지 않는가?
번역했을 때 길이가 늘어나도 레이아웃이 유지되는가?
스크린 리더가 상태 변화를 인식할 수 있는가?
마이크로카피는 디자인 파일에서만 검토해서는 부족합니다. 실제 데이터와 오류 상태를 넣은 화면에서 확인해야 합니다. 긴 사용자 이름, 예상보다 큰 숫자와 여러 줄의 번역 문구도 테스트하는 것이 좋습니다.
잘 쓴 문구는 사용자의 관심을 끄는 표현보다 사용자가 멈추지 않게 돕는 표현에 가깝습니다. 좋은 마이크로카피가 눈에 띄지 않는 이유는 사용자가 별도의 해석 없이 목적을 달성할 수 있기 때문입니다.
4PS는 사용자 흐름과 화면, 기능과 문구를 하나의 경험으로 설계합니다. 서비스에서 같은 문의나 입력 오류, 중간 이탈이 반복된다면 기능뿐 아니라 사용자가 마주하는 언어도 함께 점검해 보세요.
Latest Blogs
UX/UI
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼과 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 사용자가 멈추거나 불안해하지 않도록 마이크로카피를 설계하는 기준을 살펴봅니다.
버튼과 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 사용자가 멈추거나 불안해하지 않도록 마이크로카피를 설계하는 기준을 살펴봅니다.
작은 문장이 사용자의 다음 행동을 결정합니다
사용자는 서비스를 이용하면서 수많은 문장을 만납니다. 버튼과 메뉴, 입력창의 안내 문구, 오류 메시지처럼 화면 안에서 사용자의 행동을 돕는 짧은 문장을 마이크로카피라고 합니다.
마이크로카피는 크기가 작아 디자인 마지막 단계에 작성해도 되는 요소처럼 보입니다. 하지만 사용자가 현재 상태를 이해하고 다음 행동을 결정하는 데 직접적인 영향을 줍니다.
의미가 모호한 버튼은 클릭을 망설이게 합니다. 입력 조건을 뒤늦게 알려주면 사용자는 이미 작성한 내용을 다시 수정해야 합니다. 원인을 설명하지 않는 오류 메시지는 같은 실패를 반복하게 만들고, 결과를 알려주지 않는 완료 화면은 행동이 정상적으로 처리되었는지 불안하게 합니다.
좋은 마이크로카피는 문장을 멋있게 꾸미는 작업이 아닙니다. 다음 네 가지 질문에 짧고 분명하게 답하는 UX 설계입니다.
지금 어떤 상태인가?
무엇을 해야 하는가?
행동하면 어떤 결과가 생기는가?
문제가 생기면 어떻게 해결하는가?
문구는 사용자의 흐름을 따라가야 합니다
마이크로카피는 하나의 버튼이나 오류 문구만 따로 작성해서 완성되지 않습니다. 사용자가 화면에 들어온 순간부터 행동을 마친 이후까지 연결해서 살펴봐야 합니다.
문의 폼을 예로 들면 다음과 같은 역할이 필요합니다.
시작 전에는 기대를 설정합니다.
프로젝트에 관해 알려주세요. 내용을 검토한 뒤 영업일 기준 2일 이내에 답변드리겠습니다.
사용자는 무엇을 작성하며 언제 답변을 받을 수 있는지 예상할 수 있습니다.
입력 전에는 조건을 안내합니다.
PDF, DOC, PNG, JPG 파일을 최대 10MB까지 첨부할 수 있습니다.
실패한 이후에 파일 조건을 알리는 것보다 불필요한 재작업을 줄일 수 있습니다.
행동할 때는 결과를 예고합니다.
프로젝트 문의 보내기
버튼을 누르면 어떤 일이 발생하는지 알 수 있습니다.
오류가 발생하면 복구 방법을 알려줍니다.
파일이 10MB를 초과했습니다. 더 작은 파일을 선택해 주세요.
완료된 뒤에는 결과와 다음 단계를 안내합니다.
문의가 접수되었습니다. 입력하신 이메일로 접수 내용을 보냈으며 영업일 기준 2일 이내에 답변드리겠습니다.
이 문장들이 하나의 흐름으로 연결될 때 사용자는 서비스를 신뢰하고 다음 단계로 이동할 수 있습니다.
버튼은 행동과 결과를 함께 알려줘야 합니다
구체적인 동사를 사용하세요
확인, 완료, 다음 같은 표현은 화면의 맥락을 이미 알고 있을 때만 의미가 분명합니다. 사용자는 버튼을 눌렀을 때 정보가 저장되는지, 신청이 제출되는지, 다음 화면으로만 이동하는지 판단하기 어려울 수 있습니다.
가능하면 사용자가 실행하는 행동과 결과를 함께 표현합니다.
모호한 표현 | 더 명확한 표현 |
|---|---|
확인 | 선택한 일정 확인하기 |
완료 | 프로필 저장하기 |
제출 | 프로젝트 문의 보내기 |
다음 | 결제 정보 입력하기 |
등록 | 새 프로젝트 등록하기 |
변경 | 비밀번호 변경하기 |
버튼 문구가 항상 길어야 하는 것은 아닙니다. 화면 제목과 주변 설명에서 맥락이 충분히 제공된다면 저장하기, 예약하기처럼 짧게 작성할 수 있습니다.
중요한 기준은 사용자가 버튼을 누르기 전에 결과를 예상할 수 있는가입니다.
한 버튼에는 하나의 행동만 담습니다
저장하고 다음 단계로 이동처럼 버튼 하나가 여러 결과를 만들면 사용자가 예상하기 어려울 수 있습니다. 실제로 저장과 이동이 동시에 이루어진다면 문구나 주변 안내에서 이를 설명해야 합니다.
작업을 임시로 보관할 수 있다면 임시 저장과 제출하기를 구분합니다. 미리보기와 공개처럼 결과가 다른 행동도 각각의 버튼으로 제공하는 것이 좋습니다.
행동의 중요도도 시각적 위계와 맞아야 합니다. 화면의 핵심 행동에는 Primary 버튼을 사용하고, 취소나 이전 단계 이동은 Secondary 또는 Text 버튼으로 구분합니다.
되돌리기 어려운 행동은 결과를 감추지 마세요
계정 삭제, 결제 취소, 작성 내용 초기화처럼 되돌리기 어려운 행동을 확인이라는 표현으로 감추면 안 됩니다.
버튼 자체에서 결과를 분명하게 보여줍니다.
계정 삭제하기
예약 취소하기
작성 내용 모두 지우기
확인 창에서도 예와 아니요보다 선택 이후의 상태를 표현하는 편이 안전합니다.
Before
예약을 취소하시겠습니까?
[아니요] [예]
After
예약을 취소하면 선택한 일정이 해제됩니다.
[예약 유지하기] [예약 취소하기]
사용자는 질문의 긍정과 부정을 다시 해석하지 않고 원하는 결과를 바로 선택할 수 있습니다.
같은 행동에는 같은 용어를 사용합니다
같은 행동을 한 화면에서는 등록, 다른 화면에서는 추가, 또 다른 화면에서는 생성이라고 표현하면 서로 다른 기능처럼 느껴질 수 있습니다.
서비스에서 자주 사용하는 핵심 용어를 정하고 일관되게 사용해야 합니다.
계정: 가입 / 생성 / 등록 중 하나 선택
콘텐츠: 게시물 / 포스트 / 글 중 하나 선택
구매: 주문 / 결제의 의미 구분
저장: 임시 저장 / 변경 저장 / 제출의 차이 정의
삭제: 보관 / 숨김 / 영구 삭제의 차이 정의
용어 통일은 문체의 문제가 아니라 학습 비용의 문제입니다. 사용자가 한 번 이해한 규칙을 다른 화면에서도 그대로 사용할 수 있을 때 서비스 전체가 더 단순하게 느껴집니다.
안내와 오류 메시지는 사용자가 복구할 수 있게 작성합니다
입력 조건은 행동 전에 알려주세요
사용자가 행동한 뒤에야 조건을 알려주면 불필요한 실패가 발생합니다. 미리 알 수 있는 조건은 입력란 가까이에 먼저 표시해야 합니다.
비밀번호에 필요한 글자 수와 조합
파일의 형식과 최대 용량
전화번호나 사업자번호의 입력 방식
예약과 주문의 취소 가능 시간
사용자 이름에 사용할 수 없는 문자
제출 이후 수정 가능 여부
입력 조건을 모두 긴 문장으로 표시하면 화면이 복잡해질 수 있습니다. 사용자가 입력하는 동안 조건별 충족 여부를 보여주거나, 필요한 시점에 짧은 도움말을 제공할 수 있습니다.
안내 문구는 필드 이름을 그대로 반복할 필요가 없습니다.
Before
이메일을 입력하세요.
After
답변받을 이메일 주소를 입력해 주세요.
어떤 정보를 입력해야 하는지뿐 아니라 해당 정보가 어디에 사용되는지도 알려주면 사용자가 더 정확하게 입력할 수 있습니다.
오류 메시지에는 원인과 해결 방법이 필요합니다
잘못된 요청입니다, 오류가 발생했습니다 같은 문구는 문제가 있다는 사실만 전달합니다. 사용자는 무엇을 바꿔야 하는지 알 수 없어 같은 행동을 반복할 수 있습니다.
사용자가 직접 해결할 수 있는 문제라면 다음 세 가지를 포함합니다.
어디에서 문제가 발생했는가?
무엇이 잘못되었는가?
어떻게 수정할 수 있는가?
Before
입력값이 올바르지 않습니다.
After
이메일 주소에
@가 없습니다. 주소 형식을 다시 확인해 주세요.
Before
업로드에 실패했습니다.
After
파일이 10MB를 초과했습니다. 더 작은 파일을 선택해 주세요.
Before
예약할 수 없습니다.
After
선택한 시간의 예약이 마감되었습니다. 다른 시간을 선택해 주세요.
사용자가 직접 해결할 수 없는 오류라면 책임을 사용자에게 돌리지 않습니다. 현재 상태와 데이터의 처리 여부, 다시 시도할 수 있는 시점을 안내해야 합니다.
일시적으로 결제를 처리하지 못했습니다. 결제는 완료되지 않았으며 잠시 후 다시 시도해 주세요.
현재 서버 연결이 원활하지 않습니다. 작성한 내용은 이 기기에 임시로 보관했습니다.
정확한 원인을 알 수 없는 상황에서 존재하지 않는 이유를 단정해서는 안 됩니다. 확인된 사실과 사용자가 취할 수 있는 행동까지만 안내하는 것이 안전합니다.
오류는 발생 위치 가까이에 표시합니다
이메일 형식 오류는 이메일 입력란 근처에 표시하고, 파일 문제는 첨부 영역에서 보여주는 것이 좋습니다. 화면 상단에 모든 오류를 한꺼번에 표시하면 사용자가 문제가 발생한 위치를 찾기 어렵습니다.
폼을 제출했을 때 여러 오류가 있다면 첫 번째 오류로 포커스를 이동시키고, 각 필드에서도 개별 원인을 확인할 수 있도록 구성합니다. 색상만으로 오류를 구분하지 말고 아이콘과 설명을 함께 사용해야 합니다.
성공한 결과도 분명하게 알려주세요
제출이나 저장 이후 아무런 반응이 없으면 사용자는 버튼을 다시 누르거나 작업이 실패했다고 생각할 수 있습니다.
완료되었습니다보다 어떤 작업이 완료되었는지 구체적으로 알려줍니다.
변경한 프로필이 저장되었습니다.
예약이 취소되었으며 결제 금액은 영업일 기준 3일 이내에 환불됩니다.
프로젝트 문의가 접수되었습니다.
이후에 해야 할 행동이 있다면 함께 안내합니다.
이메일 인증 링크를 보냈습니다. 받은 편지함에서 인증을 완료해 주세요.
신청이 완료되었습니다. 마이페이지에서 진행 상태를 확인할 수 있습니다.
좋은 완료 메시지는 사용자의 불안을 줄이고 다음 행동까지 자연스럽게 연결합니다.
좋은 마이크로카피는 실제 화면과 흐름에서 검수합니다
문구 하나만 떼어 놓고 보면 자연스러워도 전체 화면 안에서는 정보가 반복되거나 중요한 조건이 늦게 나타날 수 있습니다.
마이크로카피를 검수할 때는 다음 다섯 가지 기준을 사용할 수 있습니다.
1. 명확성
사용자가 문장을 한 번 읽고 의미를 이해할 수 있는지 확인합니다.
내부 전문 용어나 상태 코드를 그대로 사용하지 않았는가?
행동을 구체적인 동사로 표현했는가?
주어가 없어도 행동의 대상이 명확한가?
두 가지 이상으로 해석될 가능성이 없는가?
운영자에게 익숙한 정책 이름이 사용자에게도 익숙한 것은 아닙니다. 꼭 필요한 용어라면 처음 등장할 때 짧게 설명합니다.
2. 타이밍
필요한 정보가 사용자의 행동보다 먼저 제공되는지 확인합니다.
입력 조건을 제출 후에 알리고 있지 않은가?
결제와 삭제의 영향을 실행 전에 설명했는가?
긴 작업이라면 예상 시간을 안내했는가?
사용자가 기다리는 동안 진행 상태를 알 수 있는가?
문구의 내용이 정확해도 너무 늦게 나타나면 사용자를 돕지 못합니다.
3. 행동과 결과
버튼을 누른 뒤 발생하는 일을 예상할 수 있는지 확인합니다.
확인,다음,완료가 지나치게 사용되지 않았는가?저장과 제출처럼 결과가 다른 행동을 구분했는가?
되돌리기 어려운 행동이 명확하게 표시되었는가?
주요 행동과 보조 행동의 시각적 위계가 맞는가?
4. 복구 가능성
문제가 생겼을 때 사용자가 다음 행동을 선택할 수 있어야 합니다.
오류가 발생한 위치를 알 수 있는가?
원인과 수정 방법을 함께 설명하는가?
입력한 내용이 유지되는지 알려주는가?
재시도, 이전 단계 또는 고객 지원 경로가 있는가?
오류 메시지의 목적은 잘못을 지적하는 것이 아니라 사용자가 흐름으로 돌아오게 돕는 것입니다.
5. 일관성과 실제 환경
서비스 전체에서 같은 언어 규칙을 사용하는지 확인합니다.
같은 대상과 행동에 같은 용어를 사용하는가?
존댓말과 문장 부호의 방식이 통일되어 있는가?
오류와 성공 메시지의 문체가 일관적인가?
모바일 화면에서 버튼과 안내 문구가 깨지지 않는가?
번역했을 때 길이가 늘어나도 레이아웃이 유지되는가?
스크린 리더가 상태 변화를 인식할 수 있는가?
마이크로카피는 디자인 파일에서만 검토해서는 부족합니다. 실제 데이터와 오류 상태를 넣은 화면에서 확인해야 합니다. 긴 사용자 이름, 예상보다 큰 숫자와 여러 줄의 번역 문구도 테스트하는 것이 좋습니다.
잘 쓴 문구는 사용자의 관심을 끄는 표현보다 사용자가 멈추지 않게 돕는 표현에 가깝습니다. 좋은 마이크로카피가 눈에 띄지 않는 이유는 사용자가 별도의 해석 없이 목적을 달성할 수 있기 때문입니다.
4PS는 사용자 흐름과 화면, 기능과 문구를 하나의 경험으로 설계합니다. 서비스에서 같은 문의나 입력 오류, 중간 이탈이 반복된다면 기능뿐 아니라 사용자가 마주하는 언어도 함께 점검해 보세요.