Skip to main content

아키텍처 개요

딸깍문서는 현대적인 웹 기술 스택을 기반으로 구축된 AI 기반 문서 편집 플랫폼입니다.

시스템 아키텍처​

flowchart TB
    subgraph Client["클라이언트"]
        Browser["웹 브라우저"]
        Editor["TipTap 에디터"]
        AISidebar["AI 사이드바"]
    end

    subgraph NextJS["Next.js 서버"]
        AppRouter["App Router"]
        APIRoutes["API Routes"]
        Auth["NextAuth.js"]
    end

    subgraph External["외부 서비스"]
        Anthropic["Anthropic Claude"]
        Supabase["Supabase"]
        Storage["Supabase Storage"]
    end

    Browser --> AppRouter
    Editor --> APIRoutes
    AISidebar --> APIRoutes

    APIRoutes --> Auth
    APIRoutes --> Anthropic
    APIRoutes --> Supabase
    APIRoutes --> Storage

핵심 컴포넌트​

1. 프론트엔드 레이어​

컴포넌트역할기술
App Shell전체 레이아웃 및 라우팅Next.js App Router
Document Editor문서 편집 인터페이스TipTap (ProseMirror)
AI SidebarAI 대화 인터페이스React, Streaming
PDF ViewerPDF 미리보기 및 편집react-pdf, pdf-lib

2. API 레이어​

주요 API 엔드포인트:

/api/document/
├── route.ts              # CRUD 기본 동작
├── [id]/route.ts         # 개별 문서 조작
├── complete-stream/      # AI 스트리밍 응답
├── upload/               # 파일 업로드
├── export/               # 문서 내보내기
└── export-pdf/           # PDF 변환

/api/pdf/
├── detect-blanks/        # AI 빈칸 감지
├── fill-blanks/          # 빈칸 채우기
├── extract-fields/       # 필드 추출
└── ocr-region/          # 영역 OCR

/api/ocr/
├── claude-vision/        # 단일 이미지 OCR
└── claude-vision-batch/  # 배치 OCR

3. 데이터 레이어​

erDiagram
    User ||--o{ Document : creates
    Document ||--o{ DocumentVersion : has
    Document ||--o{ DocumentFile : contains
    Document ||--o{ Prompt : has
    User ||--o{ PdfBlanks : creates

    User {
        string id PK
        string email
        string name
        boolean isPremium
    }

    Document {
        string id PK
        string title
        text content
        string documentType
        string userId FK
        timestamp createdAt
        timestamp updatedAt
    }

    DocumentVersion {
        string id PK
        string documentId FK
        text content
        int versionNumber
        timestamp createdAt
    }

    Prompt {
        string id PK
        string documentId FK
        text userPrompt
        text aiResponse
        json suggestions
        timestamp createdAt
    }

데이터 흐름​

AI 문서 편집 흐름​

sequenceDiagram
    participant User
    participant Editor
    participant AISidebar
    participant API
    participant Claude

    User->>AISidebar: 프롬프트 입력
    AISidebar->>API: POST /api/document/complete-stream
    API->>Claude: 문서 컨텍스트 + 프롬프트

    loop Streaming
        Claude->>API: 토큰 스트림
        API->>AISidebar: SSE 이벤트
        AISidebar->>AISidebar: 실시간 렌더링
    end

    Claude->>API: 완료 (XML diff)
    API->>AISidebar: 변경사항 파싱
    AISidebar->>Editor: Diff 표시
    User->>Editor: 수락/거부
    Editor->>API: 문서 저장

PDF 빈칸 채우기 흐름​

sequenceDiagram
    participant User
    participant PDFEditor
    participant API
    participant ClaudeVision

    User->>PDFEditor: PDF 업로드
    PDFEditor->>API: 페이지 이미지 전송
    API->>ClaudeVision: Vision API 호출
    ClaudeVision->>API: 빈칸 좌표 반환
    API->>PDFEditor: 빈칸 위치 정보
    PDFEditor->>PDFEditor: 입력 필드 렌더링
    User->>PDFEditor: 빈칸 채우기
    User->>PDFEditor: PDF 저장
    PDFEditor->>API: pdf-lib로 PDF 생성
    API->>User: 완성된 PDF 다운로드

보안 아키텍처​

인증 흐름​

flowchart LR
    User --> Google["Google OAuth"]
    Google --> NextAuth["NextAuth.js"]
    NextAuth --> Session["JWT Session"]
    Session --> API["API Routes"]
    API --> DB["Supabase RLS"]

권한 관리​

역할권한
Guest홈페이지 조회만 가능
User문서 CRUD, AI 사용 (제한)
Premium무제한 AI, 고급 기능
Admin전체 시스템 관리

확장성​

수평 확장​

  • Vercel Edge Functions: 전역 엣지 배포
  • Supabase: 자동 스케일링 데이터베이스
  • CDN: 정적 자산 캐싱

모듈화​

새로운 기능 추가 시:

  1. API 라우트 생성: src/app/api/[feature]/route.ts
  2. 컴포넌트 추가: src/components/[Feature].tsx
  3. 타입 정의: src/types/index.ts

다음 단계​