모바일 Safari에서 input text 클릭 시 자동 Zoom 현상 해결

Intro

iOS Safari에서 텍스트 입력 필드(input text)에 텍스트를 입력하려고 클릭하니, 화면이 강제로 확대(zoom)되는 현상이 있었다.

Safari에서 이런 zoom 현상은 기본적으로 font-size가 16px 미만인 input 필드에서 발생한다고 한다. 작은 텍스트 필드를 강조해 사용성을 높이기 위해 확대를 적용한다는 의도지만 개발자에게는 골칫거리가 된다.

UI가 깨지거나 모달창이 비정상적으로 작동하게 만들어서 디자인과 사용자 경험을 크게 해칠 수 있다.

본 글에서는 이 문제를 해결하기 위해 사용한 한 가지 사례를 소개한다.

문제 상황

검색창에 텍스트를 입력하면 모바일 Safari에서 화면이 확대되면서 UI가 깨지는 문제

보편적으로 아래의 두가지 방법에 제시된다.

1. input font-size 16px로 맞춰주기

2. 줌 자체를 못하게 막기

   html
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

일단 단순히 font-size:16px로 맞춰주어 봤지만 여전히 어느 정도의 zoom이 되고 있었다. 폰트사이즈가 30px쯤 넘어갔을 때부터 줌 현상이 사라졌는데, 폰트 크기를 늘리고 transform: scale()를 활용해서 원하는 크기로 다시 줄이는 방법도 있지만 scale 하며 디자인을 유지하는게 조금은 까다롭다.

줌 자체를 못하게 막는 건 현재의 사용성에서는 어울리지 않아 배제했다. 줌 해서 텍스트를 읽어야 하는 상황이 자주 있다.

해결

문제를 해결하기 위해 사용한 CSS는 다음과 같다. @media (max-width: 991px) { 등으로 감싸서 모바일에서만 작동하도록 하자

css
.search-bar input:active {
    font-size: 32px;
    transform: scale(0.5);
}

이 해결 방법이 작동한 이유

위 코드는 검색창이 활성화(:active)되었을 때 font-size를 일시적으로 32px로 변경하도록 설정한 것이다.

• 적용 효과: 사용자가 검색창을 터치하여 활성화하면, Safari가 zoom을 강제로 적용하기 전에 font-size가 커지면서 zoom 조건을 충족시키고, zoom이 발생하지 않는다.

이 방법의 장점

1. 사용자 경험 유지: font-size를 일시적으로 변경하기 때문에 시각적으로는 input 크기가 변하지 않는다. scale(0.5) 외에 다른 요소들을 조정해주지 않으면 active 되는 순간에 여백등이 순간적으로 틀어지기는 하지만 터치하는 손가락이 가리고 있어 눈에 보이지는 않는다.
2. Finch Zoom 미보정: 강제로 zoom을 막는 대신 CSS 조정만으로 문제를 해결한다.

결론

이 해결책은 단기적으로 효과적이지만, 근본적인 해결책은 아니다. 사용자가 검색창을 활성화할 때 UI가 미묘하게 깜빡이는 현상이 발생할 수 있다. 또한, 다른 브라우저나 환경에서는 예기치 않은 스타일 문제가 발생할 가능성도 있다.

UI를 개선하여 zoom이 발생하지 않을 정도로 모바일 친화적인 input 크기를 제공하는 것이 이상적이다.

• 충분히 큰 input 필드: font-size zoom 이 필요 없는 크기로 유지하되, input의 크기와 주변 간격도 넉넉하게 디자인한다.
• 사용자 중심 설계: 사용자가 zoom 없이도 텍스트를 쉽게 읽고 입력할 수 있도록 인터페이스를 설계한다.

나처럼 이런 문제를 겪지 않으려면 디자인 초기 단계에서부터 모바일 환경을 고려한 설계를 반영하는 것이 필요하겠다.

References

• https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone