Webkit이란?
WebKit은 애플(Apple)이 개발한 웹 브라우저 렌더링 엔진으로, iOS의 Safari 및 모든 iOS 브라우저(Chrome, Firefox 포함)에서 사용됩니다.
WebKit과 다른 브라우저 엔진 비교
| 렌더링 엔진 | 사용 브라우저 |
|---|---|
| WebKit | iOS Safari, iOS Chrome, iOS Firefox (iOS의 모든 브라우저) |
| Blink | 안드로이드 Chrome, Edge, Opera, 삼성 인터넷 |
| Gecko | 데스크톱 및 안드로이드 Firefox |
iOS에서는 애플 정책으로 인해 모든 브라우저가 WebKit을 강제 사용해야 합니다.
즉, iOS 크롬도 내부적으로 WebKit을 사용하므로, 안드로이드 크롬과 동작 방식이 다를 수 있습니다.
️ WebKit으로 인해 iOS에서 발생하는 대표적인 문제
-
슬래시(/) 포함된 텍스트가 한 단어로 인식됨
메가커피/빽다방/컴포즈 → WebKit에서는 한 단어로 처리하여 자동 줄바꿈이 안됨
- 해결 방법: overflow-wrap: break-word; 적용 또는 메가커피 / 빽다방 / 컴포즈 (슬러쉬 양옆에 공백 추가)
-
position: fixed가 iOS에서 흔들리거나 사라짐
안드로이드에서는 정상 동작하지만, iOS Safari에서는 스크롤 시 요소가 움직이거나 사라지는 문제 발생
- 해결 방법: position: sticky;로 변경
-
iOS Safari에서 hover 상태가 유지됨
터치 후 :hover 효과가 유지되어 UI가 깨지는 현상 발생
- 해결 방법: @media (hover: hover) {} 적용
-
download 속성이 iOS에서 동작하지 않음
<a download>가 무시되고, 파일이 새 탭에서 열림
- 해결 방법: fetch().blob()으로 다운로드 처리
-
input 클릭 시 자동 확대되는 문제
iOS에서 입력 필드를 터치하면 화면이 자동 확대됨
- 해결 방법: font-size: 16px; 이상으로 설정
결론
WebKit은 iOS의 모든 브라우저에서 강제 사용되므로, 크롬/파이어폭스도 안드로이드와 다르게 동작함. 특정 CSS 및 JavaScript 기능이 iOS에서 다르게 적용되므로, 대응 방법이 필요함. iOS WebKit의 차이점을 이해하고 적절한 대응을 하면 보다 안정적인 UI를 제공할 수 있음.