나는 개인 지식 그래프 앱을 만들었다 — 여기 그 뒤의 풀스택

발행: 3주 전 (2026년 4월 9일 오후 06:24 GMT+9)

7 분 소요

원문: Dev.to

Source: Dev.to

당신은 Sapiens를 읽고, Inception을 본 뒤, 두 작품 사이에 연결고리를 느꼈습니다. Spotify는 그것을 제안하지 않았고, Goodreads도 알지 못했습니다. 그 연결은 오직 당신의 머릿속에만 존재했습니다.

저는 Synaptive를 만들어 그 보이지 않는 연결을 눈에 보이게 했습니다.

Synaptive는 개인 지식‑그래프 앱입니다. 읽은 책, 본 영화, 들은 팟캐스트를 추가하고 — 그 사이에 연결고리를 그리고 왜 연결되는지 적습니다. 그 결과는 어떤 알고리즘도 만들 수 없는, 당신의 지적 여정을 시각화한 지도입니다.

실시간 데모

🔗 synaptive.app

Tech Stack

Next.js 14 (App Router) – SSR/SSG/ISR, API 라우트, 모든 것이 하나의 레포에
TypeScript – strict 모드, any 사용 금지
PostgreSQL + Prisma ORM – 타입 안전 데이터베이스 레이어
NextAuth.js v5 – GitHub, Google, 그리고 자격 증명 인증, 이메일 인증 포함
@xyflow/react (React Flow) – 인터랙티브 노드 기반 그래프 편집기
Tailwind CSS + shadcn/ui – 다크/라이트 테마를 지원하는 디자인 시스템
Framer Motion – 페이지 전환 및 마이크로 인터랙션
next‑intl – 전체 i18n (영어 + 터키어), localePrefix: 'as-needed'
Resend – 트랜잭션 이메일 (인증, 환영, 비밀번호 재설정)
Docker Compose – 로컬 개발 (PostgreSQL + Redis)
DigitalOcean – 프로덕션 서버, Docker 기반 배포

핵심 기능

🧠 지식 그래프
🔍 실제 API 검색
✍️ 개인 메모
🔗 의미 있는 연결
👤 공개 프로필 (synaptive.app/u/username) – SEO를 위한 전체 SSR, 봇은 모든 것을 볼 수 있고, 사용자는 인터랙티브 캔버스를 이용합니다

Internationalization (i18n) – 올바르게 구현하기

messages/en.json 및 messages/tr.json
서버 컴포넌트는 getTranslations()를 사용하고, 클라이언트 컴포넌트는 useTranslations()를 사용합니다.
각 로케일별 별도 URL, hreflang 태그, 현지화된 사이트맵

PWA & Mobile‑First

오프라인 캐싱 및 반응형 디자인을 지원하는 프로그레시브 웹 앱.

Email Verification Flow

Verification step reshapes the auth flow: the whole register → login → redirect chain is re‑thought to enforce email confirmation before granting access.

SEO가 포함된 블로그

동적 라우트: /blog/[slug]와 이중 언어 콘텐츠
JSON‑LD 구조화 데이터 및 사이트맵 통합으로 검색 가능성 향상

디자인 결정

왜 React Flow를 사용하고 force‑directed 그래프를 사용하지 않을까?

Force‑directed 라이브러리(예: react-force-graph-2d)는 노드를 자동으로 애니메이션 처리하는데, 개인 지식 그래프에서는 혼란스러울 수 있습니다. 사용자는 노드를 의도적으로 배치해야 하므로 @xyflow/react가 레이아웃과 상호작용을 완전히 제어할 수 있게 해줍니다.

왜 SPA가 아니어야 할까?

서버‑사이드 렌더링(SSR)은 크롤러에게 즉시 콘텐츠를 제공하고 SEO를 향상시킵니다. 순수 SPA는 그래프를 검색 엔진에 숨겨 검색 가능성을 저해합니다.

왜 localStorage 초안을 사용하는가?

맞춤형 useDraft 훅은 디바운스된 초안을 localStorage에 기록합니다. 이는 진행 중인 작업을 보존하고, 성공적인 제출 후에만 초안을 삭제해 우발적인 데이터 손실을 방지합니다.

왜 공개 페이지에 ISR을 사용하는가?

국제화는 처음부터 내장되어 있습니다. Incremental Static Regeneration(ISR)은 전체 재빌드 없이 로케일별 페이지를 업데이트할 수 있게 하여 사이트를 빠르고 SEO‑친화적으로 유지합니다.

Authentication Flow

이메일 인증은 인증 파이프라인에 새로운 단계를 도입합니다. 등록 후, 사용자들은 인증 링크를 받게 되며, 확인을 마친 뒤에만 로그인하여 대시보드로 리디렉션될 수 있습니다.

모바일 고려사항

Mobile overflow can break layouts. Every minmax(260px, 1fr) grid, flex container, and pill filter was tested on small screens to ensure a smooth experience.

Seed Data

빈 탐색 페이지는 생명력이 없어 보입니다. 앱에 18명의 사용자, 53개의 그래프, 그리고 137개의 노드를 미리 채워 넣으면 신규 사용자는 커뮤니티와 영감을 느낄 수 있습니다.

시도해 보기

👉 synaptive.app – 계정을 만들고, 첫 번째 그래프를 구축하며, 당신의 사고를 형성한 콘텐츠를 연결하세요.

연결은 알고리즘이 아니라 여러분이 직접 합니다.

Alperen Eser가 제작했습니다. 아키텍처에 대해 질문이 있거나 지식 그래프에 대해 논의하고 싶다면 아래에 댓글을 남겨 주세요.