DEV.to의 콘텐츠를 더 많이 읽고 싶어서 새 탭에 기능을 구현했습니다

가장 좋은 글은 찾으려고 하지 않았던 글일 때가 많습니다.

무언가를 찾아보기 위해 새 탭을 열었습니다. 한 헤드라인이 눈길을 사로잡았습니다. 빠르게 내용을 살펴보고, 나중에 읽도록 저장한 뒤, 하던 일로 돌아갔습니다.

저는 항상 daily.dev의 브라우저 확장 기능에 담긴 아이디어가 좋았습니다. 이를 기본 새 탭 페이지로 설정해 두었고, 그 아이디어는 제게 남아 있었습니다: 흥미로운 것을 발견하는 것이 항상 웹사이트를 의도적으로 방문해야만 하는 것은 아니라는 것입니다.

저는 DEV.to에서 그런 순간을 원했습니다.

여기서 무슨 일이 일어나고 있는지 보고 싶을 때, 저는 DEV를 열어 피드를 확인하곤 했습니다. 이것은 작은 행동이지만, 제가 그것을 할 것을 기억해야 한다는 의미가 있습니다. 새 탭은 이미 제 일상의 일부입니다.

그래서 저는 DEV 커뮤니티를 그곳에 배치하는 비공식 Chrome 확장 기능인 DEV New Tab을 만들었습니다.

Dev New Tab Promo

이미 머무르고 있는 곳에서 DEV 피드를 제공합니다

새 탭을 열면 DEV 아티클을 탐색하고, 누가 작성했는지 확인하며, 읽어볼 만한 것을 찾을 수 있습니다.

이 확장 기능에는 'For you', 'Following', 'Latest', 'Top', 그리고 'Curated' 피드가 있습니다. 그리드 또는 리스트를 사용할 수 있고, 테마를 전환하거나, 자신만의 바로가기를 추가하고, 북마크나 로컬 저장 기능을 이용해 유용한 아티클을 가까이 보관할 수 있습니다.

카드(card)를 클릭하면 미리보기가 열립니다. 원본 아티클은 항상 DEV에서 한 번의 클릭만 거리에 있으며, 댓글과 작성자 프로필도 함께 제공됩니다.

제가 원했던 경험은 바로 이것이었습니다: 새로운 URL을 입력하기 전에 포스트가 제 주의를 끌 기회를 갖는 것입니다.

Screenshot Light Theme Expanded

Hacktoberfest가 또 다른 아이디어를 주었습니다

이것을 만드는 동안, 저는 Hacktoberfest를 통해 제가 시도해 볼 수 있는 다른 것들에 대해 생각하게 되었습니다. 특히 Chrome의 Google 내장 AI API는 매우 흥미로웠습니다.

브라우저 자체가 긴 기사를 열어볼 가치가 있는지 판단하는 데 도움을 줄 수 있을까요?

저는 Chrome의 로컬 Prompt API를 사용해서 공개된 기사 텍스트로부터 짧은 개요(overview)를 생성했습니다. 지원되는 환경에서는 모델이 사용자 장치에서 실행됩니다. AI API 키를 추가할 필요가 없으며, 확장 프로그램은 기사를 출판사 운영 AI 서버로 전송하지 않습니다.

브라우저, 하드웨어, 언어 지원에는 차이가 있습니다. 로컬 AI 사용이 불가능하더라도 피드를 탐색하고 원본 기사를 열어볼 수 있습니다.

개요는 사용자님이 방향을 잡는 데 도움을 주기 위한 것입니다. AI가 생성한 것이므로, 세부 사항은 여전히 원본에서 확인하는 것이 좋습니다.

미리 몇 개의 보이는 기사들을 준비해 놓거나, 하나를 열 때까지 기다리거나, 피드에 이미 로드된 모든 기사를 미리 준비하도록 선택할 수 있습니다. 캐시된 개요는 재사용됩니다. 미리보기(preview)를 열고 닫는 것이 이미 실행 중인 작업을 다시 시작하지는 않습니다.

이 마지막 부분과 관련된 까다로운 작업들이 있었습니다. 요약 완료가 인접한 카드들을 움직여서는 안 됩니다. 작성자 소개가 도착한다고 해서 공유 버튼을 아래로 밀어내려서는 안 됩니다. 이런 작은 것들이 반복적으로 열게 될 페이지에서는 중요합니다.

Screenshot AI Overview

흥미를 끈 부분을 공유하기

유용한 구절을 쉽게 공유할 수 있는 방법도 원했습니다.

개요의 특정 부분을 선택하면 작은 도구 모음이 나타납니다. 텍스트만 복사하거나, 기사의 출처와 함께 복사하거나, 스냅샷 카드(snapshot card)로 저장할 수 있습니다.

스냅샷에는 기사 제목, 작성자, 출처 링크가 포함되며, DEV에서 영감을 받은 색상으로 읽기 쉬운 하이라이트 텍스트가 적용됩니다. 메뉴를 통해서는 전체 개요도 내보낼 수 있습니다.

공유되는 내용에 작성자와 원본 게시물이 연결되어 있도록 하고 싶었습니다. 만약 어떤 구절이 누군가를 궁금하게 만든다면, 그 뒤에 있는 기사를 찾을 수 있어야 합니다.

Dev New Tab Snapshot Card Example

기존 DEV 로그인 사용 가능

별도의 확장 프로그램 계정이나 로그인 흐름이 없습니다.

이미 동일한 브라우저 프로필에서 DEV.to에 로그인되어 있다면, 이 확장 프로그램은 개인화된 피드, 사용자 DEV 읽기 목록, 반응(reactions) 등에 해당 세션을 사용합니다. 댓글은 원래의 DEV 기사에 남습니다.

DEV 로그인이 없어도 공개적인 검색(public discovery)은 여전히 작동합니다. 공개 피드를 탐색하고, 기사를 열고, 로컬 저장 기능을 사용하며, 지원되는 로컬 미리보기 기능들을 사용할 수 있습니다. 계정 기반 액션에는 DEV 세션이 필요합니다.

꼭 사용해 보셨으면 좋겠습니다

이것은 꽤 평범한 바람에서 시작되었습니다. 사이트를 먼저 열어 기억할 필요 없이 더 많은 DEV 기사를 접하고 싶었기 때문입니다.

이제 시도해 볼 수 있는 확장 프로그램이 있습니다:

DEV New Tab 설치하기

사용해 보시고 어떤 부분을 변경하고 싶은지 알려주세요. 어떤 피드를 열어두는 것이 좋을까요? DEV 새 탭 페이지가 할 수 있으면 좋겠다고 생각하는 것이 있나요? 버그를 발견하면 무슨 일이 있었는지 댓글로 남겨주세요.

만약 이것이 큰 인기를 얻게 된다면, 오픈 소스로 공개하고 커뮤니티와 함께 다음 버전을 작업하고 싶습니다.

다른 사람에게는 놓칠 수 있는 기사가 또 다른 독자를 만나거나, 간단한 새 탭 방문이 DEV에서 좋은 토론으로 이어질 수 있다면 기쁠 것입니다.

마음에 드셨으면 좋겠습니다. 여러분의 의견을 듣고 싶습니다.

DEV New Tab은 공식 DEV 제품이 아닌 독립적인 커뮤니티 프로젝트입니다.