OS의 화면보호기는 쓰고 싶지 않았다. 웹 개발을 하다 보면 브라우저를 오래 켜 둔다. 자리를 비울 때, 그 화면을 다른 사람에게 그대로 보여 주고 싶지 않은 순간도 많았다.

그래서 브라우저를 닫거나 운영체제의 화면보호기를 기다리는 대신, 지금 보고 있던 탭 하나를 바로 다른 장면으로 바꾸는 확장을 만들었다. 아이콘을 누르면 전체 화면으로 덮이고, 다시 아이콘을 누르거나 ESC를 누르면 원래 탭으로 돌아온다. Screen Saver는 이 짧은 흐름에서 시작했다.

현재 탭 위에 자연 사진 기반의 전체 화면 스크린세이버가 열린 모습

한 번의 실행과, 빠져나오는 방법

전체 화면으로 바꾸는 동작은 눈에 띈다. 그래서 닫는 방법도 같은 만큼 분명해야 했다. 기본 종료는 ESC이고, 아이콘을 다시 눌러도 끌 수 있다. 설정에서 종료 키를 바꾸는 흐름도 추가했다.

탭마다 상태를 따로 두는 것도 이 사용 방식 때문이다. 어떤 탭에서는 장면을 켜 두고, 다른 탭은 계속 작업할 수 있다. 반대로 브라우저 내부 페이지나 확장 스토어처럼 보안 정책상 덮을 수 없는 주소에서는 실행하지 않는다. 모든 페이지에서 억지로 동작하게 하기보다, 가능한 탭 안에서만 예측 가능하게 움직이도록 범위를 정했다.

자연 사진에서 내 사진과 시계까지

처음 켰을 때 빈 화면만 보이면 화면보호기라고 부르기 어려웠다. 기본 자연 사진 15장을 넣고, 실행할 때마다 그중 하나가 나오게 했다. 하지만 오래 쓰려면 내 사진도 넣을 수 있어야 했다.

사진을 추가한 뒤에는 켜고 끄기, 순서 바꾸기, 지우기가 필요해졌다. 업로드한 사진은 브라우저 안에서 압축해 보관하고, 기본 이미지와 함께 관리한다. 사진이 화면을 채우게 할지, 비율을 남길지도 고를 수 있게 했고, 여백의 배경색과 원하는 시간대의 디지털 시계도 설정에 넣었다.

사용자 사진을 추가하고 표시 순서를 조정하는 Screen Saver 설정 화면

Cover와 Contain 표시 방식, 배경색, 디지털 시계 설정을 보여 주는 화면

사진을 다루되 브라우저 안에 남기는 범위

내 사진을 올릴 수 있는 기능이라서, 어디까지 다룰지도 처음부터 정해 두고 싶었다. 사진과 설정은 브라우저 안에 보관한다. Chrome 웹 스토어에도 데이터를 수집하거나 사용하지 않는다고 선언했고, 공개 저장소에는 외부 서버·분석·추적 없이 동작한다고 적어 두었다.

사진을 올리고 순서를 바꾸는 일은 확장 안에서 끝난다. 언어도 영어·한국어·일본어·독일어로 고를 수 있게 했다. 거창한 화면보호기보다, 브라우저를 쓰다가 잠깐 자리를 비울 때 부담 없이 켤 수 있는 도구로 남기고 싶었다.

종료 조작, 언어, 탭별 상태와 개인정보 보호 범위를 안내하는 화면

유료 개발자 등록 후 Chrome 웹 스토어에 올리기

확장을 만든 뒤에는 Chrome 확장 프로그램 개발자 등록을 했다. 유료 등록을 마치고, 스토어에서 보여 줄 설명과 스크린샷 다섯 장을 준비해 Chrome 웹 스토어에 올렸다.

등록 과정에서는 확장 코드만큼 “이게 무엇을 하는 도구인가”를 짧고 정확하게 보여 주는 일이 필요했다. 한 번의 실행, 기본 자연 이미지, 내 사진, 표시 방식과 시계, 종료와 개인정보 보호라는 다섯 장면으로 정리했다. 현재 Chrome 웹 스토어에서 공개되어 있다.

관련 기록