Build UIs that don't suck #3: What are these, buttons for ants?

✨cover in this video

1. Why just making things bigger and trying to compensate by adjusting padding all over the place sucks ( 요소를 키우고 여기저기 패딩을 조정해 보완하는 방식이 왜 별로인가)
2. Using negative margins, which work well, until they don't ( 처음엔 잘 작동하지만 결국 문제가 생기는 네거티브 마진)
3. Using absolute positioning to increase the touch target size without impacting the layout ( 레이아웃에 영향을 주지 않으면서 터치 타겟 영역을 키우기 위해 absolute positioning을 사용하는 법)
4. How modern CSS media features let us optimize the experience for both mobile and desktop users at the same time ( 최신 CSS 미디어 기능을 활용해 모바일과 데스크탑 사용자 모두에게 최적화된 경험을 제공하는 법)

버튼의 터치 타겟 설정

문제상황: 버튼 터치영역을 키우면서 레이아웃이 달라짐
버튼 크기를 키움에 따라 주변의 패딩을 조정해주어야 한다. => 여러 위치의 수치를 조정해야하는 불편함.

<button type="button" class="relative flex size-6 items-center">
  <svg class="w-2.5">
    <path/>
  </svg>
<button/>

해결방안
1. span을 button 태그 내부에 추가해주고 원하는 클릭 영역만큼 사이즈를 지정해준다.
2. span은 button태그 내부에 있기 때문에 클릭영역으로 포함된다.
3. button 태그의 flex items-center justify-center이 span의 중앙 정렬을 만들지만 flex를 주지않고도 span태그에 top-1/2 left-1/2 -translate-1/2을 주어 가운데 정렬을 강제할 수 있다.
4. hover효과를 주고있다면 svg에서만 나타나는게 아닌 span 영역에서도 나타나 어색할 수 있다.
5. media(pointer:fine)을 주어 마우스환경일 땐 hidden되도록 함. 모바일 환경에서는 터치영역을 넓혀주면 좋지만 브라우저에서는 사용자들이 보통 버튼위치를 정확히 누르는 경향이 있기 때문임.

<button type="button" class="relative flex size-6 items-center hover:bg-zinc-900">
  <span class="absolute size-12 [@media(pointer:fine)]:hidden"></span>
 	<svg class="w-2.5">
      <path/>
  	</svg>
<button/>
  

팁

• 버튼 배경색 조정하여 UI로 영역 시각적으로 알려주기
• 모바일에서 터치 타겟 권장 사이즈는 44px- 48px 사이즈