UX/UI 디자인

아이콘 크기 유지, 여백 감소 시 터치 영역

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

질문사항

아이콘 크기는 그대로 유지하고 좌우 여백값만 줄이면, 터치 영역이 48px보다 작아진다는 의미인가요?

답변

아닙니다, 터치 영역이 48px보다 적어지지 않고 유지됩니다. 여기서 '좌우 여백값을 줄이는 게 아니라 조정한다'는 의미는 다음과 같습니다:

아이콘 자체의 크기: 예를 들어 24x24px로 유지합니다.

버튼의 전체 터치 영역: 최소 48x48px로 설정합니다.

여백 조정: 24x24px 아이콘을 48x48px 프레임 안에 넣으면, 아이콘 주변에 12px씩의 여백(패딩)이 생깁니다. 이 여백을 '조정'한다는 것은, 예를 들어 아이콘을 프레임의 왼쪽으로 살짝 옮겨 좌측 패딩을 줄이고 우측 패딩을 늘리는 식으로, 아이콘의 시각적 위치를 변경하더라도 전체 48x48px의 터치 영역 자체는 유지된다는 뜻입니다.

즉, 아이콘의 시각적 위치나 주변 여백을 조절하더라도, 사용자가 터치할 수 있는 최소 영역(48x48px)은 변함없이 확보되어야 한다는 의미입니다.