핀 모양과 선택 상태
위가 둥글고 아래가 뾰족한 물방울 핀은 누구나 '여기'라는 뜻으로 알아요. 노먼(1999)의 말처럼 굳어진 관습을 쓰면 설명이 필요 없어요. 숙소나 부동산 앱은 가격을 적은 라벨형 핀을 쓰기도 해요. 누른 핀은 크기와 색을 바꿔 확실히 강조하고, 장소 정보는 아래 바텀 시트로 보여줘요(Apple, n.d.). 그래야 지도를 가리지 않고 다른 핀과 비교할 수 있어요.
겹치는 핀 묶기
도심에서는 핀 수십 개가 겹쳐 아무것도 누를 수 없게 돼요. 피츠(1954)의 법칙처럼 작고 빽빽한 목표는 누르기 어려워요. 가까운 핀을 '12'처럼 숫자 묶음으로 합치고, 누르면 그 지역으로 확대하는 클러스터링이 흔한 해법이에요(Google, n.d.). 사용자는 핀치 줌으로도 확대해요. 핀 그림이 작아도 실제 터치 영역은 터치 타깃 크기(Parhi et al., 2006)를 지켜요.
내 위치와 접근성
'내 위치' 버튼은 위치 권한이 필요해요. 안드로이드는 대략 위치와 정확한 위치를 나눠 묻는데(Android Developers, n.d.), 주변 검색에는 대략 위치로 충분할 때가 많아요. 핀 종류를 색으로만 나누면 색각 이상 사용자가 구분하기 어려우니 WCAG 2.2(W3C, 2023)의 1.4.1과 1.4.11처럼 아이콘 모양과 대비도 함께 써요. 지도만으로 쓰기 어려운 사용자를 위해 같은 결과를 목록으로도 보여줘요.
자주 묻는 질문
- 핀이 너무 많으면 어떻게 하나요?
- 가까운 핀을 숫자로 묶는 클러스터링을 쓰고, 확대하면 풀리게 해요.
- 지도만 보여줘도 되나요?
- 목록 보기도 함께 제공하는 게 좋아요. 비교와 접근성 모두에 도움이 돼요.
출처 검토일: 2026-10-27
참고문헌
- Apple. (n.d.). Maps. Human Interface Guidelines. 핀(주석)과 묶음 표시, 선택 상태를 다뤄, 지도 위 장소 표시를 설계할 때 참고하면 도움이 돼요.
- Google. (n.d.). Marker clustering. Maps JavaScript API. 가까운 핀을 숫자 묶음으로 합치는 방법이라, 핀이 겹치는 문제를 풀 때 참고하면 도움이 돼요.
- Android Developers. (n.d.). Request location permissions. 대략·정확한 위치 권한 차이를 설명해, 내 위치 핀을 보여줄 때 권한 수준을 정하는 데 참고하면 도움이 돼요.
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 작고 촘촘한 목표는 누르기 어렵다는 법칙이라, 작은 핀을 확대해 고르게 하는 이유로 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 핀의 실제 터치 영역을 넓게 잡을 때 참고하면 도움이 돼요.
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 관습이 된 기호를 지키라는 논의라, 물방울 모양 핀처럼 익숙한 표시를 쓸 이유로 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 색만으로 구분하지 않기(1.4.1)와 비텍스트 대비(1.4.11) 기준이 있어, 핀 색과 모양을 정할 때 참고하면 도움이 돼요.