나눔웹 UX/UI 꿀팁
모바일에서 버튼 누를 때 생기는 촌스러운 '회색 박스' 없애는 법
스마트폰에서 공들여 만든 예쁜 버튼이나 메뉴를 터치하는 순간, 버튼 위로 반투명한 회색(또는 파란색) 네모 박스가 깜빡이며 덮이는 현상을 보신 적 있으신가요?
이 기능은 브라우저가 제공하는 기본 터치 피드백이지만, 공들여 작업한 웹사이트의 디자인을 한순간에 '오래된 옛날 사이트'처럼 보이게 만드는 주범입니다.
💡 일반 웹사이트와 진짜 '앱(App)'의 차이
우리가 자주 쓰는 카카오톡이나 인스타그램 같은 네이티브 앱에서는 버튼을 누를 때 촌스러운 회색 박스가 생기지 않습니다. 웹사이트를 진짜 앱처럼 쫀득하고 고급스럽게 만들려면 이 '탭 하이라이트(Tap Highlight)'를 반드시 제거해야 합니다.
1. 단 한 줄의 마법: 탭 하이라이트 투명하게 만들기
해결 방법은 아주 간단합니다. CSS에 -webkit-tap-highlight-color 속성을 추가하고 값을 투명(transparent)으로 지정해 주면 브라우저의 간섭이 완벽하게 사라집니다.
/* 모든 링크(a)와 버튼(button)의 기본 터치 음영 제거 */
a, button {
-webkit-tap-highlight-color: transparent;
}
2. 1%의 디테일: '진짜 눌리는 느낌' 추가하기
음영만 덜렁 없애버리면 사용자는 '내가 버튼을 제대로 누른 게 맞나?' 하고 헷갈릴 수 있습니다.
음영을 없앤 대신, 버튼을 누르는 순간 크기가 살짝 작아지는 애니메이션(마이크로 인터랙션)을 추가해 보세요. 고객은 무의식적으로 엄청난 고급스러움을 느끼게 됩니다.
.my-button {
transition: transform 0.15s ease; /* 부드러운 움직임 세팅 */
}
/* 버튼을 터치(클릭)하는 순간 실행되는 효과 */
.my-button:active {
transform: scale(0.96); /* 원래 크기의 96%로 살짝 줄어듦 */
}
"하이엔드는 눈에 띄지 않는 아주 작은 불편함까지 통제합니다."
나눔웹은 PC 웹사이트를 넘어 모바일 환경에서의 완벽한 터치 인터페이스를 구현하여
마치 네이티브 앱(App)을 사용하는 듯한 압도적인 사용자 경험을 제공합니다.