윈도우에서도 사파리 브라우저 환경 테스트하기

최근 들어 개발하면서 사파리에서만 일어나는 문제가 너무 많았다. <video> 태그의 playsinline, svg의 <rect> 태그에 아무런 색을 주지 않으면 투명이 아니라 검은색으로 색칠되는 문제 등등... 프론트엔드를 하면서 유독 사파리만 비표준 혹은 동작이 다른 부분이 많아 속이 터질 지경이었다.

 

심지어 나는 윈도우를 사랑하는 개발자인데 ㅠ 윈도우에는 사파리 (Webkit) 브라우저가 없다는 게 참 힘들었다. 테스트도 못하는 환경이라니.

 

그래서 이번엔 어떻게든 삽질해서 알아낸 윈도우에서 웹킷 브라우저를 사용할 수 있는 방법을 알려드리겠다.

 

 

1. WSL

Windows Subsystem for Linux, 이하 WSL은 윈도우 환경에서 리눅스 시스템을 사용할 수 있게 해주는 기능이다. WSL2에 들어오면서 WSLg라는 기능이 추가되었는데, 무려 리눅스 GUI 프로그램을 그대로 윈도우에서 사용할 수 있는 기능이다.

 

리눅스에는 다행히도 Epiphany라는 Webkit 브라우저가 있으니, 해당 브라우저를 설치해서 사용해보려고 한다.

 

아래 링크를 참고해 WSL2와 우분투를 설치하자. 아마 내가 직접 쓰는 것보다 해당 링크에 더 상세한 가이드가 있을 것이다!

 

https://learn.microsoft.com/ko-kr/windows/wsl/install

WSL 설치

 

 

WSL이 준비되었다면, Epiphany를 설치하고 실행하면 된다!

sudo snap install epiphany
sudo apt install epiphany-browser

 

 

장점

• WSL 리눅스 가상 환경에서 실행되어서, 무거운 VM 없이 리눅스 + Webkit이라는 환경 테스트를 진행할 수 있다.
• 앞으로 설명할 다른 방법에 비해 그나마 UI, 브라우저 자체 기능이 존재하는 편이다.
• 설치가 간편하다.

 

단점

• 리눅스를 다루기 어려운 사람에겐 힘들 수 있다.
• 위의 스크린샷에서도 보이다시피, 한국어 지원이 안 좋다.
• WSLg가 완벽한 건 아니라, HiDPI 환경에서는 브라우저가 너무 작게 보이거나 할 수 있다.
• WSL은 네트워크 격리가 켜져있어서, 기본 설정에서는 localhost:3000 같이 로컬 개발 환경은 접속이 불가능하다. .wslconfig의 networkingMode를 mirrored로 수정하면 해결된다. (https://learn.microsoft.com/en-us/windows/wsl/wsl-config)

 

2. Webkit WinCairo 빌드

웹킷 공식 사이트에 적혀있는 윈도우에서 실행하는 방법이다. 빌드된 웹킷에 필요한 DLL을 따로 다운받아, 합쳐서 사용하는 방식이다.

 

https://docs.webkit.org/Ports/WindowsPort.html#downloading-build-artifacts-from-buildbot

Windows port - WebKit Documentation

 

DLL까지 넣어주고, MiniBrowser.exe를 열면 이런 초라한 브라우저가 나온다.

 

 

장점

• 웹킷의 가장 최신 빌드를 이용해 볼 수 있다.
• 개발자 편의 기능이 많다.

 

단점

• 정말 최소한의 브라우저 기능만 가지고 있다.
• WinCairo 그래픽 백엔드가 다이나믹 폰트를 지원하지 않는다. 현재 웹킷의 그래픽 백엔드를 Skia로 포팅하는 중이라는데, 포팅되기 전까지는 다이나믹 폰트를 사용하는 경우엔 이상하게 폰트가 보인다 ㅠ

 

 

 

 

언젠가는 크롬, 파이어폭스, 웹킷 브라우저를 3개를 동시에 열고, 마우스 커서가 연동되는 그런 테스팅 툴을 만들고 싶다... ㅠ