위키피디아 탐색 기록을 시각적 지도로 바꿔주는 웹 앱을 만들었습니다

브라우저에서 수백 개의 위키피디아 탭을 관리하는 게 지겨워졌습니다. 그래서 무한 캔버스 위에서 편안하게 탐색 기록을 추적할 수 있는 웹 앱을 만들었습니다.

Flowiki는 위키피디아 문서를 무한 캔버스 위의 연결된 노드로 탐색할 수 있게 해주는 시각적 위키피디아 브라우저입니다. 주제를 검색하고 문서 내 링크를 클릭해 새로운 카드를 생성하면, 관련 페이지 간의 경로를 추적하는 자동 연결선과 함께 지식 그래프가 커지는 것을 볼 수 있습니다. 이 앱은 다국어 지원, 스티커 메모, 보드 저장/불러오기 기능을 제공하며, 모든 데이터는 브라우저에 로컬로 저장됩니다. 캔버스를 저장하고 사이드바의 라이브러리에서 다시 불러올 수 있습니다.

React, Vite, Tailwind CSS, Hono를 사용하여 Vercel에 구축했습니다. Perplexity Computer에서 Claude code/Codex 에이전트를 사용하여 완전히 개발했습니다. GitHub에 연결하고 Vercel CLI 접근 권한을 부여했습니다. 빌드부터 코드 푸시, 그리고 이 다양한 프레임워크들을 연결하고 배포하는 것까지 모두 알아서 처리했습니다.

또한 다크 모드는 실험적 기능이라 모든 위키피디아 요소를 완벽하게 렌더링하지 못할 수 있습니다. 문서 콘텐츠는 위키피디아의 기본 야간 테마와 유사하게 CSS 변수 오버라이드를 사용하여 Shadow DOM 내에 격리되어 있습니다. 인라인 스타일이나 사용자 지정 표 색상이 포함된 일부 복잡한 페이지는 위키피디아 자체 다크 모드와 약간 다르게 보일 수 있습니다.

앱 링크입니다 - https://flowiki-app.vercel.app/ (데스크톱에서 사용하는 것이 가장 좋습니다)

댓글로 피드백을 주시면 감사하겠습니다. 원하신다면 브라우저에서 로컬로 실행할 수 있도록 저장소 링크도 공유해 드릴 수 있습니다(나중에 댓글로 공유하겠습니다). 또한 현재 위키피디아 API 호출은 인증되지 않은 상태라 속도 제한이 걸릴 가능성이 있습니다. 버그를 발견하거나 피드백이 있다면 댓글로 남겨주세요. 감사합니다.