lichess puzzle streak을 데스크톱으로 플레이하다가 자동 재시작이 가능하면 좋겠다고 생각해서 만들게 됐다.
plasmo
프레임워크를 썼고, 위에 있는 옵션 HTML 태그를 복제해서 사용했다.
실패하면 재시작 버튼에 3초 카운트다운을 보여주고, 끝나면 자동으로 버튼을 클릭해주는 간단한 확장 프로그램이라 출시하지는 않았다.
그리고 정답이 뭐였는지 첫 수는 보여주는데 끝까지 보여주지는 않아서, 다음 수 버튼을 클릭 불가능할 때까지 누르는 로직을 추가해줬다.
만든 것들을 갤러리처럼 한눈에 볼 수 있게 정리해두고 싶어서 만들게 되었다.
만들 때마다 추가하면 성취감이나 동기부여로 삼을 수 있고, 이후에 쌓이면 기록으로서도 의미있겠다고 생각했다.
SvelteKit으로 만들었고 정적으로 생성하는 방식이다.
작성은 각각 JSON 파일과 이미지 한 장으로 이루어지는데, 각 프로젝트마다 폴더를 만들어서 모아두는 식으로 해두었다.
출시 여부와 상관 없이 그럴듯한 결과물이 나올 때마다 추가해나가고 있다.
폴더 생성, 이미지 업로드, JSON 파일 생성 및 정해진 필드 작성을 간편하게 하도록 해주는 UI 페이지도 하나 만들어줬다.
옆에 SvelteKit 프로젝트를 하나 생성한건데, nodejs 스크립트 위에 Svelte로 UI를 덮어준거라고 생각할 수 있다. 폴더 및 파일 읽기, 쓰기, 수정은 nodejs를 통해 돌아간다.
이 페이지는 혼자만 쓸거기 때문에 화려하고 눈이 아플 수도 있는 색들을 사용해보고 싶었다.
비슷한 문서를 여러 개 열고 있으면 탭 이름이 앞부분은 비슷해서 알아보기 어려울 때가 있다.
그런 상황에서 확장 프로그램으로 변경하는데, 마우스로 뭘 클릭할 필요 없이 키보드만으로 바로 바꾸고 돌아가는 게 가능하도록 만들고 싶었다.
F2 키가 파일 이름을 변경하는 단축키니까 아무 탭에서 F2를 누르면 열리도록 했고, Tab이나 Enter, Shift+Tab이나 Shift+Enter로 이동이 가능하게 만들어봤다.
재미로 금방 만든건데 결과가 꽤나 마음에 드는 편이다.
공부할 때 탭을 끝없이 펼쳐나가는 습관이 있어서, 탭들을 한꺼번에 저장하고 열게 해주는 확장 프로그램에 대한 아이디어가 계속 있었다.
브라우저에서 여러 방법으로 복구가 가능하다는 건 알고 있지만, 특정 주제마다 공부할 때 열었던 탭들을 파일 형태로 저장해두고 나중에 필요할 때 꺼내쓸 수 있는 방식을 원해서 만들게 되었다.
여러 창이나 탭 그룹 등등을 모두 지원하고, 탭들을 선택해서 저장하는 것도 가능하다.
이전에 Snapshot Tabs라는 확장 프로그램을 만든 적이 있는데, 같은 문제를 해결하는거지만 팝업 페이지를 여는 방식으로 만든거였다.
하지만 개인적으로 그건 브라우저에 종속적이라고 생각해서 텍스트 형태로 저장하며 더 다양한 기능을 포함한 이 확장 프로그램이 완성작이라고 생각하는 편이다.
근데 막상 만들어서 출시를 하고 나니까 탭을 파일로 저장한다는 게 별로 중요하지 않은 게 되어버린 기억이 있다.
초기 버전은 이런 식으로 되어있었는데, 모든 창과 탭그룹 기능을 추가하고 사용자 피드백 UI까지 반영하는 업데이트를 진행했었다.
공부할 때 탭을 많이 열어두고 사용하는 편이어서 탭들을 정리할 방법을 찾던 중 탭 그룹에 대해 알게 됐다.
Ctrl+G 단축키를 누르면 탭 그룹이 만들어질거라고 생각했는데 그렇지 않길래 내가 만들어야겠다 하고 만들게 되었다.
사용자 피드백을 반영한 기능으로, 옵션을 통해 원한다면 생성할 때 이름을 정할 수 있다.
색상은 api에서 지정하는 게 불가능하고 그냥 현재 창에 없는 색으로 자동으로 생성된다.
잘 모르는 사람들도 전반적으로 어떻게 쓰는지 알 수 있게 간단한 설명 페이지를 만들어서 설치할 때 뜨게 만들어뒀다.