CSS로 모바일 터치에 대응하도록 버튼 클릭 가능 영역을 넓히는 방법

웹 UI에서 사용자 액션이 가장 많은 것은 페이지를 이동하는 링크/버튼을 클릭하는 것입니다.

최근에는 반응형 레이아웃이 일반화되면서 UI에 데스크톱과 모바일 화면에 겸용으로 사용하는 요소들이 많아졌습니다.

같은 버튼이지만 모바일 화면에서는 마우스 클릭 같은 정밀한 클릭 대신 화면 영역을 터치하는 근삿값에 기초한 사용자 입력을 사용합니다.

데스크톱 화면용으로 제작된 하이퍼링크나 버튼은 모바일 기기에서는 너무 작게 보이거나, 터치하기에는 너무 작은 영역을 차지할 수 있습니다. 그래서 터치를 해도 클릭이 동작하는 영역 바깥이 터치되면서 기능이 동작하지 않게 되기도 합니다.

모바일 화면에서는 하이퍼링크 텍스트 크기를 더 크게 하거나, 버튼 크기를 키우면 되겠지만, 생각만큼 그렇게 단순한 문제가 아닙니다. 경우에 따라서는 모바일 용으로 레이아웃을 많이 수정해야 할 수도 있고, 터치 가능한 영역을 넓히면서 모양이 예뻐 보이지 않게 될 수도 있습니다.

다음 버튼은 데스크탑 화면에서는 마우스로 클릭하기에 충분히 큰 버튼이지만, 모바일 기기에서는 터치하기에는 약간 애매모호한 크기가 됩니다.

button {
    border: none;
    background-color: #f8f8f8;
    width: 80px;
    height: 30px;
    border-radius: 8px;
    padding: 0;
    position: relative;
    cursor: pointer;
}
button:hover{
    background-color: #ccc;
}

가상 요소를 이용하면, 화면 레이아웃 변화 없이 모바일 화면의 버튼 터치 영역을 넓힐 수 있습니다.

버튼에 다음과 같이 가상 요소를 추가합니다. 미디어쿼리로 웹 브라우저 너비가 768px 보다 작으면 가상 요소를 추가해서 버튼 터치 영역을 넓힙니다.

@media screen and (max-width:768px){
    button::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 150%;
        height: 200%;
        border-radius: 20px;
        border: 1px dashed #ccc; /* 가상 요소 영역을 표시하기 위한 용도로 실제로는 필요 없음 */
        background-color: rgba(255,0,0,0.1); /* 가상 요소 영역을 표시하기 위한 용도로 실제로는 필요 없음 */
    }
}

각 속성들이 하는 기능을 하나씩 확인해보겠습니다.

"::after"로 추가한 가상 요소는 버튼의 가로 1.5배, 세로 2배 크기를 가지며, 버튼 영역 위에 위치하게 됩니다.

디버깅을 위해 눈에 보이도록 테두리와 반투명 색상을 더했지만, 실제로는 보이지 않는 가상 요소가 버튼을 덮고 그 위에 위치하고 있게 됩니다.

더 넓은 영역을 가진 가상 요소가 터치되면, 이벤트 버블링에 의해 버튼에 터치 이벤트가 발생합니다.

이렇게 하면 CSS나 미디어쿼리로 여러 레이아웃을 손 보지 않고도 터치가 일어나는 버튼의 터치 영역을 넓혀서 모바일 사용성을 끌어올릴 수 있습니다.