Claude Code 와 Chrome 북마크 AI 분류 파이프라인 만들기
쌓여만 가는 브라우저 링크를 한 번에 정리할 시간
웹 서핑을 하다 보면 나중에 다시 읽으려고 저장해 둔 링크가 금세 수백 개로 불어납니다. 정작 필요한 정보를 찾으려 할 때 검색이 제대로 되지 않아 결국 포털 사이트에서 같은 내용을 다시 검색하는 일이 빈번합니다. 브라우저에 저장된 HTML 파일만 제공하면, AI 도구가 카테고리별로 알아서 분류하고 이를 깔끔한 대시보드로 시각화해 주는 자동화 파이프라인을 구축해 보겠습니다. 복잡한 수작업 없이 효율적으로 디지털 자산을 정리하는 방법입니다.
도구 선택과 기초 설정
작업에 필요한 도구는 간단합니다. CLI 환경을 선호하고 로컬 파일을 즉시 수정하고 싶다면 Claude Code가 좋은 선택입니다. 만약 클라우드 기반이나 GUI 위주의 개발 환경을 원한다면 다른 AI 코딩 보조 도구를 적용해도 무방합니다. 여기서는 Claude Code 환경을 바탕으로 로컬 디렉터리 내의 파일을 제어하는 흐름을 살펴보겠습니다. 터미널 명령어를 다루는 데 익숙하지 않아도 단계별로 진행하면 무리 없이 구현할 수 있습니다.
가장 먼저 브라우저 설정 화면에서 북마크 관리자로 이동합니다. 관리자 메뉴에서 내보내기 기능을 실행하여 bookmarks.html 파일을 내려받습니다. 이 파일을 작업용으로 새로 만든 빈 폴더 안에 저장하는 것으로 시작합니다.
데이터 정제와 뼈대 구축
구조를 안정적으로 잡기 위해 단계를 나눕니다. 웹 문서에는 스타일 정보와 메타데이터가 복잡하게 얽혀 있으므로, 순수하게 링크 주소와 제목만 먼저 추출하는 가벼운 스크립트를 생성합니다. 터미널을 열고 첫 번째 요구 사항을 입력합니다.
데이터 처리를 분리하는 데는 명확한 이유가 있습니다. 원본 HTML 파일 전체를 한 번에 AI 모델에 전달하면 입력 제한이나 토큰 비용 문제가 발생하며 연산 오류 확률도 높아집니다. 따라서 핵심 텍스트 데이터만 정리한 JSON 파일을 생성한 뒤 다음 작업을 수행하는 것이 효율적입니다. cheerio 라이브러리를 설치하고 스크립트를 실행하면 깔끔하게 정돈된 parsed_bookmarks.json 파일이 준비됩니다.
이때 cheerio 라이브러리를 활용하는 이유는 가볍고 빠르기 때문입니다. 무거운 브라우저 환경을 띄우지 않고도 메모리 상에서 HTML DOM 구조를 빠르게 탐색하여 원하는 요소만 골라낼 수 있어 대용량 북마크 파일도 몇 초 만에 파싱이 완료됩니다.
다음으로 AI 모델이 일관된 기준으로 데이터를 카테고리화하도록 명확한 가이드를 제공해야 합니다. 프로젝트 폴더의 CLAUDE.md 파일에 제약 사항을 정의해 둡니다.
- 대분류 카테고리: 개발/기술, 디자인/아트, 뉴스/정보, 쇼핑/생활, 기타
- 결과 형식: JSON
제약을 사전에 정의하면 AI 모델이 임의로 분류 기준을 늘리거나 엉뚱한 레이블을 생성하는 오작동을 예방할 수 있습니다.
스크립트 실행 시 환경변수로 인증 키를 전달하면 간단하게 연동할 수 있습니다. 수백 개의 링크를 한 장씩 요청하면 API 요금 부담이 커지므로, 약 10개 내외의 데이터를 묶음 단위로 처리하도록 코드를 설계하면 비용을 아끼고 속도도 올릴 수 있습니다. 보안을 위해 API 키는 소스 코드에 하드코딩하지 않고, 로컬 환경변수 설정 파일인 dotenv 라이브러리를 임포트하여 처리하는 구조를 권장합니다.
빌드 스크립트를 실행하면 최종 결과물로 index.html 파일이 생성됩니다. 브라우저로 접속해 보면 중구난방으로 퍼져 있던 웹 주소들이 지정된 카테고리에 맞춰 정갈한 카드 형태로 정렬된 모습을 볼 수 있습니다. 카드 내의 링크를 클릭하면 해당 사이트로 곧바로 이동합니다.
파이프라인 실행 중 오류 해결하기
작업 중에 예기치 못한 문제가 나타나면 아래 세 가지 요소를 점검해야 합니다.
첫째, 첫 단계에서 생성된 json 파일이 비어 있거나 올바르지 않은 구조로 생성되는 현상입니다. 이는 브라우저에서 내보낸 HTML 파일의 문자 인코딩 설정이 맞지 않아 파서가 비정상 동작할 때 발생합니다. 텍스트 에디터로 원본 문서를 열고 인코딩 형식을 UTF-8로 변경하여 다시 저장한 후 실행해 봅니다.
둘째, AI 서비스를 연동하여 호출할 때 할당량 초과 에러가 발생하는 상황입니다. 단시간에 과도한 요청이 가해지거나 요금제 제한 수치를 넘었을 때 발생하므로, 스크립트 내부의 루프 사이에 약간의 대기 시간을 부여하거나 일괄 전송 데이터 크기를 작게 조정하여 우회할 수 있습니다. 요청 간 간격을 2초 이상 두고 재시도하는 로직을 추가하는 방법이 효과적입니다.
셋째, 완성된 웹페이지에서 필터 버튼을 눌러도 반응이 없고 전체 목록만 그대로 나열되는 오류입니다. 스크립트가 데이터에 부여한 카테고리 명칭과 웹페이지 탭 버튼의 식별자 속성값이 일치하지 않아 매칭에 실패한 경우가 대다수입니다. 이 문제는 분류 데이터를 내보낼 때 한글 명칭 대신 사전에 약속된 영어 영문 식별값으로 치환하여 매칭하면 간단히 해결됩니다.
추가적인 기능 확장 아이디어
기본적인 틀이 완성되었다면 유효성 확인을 덧붙이는 것도 좋습니다. 오랜 시간 방치되어 접속이 끊어지거나 도메인이 사라진 링크를 사전에 스캔하여 걸러내는 기능을 추가하면 전체 데이터의 신뢰도를 높일 수 있습니다. 정기적으로 유효하지 않은 주소를 추적해 삭제하는 논리 구조를 더하면 한층 완성도 높은 관리가 가능해집니다. 이후에는 이 파이프라인을 주기적인 자동화 도구와 연동하여 자동으로 갱신하는 방안도 검토해 볼 수 있습니다.
이런 글도 있어요
관련 검색어
- 🔍 Claude Code 사용법
- 🔍 Claude Code 비교
- 🔍 Chrome 북마크 사용법
- 🔍 Chrome 북마크 비교
- 🔍 북마크 분류 사용법
- 🔍 북마크 분류 비교
