Zen Browser를 투명하게....

 

이번 포스트에서는 Zen Browser에 투명 theme를 적용하는 방법을 정리해 봅니다. 

아래의 일련의 과정은 Asahi Linux (Fedora) 환경에서 사용한 것 입니다. 만일, 다른 OS를 사용하신다면 이점을 감안하고 참고하시기 바랍니다. 

우선, 위의 스샷은 투명이기는 하지만, 부가적으로 blur 효과가 적용된 것입니다. zen browser 자체에서는 blur 효과를 줄 수가 없고 투명하게만 만들 수 있습니다. blur 효과는 OS에 따라 Window Manager나 Compositor에서 window blur를 지원해야 합니다. 필자의 경우에는 필자가 자체 제작한 Wayland Compositor를 사용하고 있기 때문에 위와 같이 blur를 사용할 수 있습니다. macOS, windows11은 기본 지원하고,  Linux에서는 Hyprland나 혹은 KDE 등을 사용한다면 blur 효과를 사용할 수 있을 것입니다.  theme 제작자의 말에 의하면 windows 10이나, GNOME에서는 적용하지 않거나 적용하더라도 자연스럽지 못할 수 있다고 하니 이 점도 참고하시기 바랍니다. 

웹 브라우저를 투명하게 사용하려면, 두 가지가 필요합니다. 첫 번째는 웹 브라우저 자체를 투명하게 만들어야 하고, 두 번째는 방문하는 사이트의 배경을 투명하게 만들어야 하겠지요. 그래서 이 두 가지를 적용할 수 있는 방법이 필요 합니다. 

우선 해당 Zen Browser를 투명하게 만들 Mod를 설치하기 위해 전용 add-on market 인 Sine을 설치해야 합니다.  Sine github 의 release에서 자신의 OS에 맞는 실행파일을 다운로드 합니다. 

Sine 설정화면

필자의 경우에는 asahi linux를 사용하고 있고, aarch64(arm64) 이므로, sine-linux-arm64를 다운로드하였습니다. 

다운로드 파일을 실행하기 위해서는 터미널에서 exucute mode set을 해줘야 합니다. 

chmod +x sine-linux-arm64

 

sone-linux-arm64를 터미널에서 실행하면 아래와 같은 절차로 zen browser에 설치를 하게 됩니다. 

1번에서는 사용할 Browser를 선택합니다. 2번 질문에서는 zen의 버전을 선택하는데, 필자의 경우에는 twilight 버전을 사용하고 있기 때문에 twilight를 선택했지만, 그렇지 않다면 beta를 선택하면 됩니다.  3번 질문에서는 zen의 실행파일이 위치한 절대경로를 지정해 줍니다. 4번 질문에서는 사용자 id를 넣어 주고, 5번에서는 현재 zen이 사용하는 profile를 선택해 줍니다.

현재 사용 중인 profile은 Zen browser의 주소창에 about:support를 넣은 후, 아래와 같이 Ctrl+F를 눌러 "profile"를 검색하여 찾을 수 있습니다. 혹은 화면을 아래로 내려 Application Basics 항목에 보면 Profile Directory 항목에서 찾을 수 있습니다. 

프로파일까지 지정을 했다면, 설치 혹은 제거를 선택하는 질문으로 넘어 갑니다. 

러제거를 원한다면 yes를 넣어 주고, 설치를 한다면 그냥 enter키를 치면 됩니다. 그럼, 위의 스샷처럼 필요한 요소들을 zen에 inject 즉, 설치하게 됩니다. 설치가 끝나고, Enter anything to exit: 에서 enter키를 눌러 설치 프로그램을 종료합니다. 

이제, Zen을 실행하고, 설정으로 가면 아래와 같이 Sine Mods 항목이 새롭게 등록이 된것을 알 수 있습니다. 

만일, 모든 작업을 수행했지만, Sine Mods 가 메뉴에 나타나지 않는다면, 디렉터리의 권한 문제가 있을 수 있습니다. 

위의 스샷에서 보는 바와 같이  ~/.zen/<프로파일 디렉터리>/chrome 에 들어 갔을 때, 서브 디렉터리 및 파일들의 소유자(owner)와 그룹(group)이 자신의 계정이 아닌, root 로 되어 있는지 확인하고 만일 root로 되어 있다면, sudo chown 명령을 이용하여 자신의 계정으로 변경해야 합니다. (ex) sudo chown -R elsa:elsa *

여러 Mod들이 보이는데, 여기서는 Transparent Zen 이라는 Mod를 설치해야 합니다. 아직 market에 등록이 되어 있지 않으므로 sameerasw/zen-themes/tree/main/TransparentZen 를 넣고 옆에 Install 버튼을 눌러 줍니다. 그러면, Transparent Zen Mod가 설치되게 됩니다. 

위의 스샷에서 처럼 설치된 Transparent Zen mod의 설정 버튼을 누르고, 아래와 같이 설정 합니다. 

각 항목에 대한 자세한 설명은 여기서 하지 않겠습니다. 

Linux라면, 첫번째(Allow transparency)와 두 번째 항목(Allow transparency on linux)은 반드시 설정을 해야 합니다. 

그리고, 투명화가 되었을 때 홈페이지에 표시되는 글씨들이 배경에 묻혀 가독성이 떨어질 수 있기 때문에, Enable custom background color for zen을 활성화하고,  Set Custom background color를 #00000080으로 설정합니다. 000000은 검정색을 의미하며 80은 투명도로 50% 정도의 반투명을 의미합니다. (값은 Hex로 00 ~ FF, 80은 중간값)

이제 마지막으로 about:support 에서 아래와 같이 Clear startup cache. 를 눌러 cache를 초기화한 후, 

Zen Browser를 종료 후 다시 실행해 줍니다. 

그러면, 아래와 같이 완전 투명 대신 살짝 어두운 배경의 투명화면이 되게 됩니다. 

그리고, 여기에 해당 OS의 windows compositor가 blur효과를 지원한다면, 다음과 같이 보이게 됩니다. 

 

zen browser는 투명하게 만들었지만, 홈페이지를 방문하면 각 홈페이지들미다 배경설정이 제각기 다르기 때문에 페이지들이 투명하게 보이지 않습니다. 

Google 페이지

따라서, 로딩할 페이지를 투명하게 보이게 하기 위한 방법이 필요한데, 이를 위해서 Zen Internet이라는 Add-on 이 필요 합니다.  Zen Internet은 이름에서 알 수 있듯이 Zen Browser에서 유명한 Site들에 대한 Styling을 적용하는 Extension으로 기본 옵션으로 Transparency(투명화), Dark Reader, No folder(?) 의 속성을 제어할 수 있습니다. 우리가 필요한 것은 Transparency 기능 이겠죠. 

Zen browser에서 Download File를 클릭하고, 설치를 합니다.

설치 후, 투명하게 보고 싶다면, 아래와 같이 Zen internet Extension Icon을 누르고, 적용을 활성화시켜 주면 투명이 적용됩니다. 

Skip Styling for this site가 활성화 되어 있다면 꺼준다.

그러면 아래와 같이 투명으로 변하게 됩니다. 

해당 싸이트에 대한 설정은 한 번만 변경되면, 이 후로는 변경을 바꾸지 않는 한 영원히 투명모드로 보이게 됩니다. 

 

- - - - -

꽤 근사하죠? 
투명에 blur 효과는 꽤나 CPU/GPU/MEMORY를 많이 낭비하는 비싼 눈요기거리 이기는 합니다만, 자신이 사용하는 컴퓨터 Resource가 빵빵하다 싶다면.. 이쁜 Browser를 사용하는 것도 나쁘지 않다고 봅니다. 

필자의 경우에는 8GB/256GB의 2020 M1 Mac Mini에서 macOS 대신 Asahi Linux를 시용하고 있기 때문에, Resource가 그리 넉넉한 편은 아닙니다. 그래서 주력은 역시 Chromium을 사용하고 있지만, 가끔 아무것도 안하고 인터넷 서핑을 하거나 할때는 이 이쁜 Zen Browser를 사용합니다.