UX/UI
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼, 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 작지만 중요한 마이크로카피를 명확하게 설계하는 기준을 알아봅니다.
버튼, 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 작지만 중요한 마이크로카피를 명확하게 설계하는 기준을 알아봅니다.
작은 문장이 사용자의 다음 행동을 결정합니다.
사용자는 서비스를 이용하면서 수많은 문장을 만납니다. 버튼과 메뉴, 입력창의 안내 문구, 오류 메시지처럼 화면 안에서 사용자의 행동을 돕는 짧은 문장을 마이크로카피라고 합니다.
마이크로카피는 크기가 작아서 디자인 마지막 단계에 작성해도 되는 요소처럼 보입니다. 하지만 사용자가 현재 상태를 이해하고 다음 행동을 결정하는 데 직접적인 영향을 줍니다. 의미가 모호한 버튼은 클릭을 망설이게 하고, 원인을 알려주지 않는 오류 메시지는 같은 실패를 반복하게 만듭니다.
좋은 마이크로카피는 문장을 꾸미는 작업이 아닙니다. 사용자가 지금 무엇을 할 수 있는지, 행동하면 어떤 결과가 생기는지, 문제가 발생했을 때 어떻게 해결해야 하는지를 명확하게 안내하는 UX 설계입니다.
버튼은 행동 이후의 결과를 알려줘야 합니다.
구체적인 동사를 사용하세요.
확인, 완료, 다음처럼 범용적인 표현은 화면의 맥락을 알고 있을 때만 의미가 분명합니다. 사용자가 버튼을 눌렀을 때 신청이 제출되는지, 정보가 저장되는지, 다음 단계로 이동하는지 예상하기 어려울 수 있습니다.
가능하면 신청서 제출하기, 변경 내용 저장하기, 결제하고 주문하기처럼 실제로 실행되는 행동과 결과를 함께 표현하는 것이 좋습니다. 다만 모바일에서 버튼이 지나치게 길어지지 않도록 화면의 제목과 주변 정보에서 이미 충분히 설명된 단어는 줄일 수 있습니다.
되돌리기 어려운 행동은 명확하게 구분하세요.
계정 삭제나 결제 취소, 작성 내용 초기화처럼 결과를 되돌리기 어려운 행동은 확인이라는 말로 감추면 안 됩니다. 버튼 자체에서 계정 삭제하기처럼 결과를 분명하게 알려주고, 실행 전에 영향을 설명해야 합니다.
확인 창에서도 예와 아니요보다 삭제하기와 계속 이용하기처럼 선택 결과가 드러나는 표현이 안전합니다. 사용자는 질문을 다시 해석하지 않고도 원하는 행동을 선택할 수 있습니다.
버튼의 표현을 화면 전체에서 통일하세요.
같은 행동을 어떤 화면에서는 등록, 다른 화면에서는 추가, 또 다른 곳에서는 생성으로 표현하면 서로 다른 기능처럼 느껴질 수 있습니다. 주요 행동의 용어를 정하고 서비스 전체에서 일관되게 사용하는 것이 좋습니다.
용어 통일은 표현의 문제가 아니라 학습 비용의 문제입니다. 사용자가 한 번 이해한 규칙을 다른 화면에서도 그대로 사용할 수 있을 때 서비스가 더 단순하게 느껴집니다.
안내와 오류 메시지는 해결 방법까지 말해야 합니다.
입력 전에는 필요한 조건을 알려주세요.
사용자가 행동한 뒤에야 조건을 알려주면 불필요한 실패가 발생합니다. 비밀번호에 필요한 글자 수와 조합, 업로드할 수 있는 파일 형식과 용량처럼 미리 알 수 있는 조건은 입력 전에 가까운 위치에 안내해야 합니다.
안내 문구는 단순히 필드 이름을 반복할 필요가 없습니다. 이메일을 입력하세요보다 답변받을 이메일 주소를 입력해 주세요처럼 정보가 사용되는 목적을 알려주면 사용자가 더 정확하게 입력할 수 있습니다.
오류의 원인과 다음 행동을 함께 설명하세요.
잘못된 요청입니다, 오류가 발생했습니다와 같은 메시지는 문제가 있다는 사실만 전달합니다. 사용자는 무엇을 수정해야 하는지 알 수 없어 같은 행동을 반복하거나 서비스를 떠날 수 있습니다.
사용자가 해결할 수 있는 오류라면 문제가 발생한 위치와 수정 방법을 알려줘야 합니다.
입력한 이메일 형식을 다시 확인해 주세요.파일 크기는 10MB 이하여야 합니다.선택한 시간의 예약이 마감되었습니다. 다른 시간을 선택해 주세요.
사용자가 직접 해결할 수 없는 오류라면 책임을 사용자에게 돌리지 말고 현재 상태와 대응 방법을 안내합니다.
일시적으로 결제를 처리하지 못했습니다. 결제는 완료되지 않았으며 잠시 후 다시 시도해 주세요.현재 서버 연결이 원활하지 않습니다. 작성한 내용은 유지됩니다.
성공한 결과도 분명하게 알려주세요.
제출과 저장이 완료된 뒤 아무런 반응이 없으면 사용자는 버튼을 다시 누르거나 작업이 실패했다고 생각할 수 있습니다. 저장되었습니다보다 변경한 프로필이 저장되었습니다처럼 어떤 작업이 완료되었는지 알려주는 것이 좋습니다.
이후에 해야 할 행동이 있다면 함께 안내합니다. 문의가 접수된 뒤 예상 답변 시간을 보여주거나, 신청 완료 후 진행 상황을 확인할 위치를 알려주면 사용자의 불안을 줄일 수 있습니다.
좋은 마이크로카피는 실제 흐름 안에서 검토합니다.
마이크로카피를 작성할 때는 문장 하나만 따로 보는 것보다 사용자가 화면에 들어온 순간부터 행동을 완료할 때까지의 흐름을 확인해야 합니다. 제목과 설명, 버튼이 같은 내용을 반복하고 있지는 않은지, 중요한 조건이 행동 이후에 나타나지는 않는지 살펴봅니다.
내부에서 사용하는 전문 용어를 사용자가 이해할 수 있는 표현으로 바꾸는 것도 중요합니다. 서비스 운영자에게 익숙한 상태 값과 정책 이름이 일반 사용자에게도 익숙한 것은 아닙니다. 꼭 필요한 전문 용어라면 처음 등장할 때 의미를 설명해야 합니다.
문구는 실제 화면에서도 검토해야 합니다. 데스크톱에서는 자연스러운 문장이 모바일 버튼에서는 여러 줄로 깨질 수 있고, 번역하면 길이가 크게 달라질 수도 있습니다. 오류와 빈 화면, 로딩, 완료 상태까지 확인해야 서비스 전체의 언어가 완성됩니다.
잘 쓴 문구는 사용자의 관심을 끄는 표현보다 사용자가 멈추지 않게 돕는 표현에 가깝습니다. 4PS는 사용자 흐름과 화면, 문구를 따로 다루지 않고 하나의 경험으로 설계합니다. 서비스에서 반복되는 문의나 이탈이 있다면 기능뿐 아니라 사용자가 마주하는 언어도 함께 점검해 보세요.
Stay Inspired
Get fresh design insights, articles, and resources delivered straight to your inbox.
Latest Blogs
Stay Inspired
Get fresh design insights, articles, and resources delivered straight to your inbox.
UX/UI
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼, 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 작지만 중요한 마이크로카피를 명확하게 설계하는 기준을 알아봅니다.
버튼, 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 작지만 중요한 마이크로카피를 명확하게 설계하는 기준을 알아봅니다.
작은 문장이 사용자의 다음 행동을 결정합니다.
사용자는 서비스를 이용하면서 수많은 문장을 만납니다. 버튼과 메뉴, 입력창의 안내 문구, 오류 메시지처럼 화면 안에서 사용자의 행동을 돕는 짧은 문장을 마이크로카피라고 합니다.
마이크로카피는 크기가 작아서 디자인 마지막 단계에 작성해도 되는 요소처럼 보입니다. 하지만 사용자가 현재 상태를 이해하고 다음 행동을 결정하는 데 직접적인 영향을 줍니다. 의미가 모호한 버튼은 클릭을 망설이게 하고, 원인을 알려주지 않는 오류 메시지는 같은 실패를 반복하게 만듭니다.
좋은 마이크로카피는 문장을 꾸미는 작업이 아닙니다. 사용자가 지금 무엇을 할 수 있는지, 행동하면 어떤 결과가 생기는지, 문제가 발생했을 때 어떻게 해결해야 하는지를 명확하게 안내하는 UX 설계입니다.
버튼은 행동 이후의 결과를 알려줘야 합니다.
구체적인 동사를 사용하세요.
확인, 완료, 다음처럼 범용적인 표현은 화면의 맥락을 알고 있을 때만 의미가 분명합니다. 사용자가 버튼을 눌렀을 때 신청이 제출되는지, 정보가 저장되는지, 다음 단계로 이동하는지 예상하기 어려울 수 있습니다.
가능하면 신청서 제출하기, 변경 내용 저장하기, 결제하고 주문하기처럼 실제로 실행되는 행동과 결과를 함께 표현하는 것이 좋습니다. 다만 모바일에서 버튼이 지나치게 길어지지 않도록 화면의 제목과 주변 정보에서 이미 충분히 설명된 단어는 줄일 수 있습니다.
되돌리기 어려운 행동은 명확하게 구분하세요.
계정 삭제나 결제 취소, 작성 내용 초기화처럼 결과를 되돌리기 어려운 행동은 확인이라는 말로 감추면 안 됩니다. 버튼 자체에서 계정 삭제하기처럼 결과를 분명하게 알려주고, 실행 전에 영향을 설명해야 합니다.
확인 창에서도 예와 아니요보다 삭제하기와 계속 이용하기처럼 선택 결과가 드러나는 표현이 안전합니다. 사용자는 질문을 다시 해석하지 않고도 원하는 행동을 선택할 수 있습니다.
버튼의 표현을 화면 전체에서 통일하세요.
같은 행동을 어떤 화면에서는 등록, 다른 화면에서는 추가, 또 다른 곳에서는 생성으로 표현하면 서로 다른 기능처럼 느껴질 수 있습니다. 주요 행동의 용어를 정하고 서비스 전체에서 일관되게 사용하는 것이 좋습니다.
용어 통일은 표현의 문제가 아니라 학습 비용의 문제입니다. 사용자가 한 번 이해한 규칙을 다른 화면에서도 그대로 사용할 수 있을 때 서비스가 더 단순하게 느껴집니다.
안내와 오류 메시지는 해결 방법까지 말해야 합니다.
입력 전에는 필요한 조건을 알려주세요.
사용자가 행동한 뒤에야 조건을 알려주면 불필요한 실패가 발생합니다. 비밀번호에 필요한 글자 수와 조합, 업로드할 수 있는 파일 형식과 용량처럼 미리 알 수 있는 조건은 입력 전에 가까운 위치에 안내해야 합니다.
안내 문구는 단순히 필드 이름을 반복할 필요가 없습니다. 이메일을 입력하세요보다 답변받을 이메일 주소를 입력해 주세요처럼 정보가 사용되는 목적을 알려주면 사용자가 더 정확하게 입력할 수 있습니다.
오류의 원인과 다음 행동을 함께 설명하세요.
잘못된 요청입니다, 오류가 발생했습니다와 같은 메시지는 문제가 있다는 사실만 전달합니다. 사용자는 무엇을 수정해야 하는지 알 수 없어 같은 행동을 반복하거나 서비스를 떠날 수 있습니다.
사용자가 해결할 수 있는 오류라면 문제가 발생한 위치와 수정 방법을 알려줘야 합니다.
입력한 이메일 형식을 다시 확인해 주세요.파일 크기는 10MB 이하여야 합니다.선택한 시간의 예약이 마감되었습니다. 다른 시간을 선택해 주세요.
사용자가 직접 해결할 수 없는 오류라면 책임을 사용자에게 돌리지 말고 현재 상태와 대응 방법을 안내합니다.
일시적으로 결제를 처리하지 못했습니다. 결제는 완료되지 않았으며 잠시 후 다시 시도해 주세요.현재 서버 연결이 원활하지 않습니다. 작성한 내용은 유지됩니다.
성공한 결과도 분명하게 알려주세요.
제출과 저장이 완료된 뒤 아무런 반응이 없으면 사용자는 버튼을 다시 누르거나 작업이 실패했다고 생각할 수 있습니다. 저장되었습니다보다 변경한 프로필이 저장되었습니다처럼 어떤 작업이 완료되었는지 알려주는 것이 좋습니다.
이후에 해야 할 행동이 있다면 함께 안내합니다. 문의가 접수된 뒤 예상 답변 시간을 보여주거나, 신청 완료 후 진행 상황을 확인할 위치를 알려주면 사용자의 불안을 줄일 수 있습니다.
좋은 마이크로카피는 실제 흐름 안에서 검토합니다.
마이크로카피를 작성할 때는 문장 하나만 따로 보는 것보다 사용자가 화면에 들어온 순간부터 행동을 완료할 때까지의 흐름을 확인해야 합니다. 제목과 설명, 버튼이 같은 내용을 반복하고 있지는 않은지, 중요한 조건이 행동 이후에 나타나지는 않는지 살펴봅니다.
내부에서 사용하는 전문 용어를 사용자가 이해할 수 있는 표현으로 바꾸는 것도 중요합니다. 서비스 운영자에게 익숙한 상태 값과 정책 이름이 일반 사용자에게도 익숙한 것은 아닙니다. 꼭 필요한 전문 용어라면 처음 등장할 때 의미를 설명해야 합니다.
문구는 실제 화면에서도 검토해야 합니다. 데스크톱에서는 자연스러운 문장이 모바일 버튼에서는 여러 줄로 깨질 수 있고, 번역하면 길이가 크게 달라질 수도 있습니다. 오류와 빈 화면, 로딩, 완료 상태까지 확인해야 서비스 전체의 언어가 완성됩니다.
잘 쓴 문구는 사용자의 관심을 끄는 표현보다 사용자가 멈추지 않게 돕는 표현에 가깝습니다. 4PS는 사용자 흐름과 화면, 문구를 따로 다루지 않고 하나의 경험으로 설계합니다. 서비스에서 반복되는 문의나 이탈이 있다면 기능뿐 아니라 사용자가 마주하는 언어도 함께 점검해 보세요.
Stay Inspired
Get fresh design insights, articles, and resources delivered straight to your inbox.
Latest Blogs
Stay Inspired
Get fresh design insights, articles, and resources delivered straight to your inbox.
UX/UI
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼과 안내 문구가 사용자 경험을 바꾸는 방법
버튼, 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 작지만 중요한 마이크로카피를 명확하게 설계하는 기준을 알아봅니다.
버튼, 입력 안내, 오류 메시지처럼 짧은 문장은 사용자의 다음 행동을 결정합니다. 작지만 중요한 마이크로카피를 명확하게 설계하는 기준을 알아봅니다.
작은 문장이 사용자의 다음 행동을 결정합니다.
사용자는 서비스를 이용하면서 수많은 문장을 만납니다. 버튼과 메뉴, 입력창의 안내 문구, 오류 메시지처럼 화면 안에서 사용자의 행동을 돕는 짧은 문장을 마이크로카피라고 합니다.
마이크로카피는 크기가 작아서 디자인 마지막 단계에 작성해도 되는 요소처럼 보입니다. 하지만 사용자가 현재 상태를 이해하고 다음 행동을 결정하는 데 직접적인 영향을 줍니다. 의미가 모호한 버튼은 클릭을 망설이게 하고, 원인을 알려주지 않는 오류 메시지는 같은 실패를 반복하게 만듭니다.
좋은 마이크로카피는 문장을 꾸미는 작업이 아닙니다. 사용자가 지금 무엇을 할 수 있는지, 행동하면 어떤 결과가 생기는지, 문제가 발생했을 때 어떻게 해결해야 하는지를 명확하게 안내하는 UX 설계입니다.
버튼은 행동 이후의 결과를 알려줘야 합니다.
구체적인 동사를 사용하세요.
확인, 완료, 다음처럼 범용적인 표현은 화면의 맥락을 알고 있을 때만 의미가 분명합니다. 사용자가 버튼을 눌렀을 때 신청이 제출되는지, 정보가 저장되는지, 다음 단계로 이동하는지 예상하기 어려울 수 있습니다.
가능하면 신청서 제출하기, 변경 내용 저장하기, 결제하고 주문하기처럼 실제로 실행되는 행동과 결과를 함께 표현하는 것이 좋습니다. 다만 모바일에서 버튼이 지나치게 길어지지 않도록 화면의 제목과 주변 정보에서 이미 충분히 설명된 단어는 줄일 수 있습니다.
되돌리기 어려운 행동은 명확하게 구분하세요.
계정 삭제나 결제 취소, 작성 내용 초기화처럼 결과를 되돌리기 어려운 행동은 확인이라는 말로 감추면 안 됩니다. 버튼 자체에서 계정 삭제하기처럼 결과를 분명하게 알려주고, 실행 전에 영향을 설명해야 합니다.
확인 창에서도 예와 아니요보다 삭제하기와 계속 이용하기처럼 선택 결과가 드러나는 표현이 안전합니다. 사용자는 질문을 다시 해석하지 않고도 원하는 행동을 선택할 수 있습니다.
버튼의 표현을 화면 전체에서 통일하세요.
같은 행동을 어떤 화면에서는 등록, 다른 화면에서는 추가, 또 다른 곳에서는 생성으로 표현하면 서로 다른 기능처럼 느껴질 수 있습니다. 주요 행동의 용어를 정하고 서비스 전체에서 일관되게 사용하는 것이 좋습니다.
용어 통일은 표현의 문제가 아니라 학습 비용의 문제입니다. 사용자가 한 번 이해한 규칙을 다른 화면에서도 그대로 사용할 수 있을 때 서비스가 더 단순하게 느껴집니다.
안내와 오류 메시지는 해결 방법까지 말해야 합니다.
입력 전에는 필요한 조건을 알려주세요.
사용자가 행동한 뒤에야 조건을 알려주면 불필요한 실패가 발생합니다. 비밀번호에 필요한 글자 수와 조합, 업로드할 수 있는 파일 형식과 용량처럼 미리 알 수 있는 조건은 입력 전에 가까운 위치에 안내해야 합니다.
안내 문구는 단순히 필드 이름을 반복할 필요가 없습니다. 이메일을 입력하세요보다 답변받을 이메일 주소를 입력해 주세요처럼 정보가 사용되는 목적을 알려주면 사용자가 더 정확하게 입력할 수 있습니다.
오류의 원인과 다음 행동을 함께 설명하세요.
잘못된 요청입니다, 오류가 발생했습니다와 같은 메시지는 문제가 있다는 사실만 전달합니다. 사용자는 무엇을 수정해야 하는지 알 수 없어 같은 행동을 반복하거나 서비스를 떠날 수 있습니다.
사용자가 해결할 수 있는 오류라면 문제가 발생한 위치와 수정 방법을 알려줘야 합니다.
입력한 이메일 형식을 다시 확인해 주세요.파일 크기는 10MB 이하여야 합니다.선택한 시간의 예약이 마감되었습니다. 다른 시간을 선택해 주세요.
사용자가 직접 해결할 수 없는 오류라면 책임을 사용자에게 돌리지 말고 현재 상태와 대응 방법을 안내합니다.
일시적으로 결제를 처리하지 못했습니다. 결제는 완료되지 않았으며 잠시 후 다시 시도해 주세요.현재 서버 연결이 원활하지 않습니다. 작성한 내용은 유지됩니다.
성공한 결과도 분명하게 알려주세요.
제출과 저장이 완료된 뒤 아무런 반응이 없으면 사용자는 버튼을 다시 누르거나 작업이 실패했다고 생각할 수 있습니다. 저장되었습니다보다 변경한 프로필이 저장되었습니다처럼 어떤 작업이 완료되었는지 알려주는 것이 좋습니다.
이후에 해야 할 행동이 있다면 함께 안내합니다. 문의가 접수된 뒤 예상 답변 시간을 보여주거나, 신청 완료 후 진행 상황을 확인할 위치를 알려주면 사용자의 불안을 줄일 수 있습니다.
좋은 마이크로카피는 실제 흐름 안에서 검토합니다.
마이크로카피를 작성할 때는 문장 하나만 따로 보는 것보다 사용자가 화면에 들어온 순간부터 행동을 완료할 때까지의 흐름을 확인해야 합니다. 제목과 설명, 버튼이 같은 내용을 반복하고 있지는 않은지, 중요한 조건이 행동 이후에 나타나지는 않는지 살펴봅니다.
내부에서 사용하는 전문 용어를 사용자가 이해할 수 있는 표현으로 바꾸는 것도 중요합니다. 서비스 운영자에게 익숙한 상태 값과 정책 이름이 일반 사용자에게도 익숙한 것은 아닙니다. 꼭 필요한 전문 용어라면 처음 등장할 때 의미를 설명해야 합니다.
문구는 실제 화면에서도 검토해야 합니다. 데스크톱에서는 자연스러운 문장이 모바일 버튼에서는 여러 줄로 깨질 수 있고, 번역하면 길이가 크게 달라질 수도 있습니다. 오류와 빈 화면, 로딩, 완료 상태까지 확인해야 서비스 전체의 언어가 완성됩니다.
잘 쓴 문구는 사용자의 관심을 끄는 표현보다 사용자가 멈추지 않게 돕는 표현에 가깝습니다. 4PS는 사용자 흐름과 화면, 문구를 따로 다루지 않고 하나의 경험으로 설계합니다. 서비스에서 반복되는 문의나 이탈이 있다면 기능뿐 아니라 사용자가 마주하는 언어도 함께 점검해 보세요.
Stay Inspired
Get fresh design insights, articles, and resources delivered straight to your inbox.
Latest Blogs
Stay Inspired
Get fresh design insights, articles, and resources delivered straight to your inbox.