[접근성연구·모바일] 손가락에 닿는 크기
데스크탑에는 커서가 있었습니다. 화면 위의 한 점을 정확히 가리키는, 1픽셀 단위의 도구입니다. 작은 버튼이라도 커서를 그 위에 올려 누르면 됐습니다. 클릭은 어긋나지 않았습니다. 모바일은 다릅니다. 화면을 누르는 것은 커서가 아니라 손가락입니다. 손가락 끝은 한 점이 아니라 넓적한 면이고, 그 면은 화면의 여러 픽셀을
![[접근성연구·모바일] 손가락에 닿는 크기](https://xbbhievqdmccsexxrdtn.supabase.co/storage/v1/object/sign/covers/content/o3axj7ro-111368.jpeg?token=eyJraWQiOiJzdG9yYWdlLXVybC1zaWduaW5nLWtleV8yOWQwYWZmNy1mOWJhLTRkNmUtYmZlZi0yMzg2NTc0ZWUzODQiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJjb3ZlcnMvY29udGVudC9vM2F4ajdyby0xMTEzNjguanBlZyIsInNjb3BlIjoiZG93bmxvYWQiLCJpYXQiOjE3ODQ0NjU3MjYsImV4cCI6MjA5OTgyNTcyNn0.uxhtBVvWI1x37LO1ISgaZoz5uJakieJi0LGF700_o7c)
터치 타겟 44px 기준 연구
〈디지털 접근성 연구 015〉 — 이 글은 규정이 아니라 하나의 연구 관점입니다. 인용 수치·기준은 출처와 함께, 미확정 영역은 그렇다고 밝혀 작성합니다.
들어가며 — 마우스에는 없던 문제
데스크탑에는 커서가 있었습니다. 화면 위의 한 점을 정확히 가리키는, 1픽셀 단위의 도구입니다. 작은 버튼이라도 커서를 그 위에 올려 누르면 됐습니다. 클릭은 어긋나지 않았습니다.
모바일은 다릅니다. 화면을 누르는 것은 커서가 아니라 손가락입니다. 손가락 끝은 한 점이 아니라 넓적한 면이고, 그 면은 화면의 여러 픽셀을 동시에 덮습니다. 사용자는 자기가 정확히 어디를 누르는지 보지 못합니다. 손가락이 화면을 가리기 때문입니다. 누른 자리가 맞기를 '바라며' 누르는 셈입니다.
여기서 작은 버튼은 단순히 '누르기 불편한 것'을 넘어, '누르기 어려운 것'이 됩니다. 손가락보다 작은 버튼, 옆 버튼과 거의 붙어 있는 버튼은 정확히 겨냥하기 어렵습니다. 한 번에 누르지 못하고 두세 번 시도하거나, 엉뚱한 버튼을 누르거나, 아예 포기하게 됩니다.
이 문제는 특정 사용자에게 더 무겁습니다. 손의 떨림이 있는 분, 손가락 관절이 굳은 분, 흔들리는 버스에서 한 손으로 쓰는 분, 화면을 자세히 보기 어려운 분. 이들에게 '작은 버튼'은 곧 '닿지 않는 버튼'입니다. 그래서 표준은 버튼의 크기에 관한 최소선을 제시합니다. 우리는 이번 편에서 그 최소선 — 흔히 '44px'로 이야기되는 — 이 무엇이고, 어디서 왔으며, 어떻게 이해해야 하는지를 연구의 관점에서 살펴봅니다.
1. 왜 손가락의 크기가 기준이 되는가
화면 위 버튼의 적정 크기는 화면이 정하는 것이 아니라 사람의 몸이 정합니다. 정확히는 손가락 끝, 그중에서도 화면에 닿는 접촉면의 크기가 기준입니다.
성인의 손가락 끝 접촉면은 대체로 가로세로 1cm 안팎으로 알려져 있습니다. 엄지는 그보다 더 넓습니다. 손가락이 화면에 닿을 때, 그 면 전체가 '눌린 영역'이 됩니다. 만약 버튼이 손가락 접촉면보다 작으면, 손가락은 버튼과 그 주변을 함께 덮게 되고, 시스템은 '정확히 버튼을 눌렀는지'를 확신하기 어려워집니다. 사용자도 자기 손가락에 가려 버튼이 보이지 않으니, 제대로 눌렀는지 확인할 길이 없습니다.
그래서 접근성 표준은 '버튼을 손가락이 무난히 덮을 수 있는 크기 이상으로 만들자'는 방향을 제시합니다. 손가락이라는 물리적 도구의 크기를 디자인의 기준으로 삼는 것입니다. 화면이 아무리 고해상도여도, 그 화면을 누르는 손가락의 크기는 변하지 않습니다. 픽셀은 점점 작아지지만 사람의 손가락은 그대로이기에, '최소 크기'라는 개념이 필요해집니다.
1-1. 커서와 손가락 — 두 입력 도구를 한 장으로
데스크탑의 커서와 모바일의 손가락은 같은 '가리키는 도구'이지만, 정밀도와 가림의 측면에서 정반대입니다. 그 차이가 왜 모바일에서만 '최소 크기'가 필요해지는지를 한 표로 정리합니다.
| 비교 항목 | 데스크탑 커서 | 모바일 손가락 | 그래서 생기는 차이 |
|---|---|---|---|
| 접촉 단위 | 1픽셀 한 점 | 가로세로 1cm 안팎 면 | 작은 버튼도 커서는 OK, 손가락은 빗나감 |
| 겨냥 시 가림 | 가리지 않음 | 손가락이 버튼을 덮음 | 누른 자리를 눈으로 확인 불가 |
| 떨림·환경 영향 | 작음(책상 위 고정) | 큼(이동·떨림·장갑) | 같은 버튼도 환경 따라 닿고 안 닿음 |
| 필요한 최소 크기 | 사실상 무관 | 손가락 면 이상 | 모바일에서만 '최소선'이 의미를 가짐 |
표가 보여 주듯, '최소 터치 크기'라는 개념이 데스크탑에는 거의 없다가 모바일에서 갑자기 중요해진 것은 입력 도구가 점(커서)에서 면(손가락)으로 바뀌었기 때문입니다. 우리는 이 표를 '버튼이 작다'는 디자인 취향의 문제가 아니라, 입력 물리학의 문제로 보는 출발점으로 삼습니다.
2. '44px'는 어디서 왔는가 — 표준의 인용
모바일 버튼 크기를 이야기할 때 가장 자주 등장하는 숫자는 '44'입니다. 이 숫자의 출처와 의미를 정리해 봅니다. 다만 정확한 수치와 단위는 각 가이드라인 원문을 확인하는 것이 안전합니다.
2-1. 플랫폼 가이드라인
모바일 운영체제 제조사들의 디자인 가이드라인은 오래전부터 '최소 터치 영역'을 권장해 왔습니다. 한 진영은 '최소 44×44 포인트', 다른 진영은 '최소 48×48 밀도독립픽셀(dp)'을 제시한 것으로 널리 알려져 있습니다. 단위는 다르지만, 실제 물리적 크기로 환산하면 대체로 비슷한 영역 — 손가락 하나가 무난히 닿는 크기 — 을 가리킵니다.
여기서 중요한 것은 단위입니다. '44'는 화면 픽셀(px)이 아니라 '포인트'나 'dp' 같은 밀도독립 단위인 경우가 많습니다. 화면 밀도가 높아져도 실제 물리 크기가 유지되도록 만든 단위입니다. 그래서 '44px'라는 표현은 통용되는 약칭일 뿐, 정확한 기준은 단위까지 함께 확인해야 한다고 우리는 봅니다.
2-2. WCAG의 터치 타겟 기준
웹 콘텐츠 접근성 지침(WCAG)도 포인터 입력 대상의 크기를 다룹니다. 우리가 이해하기로, WCAG 2.1에는 성공 기준 2.5.5 Target Size(Enhanced)가 있어 '최소 44×44 CSS 픽셀'을 권장하는 것으로 알려져 있고, 이는 더 높은 수준(AAA)의 기준입니다. 이후 WCAG 2.2에는 성공 기준 2.5.8 Target Size(Minimum)가 추가되어, 더 낮은 수준에서 적용되는 최소 크기(흔히 24×24 CSS 픽셀로 인용되는)와 간격에 관한 조건을 다루는 것으로 이해됩니다.
이 부분은 버전과 기준 번호, 정확한 수치가 헷갈리기 쉬운 영역입니다. 그래서 우리는 '44'라는 숫자를 절대 규정처럼 다루기보다, '손가락이 닿을 만한 크기를 확보하라는 방향'으로 읽는 편이 안전하다고 봅니다. 정확한 수치·등급·예외는 WCAG 원문과 각 버전 비교표를 확인하는 것이 정확합니다.
2-3. 국내 기준의 시선
한국형 웹 콘텐츠 접근성 지침(KWCAG)이나 공공 디자인 가이드도 모바일 환경에서 컨트롤이 충분한 크기와 간격을 갖추도록 권하는 방향을 담고 있는 것으로 이해됩니다. 디지털 정부서비스 UI/UX 가이드라인(KRDS) 역시 버튼·터치 영역에 관한 권장을 포함하는 것으로 알려져 있습니다. 구체 수치와 적용 범위는 각 문서의 최신본을 확인하는 것이 안전합니다.
2-4. 네 출처의 '44'를 한 장으로 — 단위가 다르다
같은 '44'처럼 들려도 출처마다 단위와 적용 등급이 다릅니다. 혼동을 막기 위해 네 갈래를 한 표로 모읍니다. (정확한 수치·등급은 각 원문 확인을 전제로 한 정리입니다.)
| 출처 | 자주 인용되는 값 | 단위 | 성격 |
|---|---|---|---|
| iOS 계열 가이드 | 44×44 | 포인트(pt) | 플랫폼 권장 |
| Android 계열 가이드 | 48×48 | dp(밀도독립) | 플랫폼 권장 |
| WCAG 2.1 (2.5.5) | 44×44 | CSS 픽셀 | AAA(강화) |
| WCAG 2.2 (2.5.8) | 24×24 | CSS 픽셀 | AA(최소)+간격 조건 |
표가 보여 주듯 '44'는 하나의 절대 숫자가 아니라, 출처마다 단위(pt·dp·CSS px)와 등급(권장·AAA·AA)이 다른 여러 기준의 약칭입니다. 우리는 이 표를 '44px만 지키면 끝'이라는 오해를 막는 장치로 봅니다 — 어떤 단위의 어떤 등급을 적용할지부터 정해야, '지켰다/못 지켰다'는 판정이 의미를 가집니다.

3. 크기만큼 중요한 것 — 간격
버튼 크기를 이야기할 때 자주 빠지는 것이 '간격'입니다. 그런데 실제 오작동의 상당 부분은 버튼이 작아서가 아니라, 버튼 사이가 너무 붙어 있어서 생깁니다.
버튼이 충분히 커도, 바로 옆 버튼과 1~2픽셀밖에 떨어져 있지 않으면, 손가락은 두 버튼을 동시에 덮습니다. 시스템은 둘 중 어느 것을 누르려 했는지 추측해야 하고, 그 추측이 사용자 의도와 어긋나면 '옆 버튼이 눌리는' 오작동이 됩니다. 특히 손이 떨리거나, 흔들리는 환경에서 누르거나, 빠르게 조작할 때 이 문제가 두드러집니다.
그래서 우리는 터치 타겟을 볼 때 '크기'와 '간격'을 한 쌍으로 봅니다. 충분히 크고, 옆 버튼과 충분히 떨어져 있을 것. 둘 중 하나만 충족해서는 안전한 누름을 보장하기 어렵습니다. 일부 기준이 '크기' 외에 '간격(spacing)'을 함께 조건으로 두는 것도 이런 맥락으로 이해됩니다. 작은 버튼이라도 주변에 충분한 여백이 있어 손가락이 다른 컨트롤을 건드리지 않는다면, 실질적인 누름 영역은 그만큼 넓어지기 때문입니다.
3-1. 크기와 간격의 네 조합 — 무엇이 안전한가
크기(큼/작음)와 간격(넉넉/촘촘)을 교차하면 네 가지 경우가 나옵니다. 흔히 '버튼을 키웠으니 됐다'고 여기지만, 표를 보면 크기만으로는 부족하다는 것이 드러납니다.
| 크기 \ 간격 | 간격 넉넉 | 간격 촘촘 |
|---|---|---|
| 버튼 큼 | ✅ 가장 안전 | ⚠️ 큰 버튼끼리 붙어 오눌림 |
| 버튼 작음 | 🔸 여백이 실질 영역 보완 | ❌ 가장 위험(작고+붙음) |
표가 일러 주듯, '버튼이 크다'는 사실 하나만으로 안전이 보장되지 않습니다. 큰 버튼이라도 서로 바짝 붙으면 손가락이 경계에서 헷갈리고, 작은 버튼이라도 둘레 여백이 넉넉하면 실질 누름 영역이 넓어집니다. 우리는 점검에서 크기와 간격을 반드시 함께 보아야 한다고 보며, 오른쪽 아래(작고+촘촘) 칸을 최우선 손질 대상으로 둡니다.
4. 작은 버튼이 자주 숨는 자리
현장에서 작은 터치 타겟이 자주 발견되는 자리는 어느 정도 정해져 있습니다. 관찰을 토대로 몇 군데를 정리합니다.
첫째, 닫기(×) 버튼입니다. 팝업이나 배너의 오른쪽 위에 놓인 × 표시는 작게 만들어지는 경향이 있습니다. 그런데 이 버튼은 '그 화면을 빠져나가는' 중요한 통로입니다. 작아서 닫지 못하면 사용자는 그 팝업에 갇힌 느낌을 받습니다.
둘째, 체크박스와 라디오 버튼입니다. 동의 항목이나 선택지 앞의 작은 네모·동그라미는, 그 자체가 작은 데다 글자와 붙어 있어 정확히 누르기 어렵습니다. 이 경우 글자(라벨)까지 누름 영역에 포함하면 실질 크기가 커지지만, 그렇게 처리하지 않은 화면이 적지 않습니다.
셋째, 목록의 촘촘한 링크들입니다. 한 줄에 여러 링크가 빽빽이 들어차거나, 짧은 줄간격으로 링크가 위아래로 붙어 있으면, 손가락은 의도한 줄을 정확히 겨냥하기 어렵습니다.
넷째, 아이콘 버튼들이 모인 툴바입니다. 작은 아이콘이 여러 개 나란히 놓인 막대는, 크기와 간격 양쪽에서 불리합니다.
4-1. 작은 타겟이 숨는 네 자리를 한 장으로
네 자리는 '왜 작아지는가'와 '막히면 무엇을 잃는가'가 서로 다릅니다. 점검의 우선순위를 가늠하도록 한 표로 모읍니다.
| 숨는 자리 | 왜 작아지나 | 막히면 잃는 것 | 손질 방향 |
|---|---|---|---|
| 닫기(×) 버튼 | 구석에 작게 배치 관행 | 화면에서 못 빠져나옴 | 둘레 투명 영역 확대 |
| 체크박스·라디오 | 네모·동그라미 자체가 작음 | 동의·선택 못 함 | 라벨 글자까지 누름 영역 포함 |
| 촘촘한 목록 링크 | 줄간격이 좁음 | 옆 줄이 눌림 | 줄 높이·세로 여백 확보 |
| 아이콘 툴바 | 아이콘이 작고 다닥다닥 | 기능 오작동 | 아이콘 키우고 간격 벌림 |
표의 '막히면 잃는 것' 열이 우선순위를 정해 줍니다. 닫기 버튼과 동의 체크박스는 막히면 과업 자체가 멈추므로(못 닫음·못 동의함) 가장 먼저 손봐야 하고, 목록·툴바는 오작동을 줄이는 차원입니다. 우리는 이 네 자리를 모바일 화면 점검의 '단골 의심 구역'으로 두고 먼저 살핍니다.

5. 누가 가장 먼저 막히는가
터치 타겟이 작을 때, 모두가 똑같이 불편한 것은 아닙니다. 어떤 사용자는 약간 번거로운 정도지만, 어떤 사용자는 아예 그 동작을 완수하지 못합니다. 그 차이를 만드는 조건을 살펴봅니다.
손의 정밀도가 낮은 사용자가 먼저 막힙니다. 손 떨림(진전)이 있는 분, 파킨슨병이나 뇌병변으로 손의 제어가 어려운 분, 관절염으로 손가락을 정밀하게 움직이기 힘든 분, 그리고 나이가 들며 자연스럽게 손의 정밀도가 떨어진 고령 사용자입니다. 이들에게 작은 버튼은 '여러 번 시도해야 겨우 닿는' 또는 '끝내 닿지 않는' 대상입니다.
환경이 불리한 사용자도 막힙니다. 흔들리는 버스·지하철에서 한 손으로 손잡이를 잡고 다른 손으로 누르는 상황, 걸으면서 조작하는 상황, 추운 날 장갑을 끼거나 손이 곱은 상황입니다. 평소엔 닿던 버튼도 이런 환경에서는 빗나갑니다.
시각적으로 불리한 사용자도 있습니다. 버튼이 작으면 보기도 어렵습니다. 저시력 사용자나 작은 글씨가 잘 안 보이는 고령 사용자는, 버튼의 위치와 경계를 정확히 파악하기 어려워 겨냥 자체가 부정확해집니다.
이처럼 작은 터치 타겟의 부담은 '소수의 특별한 사용자'에게 집중되는 것처럼 보이지만, 실은 누구나 어떤 환경에서는 그 소수가 됩니다. 흔들리는 버스 안에서는 건강한 손도 떨립니다.
5-1. 누가 먼저 막히나 — 세 갈래를 한 장으로
막히는 사용자는 손·환경·시각 세 갈래로 나뉩니다. 각 갈래가 '항상 그런가, 상황 따라 그런가'를 구분하면, 이 문제가 소수만의 문제가 아님이 분명해집니다.
| 갈래 | 누가 | 막히는 까닭 | 항상/상황 |
|---|---|---|---|
| 손의 정밀도 | 떨림·관절염·뇌병변·고령 | 정확히 겨냥 못 함 | 대체로 항상 |
| 불리한 환경 | 이동 중·걷는 중·장갑·추위 | 손이 흔들리거나 둔해짐 | 상황(누구나 해당) |
| 시각적 불리 | 저시력·작은 글씨 어려움 | 버튼 위치·경계 파악 어려움 | 대체로 항상 |
표의 오른쪽 열이 핵심입니다. '불리한 환경' 행은 누구나 해당합니다 — 흔들리는 버스, 걸으며 보는 화면, 장갑 낀 겨울 손은 건강한 사용자도 '정밀도가 낮은 사용자'로 만듭니다. 그래서 우리는 작은 터치 타겟을 '소수 배려'가 아니라 '모두가 어떤 순간 마주치는 문제'로 봅니다.
6. 큰 버튼은 모두에게 이롭다 — 커브컷 효과
충분히 큰 터치 타겟은 손이 불편한 사용자만을 위한 것이 아닙니다. 그것은 모든 사용자의 조작을 더 빠르고 정확하게 만듭니다. 우리는 이를 '커브컷 효과'의 한 사례로 봅니다.
인터페이스 연구에는 오래된 경험칙이 있습니다. '목표가 클수록, 가까울수록 빠르고 정확하게 닿는다'는 것입니다(흔히 피츠의 법칙으로 인용됩니다). 큰 버튼은 누구나 더 적은 오류로, 더 빠르게 누릅니다. 손이 멀쩡한 사용자도 큰 버튼이 편하고, 급할 때 더 정확합니다.
그래서 '버튼을 키우는 것'은 일부 사용자를 위한 양보가 아니라, 전체 사용성을 끌어올리는 선택입니다. 손이 불편한 사용자에게는 '가능/불가능'을 가르는 결정적 차이가 되고, 그 외 사용자에게는 '조금 더 편하고 정확한' 차이가 됩니다. 한쪽에는 결정적이고 다른 쪽에는 보탬이 되는 — 이것이 커브컷 효과의 전형입니다. 우리는 큰 버튼을 '비용'이 아니라 '공통 이득'으로 보는 편이 정확하다고 봅니다.

7. '시각적 크기'와 '터치 영역'은 다를 수 있다
여기서 짚어 둘 것이 있습니다. 버튼이 작아 '보여도', 실제 누름 영역은 더 넓게 만들 수 있다는 점입니다. 시각적 크기와 터치 영역을 같다고 단정하면 안 됩니다.
작은 아이콘 버튼이라도, 그 주위에 투명한 누름 영역을 더해 손가락이 닿는 범위를 넓히는 방식이 있습니다. 보기에는 작은 × 표시지만, 실제로는 그 둘레까지 누르면 닫히도록 만드는 것입니다. 사용자 눈에는 작아 보여도, 손가락에는 충분히 큰 셈입니다. 체크박스의 경우 옆 글자까지 누름 영역에 포함하는 것도 같은 원리입니다.
그래서 터치 타겟을 점검할 때는 '보이는 크기'만으로 판단해선 안 됩니다. 실제로 어디까지 눌러야 반응하는지 — 즉 터치 영역의 실제 경계 — 를 확인해야 합니다. 작아 보이는 버튼이 실은 넉넉한 터치 영역을 가졌을 수도, 커 보이는 버튼이 정작 가운데 좁은 영역만 반응할 수도 있습니다. 보이는 것과 닿는 것을 구분하는 시선이, 정확한 점검의 출발입니다.
8. 관찰 — 흔히 보이는 장면
특정 기관을 지목하지 않고, 공공·민간 모바일 화면에서 되풀이해 마주친 장면을 익명으로 정리합니다.
한 장면은 ○○ 신청 화면의 동의 단계였습니다. 여러 개의 작은 체크박스가 긴 약관 글과 붙어 있었고, 글자는 누름 영역이 아니었습니다. 사용자는 손톱 끝으로 작은 네모를 겨냥했고, 몇 번 빗나간 뒤에야 체크됐습니다.
또 다른 장면은 팝업의 닫기 버튼이었습니다. 화면 가장자리에 붙은 작은 × 표시를, 한 손으로 폰을 쥔 사용자가 엄지로 누르려다 번번이 옆을 눌렀습니다. 팝업은 닫히지 않고, 엉뚱한 링크가 열렸습니다.
세 번째 장면은 목록 페이지였습니다. 줄간격이 좁은 링크 목록에서, 사용자는 원하는 항목보다 한 줄 위나 아래를 눌렀습니다. 손가락이 정확히 그 줄만 덮기에는 줄들이 너무 가까웠습니다.
이 장면들의 공통점은, 사용자가 '실수'한 것이 아니라 인터페이스가 정확한 겨냥을 요구했다는 데 있습니다. 손가락이라는 도구의 한계를 고려하지 않은 크기와 간격이, 사용자를 거듭 빗나가게 했습니다.
8-1. 흔한 반론과 우리의 답 — 그리고 한계
'버튼을 키우자'는 제안에는 자주 되돌아오는 반론이 있습니다. 우리는 그 반론을 가볍게 넘기지 않고, 어디까지가 타당하고 어디서부터 우리 관점과 갈리는지를 적어 둡니다.
| 흔한 반론 | 일부 타당한 점 | 우리의 답 |
|---|---|---|
| "화면이 좁아 다 키울 수 없다" | 공간 제약은 실재함 | 결정적 버튼부터(§9). 작은 버튼엔 투명 영역으로 보완(§7) |
| "44px 지켰으니 끝났다" | 최소선은 지킴 | 간격·실제 터치 영역까지 봐야 안전(§3·§7) |
| "디자인이 투박해진다" | 미적 취향은 존중 | 커브컷 효과로 전체 사용성↑(§6). 여백 설계로 양립 가능 |
| "우리 사용자는 안 그렇다" | 주 사용자층은 다를 수 있음 | 환경 변수(이동·장갑)는 누구에게나 옴(§5-1) |
표가 보여 주듯, 반론의 상당수는 '공간·미감의 제약'이라는 실재하는 사실에 뿌리를 둡니다. 우리는 그 제약을 부정하지 않습니다. 다만 그 제약을 '전부 못 한다'의 근거가 아니라 '무엇부터 할까'의 근거로 읽자는 것이 우리 관점입니다.
이 글의 한계도 분명히 합니다. 첫째, 적정 크기·간격의 '정확한 수치'는 단위(pt·dp·CSS px)와 등급, 그리고 사용자층에 따라 달라지므로, 이 글은 수치를 단정하지 않고 표준 원문 확인을 전제로 합니다. 둘째, 여기서 옮긴 장면들은 우리가 관찰한 사례일 뿐 통계적 대표성을 주장하지 않습니다. 셋째, '투명 누름 영역'이나 '라벨 포함' 같은 손질이 실제로 효과가 있는지는 화면마다 실제 측정으로 확인해야 합니다.

9. 무엇부터 보면 좋을까 — 관점
모든 버튼을 한 번에 키우기는 어렵습니다. 우리는 우선순위에 관한 하나의 관점을 제안합니다.
먼저 과업의 결정적 버튼입니다. 신청·제출·결제·인증처럼 그것을 누르지 못하면 일 전체가 멈추는 버튼은, 가장 먼저 충분한 크기와 간격을 확보해야 합니다. 다음은 빠져나가는 통로 — 닫기·취소·뒤로 같은 버튼입니다. 이것이 작으면 사용자는 화면에 갇힙니다. 그다음은 동의·선택 컨트롤 — 체크박스·라디오 버튼입니다. 작고 붙어 있기 쉬운 자리이므로, 글자까지 누름 영역에 포함하는 것을 함께 검토합니다. 마지막으로 촘촘한 목록과 툴바의 간격을 살핍니다.
기준은 한결같습니다. '여기서 손가락이 빗나가면, 사용자가 그 일을 완수하지 못하는가.' 완수가 막히는 곳일수록 먼저 손보는 편이 좋다고 봅니다.
9-1. 점검의 관점 — 보이는 크기 너머를 어떻게 보나
터치 타겟 점검에서 가장 흔한 함정은 §7에서 본 '보이는 크기로 판단하기'입니다. 우리는 화면을 점검할 때, 사람의 눈으로 보는 '시각적 크기'와 기계가 측정하는 '실제 터치 영역·간격'을 분리해서 본다는 관점을 제안합니다. 이는 ViewCheck 같은 자동 점검이 도움이 되는 지점이기도 합니다 — 사람 눈은 '커 보이는 버튼'을 그냥 넘기지만, 요소의 실제 크기(width·height)와 인접 요소 사이의 간격은 DOM과 화면 좌표에서 수치로 뽑아낼 수 있기 때문입니다.
| 점검 차원 | 사람 눈으로 | 수치로 확인하면 | 놓치기 쉬운 것 |
|---|---|---|---|
| 시각적 크기 | 커 보임/작아 보임 | 실제 px·간격 수치 | 작아 보여도 영역 넓은 버튼 |
| 간격 | 붙어 보임 | 인접 요소 거리 측정 | 큰 버튼끼리 붙은 경우 |
| 실제 터치 영역 | 알기 어려움 | 반응 경계 확인 | 커 보여도 가운데만 반응 |
| 반복 빈도 | 한두 개만 인상에 남음 | 전 페이지 전수 집계 | 같은 작은 버튼이 100곳 반복 |
표의 마지막 행이 자동 점검의 핵심 이점입니다. 사람이 손으로 보면 인상에 남는 한두 개만 잡지만, 도구는 같은 패턴(예: 작은 닫기 버튼)이 사이트 전체 몇 곳에서 반복되는지를 전수로 셉니다. 우리는 이 관점을 '사람의 판단을 대신하는 것'이 아니라 '사람이 못 세는 것을 세어 주는 것'으로 봅니다. 최종 판단 — 이 버튼이 결정적인가, 키울 공간이 있는가 — 은 여전히 사람의 몫입니다.
10. 한 장 요약 — 손가락이 정한 크기
길었던 이야기를 한자리에 모읍니다. 터치 타겟에 대한 우리의 관점을 다섯 줄로 줄이면 이렇습니다.
첫째, 모바일의 입력 도구는 커서가 아니라 손가락이다. 손가락은 점이 아니라 면이므로, 버튼은 그 면이 무난히 닿을 크기여야 합니다. 둘째, '44'는 약칭이고, 핵심은 단위와 방향이다. 정확한 수치·등급은 표준 원문을 확인하되, '손가락이 닿을 크기를 확보하라'는 방향으로 읽는 편이 안전합니다. 셋째, 크기만큼 간격이 중요하다. 오작동의 상당 부분은 버튼이 작아서가 아니라 너무 붙어 있어서 생깁니다. 넷째, 큰 버튼은 모두에게 이롭다. 손이 불편한 사용자에겐 가능/불가능을, 그 외 사용자에겐 빠름/정확함을 가릅니다. 다섯째, 보이는 크기와 닿는 영역은 다를 수 있다. 점검은 '실제로 어디까지 눌러야 반응하는가'를 봐야 합니다.
| 핵심 명제 | 한 줄 정리 | 근거의 성격 |
|---|---|---|
| 입력 도구는 손가락 | 점이 아니라 면이 닿는다 | 연구 관점·통설 |
| '44'는 약칭 | 단위·등급부터 확인 | WCAG·플랫폼 인용 |
| 크기=간격 한 쌍 | 붙어 있으면 커도 빗나감 | 연구 관점 |
| 큰 버튼은 공통 이득 | 커브컷·피츠의 법칙 | 통설 인용 |
| 보임≠닿음 | 실제 터치 영역을 본다 | 연구 관점 |
이 다섯 줄의 바탕에는 하나의 태도가 있습니다 — 화면의 픽셀이 아니라 사람의 손가락을 기준으로 삼는 태도입니다. 픽셀은 작아져도 손가락은 그대로라는 사실을 인정할 때, '최소 크기'라는 기준은 자연스러운 출발점이 됩니다. 표의 오른쪽 열이 일러 주듯, 이 관점은 표준 인용(WCAG·플랫폼 가이드), 일반 통설(피츠의 법칙·커브컷), 우리의 연구 관점이 섞여 있으며, 우리는 그 출처를 구분해 두려 합니다.
맺으며 — 닿아야 누른다
버튼은 눌려야 의미가 있고, 누르려면 먼저 닿아야 합니다. 닿지 않는 버튼은, 화면에 그려져 있어도 그 사용자에게는 없는 것과 같습니다. 작은 터치 타겟은 바로 그 '닿음'의 단계에서 사람을 걸러 냅니다. 손이 불편한 사용자, 흔들리는 환경의 사용자, 화면을 자세히 보기 어려운 사용자를 먼저 떨어뜨립니다.
우리는 버튼을 키우자는 말을 '디자인의 여백을 포기하자'는 뜻으로 하지 않습니다. 손가락이라는 도구의 크기에 맞춰, 닿을 수 있는 크기와 간격을 확보하자는 것입니다. 그렇게 했을 때 버튼은 더 많은 사람에게 '눌리는 버튼'이 되고, 화면은 더 많은 사람을 끝까지 데려갑니다. 다음 편에서는 이 작은 타겟이 실제로 만들어 내는 오작동 — '옆 버튼이 눌리는' 장면 — 을 관찰의 관점에서 이어 보겠습니다.
다음 편 예고 (016): [접근성연구·모바일] 옆 버튼이 눌리는 이유 — 작은 타겟과 좁은 간격이 만드는 오작동을, 공공웹에서 본 장면을 통해 관찰의 관점에서 다룹니다.
참고한 공개 자료(출처):
- WCAG 2.1 성공 기준 2.5.5 Target Size (Enhanced) / WCAG 2.2 성공 기준 2.5.8 Target Size (Minimum) (W3C WAI) — 정확한 수치·등급은 원문 확인 권장
- 모바일 플랫폼 디자인 가이드라인의 최소 터치 영역 권장(44pt / 48dp 계열) — 단위·수치는 각 가이드 확인 권장
- 한국형 웹 콘텐츠 접근성 지침(KWCAG 2.2) — 컨트롤 크기·간격 관련 항목
- 디지털 정부서비스 UI/UX 가이드라인(KRDS) 버튼·터치 영역 관련 권장
- 목표 크기·거리와 조작 정확도의 관계(피츠의 법칙 등 일반 인터랙션 원리, 통설)
관련 글
[접근성연구·디지털포용] 한 사람이 여러 벽을 동시에
앞 편(081)에서 디지털 포용이 여러 갈래의 사용자를 하나의 목표로 묶는다고 봤다. 그리고 끝에서 한 가지를 남겼다 — 현실의 한 사람은 여러 조건을 동시에 가질 수 있다고. 이 시리즈를 닫는 이번 편은 그 '겹침'을 정면으로 본다. 영역의 경계를 가로질러, 조건이 겹칠 때 접근성이 어떻게 더 가팔라지는지를 관찰한다.
[접근성연구·디지털포용] 디지털포용법이 말하는 '포용'
앞 편(080)에서 초고령사회라는 인구구조의 신호를 봤다. 그리고 끝에서 한 가지를 분명히 했다 — 디지털 격차는 고령에만 있는 것이 아니라고. 이번 편은 그 여러 갈래의 격차를 '디지털 포용(digital inclusion)'이라는 하나의 정책 틀에서 함께 본다. 이 시리즈는 그동안 사용자를 영역별로 나눠 다뤘다. 고령
[접근성연구·디지털포용] 초고령사회, 공공웹은 준비됐나
공공앱 세 편(077~079)으로 매체의 확장을 닫았다. 이제 시선을 한 번 더 넓힌다. 지금까지 이 시리즈는 주로 '한 사람이 화면 앞에서 겪는 어려움'을 다뤘다. 고령(001~014), 저시력(029~043), 키보드(047~049)처럼, 개별 사용자의 자리에서 벽을 봤다. 이번 묶음(080~082)은 그 시선을 거시
