cursor로 PDF 서식 보존하고 번역하는 서비스 만들기

Papyrus - 학술 PDF 번역 도구

기능 정의서

1. 소개
Papyrus는 학술 PDF 문서의 원본 레이아웃, 서식 및 시각적 요소를 유지하면서 번역하도록 설계된 웹 기반 도구입니다. 본 문서는 Papyrus 개발을 위한 기능 요구사항과 사양을 설명합니다.

2. 시스템 개요
Papyrus는 사용자가 학술 PDF를 업로드, 번역 및 다운로드할 수 있는 직관적인 인터페이스를 제공하며, 원본 문서의 레이아웃과 서식을 보존합니다. 시스템은 정확한 학술 콘텐츠 번역을 위해 다양한 번역 API와 통합됩니다.

3. 핵심 기능

3.1 파일 업로드 및 처리


파일 업로드

PDF 파일 형식 지원
최대 파일 크기 제한: 50MB (설정 가능)
일괄 업로드 기능
업로드 상태 진행 표시기



PDF 처리

위치 좌표가 포함된 텍스트 추출
이미지 추출 및 보존
표 구조 감지 및 보존
폰트 정보 추출
레이아웃 분석 및 구조 매핑




3.2 번역 시스템


번역 통합

기본, Google Translate API 사용
부가적으로 DeepL API, 및 AI용 API 사용 (Chat GPT, Google AI, Amazon Bedrock 통합)



언어 지원

주요 학술 언어 지원
원본 문서 언어 감지
다중 대상 언어 옵션



학술 문맥 보존

학술 용어 특수 처리
인용문 및 참고문헌 보존
수식 보호




3.3 레이아웃 보존


문서 재생성

번역된 텍스트의 정확한 위치 지정
원본 폰트 스타일 및 크기 매칭
이미지 배치 보존
표 구조 유지
페이지 번호 및 머리글/바닥글 보존



형식 일관성

여백 및 간격 보존
단 레이아웃 유지
그림 및 표 캡션 보존




3.4 미리보기 및 편집


미리보기 인터페이스

나란히 비교 보기
실시간 미리보기 업데이트
확대/축소 및 이동 기능



편집 기능

수동 번역 조정
레이아웃 미세 조정 옵션
텍스트 서식 수정




3.5 다운로드 시스템


내보내기 옵션

PDF 형식 내보내기
원본-번역본 병행 PDF 옵션
번역 메모리 내보내기



품질 보증

최종 서식 검사
번역 일관성 검증
레이아웃 검증




3.6 학술 논문 특화 기능


참고문헌 관리

인용문 형식 자동 인식 및 보존 (APA, MLA, Chicago 등)
참고문헌 목록 자동 추출 및 정리
인용 색인 및 교차 참조 유지



전문 용어 관리

분야별 전문 용어 사전 지원
사용자 정의 용어집 생성 및 관리
용어 일관성 검사 및 추천



연구 지원 도구

수식 및 방정식 LaTeX 형식 보존
표와 그래프의 데이터 추출 기능
통계 데이터 자동 변환 및 단위 변환



논문 분석 도구

주요 연구 방법론 자동 식별
핵심 연구 결과 하이라이팅
연구 구조 요약 (서론, 방법, 결과, 논의 등)



협업 기능

논문 리뷰어 초대 및 권한 관리
번역 검토 및 수정 이력 관리
주석 및 코멘트 공유




3.7 논문 이해 지원 AI 기능


핵심 내용 요약 및 설명

논문의 주요 주장과 결론 추출
복잡한 개념을 쉽게 풀어서 설명
연구 방법론 단계별 해설
통계 분석 결과 해석 지원



맥락 이해 지원

선행 연구와의 연관성 설명
연구 분야의 배경 지식 제공
주요 용어 및 개념 상세 해설
연구의 의의와 한계점 분석



시각적 이해 도구

복잡한 실험 과정 도식화
연구 결과 그래프 해석 지원
통계 데이터 시각화 및 설명
연구 프레임워크 다이어그램 생성



대화형 학습 지원

논문 내용에 대한 Q&A 기능
개념 이해를 위한 예시 제공
관련 연구 사례 설명
추가 학습 자료 추천




3.8 심층 연구 지원


연구 맥락 분석

해당 분야의 연구 흐름 설명
주요 논쟁점 및 이슈 정리
연구 방법론의 장단점 분석
대안적 접근 방법 제시



실용적 적용 지원

연구 결과의 실제 적용 사례 제시
후속 연구 방향 제안
연구의 실무적 시사점 도출
산업 분야 연계성 분석




4. 선택적 기능

4.1 계정 시스템

사용자 등록 및 인증
문서 이력 및 관리
개인 번역 메모리
저장된 환경 설정


4.2 결제 통합

구독 기반 모델
사용량 기반 옵션
프리미엄 기능 접근
결제 게이트웨이 통합


4.3 고급 학술 기능

유사 연구 논문 추천
연구 동향 분석 리포트
인용 지수 및 영향력 지표 통합
학술 데이터베이스 연동 (Google Scholar, PubMed 등)
AI 기반 연구 방법론 제안


4.4 고급 학습 지원 기능

개인화된 학습 가이드 생성
분야별 핵심 개념 학습 로드맵
연구 방법론 상세 학습 자료
관련 분야 전문가 강의 추천
맞춤형 연구 이해도 평가


5. 기술 요구사항

5.1 프론트엔드

React.js 기반 웹 애플리케이션
모바일 호환성을 위한 반응형 디자인
현대적 UI/UX 원칙
크로스 브라우저 호환성


5.2 백엔드

Node.js/Express.js 서버
PDF 처리 라이브러리 통합
번역 API 통합
보안 파일 처리


5.3 데이터베이스

문서 메타데이터 저장
사용자 데이터 관리 (계정 시스템 구현 시)
번역 이력 추적
캐시 관리


5.4 보안

안전한 파일 업로드/다운로드
사용자 데이터 보호
API 키 관리
속도 제한 구현


6. 성능 요구사항

업로드 처리 시간: 50MB 파일 기준 30초 미만
번역 처리 시간: 페이지당 60초 미만
동시 사용자 지원: 100명 이상
시스템 가동 시간: 99.9%


7. 향후 고려사항

AI 기반 학술 문맥 이해
일괄 처리 개선
추가 파일 형식 지원
향상된 협업 기능


8. 성공 지표

번역 정확도 > 95%
레이아웃 보존 정확도 > 98%
사용자 만족도 > 4.5/5
지정된 요구사항을 충족하는 시스템 성능


본 사양은 이해관계자 피드백 및 개발 중 기술적 고려사항에 따라 수정될 수 있습니다.

우선순위 기능 분류

1. 필수 기능 (Must-have)

기본 기능

PDF 파일 업로드 및 텍스트 추출
기본 번역 기능 (Google Translate API 통합)
원본 레이아웃 보존 (기본 서식, 이미지 위치)
번역본 PDF 다운로드
기본적인 미리보기 인터페이스


학술 특화 필수 기능

수식 및 특수 기호 보호
참고문헌 형식 보존
표와 그림 캡션 처리
기본적인 전문용어 처리


핵심 AI 지원 기능

논문 주요 내용 요약
핵심 용어 설명
기본적인 Q&A 기능


2. 부가 기능 (Nice-to-have)

고급 번역 기능

DeepL, OpenAI 등 추가 번역 API 통합
사용자 정의 용어집
번역 메모리 기능
일괄 업로드 처리


확장된 레이아웃 기능

고급 폰트 매칭
복잡한 표 구조 보존
다단 레이아웃 처리
페이지 스타일 완벽 보존


고급 학술 지원 기능

인용문 자동 감지 및 관리
LaTeX 수식 변환
연구 방법론 분석
통계 데이터 자동 변환


확장된 AI 기능

연구 맥락 분석
시각적 이해 도구
실용적 적용 사례 제시
심층 연구 동향 분석


부가 시스템 기능

계정 관리 시스템
결제 시스템
협업 기능
고급 학습 지원 도구

## Frontend 개발 가이드라인 (Frontend Development Guidelines)

- 개발환경
    - **Node.js:** 22.x 버전
    - **Next.js:** 15.x 버전  https://nextjs.org/docs
    - **Nginx**
    - **패키지 매니저:** pnpm
    - **스타일링:** Tailwind CSS
    - **UI 라이브러리:** shadcn/ui
        
        ```markdown
        # Create project
        
        Run the `init` command to create a new Next.js project or to set up an existing one:
        
        ```bash
        pnpm dlx shadcn@latest init
        ```
        
        You can use the `-d` flag for defaults, i.e. `new-york`, `zinc`, and `yes` for the CSS variables.
        
        ```bash
        pnpm dlx shadcn@latest init -d
        ```
        
        ---
        
        ## Configure `components.json`
        
        You will be asked a few questions to configure `components.json`:
        
        ```plaintext
        Which style would you like to use? › New York
        Which color would you like to use as base color? › Zinc
        Do you want to use CSS variables for colors? › no / yes
        ```
        
        ---
        
        ## That's it
        
        You can now start adding components to your project.
        
        ```bash
        pnpm dlx shadcn@latest add button
        ```
        
        The command above will add the `Button` component to your project. You can then import it like this:
        
        ```jsx
        import { Button } from "@/components/ui/button"
        
        export default function Home() {
          return (
            <div>
              <Button>Click me</Button>
            </div>
          )
        }
        ```
        
        ```
        
    - **ESLint:** v9 이상 버전을 사용하고 공식 문서를 참고하세요.  https://eslint.org/docs/latest/
        
        ```markdown
        # Getting Started with ESLint
        
        ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
        
        ESLint is completely pluggable. Every single rule is a plugin and you can add more at runtime. You can also add community plugins, configurations, and parsers to extend the functionality of ESLint.
        
        ## Prerequisites
        
        To use ESLint, you must have Node.js (^18.18.0, ^20.9.0, or >=21.1.0) installed and built with SSL support. (If you are using an official Node.js distribution, SSL is always built in.)
        
        ## Quick start
        
        You can install and configure ESLint using this command:
        
        ```bash
        pnpm create @eslint/config@latest
        ```
        
        If you want to use a specific shareable config that is hosted on npm, you can use the `--config` option and specify the package name:
        
        ```bash
        # use `eslint-config-standard` shared config - npm 7+
        pnpm create @eslint/config@latest -- --config eslint-config-standard
        ```
        
        **Note:** `npm init @eslint/config` assumes you have a `package.json` file already. If you don’t, make sure to run `npm init` or `yarn init` beforehand.
        
        After that, you can run ESLint on any file or directory like this:
        
        ```bash
        pnpm dlx eslint yourfile.js
        ```
        
        ---
        
        ## Configuration
        
        **Note:** If you are coming from a version before 9.0.0 please see the migration guide.
        
        When you run `npm init @eslint/config`, you’ll be asked a series of questions to determine how you’re using ESLint and what options should be included. After answering these questions, you’ll have an `eslint.config.js` (or `eslint.config.mjs`) file created in your directory.
        
        For example, one of the questions is:
        
        ```plaintext
        Where does your code run? › Browser
        ```
        
        If you select “Browser” then your configuration file will contain the definitions for global variables found in web browsers. Here’s an example:
        
        ```js
        import globals from "globals";
        import pluginJs from "@eslint/js";
        
        /** @type {import('eslint').Linter.Config[]} */
        export default [
          { languageOptions: { globals: globals.browser } },
          pluginJs.configs.recommended,
        ];
        ```
        
        The `pluginJs.configs.recommended` object contains configuration to ensure that all of the rules marked as recommended on the rules page will be turned on. Alternatively, you can use configurations that others have created by searching for “eslint-config” on npmjs.com. ESLint will not lint your code unless you extend from a shared configuration or explicitly turn rules on in your configuration.
        
        You can configure rules individually by defining a new object with a `rules` key, as in this example:
        
        ```js
        import pluginJs from "@eslint/js";
        
        export default [
            pluginJs.configs.recommended,
        
            {
                rules: {
                    "no-unused-vars": "warn",
                    "no-undef": "warn"
                }
            }
        ];
        ```
        
        The names `"no-unused-vars"` and `"no-undef"` are the names of rules in ESLint. The first value is the error level of the rule and can be one of these values:
        
        - `"off"` or `0` - turn the rule off
        - `"warn"` or `1` - turn the rule on as a warning (doesn’t affect exit code)
        - `"error"` or `2` - turn the rule on as an error (exit code will be 1)
        
        The three error levels allow you fine-grained control over how ESLint applies rules (for more configuration options and details, see the configuration docs).
        
        ---
        
        ## Manual Set Up
        
        You can also manually set up ESLint in your project.
        
        Before you begin, you must already have a `package.json` file. If you don’t, make sure to run `npm init` or `yarn init` to create the file beforehand.
        
        ### Install the ESLint packages in your project:
        
        ```bash
        pnpm add --save-dev eslint @eslint/js
        ```
        
        ### Add an `eslint.config.js` file:
        
        ```bash
        # Create JavaScript configuration file
        touch eslint.config.js
        ```
        
        Add configuration to the `eslint.config.js` file. Refer to the Configure ESLint documentation to learn how to add rules, custom configurations, plugins, and more.
        
        ```js
        import pluginJs from "@eslint/js";
        
        export default [
            pluginJs.configs.recommended,
        
           {
               rules: {
                   "no-unused-vars": "warn",
                   "no-undef": "warn"
               }
           }
        ];
        ```
        
        ### Lint code using the ESLint CLI:
        
        ```bash
        pnpm dlx eslint project-dir/ file.js
        ```
        
        For more information on the available CLI options, refer to [Command Line Interface](https://eslint.org/docs/latest/use/command-line-interface).
        
        ```
        
- 백엔드는 기본적으로 사용자의 별도의 요구가 없는한 외부로 노출되지 않도록 프록시 설정을 기반으로 한다.
- **파일 접근 방식:**
    - 터미널에서 명령 작성시 반드시 **절대경로 기반으로** CLI 사용
- **deprecated 서비스 회피 및 최신 업데이트**
    - `pnpm outdated` 명령어를 활용해 의존성 상태 확인.
    - 사용 중인 라이브러리의 최신 릴리스 및 변경사항은 공식 문서를 수시로 확인.
    - 문제가 발생할 경우 다른 라이브러리(예: `eslint-config-airbnb` 대신 `eslint-config-next` 사용)로 대체.
- 기본적으로 서버 사이드 렌더링 (Server-Side Rendering, SSR) 방식을 사용합니다.
    - 단, 증분 정적 생성 (Incremental Static Regeneration, ISR)도 적극적으로 사용합니다.
- **접근성(A11y) 및 UX 최적화**
    - **웹 접근성 준수 (WCAG 가이드라인 참고)**
        - `eslint-plugin-jsx-a11y`를 통해 접근성 검사를 자동화.
        - 키보드 네비게이션 가능 여부 확인.
        - ARIA 속성 활용.
    - **반응형 디자인 적용**
        - Tailwind CSS의 `sm`, `md`, `lg`, `xl` 유틸리티 사용.
        - 모바일 우선 접근법(Mobile First Design) 적용.
    - **SEO 최적화**
        - 메타 태그 관리(`next/head` 사용).
        - 검색 엔진 친화적인 URL 구조 유지.
    - **로딩 성능 최적화**
        - 로딩 애니메이션 및 Skeleton UI 적용.
        - 불필요한 네트워크 요청 최소화.
- 성능 최적화
    - **Lazy Loading (지연 로딩) 적용**
        - 페이지 및 컴포넌트별 동적 로딩 (`next/dynamic` 사용).
        - 이미지 최적화(`next/image` 사용).
    - **불필요한 리렌더링 방지**
        - React의 `useMemo`, `useCallback`, `React.memo`를 적절히 사용.
    - **코드 스플리팅 적용**
        - 웹팩 코드 스플리팅을 통해 필요한 리소스만 로드.
    - **불필요한 상태 최소화**
        - 불필요한 글로벌 상태 사용을 줄이고, 로컬 상태 우선 활용.
- 유지보수 및 확장성
    - **SOLID 원칙 준수** (특히 TypeScript 사용 시 중요)
        - 단일 책임 원칙 (SRP)
        - 개방-폐쇄 원칙 (OCP)
        - 리스코프 치환 원칙 (LSP)
        - 인터페이스 분리 원칙 (ISP)
        - 의존 역전 원칙 (DIP)
    - **컴포넌트는 작고 독립적으로 유지**
        - Atomic Design 패턴 (Atoms, Molecules, Organisms) 적용.
        - 재사용성을 높이고, 테스트가 쉬운 구조 유지.
    - **폴더 및 파일 구조 일관성 유지**
        - 기능별/도메인별 폴더 분리 (`components`, `pages`, `hooks`, `utils`, `services`).
        - 예시:
            
            ```bash
            bash
            복사편집
            /components  # 재사용 가능한 UI
            /pages       # Next.js 페이지
            /hooks       # 커스텀 훅
            /utils       # 공통 유틸 함수
            /services    # API 호출 로직
            
            ```
            
    - **적절한 상태 관리 적용**
        - 로컬 상태(`useState`/`useReducer`) vs 글로벌 상태(Zustand, Redux, Recoil).
        - 단순한 상태는 Context API 사용.

## **Backend 개발 가이드라인 (Backend Development Guidelines)**

- 개발환경
    - **Node.js:** 22.x 버전
    - **Nest.js**   https://docs.nestjs.com/
    - **패키지 매니저:** **pnpm**
    - **Docker**
    - **Redis (Optional)**
    - **PostgreSQL (Optional)**
    - **RabbitMQ (Optional)**
- **파일 접근 방식:**
    - 터미널에서 명령 작성시 반드시 **절대경로 기반으로** CLI 사용
- 아키텍처 설계
    - **모듈 기반 설계 (Module-Based Architecture)**
        - 기능별 모듈 분리 (`user.module.ts`, `auth.module.ts`)
    - **확장성 고려**
        - 모놀리식에서 마이크로서비스로 확장 가능한 구조 설계
    - **API 버전 관리**
        - RESTful API 설계 시 `/api/v1/resource` 형태로 명시
    - **MVC (Model-View-Controller) 패턴 적용**
        - 서비스 로직과 컨트롤러 분리
        - 도메인 기반 설계 (DDD) 적용 고려
    - **레이어드 아키텍처 적용**
        
        ```arduino
        src/
        ├── api/
        │   ├── user.controller.ts
        │   ├── user.service.ts
        │   ├── user.repository.ts
        │   ├── user.model.ts
        ├── config/
        ├── middleware/
        ├── utils/
        ```
        
    - **확장성을 고려한 모듈화 설계**
        - 마이크로서비스 도입 검토 **(Optional)**
        - API Gateway를 통한 서비스 관리 **(Optional)**
    - API 설계
        - 자원 중심 URL 설계
        - **RESTful API 설계 원칙**
            - `GET /users` → 조회
            - `POST /users` → 생성
            - `PUT /users/:id` → 수정
            - `DELETE /users/:id` → 삭제
        - Swagger 또는 Postman을 통한 API 문서화
            - **시스템 아키텍처 다이어그램 작성**
                - UML, C4 모델을 활용한 시각적 문서화
            - **코드 설명 주석 유지**
                - JSDoc을 사용하여 함수 설명 제공
    - 데이터 일관성
        - **트랜잭션 관리**
            - `sequelize` 또는 `typeorm`을 사용하여 ACID 적용
            - SAGA 패턴으로 분산 트랜잭션 관리
        - **데이터 정합성 유지**
            - 데이터베이스 유니크 제약 조건 적용
            - CASCADE 삭제 시 주의
            - 데이터베이스 인덱싱 최적화
- 클린 코드 작성
    - **일관된 코드 스타일 유지**
        - ESLint 및 Prettier 적용
            - ESLint v9 이상 버전을 사용하고 공식 문서를 참고하세요.  https://eslint.org/docs/latest/
        - 함수는 하나의 역할만 수행 (SRP 원칙 적용)
        - 파일 크기 최대 300줄 이하 유지
    - **디렉토리 구조 예시**
        
        ```
        src/
        ├── modules/      # 도메인별 모듈
        │   ├── user/
        │   │   ├── user.controller.ts
        │   │   ├── user.service.ts
        │   │   ├── user.repository.ts
        │   │   ├── user.entity.ts
        │   │   ├── user.module.ts
        ├── common/       # 공통 유틸리티 및 필터
        ├── config/       # 설정 파일
        ├── middlewares/  # 미들웨어
        ├── guards/       # 인증 및 권한
        ├── interceptors/ # 요청/응답 인터셉터
        ├── filters/      # 예외 필터
        ├── main.ts       # 애플리케이션 진입점
        ├── app.module.ts # 메인 모듈
        └── tests/        # 테스트 코드
        ```
        
    - **네이밍 컨벤션**
        - 변수: `camelCase`
        - 함수: 동사 + 명사 (예: `getUserData`)
        - 클래스: `PascalCase`
    - **파일명 규칙**
        - `user.controller.ts`, `user.service.ts` 등 기능 단위 구분
- SOLID 원칙 적용
    - **SRP (단일 책임 원칙):** 하나의 모듈은 하나의 역할만 수행해야 한다.
    - **OCP (개방-폐쇄 원칙):** 기존 코드를 변경하지 않고 확장 가능해야 한다.
    - **LSP (리스코프 치환 원칙):** 하위 클래스는 상위 클래스를 대체할 수 있어야 한다.
    - **ISP (인터페이스 분리 원칙):** 클라이언트는 필요하지 않은 인터페이스에 의존하면 안 된다.
    - **DIP (의존성 역전 원칙):** 고수준 모듈이 저수준 모듈에 의존하지 않고 추상화에 의존해야 한다.
- 비즈니스 로직
    - **서비스 계층에서 비즈니스 로직 처리**
        - 컨트롤러는 요청/응답만 담당
        - 컨트롤러에서 로직 수행 금지
        - 비즈니스 규칙은 서비스에서 처리
    - **유틸리티 함수 재사용성 강화**
        - `common/utils/` 디렉토리에서 공통 기능 제공
- 보안성
    - **환경 변수 관리** (`@nestjs/config` 사용)
        - 중요한 정보는 `.env` 파일로 분리 (`.env.example` 제공)
        - 환경별 구성 (`.env.development`, `.env.production`)
        - 예제파일 생성 (`.env.development.example`, `.env.production.example`)
    - **보안 모듈 적용**
        - `helmet`: HTTP 보안 헤더 설정
        - `cors`: 크로스 도메인 정책 설정
        - `rate-limit`: 요청 제한으로 DDoS 방어
    - **입력값 검증**
        - `class-validator`와 `class-transformer` 활용
    - **인증 및 권한 관리**
        - JWT (JSON Web Token) 기반 인증 (`@nestjs/jwt` 사용)
        - RBAC (Role-Based Access Control) 적용
    - **로깅 및 감사**
        - `nestjs-winston`을 사용한 중앙 집중 로깅 시스템 구축
- **테스트 프레임워크 사용**
    - 단위 테스트: `Jest`
    - 통합 테스트: `Supertest`
    - E2E 테스트: `Cypress`
- **TDD (Test-Driven Development) 적용**
    - 기능 구현 전 테스트 케이스 작성
    - Mocking을 통해 외부 의존성 최소화