You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Mana Viewer — 개발 및 분석 종합 보고서

이 문서는 Mana Viewer(마나 뷰어) 프로젝트의 데스크탑 애플리케이션 아키텍처, 구현된 UI/UX 기능, 그리고 대상 웹사이트의 구조 분석 결과를 요약한 종합 보고서입니다.

1. 프로젝트 개요

UrlInput.tsx
- 만화 회차 URL 입력 및 로딩 인터페이스
- 최근 읽은 URL 히스토리 저장 및 불러오기 (localStorage 연동)
- 파싱 에러 및 소스 붙여넣기 모달 지원
MangaViewer.tsx
- 단면 / 양면 모드 (Single / Spread): 한 화면에 1장 또는 2장의 이미지를 나란히 배치
- 읽기 방향 (LTR / RTL): 한국 만화(좌→우) 및 일본 만화(우→좌) 방향 전환 지원
- 시작 페이지 오프셋 (Spread Start Offset): 표지(1페이지)는 단독으로 보고, 설정한 오프셋 페이지부터 양면으로 매칭하는 오프셋 제어 로직
- 3분할 클릭 존 (Click Zones): 화면 좌측(이전), 우측(다음), 중앙(툴바 토글) 클릭 반응
- 키보드 단축키: ←/→ (페이지 이동), F (전체화면), S (설정 패널)
ViewerToolbar.tsx
- 상단 자동 숨김 툴바 (3초 간 무반응 시 감춤)
- 회차 제목, 현재/전체 페이지 표시
- 이전화 / 다음화 넘기기 네비게이션 버튼
SettingsPanel.tsx
- 슬라이드 방식의 설정 오버레이 패널
- 뷰어 모드, 읽기 방향, 양면 시작 오프셋, 이미지 맞춤(너비/높이/원본), 배경색 설정

parser.rs
- scraper 크레이트를 활용한 HTML 데이터 추출
- #theme-viewer-data 스크립트 태그 내 뷰어 토큰, 회차 ID, 메타데이터 추출
- .theme-viewer-prev, .theme-viewer-next 및 텍스트 기반 이전화/다음화 네비게이션 추출
commands.rs
- fetch_chapter: 페이지 요청 및 메타데이터 수집
- fetch_image: 이미지 Hotlink 방지 우회를 위한 Referer 헤더 추가 프록시 및 Base64 변환

분석 대상 페이지: https://newtoki1.org/manhwa/8605/u-mokggzkw-74cw

정적 HTML 태그 미사용:
- 만화 본문 이미지는 정적 <img> 태그로 렌더링되지 않음
- 본문 영역 HTML에는 배너 광고 요소만 존재함
동적 API 로딩 방식:
- 페이지 하단 <script type="application/json" id="theme-viewer-data">에 회차 메타데이터(토큰, workId, episodeId, imageApiPath 등)가 매핑됨
- Client-side JavaScript가 /api/manhwa-images 또는 /api/webtoon-images API에 POST 요청을 보내 실제 이미지 URL 목록을 응답받아 동적으로 렌더링함

이전화 / 다음화 링크는 .theme-viewer-prev, .theme-viewer-next 클래스 또는 상/하단 버튼 그룹(a.btn)으로 제공됨

로컬 파일 뷰어 (CBZ / ZIP / 폴더) 추가:
- 네트워크 연결이나 외부 보안 검증 제약 없이 로컬 디렉터리 및 만화 압축파일(CBZ/ZIP)을 직접 읽어오도록 확장 가능
Webview 기반 임베딩:
- 브라우저 표준 세션 환경을 그대로 이용할 수 있도록 Tauri 내부 Webview를 통한 통합 렌더링 방식 고려