brunch
매거진 UX Gas Writing

'취소', '닫기', '나가기' 버튼명의 미묘한 차이점

강물을 거스르기 위한 준비

by 글쓰는개미핥기

여러분, 앱이나 웹사이트를 사용하다가 '취소'와 '닫기' 버튼 중 어떤 것을 눌러야 할지 고민해 본 적 있으신가요? 아니면 '예약 취소를 취소할까요?' 같은 문구를 보고 잠시 멈칫한 경험이 있나요? 사용자가 겪는 이 경험을 메이커들은 작은 에피소드로 취급하는 경우다 많아요. 하지만, 이러한 작은 경험이 쌓여 큰 영향을 미치게 되는 거죠.


그러면 '취소'를 안 쓰면 되는 거 아니냐? 라고 반문할 수 있는데요. 실제 업무에서는 할 수가 없어요. 대신 '취소'를 효과적으로 사용할 수는 있어요. 바로 '취소'라는 단어의 배리에이션을 넓히는 거죠. 즉, '취소', '닫기', '나가기'와 같이 미묘한 차이를 지닌 케이스를 구분해서 사용하는 거예요.



취소(Cancel) 버튼: "잠깐만요, 다시 생각해볼게요"


'취소 버튼은 무엇을 의미할까요?'


취소는 버튼 UI에서 가장 많이 볼 수 있는 레이블 중 하나예요. 우선 사전적인 의미부터 볼까요.


취소(取消)

명사

1. 발표한 의사를 거두어들이거나 예정된 일을 없애 버림. 강연 취소.

2. [법률] 일단 유효하게 성립한 법률 행위의 효력을 소급하여 소멸하는 의사 표시.


우리가 일반적으로 아는 사전적 의미는 '발표한 의사를 거두어들이거나 예정된 일을 없애버림'을 의미하지만, 실제 인터페이스에서는 더 넓고 다양한 의미로 사용하죠.


"아, 이건 내가 원하던 거 아니야" - 하려던 행동을 번복할 때

"음, 그만둘래" - 진행 중이던 작업을 중단할 때

"이전으로 돌아가고 싶어" - 이미 한 작업을 되돌리고 싶을 때


재미있는 점은 '취소'라는 단어가 상황에 따라 조금씩 다르게 해석될 수 있다는 건데요. 그래서 사용자들은 종종 "이 취소 버튼을 누르면 정확히 어떤 일이 일어날까?" 하고 고민하게 되는 경우가 많아요.


'취소 버튼의 위치는 왼쪽이에요. 보통은 말이죠.'


모바일 팝업에서는 대개 취소 버튼을 왼쪽에 배치해요. 이는 오른쪽 버튼이 '순방향' 또는 '긍정적' 동작을, 왼쪽 버튼은 '역방향' 또는 '부정적' 동작을 수행한다는 UI 관행을 따르는 것이죠. 다만, '취소'하는 행위가 순행이 될 때가 있어요. 바로 사용자가 예약을 취소하고 싶을 때 제공되는 '예약 취소' 버튼이요.


이처럼 취소 버튼은 단순히 ‘되돌리기’ 이상의 역할을 하기도 해요. 실제로 사용자가 취소를 눌렀을 때 어떤 일이 일어나는지 명확히 안내하는 것이 매우 중요해요. 예를 들어, 입력 중인 내용을 잃게 되는지, 아니면 저장이 되는지 등을 분명하게 알려줘야 하죠.


또한, 실수로 잘못 누르는 일이 없도록 취소 버튼은 주요 버튼과 시각적으로 구분하거나, 위치를 떨어뜨려 배치할 필요도 있어요. 상황에 따라 ‘작성 취소’, ‘예약 취소’처럼 구체적인 레이블을 사용하면 혼란을 줄일 수 있어요. 만약 중요한 작업이라면, 한 번 더 확인하는 프롬프트를 띄워 사용자의 실수를 예방하는 것도 좋은 방법이에요.


결국 취소 버튼의 목적은 사용자가 불안하지 않게, 그리고 실수 없이 원하는 선택을 할 수 있도록 돕는 데 있다고 할 수 있어요.


닫기(Close) 버튼: "이 창만 없애주세요"


'닫기 버튼의 단순하지만 명확한 역할'


닫기 버튼은 현재 열려 있는 창이나 대화상자를 단순히 종료하는 기능을 해요. 사용자가 이전에 '열었던' 것을 '닫는' 명확한 개념을 제공하죠. '닫기'는 변경 사항을 저장하거나 저장하지 않는다는 의미를 명확히 전달하지 않기 때문에, 주로 사용자가 편집할 수 없는 화면이나 단순히 정보를 보여주는 화면에서 효과적으로 작동해요.


'X 아이콘의 모호함'


'X' 아이콘은 닫기 버튼으로 자주 사용되지만, 실은 꽤 모호한 신호를 보낼 수 있어요. 단순히 닫는 것인지, 뒤로가는 것인지, 앱이 원하는 걸 거절하고 다음으로 나아가는 것인지 말이죠. 그러니 가능하면 'X' 아이콘만 사용하기보다는 텍스트 레이블을 함께 제공하는 것이 좋겠죠.


특히 중요한 점은, 닫기 버튼과 완료(저장) 버튼을 한 화면에 같이 두지 않는 것이에요. 둘 다 창을 닫는다는 점에서는 비슷하지만, 닫기는 단순히 화면을 종료하는 것이고, 완료는 변경 사항을 저장하거나 적용하는 의미가 있거든요. 만약 두 버튼이 함께 있다면 사용자는 어떤 버튼을 눌러야 할지 혼란스러울 수 있어요.


닫기 버튼은 주로 오른쪽 상단에 위치하며, 팝업이나 모달 같은 임시 창에서 많이 쓰여요. 사용자가 실수로 닫기 버튼을 눌렀을 때 중요한 정보가 사라지지 않도록, 필요하다면 닫기 전에 저장 여부를 묻는 안내창을 띄우는 것도 좋은 방법이죠. 무엇보다 닫기 버튼은 사용자가 부담 없이 창을 정리할 수 있게 도와주는 역할을 한다는 점을 기억하세요.


나가기(Exit) 버튼: "이제 정말 떠날게요"


'나가기가 의미하는 바는 이탈(離脫)'


'나가기'는 현재 애플리케이션의 범위를 벗어나거나 주요 부분을 떠날 때 사용해요. 단순히 한 화면이나 팝업을 닫는 것이 아니라, 전체 애플리케이션을 종료하거나 주요 기능 영역을 완전히 벗어난다는 의미를 지니고 있죠.


영어에서는 'Exit'와 'Quit'이 비슷한 의미로 사용되지만, 미묘한 차이가 있어요. 'Exit'은 장소나 공간을 떠난다는 의미가 강하고, 'Quit'은 무언가를 그만두거나 포기한다는 의미가 강하죠. 플랫폼별로도 차이가 있는데, Windows에서는 주로 'Exit'을, Mac에서는 'Quit AppName'을 표준으로 사용해요.


나가기 버튼은 사용자의 행동에 확실한 결정을 요구하는 경우에 주로 등장해요. 예를 들어, 게임에서 ‘나가기’를 누르면 진행 중인 모든 내용이 종료되고, 다시 돌아오려면 처음부터 시작해야 할 수도 있죠. 그래서 나가기 버튼에는 종종 “정말 종료하시겠습니까?”와 같은 추가 확인 메시지가 따라붙어요.


또, 나가기를 누르면 저장되지 않은 데이터가 사라질 수 있기 때문에, 사용자에게 현재 상태가 어떻게 처리되는지 반드시 안내해야 해요. 나가기와 닫기, 취소 버튼이 혼동되지 않도록, 각각의 기능과 결과를 명확하게 구분해서 레이블링하는 것이 중요해요. 이렇게 하면 사용자가 실수로 전체 앱을 종료하는 일을 막을 수 있어요.


효과적인 버튼 레이블 작성을 위한 5가지 UX Writing 팁


1. 동사를 활용해 명확하게 알려주세요.

버튼 레이블은 사용자가 즉시 행동을 이해할 수 있도록 구체적인 동사로 시작하는 것이 좋아요. 예를 들어, 단순히 "확인" 대신 "저장하기", "제출하기", "작성 취소하기"처럼 실제로 어떤 일이 일어나는지 명확하게 표현하세요. 이렇게 하면 사용자는 버튼을 눌렀을 때 기대할 수 있는 결과를 쉽게 예측할 수 있어요.


2. 짧고 간결하게 작성하세요.


버튼은 공간이 제한적이기 때문에, 핵심 메시지만 담는 것이 중요해요. 2~3단어 이내로 요점을 전달하고, 불필요한 수식어나 반복적인 단어는 과감히 생략하세요. 간결한 버튼은 시각적으로도 깔끔하고, 사용자가 빠르게 인식할 수 있어요. 제발 길게 안 쓰면 사용자가 모르는 거 아니냐고 물어보지 마세요. 맥락을 기반으로 사용자는 다 알아들으니까요.


3. 이중 부정은 혼란을 일으켜요.


"예약 취소를 취소할까요?"처럼 부정이 반복되면 사용자는 쉽게 혼란을 느낄 수 있어요. 가능하다면 "예약을 유지할까요?"처럼 긍정적이고 단순한 문장으로 바꿔보세요. 명확한 메시지는 사용자의 실수를 줄이고, 불필요한 고민을 덜어줘요.


4. 버튼을 누르면 무슨 일이 생길지 알려주세요.


버튼을 클릭했을 때 어떤 변화가 생기는지 분명히 안내하세요. 예를 들어, "저장하고 계속하기", "닫고 무시하기"처럼 결과를 구체적으로 써주면, 사용자는 버튼을 누르기 전부터 다음 행동을 예측할 수 있어요. 이는 불안감을 줄이고, 결정에 자신감을 더해주죠.


5. 일관성은 지키되, 맥락에 맞게 조정하세요


동일한 기능에는 같은 레이블을 사용해 일관성을 유지하세요. 하지만 상황에 따라 '취소'가 모호하다면 '작성 취소', '예약 취소'처럼 구체적으로 바꿔야 해요. 맥락에 맞는 레이블은 사용자의 이해도를 높이고, 실수를 예방하는 데 큰 도움이 돼요.


작은 단어가 만드는 큰 차이


UX Writing에서 버튼 레이블은 단순한 텍스트 이상의 가치를 가져요. '취소', '닫기', '나가기'는 각각 다른 사용자 의도와 시스템 반응을 나타내는 중요한 소통 도구이죠..


마이크로카피의 힘은 복잡할 수 있는 경험을 간단하고 직관적으로 만드는 데 있어요. 올바른 버튼 레이블 하나로 사용자는 "이 버튼을 클릭하면 무슨 일이 일어날까?"라는 불안감 없이 제품을 편안하게 사용할 수 있게 되죠.


여러분이 만드는 서비스의 버튼 레이블을 다시 한번 둘러보세요. 사용자가 목적지까지 혼란 없이 도달할 수 있도록 돕는지 말이죠. 버튼에 쓰인 작은 단어가 시작을 알릴 수도 있고, 끝을 결정지을 수도 있는 핵심 요소라는 점을 잊지 말아주세요.

keyword
매거진의 이전글한국어 문장 구조의 차이