위키백과 탐색 경로를 시각적 지도로 바꿔주는 웹 앱을 '바이브 코딩'으로 만들었습니다

브라우저에서 수백 개의 위키백과 탭을 관리하는 것에 지쳤습니다. 그래서 무한 캔버스 위에서 편안하게 탐색 경로를 추적할 수 있는 웹 앱을 만들었습니다.

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

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

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

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

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