주요 콘텐츠로 건너뛰기
AI 튜토리얼

AI Homepage로 개인화된 AI 새 탭 홈페이지 만들기

AI Homepage를 설치하고 사용하는 방법을 알아보세요. 이 Chromium 확장 프로그램은 브라우징 활동에서 선택한 페이지를 읽고 Claude를 사용해 지속적으로 업데이트되는 새 탭 페이지를 생성합니다. 개인정보 보호와 API 비용을 고려하면서 디자인, 모델, 재생성 일정, 콘텐츠 지침을 맞춤 설정할 수 있습니다.

약 9분 소요
AI Homepage로 개인화된 AI 새 탭 홈페이지 만들기

AI Homepage의 기능

AI Homepage는 Chrome 또는 Chromium의 새 탭 페이지를 실제로 자주 방문하는 웹사이트를 바탕으로 작성된 홈페이지로 바꿉니다. 에이전트는 방문 기록의 순위가 매겨진 요약을 검토하고, 로그인된 브라우저에서 관련 페이지를 최대 8개 열어 콘텐츠를 분석한 다음 새로운 React 기반 페이지를 작성합니다.

결과물은 아침 신문, 차분한 읽기 목록, 밀도 높은 업무 대시보드 또는 설명한 거의 모든 스타일과 비슷하게 만들 수 있습니다. 홈페이지는 백그라운드에서 다시 생성되므로 새 탭에 최근 읽은 콘텐츠가 반영될 수 있습니다.

아침 신문 스타일로 생성된 AI 홈페이지 예시

생성된 각 링크는 에이전트가 실제로 읽은 페이지에서 가져옵니다. 에이전트는 URL을 만들어 내지 않도록 지시되며, 열 수 없는 페이지는 조용히 제외하지 않고 보고합니다.

시작하기 전에

다음이 필요합니다.

AI Homepage는 자신의 키로 실행하도록 설계된 초기 실험 프로젝트입니다. 설치하기 전에 개인정보 보호 및 보안 관련 영향을 검토하세요.

확장 프로그램 설치

  1. 저장소를 복제하고 해당 디렉터리로 이동합니다.
git clone https://github.com/ThariqS/ai-newtab.git
cd ai-newtab
  1. 고정된 pnpm 버전으로 의존성을 설치하고 확장 프로그램을 빌드합니다.
npx pnpm@10.11.1 install
npx pnpm@10.11.1 build

pnpm이 이미 설치되어 있다면 다음 명령을 사용해도 됩니다.

pnpm install
pnpm build
  1. Chrome에서 chrome://extensions를 엽니다.
  2. 오른쪽 상단의 스위치를 사용해 개발자 모드를 활성화합니다.
  3. 압축해제된 확장 프로그램을 로드를 클릭하고 apps/extension/.output/chrome-mv3를 선택합니다.
  4. Chrome에서 변경된 새 탭 페이지를 유지할지 묻는 경우 유지를 선택합니다.

첫 홈페이지 빌드하기

  1. 새 탭을 엽니다.
  2. 요청이 표시되면 Anthropic API 키를 붙여 넣습니다.
  3. 오늘의 홈페이지 빌드를 클릭합니다.

진행률 화면에는 에이전트 준비, 방문 기록 읽기, 브라우저에서 페이지 열기, 페이지 분석, 홈페이지 작성 등 빌드 단계가 표시됩니다. 첫 빌드에는 몇 분이 걸릴 수 있습니다.

빌드가 계속되는 동안 탭을 닫아도 됩니다. 확장 프로그램은 백그라운드 작업자에서 빌드를 실행하며, 결과 또는 진행 상황은 어느 새 탭에서나 확인할 수 있습니다. 빌드 중 Chrome이 닫히면 다음 새 탭에 중단된 빌드 재개가 표시됩니다.

콘텐츠 및 디자인 맞춤 설정

새 탭 페이지에서 ⚙️ 설정을 엽니다. 지침 필드는 모든 빌드에 포함되며 에이전트의 기본 지침보다 우선합니다. 이 필드로 페이지의 콘텐츠와 시각적 방향을 모두 제어할 수 있습니다.

예를 들어 다음과 같은 지침을 사용할 수 있습니다.

  • 아침 신문. 세리프 서체, 큰 제호, 주요 기사, 짧은 기사 모음 열.
  • 차분한 한 개의 열. 이미지 없음. 읽을 만한 내용 5가지와 각각의 가치에 대한 한 줄 설명.
  • 밀도 높은 대시보드: GitHub PR과 이슈를 먼저 표시하고, 그다음 Hacker News, 그다음 나머지 항목.
  • 1980년대 BBS처럼 녹색 글씨의 검은색 터미널, 고정폭 서체.
  • 스포츠와 정치는 제외. 날씨와 다음 일정 3개는 항상 표시.

저장 후 다시 빌드를 클릭하면 새 지침이 즉시 적용됩니다.

Claude 모델 선택

모델 설정은 홈페이지를 작성할 Claude 모델을 결정합니다.

아침 신문 스타일의 홈페이지 예시

  • Claude Sonnet 5.5: 품질과 비용의 기본 균형.
  • Claude Haiku 5.5: 가장 빠르고 비용이 가장 저렴한 옵션.
  • Claude Opus 5.5: 가장 세심한 편집자이지만 비용이 가장 높은 옵션.

변경한 모델은 다음 빌드부터 적용됩니다. 모든 빌드는 Anthropic API 키로 청구되는 단일 에이전트 세션이며, 총비용은 선택한 모델과 에이전트가 읽는 콘텐츠의 양에 따라 달라집니다.

자동 다시 빌드 제어

자동 다시 빌드는 기본적으로 활성화되어 있습니다. 수동 빌드를 한 번 완료하면 선택한 간격인 6시간, 12시간, 24시간 또는 48시간보다 홈페이지가 오래되었을 때 확장 프로그램이 백그라운드에서 조용히 홈페이지를 다시 빌드할 수 있습니다.

자동 다시 빌드는 다음 간격까지 실패한 빌드를 재시도하지 않으므로 무한 재시도 루프를 방지합니다. 즉시 다시 빌드하려면 오른쪽 상단의 ↻ 다시 빌드를 클릭합니다. 자동 다시 빌드를 비활성화하고 필요할 때만 빌드하여 API 사용량을 관리할 수도 있습니다.

확장 프로그램이 접근할 수 있는 항목

각 빌드에서 확장 프로그램은 방문 기록의 사이트 순위를 매기고 최대 8개의 페이지를 엽니다. 검색 엔진, 웹메일, 뱅킹 사이트 및 로그아웃된 마케팅 페이지는 건너뜁니다. 페이지를 열 수 없는 경우 결과에 해당 제한이 표시됩니다.

개인정보 보호 경고: 확장 프로그램은 주요 도메인, 방문 횟수, 일부 페이지 제목을 포함한 방문 기록 요약과 최대 8개 페이지의 정리된 HTML을 Anthropic API로 전송합니다. 페이지가 로그인된 브라우저에서 로드되므로 비공개 콘텐츠가 포함될 수 있습니다.

이 빌드는 사용자의 API 키를 사용하며, 키는 확장 프로그램의 로컬 저장소에 보관됩니다. 각 빌드가 종료되면 에이전트 세션과 업로드된 페이지가 삭제됩니다. 추가적인 개인정보 보호 세부사항은 ARCHITECTURE.md에서 확인할 수 있습니다. 또한 이 프로젝트는 확장 프로그램을 현재 상태 그대로 스토어에 게시하지 말 것을 권고합니다. 브라우저 프로필에 접근할 수 있는 사람이 저장된 API 키를 읽을 수 있기 때문입니다.

빌드 작동 방식

  1. getHistory가 가장 많이 방문한 도메인을 순위별로 요약해 제공합니다.
  2. getPageHtml이 최대 8개의 페이지를 선택합니다. 확장 프로그램은 백그라운드 창에서 페이지를 열고 HTML을 정리한 뒤, 결과를 에이전트 샌드박스의 파일로 마운트합니다.
  3. grep과 read가 해당 파일에서 헤드라인, 게시물, 링크를 추출합니다.
  4. write가 새 탭 페이지에서 렌더링할 React 컴포넌트를 생성합니다.

확장 프로그램의 백그라운드 워커는 중간 서버 없이 Claude Managed Agents 세션을 직접 구동합니다. 두 가지 사용자 지정 도구는 chrome.history와 chrome.tabs가 필요하므로 확장 프로그램 내부에서 실행됩니다. 스크랩한 페이지는 신뢰할 수 없는 입력으로 처리되기 때문에 셸 액세스가 비활성화된 에이전트 샌드박스에서 그 외 처리가 이루어집니다.

프로젝트 개발 및 테스트

저장소는 다음 세 가지 주요 영역으로 구성됩니다:

  • packages/agent-core: chrome.* 또는 node:*를 포함하지 않는 호스트 비종속 에이전트 루프입니다.
  • apps/extension: WXT 및 React MV3 확장 프로그램입니다.
  • harness: Chrome 외부에서 에이전트 코어를 실행하고 빌드된 확장 프로그램을 테스트하기 위한 Bun 스크립트입니다.

유용한 개발 명령은 다음과 같습니다:

pnpm dev                 # 핫 리로드가 적용된 WXT
pnpm typecheck           # 모든 패키지
pnpm test                # 단위 테스트; API 호출 없음, Bun 필요
pnpm extension:test      # 헤드리스 Chrome 확장 프로그램 테스트; API 호출 없음

픽스처 기록을 사용해 실제 API를 대상으로 전체 에이전트 빌드를 실행하려면 환경 파일을 만들고 키를 입력합니다:

cp .env.example .env
pnpm agent:run
pnpm agent:verify

검증 명령은 생성된 출력이 실제로 렌더링되는지 확인합니다.

확장 프로그램 업데이트

새로운 저장소 변경사항을 가져온 후 확장 프로그램을 다시 빌드합니다:

npx pnpm@10.11.1 build

그런 다음 chrome://extensions를 열고 AI Homepage의 새로고침 아이콘을 클릭합니다. 이후 새 탭에서 업데이트된 빌드가 사용됩니다.

결론

AI Homepage는 최근 검색 활동을 개인화되고 지속적으로 새로 고침되는 새 탭 환경으로 바꿉니다. Chromium 확장 프로그램을 로컬에서 빌드하고 Anthropic 키를 입력한 다음 원하는 레이아웃과 읽기 우선순위를 설명하여 설치할 수 있습니다. 사용하기 전에 API 비용, 빌드 중 업로드될 수 있는 비공개 콘텐츠, 프로젝트의 실험적 상태를 고려하세요.