# 열어 둔 탭을 작업 공간으로 바꾸기 - URL: https://soohan.dev/projects/personal/taboard - Category: projects/personal - Published: 2026-08-03 - Tags: chrome-extension, javascript, local-first, google-drive - Author: Soohan Park > 수많은 탭 사이에서 작업의 맥락을 잃는 불편을 해결하려고, 현재 탭과 개인 보드를 한 화면에 두고 여러 기기에서 흐름을 이어갈 수 있는 Chrome 확장을 만들었다. --- Taboard 로고와 Tabs, organized. 문구가 있는 남색 배너 저는 브라우저 탭을 많이 열어 두고 일합니다. 업무를 볼 때는 문서와 참고 자료가 쌓이고, 개인 프로젝트를 할 때도 검색 결과와 나중에 다시 볼 페이지가 계속 늘어납니다. 하나의 일을 알아보려고 연 탭이 다음 일을 시작할 때까지 남아 있고, 그렇게 몇 가지 작업이 겹치면 탭 제목은 아이콘과 몇 글자만 보일 정도로 줄어듭니다. 그 상태에서는 원하는 탭을 찾기 위해 하나씩 눌러보게 됩니다. 그렇다고 모두 닫기에는 아직 끝나지 않은 일이 남아 있는 것 같고, 북마크에 넣으면 왜 열어뒀는지 맥락이 사라집니다. 다른 기기에서 작업을 이어갈 때는 필요한 페이지를 다시 검색하고 같은 환경을 만드는 일도 반복했습니다. Taboard는 이 불편을 직접 줄여보고 싶어서 만든 Chrome 확장입니다. 탭을 무조건 줄이는 대신 지금 열려 있는 탭과 나중에 이어볼 작업을 한 화면에서 오갈 수 있게 만들었습니다. ## 탭의 개수보다 작업의 맥락 많은 탭을 열어 두는 데는 나름의 이유가 있었습니다. 각각의 탭은 단순한 URL이 아니라 지금 하고 있는 일의 일부였습니다. 함께 비교하던 자료, 아직 읽지 않은 문서, 답을 찾는 중인 검색 결과처럼 서로의 관계가 중요했습니다. 문제는 브라우저의 탭 바가 이 관계를 보여주지 못한다는 점이었습니다. 업무와 개인 작업이 섞이고, 어제 하던 일과 방금 시작한 일이 같은 줄에 놓입니다. 창을 여러 개로 나누는 것도 잠시뿐이고, 기기를 바꾸면 그 구분을 다시 만들어야 했습니다. (또한, 많은 탭을 띄워두면 그 탭을 아이콘만 보고 파악을 해야하는 문제는 덤이었구요 😂) 그래서 Taboard의 목표를 단순한 탭 정리가 아니라 작업의 맥락을 보존하는 것으로 잡았습니다. 당장 쓰는 탭은 열어 두고, 다시 돌아올 가치가 있는 탭은 작업별 보드에 남깁니다. 탭을 닫아도 그 탭이 속했던 일까지 사라지지 않게 하는 것이 더 중요했습니다. ## 가장 자주 여는 화면에 두기 별도의 탭 관리 앱을 만들면 탭을 정리하기 위해 또 다른 화면을 찾아가야 합니다. 반면 새 탭은 브라우저를 사용하는 동안 계속 마주치는 화면입니다. 그래서 Taboard는 Chrome의 새 탭 페이지를 현재 창의 탭과 개인 보드가 나란히 있는 작업 공간으로 바꿉니다. 왼쪽 드로어에서는 현재 창에 열린 탭을 검색하고, 전환하거나 닫을 수 있습니다. 남겨둘 탭은 오른쪽 보드로 드래그하면 제목과 URL을 가진 링크 카드가 됩니다. 탭은 그대로 유지되므로 하던 작업을 끊지 않고 정리할 수 있고, 저장한 뒤에는 안심하고 닫을 수 있습니다. 보드는 `space → board → card` 구조입니다. 업무와 개인 작업을 space로 나누고, 그 안에서 주제나 프로젝트별로 board를 만듭니다. 링크뿐 아니라 짧은 메모와 할 일도 같은 곳에 둘 수 있습니다. 태그와 검색, 즐겨찾기는 어디에 넣었는지 기억나지 않는 카드를 다시 찾는 데 사용합니다. 이 구조 덕분에 열려 있는 탭과 저장해 둔 자료가 서로 단절되지 않습니다. 현재 탭은 아직 진행 중인 작업이고, 보드의 카드는 다음에 돌아올 수 있도록 남겨둔 작업입니다. 둘 사이를 드래그 한 번으로 오갈 수 있게 한 것이 제가 Taboard를 사용하면서 가장 자주 쓰는 흐름입니다. ## 업무와 개인 작업을 이어가는 방법 실제로 사용할 때는 업무용 space와 개인용 space를 나누고, 진행 중인 주제마다 보드를 만듭니다. 조사하면서 열린 탭 중 계속 참고할 자료는 보드에 저장하고, 당장 필요하지 않은 탭은 닫습니다. 며칠 뒤 다시 그 일을 시작할 때는 보드에 남아 있는 링크와 메모를 보며 이전의 맥락을 되찾습니다. 여러 페이지가 함께 필요하면 보드의 `Open all`로 링크 카드만 새 탭 그룹에 한꺼번에 엽니다. 처음부터 검색을 반복하는 대신, 정리해 둔 보드를 다시 브라우저의 작업 상태로 펼치는 방식입니다. 개인 프로젝트를 하다가 업무로 전환하거나, 업무를 멈추고 다른 기기에서 이어볼 때도 같은 흐름을 사용합니다. Taboard를 만든 뒤에는 탭을 깨끗하게 유지하는 것 자체에 집착하지 않게 됐습니다. 지금 필요한 탭은 자유롭게 열어 두되, 작업이 바뀌는 시점에 다시 찾을 것만 보드로 옮기면 됩니다. 탭을 많이 쓰는 습관을 억지로 바꾸기보다 그 습관 안에 정리할 수 있는 경계를 만든 셈입니다. ## 로컬에서 시작하고 필요할 때 동기화하기 매번 여는 새 탭 화면이 계정 로그인이나 네트워크 상태에 의존하는 것은 원하지 않았습니다. 그래서 보드 데이터는 기본적으로 `chrome.storage.local`에 저장합니다. Google Drive를 연결하지 않아도 모든 핵심 기능을 쓸 수 있고 오프라인에서도 동작합니다. 여러 기기에서 같은 작업을 이어가기 위해서는 Google Drive 동기화를 선택적으로 붙였습니다. 연결하면 Drive의 `TaboardSync.json` 한 파일로 보드 데이터를 주고받습니다. 별도 서버나 계정을 운영하지 않으면서, 제가 이미 사용하는 Google 계정 안에서 백업과 기기 간 이동을 해결하기 위한 선택이었습니다. 로컬 우선 구조 덕분에 새 탭은 빠르게 열리고, Drive에 문제가 생겨도 당장 보드를 쓰는 일은 계속할 수 있습니다. 개인 작업과 업무 자료를 어느 기기에서 열더라도 같은 보드에서 시작할 수 있다는 점은 Taboard를 실제로 계속 사용하게 된 중요한 이유입니다. ## 작업의 연속성을 지키는 동기화 동기화는 기능 목록에서는 한 줄이지만, 여러 기기에서 안심하고 쓰려면 가장 신중해야 하는 부분이었습니다. 처음에는 space, board, card의 ID와 수정 시각을 비교해 로컬과 Drive 데이터를 합쳤습니다. 삭제한 카드가 다른 기기에서 다시 나타나지 않도록 예외도 추가했습니다. 하지만 병합 규칙이 복잡해질수록 새로운 브라우저의 빈 상태가 Drive 데이터를 일부 누락한 채 다시 올리는 경로처럼, 데이터 유실 가능성을 설명하기 어려워졌습니다. 결국 양쪽을 영리하게 합치는 것보다 어느 쪽을 기준으로 삼는지 명확한 편이 낫다고 판단해 Drive-first로 바꿨습니다. 연결된 세션은 시작할 때 먼저 원격 데이터를 확인하고, 그 전에는 로컬 상태를 올리지 않도록 했습니다. Drive-first에도 예외는 필요했습니다. 원격이 비어 있고 로컬에 만든 보드가 있다면 로컬로 Drive를 초기화합니다. 탭을 닫기 직전이라 아직 Drive에 전송되지 못한 로컬 변경이 있고 그사이 다른 기기의 변경이 없다면 로컬을 먼저 올립니다. 처음 Drive를 연결할 때 양쪽 데이터가 다르면 로컬 보드를 교체하기 전에 확인합니다. 반대로 다른 기기가 원격을 바꾼 실제 충돌에서는 Drive를 선택합니다. 새 탭은 일반적인 앱처럼 오래 열려 있지 않습니다. 카드를 추가하고 곧바로 탭을 닫는 일이 자연스럽기 때문에, 지연 저장을 취소하지 않고 즉시 로컬 스토리지에 넘기도록 했습니다. Drive 전송을 기다리다 닫힌 경우는 dirty flag로 남겨 다음 시작 때 복구합니다. 전송 중에 다시 편집했다면 방금 올린 상태와 현재 상태가 같을 때만 dirty를 지웁니다. 이런 경계는 평소에는 눈에 보이지 않습니다. 하지만 다른 기기에서 보드를 열었을 때 마지막 작업이 그대로 남아 있어야 비로소 작업의 연속성이 생깁니다. 현재 자동 테스트 34개는 시작 시 동기화 결정, 전송 중 편집, 첫 연결 확인, 삭제 Undo 같은 경계를 검증합니다. 실제 Chrome과 Drive를 거치는 전체 흐름은 별도로 직접 확인하고 있습니다. ## 직접 쓰면서 줄여간 마찰 초기 화면은 한 space의 보드를 여러 칼럼으로 펼쳤습니다. 보드다운 모습이었지만 탭 드로어와 함께 사용하니 화면이 좁아지고, 보드가 늘수록 가로로 이동해야 했습니다. 직접 쓰면서 전체 구조를 보는 사이드바와 하나의 보드에 집중하는 상세 화면으로 바꿨습니다. 그 뒤에 추가한 기능도 대부분 반복해서 사용하며 느낀 작은 불편에서 나왔습니다. 탭 드로어를 고정하는 기능, 보드를 바로 오가는 단축키, 검색 결과가 있는 보드를 알려주는 숫자, 실수로 지운 카드와 보드를 되돌리는 Undo를 넣었습니다. 탭이나 카드를 현재 보드뿐 아니라 사이드바의 다른 보드로 바로 드래그할 수도 있게 했습니다. 각 기능은 크지 않지만 새 탭처럼 하루에 여러 번 만나는 화면에서는 작은 마찰이 그대로 누적됩니다. 새 기능을 많이 넣기보다 지금 하던 작업을 멈추지 않고 저장하고, 찾고, 다시 여는 흐름을 짧게 만드는 쪽으로 계속 다듬고 있습니다. ## 내가 필요해서 만들고, 지금도 쓰는 도구 Taboard는 현재 [Chrome 웹스토어](https://chromewebstore.google.com/detail/taboard/kkdjiaclljjjehfkangjjkjodekigacg)에 배포되어 있습니다. 처음에는 많은 탭 사이에서 원하는 페이지를 찾느라 시간을 쓰는 제 불편을 해결하려고 시작했지만, 지금은 개인 프로젝트와 업무 모두에서 실제로 사용하는 도구가 됐습니다. 탭을 자유롭게 열어 두고, 작업이 바뀔 때 필요한 맥락만 보드에 남기고, 다른 기기에서는 그 보드에서 다시 시작합니다. 덕분에 탭을 관리하는 일이 별도의 정리 시간이 아니라 작업 흐름의 일부가 됐고, 브라우저나 기기가 바뀌어도 이전에 하던 일을 이어가기 쉬워졌습니다. [GitHub 저장소](https://github.com/soohanpark/taboard)에는 처음의 다중 칼럼 화면부터 현재 구조, 동기화 방식을 여러 번 바꾼 과정까지 남아 있습니다. 직접 겪은 불편에서 시작해 직접 사용하는 도구가 된 만큼, 앞으로도 기능의 크기보다 매일 쓸 때 걸리는 작은 부분을 고치며 이어갈 생각입니다.