버튼을 누르다 손가락을 밖으로 빼면? — 버튼의 '단 하나의 임무'

버튼이 하는 일은 하나, 근데 그게 어렵다

우리가 매일 수십 번씩 누르는 버튼. 화면 속 '전송', '결제', '확인' 버튼들 말이에요. 너무 당연해서 아무도 신경 안 쓰지만, 사실 이 작은 사각형 안에는 수십 년간 쌓인 고민이 압축돼 있어요. 이번에 소개할 글은 바로 그 버튼 하나가 제 역할을 제대로 해내기까지 얼마나 섬세한 설계가 필요한지를 파고든 이야기예요. 제목처럼 "버튼은 딱 한 가지 임무만 있다"는 건데, 그 한 가지를 제대로 해내는 게 생각보다 어렵거든요.

핵심 질문은 이거예요. 여러분이 화면의 버튼을 손가락으로 꾹 누른 상태에서, "어 잘못 눌렀다" 싶어서 손가락을 버튼 밖으로 슬쩍 밀어낸 다음 뗐다고 해봐요. 이때 버튼은 눌린 걸로 쳐야 할까요, 아니면 취소된 걸로 쳐야 할까요?

취소할 수 있는 '탈출구'의 비밀

정답은 "취소돼야 한다"예요. 그리고 거의 모든 운영체제와 앱이 실제로 이렇게 동작해요. 이게 뭐냐면, 버튼은 '눌렀을 때'가 아니라 '눌렀다가 그 버튼 위에서 뗐을 때' 비로소 동작하도록 설계돼 있거든요. 그래서 누르는 도중에 손가락이나 마우스 커서를 버튼 밖으로 빼면, 아직 동작이 확정되지 않았기 때문에 그냥 없던 일이 돼요.

이게 왜 중요하냐면, 사용자에게 '탈출구'를 주기 때문이에요. 결제 버튼을 눌렀는데 순간 마음이 바뀌었어요. 물리 세계라면 이미 늦었겠지만, 잘 만든 버튼은 손가락을 떼기 직전까지 마음을 바꿀 기회를 줘요. 손가락을 밖으로 빼고 떼면 취소, 다시 안으로 넣고 떼면 실행. 우리가 의식하지 못한 사이에 이 '누르는 중 슬쩍 빼서 취소하기'를 다들 해본 적 있을 거예요. 이 작은 배려가 있어야 버튼을 안심하고 누를 수 있는 거죠.

버튼의 여러 얼굴, 상태(state)

그래서 버튼은 겉보기엔 하나지만 속으로는 여러 '상태'를 오가요. 아무것도 안 한 기본 상태, 마우스를 올려놓은 호버(hover) 상태, 꾹 누르고 있는 활성(active/pressed) 상태, 그리고 누르는 중에 밖으로 빠져나간 상태까지요. 좋은 버튼은 이 각 상태마다 색이나 그림자로 살짝 다른 모습을 보여줘서, 지금 내 입력이 어떻게 받아들여지고 있는지 사용자에게 알려줘요. 예를 들어 꾹 누르면 버튼이 살짝 어두워지거나 안으로 들어가 보이는 효과가 그거예요. "네, 지금 누르는 거 인식하고 있어요"라는 신호죠.

원래 물리 버튼은 이런 걸 신경 쓸 필요가 없었어요. 스프링이 눌리고 튀어 오르는 촉감이 그 자체로 피드백이었으니까요. 근데 화면 속 버튼은 아무 촉감이 없잖아요. 그래서 이 모든 상태 변화를 시각적으로, 그리고 때로는 진동으로 흉내 내야 해요. 이 글은 그렇게 물리 버튼이 주던 안정감을 디지털에서 재현하려는 노력의 역사를 짚어요. 터치스크린 시대로 오면서 마우스엔 있던 '호버'가 사라지는 등, 시대마다 버튼이 마주한 새로운 숙제들도 흥미롭게 풀어내고요.

한국 개발자에게 주는 시사점

프론트엔드나 앱을 만드는 분이라면 이건 남 얘기가 아니에요. 우리가 <button>을 쓰거나 네이티브 버튼 컴포넌트를 쓰면 이 '드래그해서 취소' 동작이 공짜로 딸려와요. 근데 문제는, div에 클릭 이벤트를 붙여서 버튼을 직접 만드는 경우예요. 이러면 이 탈출구 기능이 통째로 사라져요. 실수로 눌러도 취소가 안 되고, 스크린리더 같은 접근성 도구에서 버튼으로 인식도 안 되고요. 이 글은 "괜히 버튼을 직접 만들지 말고, 브라우저와 OS가 오랜 세월 다듬어놓은 진짜 버튼을 쓰라"는 교훈을 아주 설득력 있게 줘요.

또 하나, 버튼의 동작을 'mousedown(누르는 순간)'이 아니라 'click(눌렀다 같은 자리에서 뗀 순간)'에 붙여야 하는 이유도 여기서 나와요. 급하게 반응 속도 욕심에 누르는 순간 바로 실행되게 만들면, 사용자의 탈출구를 빼앗는 셈이거든요. 이런 디테일이 결국 "이 앱은 뭔가 믿음직하다"는 인상을 만들어요.

정리하면, 버튼의 유일한 임무는 "사용자가 원할 때 정확히, 원치 않으면 확실히 취소되며 동작하는 것"이에요. 여러분은 지금 만들고 있는 화면에서, 사용자에게 '잘못 눌렀을 때 빠져나갈 구멍'을 제대로 남겨두고 계신가요?