UX/UI 디자인

아이콘 버튼 터치 영역

피그마 오픈카톡방2026. 3. 7.

질문사항

아이콘 버튼의 터치 영역은 주로 어떻게 설정하고 작업하시나요?

답변

아이콘 버튼의 터치 영역(Touch Target)은 사용성 및 접근성 측면에서 매우 중요합니다. 일반적으로 최소 44x44px 또는 48x48px 이상의 터치 영역을 권장합니다. 이는 사용자가 작은 아이콘을 정확하게 터치하기 어렵거나, 손가락이 굵은 경우 오작동을 방지하기 위함입니다.

작업 방식:

아이콘 크기 유지: 실제 아이콘의 시각적 크기는 디자인 가이드라인에 따라 작게 유지할 수 있습니다 (예: 24x24px).

터치 영역 확보: 아이콘 자체의 크기는 작더라도, 아이콘을 감싸는 프레임(또는 오토 레이아웃)의 크기를 최소 터치 영역(예: 48x48px)으로 설정합니다.

패딩(Padding) 조정: 아이콘을 프레임 중앙에 배치하고, 아이콘과 프레임 경계 사이의 여백(패딩)을 조절하여 전체 터치 영역을 확보합니다. 예를 들어, 24x24px 아이콘을 48x48px 프레임 중앙에 배치하면 상하좌우 12px의 패딩이 자동으로 생겨 터치 영역이 확보됩니다.

오토 레이아웃 활용: 오토 레이아웃을 사용하여 아이콘과 패딩을 포함하는 버튼 컴포넌트를 만들면, 터치 영역을 일관되게 관리하기 용이합니다.

답변에서 언급된 '좌우 여백값을 줄이는 게 아니라 조정한다'는 것은, 아이콘 자체의 마진을 줄이는 것이 아니라, 아이콘을 포함하는 전체 터치 영역 프레임의 크기를 기준으로 패딩을 조절하여 터치 영역을 확보한다는 의미로 해석할 수 있습니다. 중요한 것은 시각적인 아이콘 크기와 별개로, 사용자가 실제로 터치할 수 있는 영역을 충분히 확보하는 것입니다.