[Toy Project] New Tab Customization with React, 나만의 새 탭 만들기

크롬의 시작화면에서는 왜 바로가기 아이콘을 10개까지만 만들 수 있을까요? 또한 같은 기능을 같은 UI로 다양한 브라우저에서 사용할 순 없을까요? 전부터 이게 불만이었던 저는 웹애플리케이션을 만들어서 새 탭을 커스터마이징해보기로 했습니다.
 

공통

페이지 전환

각각의 페이지를 전환할 때 효과를 주기 위해 CSSTransition을 사용했습니다.

화면 전환

화면 전환시 기존의 페이지가 밀려나고 새로운 페이지가 들어오는 형태의 UI를 제공했습니다. 이 과정에서 메뉴나 상단바 아이템들은 전환의 대상이 되지 않고 고정되게 해놨습니다. 페이지 전환은 버튼을 통해서도, 단축키를 통해서도 이루어집니다.
이 과정은 page routing이 아닌 내부 컴포넌트 변경을 통해 이루어집니다. 따라서 navigation hook은 사용하지 않았고, 페이지들을 관리하는 컴포넌트를 놓는 방식으로 개발했습니다. 이 컴포넌트에서 화면에 보여질 페이지를 결정하며, 코드 수정을 통해 페이지의 배치를 쉽게 변경할 수 있게 해놓았습니다.

메뉴

왼쪽 상단의 메뉴 버튼을 통해 프로젝트의 설명이 담긴 노션 페이지와 간단한 사용 방법에 대한 내용들을 볼 수 있습니다. 

메뉴

메뉴 사이드바는 외부 화면을 클릭하거나, 뒤로가기 버튼을 클릭하거나, esc를 누르는 방법으로 끌 수 있습니다. "이거 왜 안돼?" 라는 생각이 들지 않게 완성도를 높일 수 있도록 다양한 제스쳐를 통해 기능이 수행되게 만들었습니다.

다크모드

저는 주로 다크모드를 사용하지만 화이트 모드 사용자를 위해 양측 간 전환할 수 있는 기능을 만들었습니다.

다크모드

상단 아이콘 혹은 ctrl (command) + shift + L 로 단축키로 화면 모드를 전환할 수 있습니다.

바로가기 링크 페이지

크롬의 UI를 빌려 검색창과 바로가기 링크가 있는 공간을 만들었습니다.

바로가기 링크

바로가기 링크는 무한대로 (정확히는 LocalStorage가 수용 가능한 만큼) 생성할 수 있게 했고, 4줄이 넘어가는 경우 스크롤바를 통해 보여지게 했습니다. 원본과 비슷한 편의성을 주기 위해 dnd-kit을 사용하여 드래그 앤 드롭을 통해 순서를 변경할 수 있게 해주었습니다.

드래그 앤 드롭

파비콘의 경우에는 바로가기 추가를 통해 등록하는 시점에 파비콘이 있을 만한 주소 목록으로 모두 비동기 요청을 보내서, 가장 먼저 성공한 URL이 있다면 해당 값을 저장해두고, 만약 없다면 URL/favicon.ico 을 저장해주었습니다. 파비콘을 제대로 찾기 위해서는 html 문서의 link를 확인하고 해당 주소를 저장해야하는데, 이게 public 하게 열려있지 않은 경우 CORS에 위반되어 파비콘을 가져올 수 없었습니다. 백엔드 애플리케이션을 사용하면 이 문제를 해결할 수 있을 것 같지만, 현재는 백엔드와 연결되어있지 않으므로 단순히 외부에 열려있는 파비콘 주소만을 찾기 위해 노력했습니다. 

검색창

검색창에는 몇가지 예약어들을 사용하여 편의성을 더했습니다. 예를 들어 "#n: 고양이" 을 검색창에 입력하면 네이버의 "고양이" 검색결과 창으로 이동합니다. 제가 자주 사용하는 구글, 네이버, 스택오버플로우(#so:), 깃허브(#gh:) 등의 사이트를 예약어로 걸어놓아 별도로 페이지 이동하지 않고도 이 검색창에서 모든 사이트에 대해 검색할 수 있게 해 놓았습니다.
이거 만들고 아이디어 좋다고 생각했는데 이미 크롬에서 지원하는 기능이긴 했습니다.^^

플레이리스트

음악을 들을 수 있는 페이지를 만들었습니다.

여러 장르의 플리들을 골라 들을 수 있게 해놓았습니다. 이 위젯은 페이지보다 상위 레벨에 존재하여 페이지 전환과 상관없이 유지됩니다. 역시 드래그 앤 드롭이 설정되어있어 자유롭게 옮길 수 있고, x 버튼이나 esc를 통해 종료할 수 있습니다.
이 부분 개발이 어려웠습니다.. 드래그 앤 드롭이 익숙하지도 않은데 하위 컴포넌트들에 영향을 주지 않으면서 이 위젯은 위젯대로 예외처리나 로직을 넣어줘야 했는데 쉽지 않았습니다..  위젯을 화면 아래로 내리면  페이지의 height 까지 같이 늘어나고 그랬는데 지금은 다 해결했습니다.

메모장

간단한 내용들을 적을 수 있는 메모장 기능이 있는 페이지도 만들어 놓았습니다.

새로운 메모를 생성할 때 마다 랜덤한 색상이 결정됩니다. 이 역시 드래그 앤 드롭으로 옮길 수 있습니다. (이 정도면 드래그 앤 드롭 쓰고 싶어서 토이프로젝트를 한 것 같습니다.) 옮길 때 마치 메모지를 떼었다가 붙이는 느낌을 주기 위해서 메모지를 살짝 좌상단으로 옮기고 원래 위치에는 그림자를 놓았는데 의도한 바는 별로 안느껴지고 그냥 불편한것 같습니다.
그리고 메모지에 격자 무늬가 나오는 이슈가 있습니다. 절대 의도하지 않았는데 왜 나오는 건지 모르겠습니다. 심지어 듀얼모니터를 쓸 때, 메인 모니터에는 격자무늬가 나타나지 않는데 노트북 화면에서만 격자 무늬가 나타납니다. 이유 아시는 분 계신다면 제보 바라겠습니다.

앞으로 할 것

동기화

프론트엔드 웹앱으로만 개발되었기 때문에 동기화를 어떻게 수행할지 고민을 했습니다. 아무래도 로그인 기능은 전반적인 컨셉에 비해 너무 무거울 것 같아 단순하게 토큰을 발급하고 해당 토큰을 사용자가 직접 다른 웹브라우저, 혹은 다른 PC에 입력하면 서버에 저장되어있던 링크를 비롯한 정보를 전달할 수 있게 하려했습니다. 이를 위해서 백엔드 서버를 만들고 배포를 하려고 여러 배포처를 알아봤습니다. fly.io라는 곳에서 서버를 일정 조건하에 무료로 배포할 수 있게 해주어서 이를 사용하여 동기화를 개발 중입니다.

백엔드와 함께라면

백엔드 애플리케이션까지 함께 사용하면 여러 기능들을 추가로 도입할 수 있을거라 생각합니다. 지금은 번역 기능이나 chatgpt 서비스를 제공해주는 페이지를 만들 기획에 있지만, 시간도 부족하고 해서 전부 보류중입니다. 나중에 필요한 일이 생기면 그제서야 개발하게 될 것 같습니다.

사용 방법 및 깃헙 주소

웹페이지

Hello, World!

깃헙

GitHub - sbslc2000/mynewtab: Chrome New Tab을 커스터마이징합니다.

사용 방법

My New Tab v1.0.2

 
그럼 많관부