mark. — 북마크 새 탭

새 탭에서 바로 이어지는 북마크 홈

mark.는 Chrome의 새 탭 페이지를 북마크 탐색과 관리에 맞춘 개인 홈 화면으로 바꾸는 Manifest V3 확장 프로그램입니다. 별도의 북마크 저장소를 만들지 않고 Chrome이 제공하는 chrome.bookmarks 트리를 읽고 수정합니다. 새 탭을 열면 상위 북마크와 폴더를 카드 그리드로 보고, 폴더를 열어 중첩된 구조를 탐색하고, 검색으로 저장한 페이지에 바로 접근할 수 있습니다.

실제 사용 흐름

첫 화면에는 Chrome 북마크의 상위 항목이 반응형 그리드로 나타납니다. 북마크 카드는 제목, URL과 사이트 아이콘을 보여주며 선택하면 해당 페이지를 새 탭으로 엽니다. 폴더 카드는 이름과 바로 아래 항목 일부를 미리 보여주고, 열면 폴더 탐색기가 나타납니다.

탐색기는 현재 폴더의 내용을 카드로 보여주고, 사이드바 트리와 경로 표시로 하위 폴더를 오갑니다. 모바일 폭에서는 사이드바가 접히는 패널로 바뀌고, 데스크톱에서는 콘텐츠 옆에 고정됩니다. 폴더 안에서 북마크와 폴더를 추가하거나 이름·URL을 수정하고 삭제할 수 있습니다. 삭제 전 확인 대화상자를 제공하며, 폴더 삭제는 하위 항목을 포함한 트리 삭제로 처리합니다.

화면 상단의 북마크 검색은 중첩된 전체 트리에서 제목과 URL을 대소문자 구분 없이 찾고, 입력이 멈춘 뒤 500ms 후 결과를 갱신합니다. 별도의 Google 검색 입력도 두어 검색어를 제출하면 Google 검색 결과로 이동합니다. 첫 화면의 북마크와 폴더 카드는 드래그해 순서를 바꿀 수 있으며, 이동은 Chrome 북마크의 순서 변경으로 저장됩니다.

Chrome 북마크와 상태 동기화

확장 프로그램의 데이터 원본은 Chrome 북마크 API입니다. 생성·수정·삭제·이동은 각각 Chrome API 호출로 반영하므로 mark. 전용 데이터베이스와 계정은 없습니다. TanStack Query가 북마크 트리를 읽고, 앱에서 변경 작업이 성공하면 쿼리를 무효화해 최신 트리를 다시 가져옵니다. 이 방식으로 Chrome의 기본 북마크 구조를 유지하면서 별도 UI를 제공합니다.

저장 모델을 새로 설계하는 대신 브라우저가 관리하는 북마크 ID, 부모 폴더, 순서, 제목, URL을 그대로 활용했습니다. 정렬이나 폴더 이동의 결과도 Chrome 쪽 구조에 기록되므로 다른 Chrome 북마크 UI와 같은 데이터를 바라봅니다. 다만 mark.가 자체 계정이나 별도 클라우드 동기화를 제공하는 것은 아닙니다.

구현 구조

React와 TypeScript, Vite로 구성하고, Chrome 확장 패키지는 Vite의 extension 빌드 모드로 생성합니다. Manifest V3의 chrome_url_overrides.newtab가 새 탭을 앱의 index.html로 연결하고, 확장 권한은 북마크 트리 접근에 필요한 bookmarks 하나만 선언합니다.

코드는 화면 역할에 따라 나눴습니다. entities/bookmark에는 북마크 타입과 트리 탐색 함수를, features/bookmark와 features/folder에는 카드 및 편집 동작을 둡니다. features/explorer는 폴더 탐색 경로와 사이드바 상태를 Zustand로 관리하고, widgets는 헤더와 검색, shared/api는 Chrome API 기반 조회·변경 작업을 담당합니다. TanStack Query는 비동기 트리 조회와 변경 후 갱신을, dnd-kit은 카드 정렬 인터랙션을 맡습니다. 공통 UI 구성요소와 Tailwind CSS를 사용해 반응형 화면을 구성했습니다.

언어, 테마와 개인정보 경계

인터페이스는 한국어·영어·일본어·중국어 간체를 지원합니다. 언어는 설정 창에서 바꾸며 선택값은 브라우저의 localStorage에 저장됩니다. 테마는 라이트와 다크를 전환할 수 있고, 사용자의 시스템 테마를 초기값으로 따릅니다.

북마크 트리와 편집 내용은 Chrome 북마크 API 안에서 처리되며 이를 저장하는 mark. 서버나 계정은 없습니다. 앱 자체의 분석·추적 코드는 두지 않았습니다. 다만 화면은 Google Fonts와 외부 favicon 서비스를 요청하고, 사용자가 Google 검색을 제출하면 검색어가 Google로 전달됩니다. 따라서 북마크 관리 데이터의 자체 서버 전송이 없다는 점과, 화면 기능을 위한 외부 요청은 구분해 안내합니다.

해결한 설계 과제

• Chrome 데이터와 별도 상태의 불일치 방지 — 북마크를 복제하지 않고 기본 API를 원본으로 사용해 생성·수정·삭제·정렬 결과가 Chrome 구조에 반영되게 했습니다.
• 탐색과 검색의 역할 분리 — 폴더 계층을 유지하는 탐색기와 전체 트리를 대상으로 하는 제목·URL 검색을 함께 제공해, 구조를 따라가거나 바로 찾아가는 두 흐름을 지원합니다.
• 변경 이후 화면 일관성 — 북마크 변경 성공 후 TanStack Query 캐시를 무효화하고, Chrome의 최신 트리를 다시 읽어 카드와 탐색기 화면을 맞춥니다.
• 가벼운 확장 권한 — 새 탭 대체와 북마크 API만 사용하고, 서버 연동이나 광범위한 브라우저 권한 없이 동작하도록 구성했습니다.