버튼의 크기는 고정한 채 선택 영역만 늘리기

프로젝트를 진행할 때 버튼의 사이즈는 무척 중요한 요소입니다.

특히 모바일이나 태블릿의 경우에는 그 중요성이 더 커진다고 생각합니다.

왜냐하면 PC의 경우 작은 사이즈의 버튼이라도 마우스라는 도구를 이용하기 때문에 상대적으로 정확한 위치를 선택하기 편한 반면 모바일이나 태블릿의 경우 선택의 주체가 대부분 손가락이기 때문입니다.

 

물론 버튼의 사이즈 자체를 키우는 것이 가장 이상적인 방법이지만 그렇지 않은 경우에 자주 사용하는 팁에 대해 설명해 보겠습니다.

const Button = styled.button`
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: tomato;
  
  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 200%;
    height: 200%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
`;

이렇게 css만으로 간단하게 처리하면 보이는 버튼의 사이즈는 동일하지만 버튼의 선택 영역은 2배인 40px로 적용되기 때문에 유저가 더 편하게 버튼을 선택할 수 있게 적용할 수 있습니다.