Update app.py

app.py

@@ -5,6 +5,8 @@ import pathlib, os, uvicorn, base64, json
 from typing import Dict, List, Any
 import asyncio
 import logging
+import threading
+import concurrent.futures
 
 # 로깅 설정
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
@@ -26,6 +28,8 @@ if not CACHE_DIR.exists():
 
 # 전역 캐시 객체
 pdf_cache: Dict[str, Dict[str, Any]] = {}
+# 캐싱 락
+cache_locks = {}
 
 # PDF 파일 목록 가져오기
 def get_pdf_files():
@@ -43,7 +47,7 @@ def generate_pdf_projects():
         projects_data.append({
             "path": str(pdf_file),
             "name": pdf_file.stem,
-            "cached": pdf_file.stem in pdf_cache
+            "cached": pdf_file.stem in pdf_cache and pdf_cache[pdf_file.stem].get("status") == "completed"
         })
     
     return projects_data
@@ -52,7 +56,7 @@ def generate_pdf_projects():
 def get_cache_path(pdf_name: str):
     return CACHE_DIR / f"{pdf_name}_cache.json"
 
-# PDF 페이지 캐싱 함수
+# 최적화된 PDF 페이지 캐싱 함수
 async def cache_pdf(pdf_path: str):
     try:
         import fitz  # PyMuPDF
@@ -60,93 +64,144 @@ async def cache_pdf(pdf_path: str):
         pdf_file = pathlib.Path(pdf_path)
         pdf_name = pdf_file.stem
         
+        # 락 생성 - 동일한 PDF에 대해 동시 캐싱 방지
+        if pdf_name not in cache_locks:
+            cache_locks[pdf_name] = threading.Lock()
+        
         # 이미 캐싱 중이거나 캐싱 완료된 PDF는 건너뛰기
         if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") in ["processing", "completed"]:
             logger.info(f"PDF {pdf_name} 이미 캐싱 완료 또는 진행 중")
             return
         
-        # 캐시 상태 업데이트
-        pdf_cache[pdf_name] = {"status": "processing", "progress": 0, "pages": []}
-        
-        # 캐시 파일이 이미 존재하는지 확인
-        cache_path = get_cache_path(pdf_name)
-        if cache_path.exists():
-            try:
-                with open(cache_path, "r") as cache_file:
-                    cached_data = json.load(cache_file)
-                    pdf_cache[pdf_name] = cached_data
-                    pdf_cache[pdf_name]["status"] = "completed"
-                    logger.info(f"캐시 파일에서 {pdf_name} 로드 완료")
-                    return
-            except Exception as e:
-                logger.error(f"캐시 파일 로드 실패: {e}")
-                # 계속 진행하여 새로 캐싱
-        
-        # PDF 파일 열기
-        doc = fitz.open(pdf_path)
-        total_pages = doc.page_count
-        
-        # 각 페이지를 이미지로 변환하고 캐싱
-        pages = []
-        for page_num in range(total_pages):
-            # 진행 상태 업데이트
-            progress = round((page_num + 1) / total_pages * 100)
-            pdf_cache[pdf_name]["progress"] = progress
+        with cache_locks[pdf_name]:
+            # 이중 체크 - 락 획득 후 다시 확인
+            if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") in ["processing", "completed"]:
+                return
             
-            # 페이지 렌더링
-            page = doc[page_num]
-            pix = page.get_pixmap()  # 기본 해상도로 렌더링
-            img_data = pix.tobytes("png")
+            # 캐시 상태 업데이트
+            pdf_cache[pdf_name] = {"status": "processing", "progress": 0, "pages": []}
             
-            # Base64 인코딩
-            b64_img = base64.b64encode(img_data).decode('utf-8')
-            img_src = f"data:image/png;base64,{b64_img}"
+            # 캐시 파일이 이미 존재하는지 확인
+            cache_path = get_cache_path(pdf_name)
+            if cache_path.exists():
+                try:
+                    with open(cache_path, "r") as cache_file:
+                        cached_data = json.load(cache_file)
+                        if cached_data.get("status") == "completed" and cached_data.get("pages"):
+                            pdf_cache[pdf_name] = cached_data
+                            pdf_cache[pdf_name]["status"] = "completed"
+                            logger.info(f"캐시 파일에서 {pdf_name} 로드 완료")
+                            return
+                except Exception as e:
+                    logger.error(f"캐시 파일 로드 실패: {e}")
+            
+            # PDF 파일 열기
+            doc = fitz.open(pdf_path)
+            total_pages = doc.page_count
             
-            # 썸네일용 작은 이미지 (첫 페이지만)
-            if page_num == 0:
-                pix_thumb = page.get_pixmap(matrix=fitz.Matrix(0.3, 0.3))  # 더 작은 썸네일
+            # 미리 썸네일만 먼저 생성 (빠른 UI 로딩용)
+            if total_pages > 0:
+                # 첫 페이지 썸네일 생성
+                page = doc[0]
+                pix_thumb = page.get_pixmap(matrix=fitz.Matrix(0.2, 0.2))  # 더 작은 썸네일
                 thumb_data = pix_thumb.tobytes("png")
                 b64_thumb = base64.b64encode(thumb_data).decode('utf-8')
                 thumb_src = f"data:image/png;base64,{b64_thumb}"
-            else:
-                thumb_src = ""  # 첫 페이지 외에는 썸네일 생략
+                
+                # 썸네일 페이지만 먼저 캐시
+                pdf_cache[pdf_name]["pages"] = [{"thumb": thumb_src, "src": ""}]
+                pdf_cache[pdf_name]["progress"] = 1
+                pdf_cache[pdf_name]["total_pages"] = total_pages
             
-            # 페이지 정보 저장
-            pages.append({
-                "src": img_src,
-                "thumb": thumb_src if page_num == 0 else ""
-            })
+            # 이미지 해상도 및 압축 품질 설정 (성능 최적화)
+            scale_factor = 1.0  # 기본 해상도 (낮출수록 로딩 빠름)
+            jpeg_quality = 80   # JPEG 품질 (낮출수록 용량 작아짐)
             
-            # 메모리 관리를 위해 중간 저장 (20페이지마다)
-            if (page_num + 1) % 20 == 0 or page_num == total_pages - 1:
+            # 페이지 처리 작업자 함수 (병렬 처리용)
+            def process_page(page_num):
+                try:
+                    page = doc[page_num]
+                    
+                    # 이미지로 변환 시 매트릭스 스케일링 적용 (성능 최적화)
+                    pix = page.get_pixmap(matrix=fitz.Matrix(scale_factor, scale_factor))
+                    
+                    # JPEG 형식으로 인코딩 (PNG보다 크기 작음)
+                    img_data = pix.tobytes("jpeg", jpeg_quality)
+                    b64_img = base64.b64encode(img_data).decode('utf-8')
+                    img_src = f"data:image/jpeg;base64,{b64_img}"
+                    
+                    # 썸네일 (첫 페이지가 아니면 빈 문자열)
+                    thumb_src = "" if page_num > 0 else pdf_cache[pdf_name]["pages"][0]["thumb"]
+                    
+                    return {
+                        "page_num": page_num,
+                        "src": img_src,
+                        "thumb": thumb_src
+                    }
+                except Exception as e:
+                    logger.error(f"페이지 {page_num} 처리 오류: {e}")
+                    return {
+                        "page_num": page_num,
+                        "src": "",
+                        "thumb": "",
+                        "error": str(e)
+                    }
+            
+            # 병렬 처리로 모든 페이지 처리
+            pages = [None] * total_pages
+            processed_count = 0
+            
+            # 페이지 배치 처리 (메모리 관리)
+            batch_size = 5  # 한 번에 처리할 페이지 수
+            
+            for batch_start in range(0, total_pages, batch_size):
+                batch_end = min(batch_start + batch_size, total_pages)
+                current_batch = list(range(batch_start, batch_end))
+                
+                # 병렬 처리로 배치 페이지 렌더링
+                with concurrent.futures.ThreadPoolExecutor(max_workers=min(5, batch_size)) as executor:
+                    batch_results = list(executor.map(process_page, current_batch))
+                
+                # 결과 저장
+                for result in batch_results:
+                    page_num = result["page_num"]
+                    pages[page_num] = {
+                        "src": result["src"],
+                        "thumb": result["thumb"]
+                    }
+                    
+                    processed_count += 1
+                    progress = round(processed_count / total_pages * 100)
+                    pdf_cache[pdf_name]["progress"] = progress
+                
+                # 중간 저장
                 pdf_cache[pdf_name]["pages"] = pages
-                # 캐시 파일 저장 (진행 중)
                 try:
                     with open(cache_path, "w") as cache_file:
                         json.dump({
                             "status": "processing", 
-                            "progress": progress, 
-                            "pages": pages,
+                            "progress": pdf_cache[pdf_name]["progress"], 
+                            "pages": pdf_cache[pdf_name]["pages"],
                             "total_pages": total_pages
                         }, cache_file)
                 except Exception as e:
                     logger.error(f"중간 캐시 저장 실패: {e}")
-        
-        # 캐싱 완료
-        pdf_cache[pdf_name] = {
-            "status": "completed",
-            "progress": 100,
-            "pages": pages,
-            "total_pages": total_pages
-        }
-        
-        # 최종 캐시 파일 저장
-        try:
-            with open(cache_path, "w") as cache_file:
-                json.dump(pdf_cache[pdf_name], cache_file)
-            logger.info(f"PDF {pdf_name} 캐싱 완료, {total_pages}페이지")
-        except Exception as e:
-            logger.error(f"최종 캐시 저장 실패: {e}")
+            
+            # 캐싱 완료
+            pdf_cache[pdf_name] = {
+                "status": "completed",
+                "progress": 100,
+                "pages": pages,
+                "total_pages": total_pages
+            }
+            
+            # 최종 캐시 파일 저장
+            try:
+                with open(cache_path, "w") as cache_file:
+                    json.dump(pdf_cache[pdf_name], cache_file)
+                logger.info(f"PDF {pdf_name} 캐싱 완료, {total_pages}페이지")
+            except Exception as e:
+                logger.error(f"최종 캐시 저장 실패: {e}")
             
     except Exception as e:
         import traceback
@@ -160,25 +215,24 @@ async def init_cache_all_pdfs():
     logger.info("PDF 캐싱 작업 시작")
     pdf_files = get_pdf_files()
     
-    # 이미 캐시된 PDF 파일 로드
+    # 이미 캐시된 PDF 파일 로드 (빠른 시작을 위해 먼저 수행)
     for cache_file in CACHE_DIR.glob("*_cache.json"):
         try:
             pdf_name = cache_file.stem.replace("_cache", "")
             with open(cache_file, "r") as f:
-                pdf_cache[pdf_name] = json.load(f)
-                pdf_cache[pdf_name]["status"] = "completed"
-                logger.info(f"기존 캐시 로드: {pdf_name}")
+                cached_data = json.load(f)
+                if cached_data.get("status") == "completed" and cached_data.get("pages"):
+                    pdf_cache[pdf_name] = cached_data
+                    pdf_cache[pdf_name]["status"] = "completed"
+                    logger.info(f"기존 캐시 로드: {pdf_name}")
         except Exception as e:
             logger.error(f"캐시 파일 로드 오류: {str(e)}")
     
-    # 캐싱되지 않은 PDF 파일 처리
-    for pdf_file in pdf_files:
-        pdf_name = pdf_file.stem
-        if pdf_name not in pdf_cache or pdf_cache[pdf_name].get("status") != "completed":
-            try:
-                await cache_pdf(str(pdf_file))
-            except Exception as e:
-                logger.error(f"PDF {pdf_name} 캐싱 오류: {str(e)}")
+    # 캐싱되지 않은 PDF 파일 병렬 처리
+    await asyncio.gather(*[asyncio.create_task(cache_pdf(str(pdf_file))) 
+                          for pdf_file in pdf_files 
+                          if pdf_file.stem not in pdf_cache 
+                          or pdf_cache[pdf_file.stem].get("status") != "completed"])
 
 # 백그라운드 작업 시작 함수
 @app.on_event("startup")
@@ -191,7 +245,7 @@ async def startup_event():
 async def get_pdf_projects_api():
     return generate_pdf_projects()
 
-# API 엔드포인트: PDF 썸네일 제공
+# API 엔드포인트: PDF 썸네일 제공 (최적화)
 @app.get("/api/pdf-thumbnail")
 async def get_pdf_thumbnail(path: str):
     try:
@@ -199,23 +253,23 @@ async def get_pdf_thumbnail(path: str):
         pdf_name = pdf_file.stem
         
         # 캐시에서 썸네일 가져오기
-        if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") == "completed":
-            if pdf_cache[pdf_name]["pages"] and pdf_cache[pdf_name]["pages"][0].get("thumb"):
+        if pdf_name in pdf_cache and pdf_cache[pdf_name].get("pages"):
+            if pdf_cache[pdf_name]["pages"][0].get("thumb"):
                 return {"thumbnail": pdf_cache[pdf_name]["pages"][0]["thumb"]}
-        
-        # 캐시에 없으면 생성
+            
+        # 캐시에 없으면 생성 (더 작고 빠른 썸네일)
         import fitz
         doc = fitz.open(path)
         if doc.page_count > 0:
             page = doc[0]
-            pix = page.get_pixmap(matrix=fitz.Matrix(0.5, 0.5))
-            img_data = pix.tobytes("png")
+            pix = page.get_pixmap(matrix=fitz.Matrix(0.2, 0.2))  # 더 작은 썸네일
+            img_data = pix.tobytes("jpeg", 70)  # JPEG 압축 사용
             b64_img = base64.b64encode(img_data).decode('utf-8')
             
             # 백그라운드에서 캐싱 시작
             asyncio.create_task(cache_pdf(path))
             
-            return {"thumbnail": f"data:image/png;base64,{b64_img}"}
+            return {"thumbnail": f"data:image/jpeg;base64,{b64_img}"}
         
         return {"thumbnail": None}
     except Exception as e:
@@ -235,7 +289,7 @@ async def get_cache_status(path: str = None):
         return {name: {"status": info["status"], "progress": info.get("progress", 0)} 
                 for name, info in pdf_cache.items()}
 
-# API 엔드포인트: 캐시된 PDF 콘텐츠 제공
+# API 엔드포인트: 캐시된 PDF 콘텐츠 제공 (점진적 로딩 지원)
 @app.get("/api/cached-pdf")
 async def get_cached_pdf(path: str, background_tasks: BackgroundTasks):
     try:
@@ -243,12 +297,27 @@ async def get_cached_pdf(path: str, background_tasks: BackgroundTasks):
         pdf_name = pdf_file.stem
         
         # 캐시 확인
-        if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") == "completed":
-            return pdf_cache[pdf_name]
-        
-        # 캐��가 진행중인 경우
-        if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") == "processing":
-            return {"status": "processing", "progress": pdf_cache[pdf_name].get("progress", 0)}
+        if pdf_name in pdf_cache:
+            status = pdf_cache[pdf_name].get("status", "")
+            
+            # 완료된 경우 전체 데이터 반환
+            if status == "completed":
+                return pdf_cache[pdf_name]
+            
+            # 처리 중인 경우 현재까지의 페이지 데이터 포함 (점진적 로딩)
+            elif status == "processing":
+                progress = pdf_cache[pdf_name].get("progress", 0)
+                pages = pdf_cache[pdf_name].get("pages", [])
+                total_pages = pdf_cache[pdf_name].get("total_pages", 0)
+                
+                # 일부만 처리된 경우에도 사용 가능한 페이지 제공
+                return {
+                    "status": "processing", 
+                    "progress": progress,
+                    "pages": pages,
+                    "total_pages": total_pages,
+                    "available_pages": len([p for p in pages if p and p.get("src")])
+                }
         
         # 캐시가 없는 경우 백그라운드에서 캐싱 시작
         background_tasks.add_task(cache_pdf, path)
@@ -270,7 +339,9 @@ async def get_pdf_content(path: str, background_tasks: BackgroundTasks):
         pdf_name = pdf_file.stem
         
         # 캐시된 경우 리다이렉트
-        if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") == "completed":
+        if pdf_name in pdf_cache and (pdf_cache[pdf_name].get("status") == "completed" 
+                                     or (pdf_cache[pdf_name].get("status") == "processing" 
+                                         and pdf_cache[pdf_name].get("progress", 0) > 10)):
             return JSONResponse(content={"redirect": f"/api/cached-pdf?path={path}"})
         
         # 파일 읽기
@@ -306,7 +377,7 @@ def get_html_content():
             return f.read()
     return HTML  # 기본 HTML 사용
 
-# HTML 문자열 (이전에 업데이트한 HTML 내용)
+# HTML 문자열 (UI 수정 버전)
 HTML = """
 <!doctype html>
 <html lang="ko">
@@ -353,56 +424,69 @@ HTML = """
     background-attachment: fixed;
   }
 
-  header {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 24px 30px;
+  /* 헤더 제목 제거 및 Home 버튼 레이어 처리 */
+  .floating-home {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    box-shadow: var(--shadow-md);
+    z-index: 9999;
     display: flex;
+    justify-content: center;
     align-items: center;
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(8px);
-    border-radius: 0 0 var(--radius-md) var(--radius-md);
-    box-shadow: var(--shadow-sm);
-    position: relative;
-    z-index: 10;
-  }
-
-  #homeBtn {
-    display: none;
-    width: 48px;
-    height: 48px;
-    border: none;
-    border-radius: 50%;
     cursor: pointer;
-    background: var(--primary-color);
-    color: white;
-    font-size: 22px;
-    margin-right: 16px;
-    box-shadow: var(--shadow-sm);
     transition: var(--transition);
+    overflow: hidden;
   }
-
-  #homeBtn:hover {
-    background: #8bc5f8;
+  
+  .floating-home:hover {
     transform: scale(1.05);
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-lg);
   }
-
-  h2 {
-    margin: 0;
-    font-size: 1.75rem;
+  
+  .floating-home .icon {
+    font-size: 22px;
+    color: var(--primary-color);
+    transition: var(--transition);
+  }
+  
+  .floating-home:hover .icon {
+    color: #8bc5f8;
+  }
+  
+  .floating-home .title {
+    position: absolute;
+    left: 70px;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 8px 20px;
+    border-radius: 20px;
+    box-shadow: var(--shadow-sm);
     font-weight: 600;
-    background: linear-gradient(120deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    letter-spacing: 0.5px;
+    font-size: 14px;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: all 0.3s ease;
+  }
+  
+  .floating-home:hover .title {
+    opacity: 1;
+    transform: translateX(0);
   }
 
   #home, #viewerPage {
+    padding-top: 100px;
     max-width: 1200px;
     margin: 0 auto;
-    padding: 24px 30px 60px;
+    padding-bottom: 60px;
+    padding-left: 30px;
+    padding-right: 30px;
     position: relative;
   }
 
@@ -711,6 +795,49 @@ HTML = """
     transition: width 0.3s ease;
   }
 
+  /* 헤더 로고 및 타이틀 */
+  .library-header {
+    position: fixed;
+    top: 20px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    z-index: 100;
+    pointer-events: none;
+  }
+  
+  .library-header .title {
+    display: inline-block;
+    padding: 12px 30px;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(10px);
+    border-radius: 30px;
+    box-shadow: var(--shadow-md);
+    font-size: 1.5rem;
+    font-weight: 600;
+    background-image: linear-gradient(120deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    pointer-events: all;
+  }
+  
+  /* 점진적 로딩 표시 */
+  .loading-pages {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255, 255, 255, 0.9);
+    padding: 10px 20px;
+    border-radius: 20px;
+    box-shadow: var(--shadow-md);
+    font-size: 14px;
+    color: var(--text-color);
+    z-index: 9998;
+    text-align: center;
+  }
+
   /* 반응형 디자인 */
   @media (max-width: 768px) {
     .grid {
@@ -722,21 +849,33 @@ HTML = """
       height: 240px;
     }
     
-    header {
-      padding: 20px;
+    .library-header .title {
+      font-size: 1.25rem;
+      padding: 10px 20px;
     }
     
-    h2 {
-      font-size: 1.5rem;
+    .floating-home {
+      width: 50px;
+      height: 50px;
+    }
+    
+    .floating-home .icon {
+      font-size: 18px;
     }
   }
   </style>
 </head>
 <body>
-  <header>
-    <button id="homeBtn" title="홈으로"><i class="fas fa-home"></i></button>
-    <h2>My FlipBook Library</h2>
-  </header>
+  <!-- 제목을 Home 버튼과 함께 레이어로 처리 -->
+  <div id="homeButton" class="floating-home" style="display:none;">
+    <div class="icon"><i class="fas fa-home"></i></div>
+    <div class="title">홈으로 돌아가기</div>
+  </div>
+  
+  <!-- 센터 정렬된 타이틀 -->
+  <div class="library-header">
+    <div class="title">FlipBook Library</div>
+  </div>
 
   <section id="home" class="fade-in">
     <div class="upload-container">
@@ -761,6 +900,7 @@ HTML = """
 
   <section id="viewerPage" style="display:none">
     <div id="viewer"></div>
+    <div id="loadingPages" class="loading-pages" style="display:none;">페이지 로딩 중... <span id="loadingPagesCount">0/0</span></div>
   </section>
 
   <script>
@@ -770,6 +910,10 @@ HTML = """
 
     // 서버에서 미리 로드된 PDF 프로젝트
     let serverProjects = [];
+    
+    // 현재 페이지 로딩 상태
+    let currentLoadingPdfPath = null;
+    let pageLoadingInterval = null;
 
     /* 🔊 오디오 unlock – 내장 Audio 와 같은 MP3 경로 사용 */
     ['click','touchstart'].forEach(evt=>{
@@ -798,7 +942,7 @@ HTML = """
       d.innerHTML = `
         <div class="card-inner">
           ${cachedBadge}
-          <img src="${thumb}" alt="${displayTitle}">
+          <img src="${thumb}" alt="${displayTitle}" loading="lazy">
           <p title="${title || '프로젝트 ' + (i+1)}">${displayTitle}</p>
         </div>
       `;
@@ -884,29 +1028,46 @@ HTML = """
           return;
         }
         
-        // 서버 PDF 로드 및 썸네일 생성
-        for(let i = 0; i < serverProjects.length; i++) {
-          updateLoading(`PDF 프로젝트 로딩 중... (${i+1}/${serverProjects.length})`);
+        // 서버 PDF 로드 및 썸네일 생성 (병렬 처리로 최적화)
+        const thumbnailPromises = serverProjects.map(async (project, index) => {
+          updateLoading(`PDF 프로젝트 로딩 중... (${index+1}/${serverProjects.length})`);
           
-          const project = serverProjects[i];
           const pdfName = project.name;
           const isCached = cacheStatus[pdfName] && cacheStatus[pdfName].status === "completed";
           
-          // 썸네일 가져오기
-          const response = await fetch(`/api/pdf-thumbnail?path=${encodeURIComponent(project.path)}`);
-          const data = await response.json();
-          
-          if(data.thumbnail) {
-            const pages = [{
-              src: data.thumbnail,
-              thumb: data.thumbnail,
-              path: project.path,
-              cached: isCached
-            }];
+          try {
+            // 썸네일 가져오기
+            const response = await fetch(`/api/pdf-thumbnail?path=${encodeURIComponent(project.path)}`);
+            const data = await response.json();
             
-            save(pages, project.name, isCached);
+            if(data.thumbnail) {
+              const pages = [{
+                src: data.thumbnail,
+                thumb: data.thumbnail,
+                path: project.path,
+                cached: isCached
+              }];
+              
+              return {
+                pages,
+                name: project.name,
+                isCached
+              };
+            }
+          } catch (err) {
+            console.error(`썸네일 로드 오류 (${project.name}):`, err);
           }
-        }
+          
+          return null;
+        });
+        
+        // 모든 썸네일 요청 기다리기
+        const results = await Promise.all(thumbnailPromises);
+        
+        // 성공적으로 가져온 결과만 표시
+        results.filter(result => result !== null).forEach(result => {
+          save(result.pages, result.name, result.isCached);
+        });
         
         hideLoading();
         
@@ -944,6 +1105,9 @@ HTML = """
                 badgeEl.className = 'cached-status';
                 badgeEl.textContent = '캐시됨';
                 cards[i].querySelector('.card-inner')?.appendChild(badgeEl);
+              } else if (badgeEl.textContent !== '캐시됨') {
+                badgeEl.textContent = '캐시됨';
+                badgeEl.style.background = 'var(--accent-color)';
               }
               projects[i][0].cached = true;
             } else if(cacheStatus[pdfName] && cacheStatus[pdfName].status === "processing") {
@@ -958,6 +1122,30 @@ HTML = """
           }
         }
         
+        // 현재 로딩 중인 PDF가 있으면 상태 확인
+        if (currentLoadingPdfPath && pageLoadingInterval) {
+          const pdfName = currentLoadingPdfPath.split('/').pop().replace('.pdf', '');
+          
+          if (cacheStatus[pdfName]) {
+            const status = cacheStatus[pdfName].status;
+            const progress = cacheStatus[pdfName].progress || 0;
+            
+            if (status === "completed") {
+              // 캐싱 완료 시
+              clearInterval(pageLoadingInterval);
+              $id('loadingPages').style.display = 'none';
+              currentLoadingPdfPath = null;
+              
+              // 완료된 캐시로 플립북 다시 로드
+              refreshFlipBook();
+            } else if (status === "processing") {
+              // 진행 중일 때 표시 업데이트
+              $id('loadingPages').style.display = 'block';
+              $id('loadingPagesCount').textContent = `${progress}%`;
+            }
+          }
+        }
+        
       } catch(error) {
         console.error('캐시 상태 확인 오류:', error);
       }
@@ -978,6 +1166,10 @@ HTML = """
       if(pages[0].path) {
         const pdfPath = pages[0].path;
         
+        // 점진적 로딩 플래그 초기화
+        let progressiveLoading = false;
+        currentLoadingPdfPath = pdfPath;
+        
         // 캐시 여부 확인
         if(pages[0].cached) {
           // 캐시된 PDF 데이터 가져오기
@@ -990,7 +1182,16 @@ HTML = """
             if(cachedData.status === "completed" && cachedData.pages) {
               hideLoading();
               createFlipBook(cachedData.pages);
+              currentLoadingPdfPath = null;
               return;
+            } else if(cachedData.status === "processing" && cachedData.pages && cachedData.pages.length > 0) {
+              // 일부 페이지가 이미 처리된 경우 점진적 로딩 사용
+              hideLoading();
+              createFlipBook(cachedData.pages);
+              progressiveLoading = true;
+              
+              // 점진적 로딩 중임을 표시
+              startProgressiveLoadingIndicator(cachedData.progress, cachedData.total_pages);
             }
           } catch(error) {
             console.error("캐시 데이터 로드 오류:", error);
@@ -998,109 +1199,157 @@ HTML = """
           }
         }
         
-        // 캐시가 없거나 로딩 실패 시 서버 PDF 로드
-        showLoading("PDF 준비 중...");
-        
-        try {
-          const response = await fetch(`/api/pdf-content?path=${encodeURIComponent(pdfPath)}`);
-          const data = await response.json();
+        if (!progressiveLoading) {
+          // 캐시가 없거나 로딩 실패 시 서버 PDF 로드
+          showLoading("PDF 준비 중...");
           
-          // 캐시로 리다이렉트된 경우
-          if(data.redirect) {
-            const redirectRes = await fetch(data.redirect);
-            const cachedData = await redirectRes.json();
+          try {
+            const response = await fetch(`/api/pdf-content?path=${encodeURIComponent(pdfPath)}`);
+            const data = await response.json();
             
-            if(cachedData.status === "completed" && cachedData.pages) {
-              hideLoading();
-              createFlipBook(cachedData.pages);
-              return;
-            } else if(cachedData.status === "processing") {
-              // 캐싱 진행 중인 경우 진행률 표시
-              updateLoading(`PDF 캐싱 중: ${cachedData.progress}%`, cachedData.progress);
+            // 캐시로 리다이렉트된 경우
+            if(data.redirect) {
+              const redirectRes = await fetch(data.redirect);
+              const cachedData = await redirectRes.json();
               
-              // 캐싱 완료 확인을 위한 폴링
-              await waitForCaching(pdfPath);
-              return;
+              if(cachedData.status === "completed" && cachedData.pages) {
+                hideLoading();
+                createFlipBook(cachedData.pages);
+                currentLoadingPdfPath = null;
+                return;
+              } else if(cachedData.status === "processing" && cachedData.pages && cachedData.pages.length > 0) {
+                // 일부 페이지가 이미 처리된 경우 점진적 로딩 사용
+                hideLoading();
+                createFlipBook(cachedData.pages);
+                
+                // 점진적 로딩 중임을 표시
+                startProgressiveLoadingIndicator(cachedData.progress, cachedData.total_pages);
+                return;
+              }
             }
-          }
-          
-          // 원본 PDF 로드 (ArrayBuffer 형태)
-          const pdfResponse = await fetch(`/api/pdf-content?path=${encodeURIComponent(pdfPath)}`);
-          const pdfData = await pdfResponse.arrayBuffer();
-          
-          // PDF 로드 및 페이지 렌더링
-          const pdf = await pdfjsLib.getDocument({data: pdfData}).promise;
-          const pdfPages = [];
-          
-          for(let p = 1; p <= pdf.numPages; p++) {
-            updateLoading(`페이지 준비 중... (${p}/${pdf.numPages})`);
             
-            const pg = await pdf.getPage(p);
-            const vp = pg.getViewport({scale: 1});
-            const c = document.createElement('canvas');
-            c.width = vp.width;
-            c.height = vp.height;
+            // 원본 PDF 로드 (ArrayBuffer 형태)
+            const pdfResponse = await fetch(`/api/pdf-content?path=${encodeURIComponent(pdfPath)}`);
+            
+            // JSON 응답인 경우 (리다이렉트 등)
+            try {
+              const jsonData = await pdfResponse.clone().json();
+              if (jsonData.redirect) {
+                const redirectRes = await fetch(jsonData.redirect);
+                const cachedData = await redirectRes.json();
+                
+                if(cachedData.pages && cachedData.pages.length > 0) {
+                  hideLoading();
+                  createFlipBook(cachedData.pages);
+                  
+                  if(cachedData.status === "processing") {
+                    startProgressiveLoadingIndicator(cachedData.progress, cachedData.total_pages);
+                  } else {
+                    currentLoadingPdfPath = null;
+                  }
+                  return;
+                }
+              }
+            } catch (e) {
+              // JSON 파싱 실패 시 원본 PDF 데이터로 처리
+            }
+            
+            // ArrayBuffer 형태의 PDF 데이터
+            const pdfData = await pdfResponse.arrayBuffer();
+            
+            // PDF 로드 및 페이지 렌더링
+            const pdf = await pdfjsLib.getDocument({data: pdfData}).promise;
+            const pdfPages = [];
             
-            await pg.render({canvasContext: c.getContext('2d'), viewport: vp}).promise;
-            pdfPages.push({src: c.toDataURL(), thumb: c.toDataURL()});
+            for(let p = 1; p <= pdf.numPages; p++) {
+              updateLoading(`페이지 준비 중... (${p}/${pdf.numPages})`);
+              
+              const pg = await pdf.getPage(p);
+              const vp = pg.getViewport({scale: 1});
+              const c = document.createElement('canvas');
+              c.width = vp.width;
+              c.height = vp.height;
+              
+              await pg.render({canvasContext: c.getContext('2d'), viewport: vp}).promise;
+              pdfPages.push({src: c.toDataURL(), thumb: c.toDataURL()});
+            }
+            
+            hideLoading();
+            createFlipBook(pdfPages);
+            currentLoadingPdfPath = null;
+            
+          } catch(error) {
+            console.error('PDF 처리 중 오류 발생:', error);
+            hideLoading();
+            showError("PDF를 로드하는 중 오류가 발생했습니다.");
+            currentLoadingPdfPath = null;
           }
-          
-          hideLoading();
-          createFlipBook(pdfPages);
-          
-        } catch(error) {
-          console.error('PDF 처리 중 오류 발생:', error);
-          hideLoading();
-          showError("PDF를 로드하는 중 오류가 발생했습니다.");
         }
       } else {
         // 로컬 업로드된 프로젝트 실행
         createFlipBook(pages);
+        currentLoadingPdfPath = null;
       }
     }
 
-    /* ── 캐싱 완료 대기 함수 ── */
-    async function waitForCaching(pdfPath) {
-      let retries = 0;
-      const maxRetries = 100; // 최대 확인 횟수
+    /* ── 점진적 로딩 인디케이터 시작 ── */
+    function startProgressiveLoadingIndicator(progress, totalPages) {
+      // 진행 상태 표시 활성화
+      $id('loadingPages').style.display = 'block';
+      $id('loadingPagesCount').textContent = `${progress}%`;
+      
+      // 기존 인터벌 제거
+      if (pageLoadingInterval) {
+        clearInterval(pageLoadingInterval);
+      }
       
-      const checkInterval = setInterval(async () => {
+      // 주기적으로 캐시 상태 확인 (2초마다)
+      pageLoadingInterval = setInterval(async () => {
+        if (!currentLoadingPdfPath) {
+          clearInterval(pageLoadingInterval);
+          $id('loadingPages').style.display = 'none';
+          return;
+        }
+        
         try {
-          const response = await fetch(`/api/cache-status?path=${encodeURIComponent(pdfPath)}`);
+          const response = await fetch(`/api/cache-status?path=${encodeURIComponent(currentLoadingPdfPath)}`);
           const status = await response.json();
           
-          if(status.status === "completed") {
-            // 캐싱 완료
-            clearInterval(checkInterval);
-            hideLoading();
-            
-            // 캐시된 데이터로 FlipBook 생성
-            const cachedRes = await fetch(`/api/cached-pdf?path=${encodeURIComponent(pdfPath)}`);
-            const cachedData = await cachedRes.json();
-            createFlipBook(cachedData.pages);
-            
-          } else if(status.status === "processing") {
-            // 진행 상태 업데이트
-            updateLoading(`PDF 캐싱 중: ${status.progress}%`, status.progress);
-          } else if(status.status === "error" || retries >= maxRetries) {
-            // 오류 또는 시간 초과
-            clearInterval(checkInterval);
-            hideLoading();
-            showError("PDF 캐싱 중 오류가 발생했습니다. 다시 시도해주세요.");
+          // 상태 업데이트
+          if (status.status === "completed") {
+            clearInterval(pageLoadingInterval);
+            $id('loadingPages').style.display = 'none';
+            refreshFlipBook();  // 완료된 데이터로 새로고침
+            currentLoadingPdfPath = null;
+          } else if (status.status === "processing") {
+            $id('loadingPagesCount').textContent = `${status.progress}%`;
           }
-          
-          retries++;
-        } catch(e) {
+        } catch (e) {
           console.error("캐시 상태 확인 오류:", e);
-          retries++;
+        }
+      }, 1000);
+    }
+
+    /* ── 플립북 새로고침 ── */
+    async function refreshFlipBook() {
+      if (!currentLoadingPdfPath || !fb) return;
+      
+      try {
+        const response = await fetch(`/api/cached-pdf?path=${encodeURIComponent(currentLoadingPdfPath)}`);
+        const cachedData = await response.json();
+        
+        if(cachedData.status === "completed" && cachedData.pages) {
+          // 기존 플립북 정리
+          fb.destroy();
+          viewer.innerHTML = '';
           
-          if(retries >= maxRetries) {
-            clearInterval(checkInterval);
-            hideLoading();
-            showError("PDF 캐싱 상태를 확인할 수 없습니다.");
-          }
+          // 새 데이터로 재생성
+          createFlipBook(cachedData.pages);
+          currentLoadingPdfPath = null;
         }
-      }, 1000); // 1초마다 확인
+      } catch (e) {
+        console.error("플립북 새로고침 오류:", e);
+      }
     }
 
     function createFlipBook(pages) {
@@ -1143,8 +1392,20 @@ HTML = """
         viewer.style.width = size.width + 'px';
         viewer.style.height = size.height + 'px';
         
+        // 페이지 데이터 정제 (빈 페이지 처리)
+        const validPages = pages.map(page => {
+          // src가 없는 페이지는 로딩 중 이미지로 대체
+          if (!page || !page.src) {
+            return {
+              src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iIGZpbGw9IiM1NTUiPkxvYWRpbmcuLi48L3RleHQ+PC9zdmc+',
+              thumb: page && page.thumb ? page.thumb : ''
+            };
+          }
+          return page;
+        });
+        
         fb = new FlipBook(viewer, {
-          pages: pages,
+          pages: validPages,
           viewMode: 'webgl',
           autoSize: true,
           flipDuration: 800,
@@ -1215,41 +1476,33 @@ HTML = """
     }
 
     /* ── 네비게이션 ── */
-    $id('homeBtn').onclick=()=>{
+    $id('homeButton').onclick=()=>{
       if(fb) {
         fb.destroy();
         viewer.innerHTML = '';
         fb = null;
       }
       toggle(true);
+      
+      // 로딩 인디케이터 정리
+      if (pageLoadingInterval) {
+        clearInterval(pageLoadingInterval);
+        pageLoadingInterval = null;
+      }
+      $id('loadingPages').style.display = 'none';
+      currentLoadingPdfPath = null;
     };
 
     function toggle(showHome){
       $id('home').style.display=showHome?'block':'none';
       $id('viewerPage').style.display=showHome?'none':'block';
-      $id('homeBtn').style.display=showHome?'none':'inline-block';
+      $id('homeButton').style.display=showHome?'none':'block';
       
       // 뷰어 모드일 때 스타일 변경
       if(!showHome) {
         document.body.classList.add('viewer-mode');
-        $id('homeBtn').style.position = 'fixed';
-        $id('homeBtn').style.top = '20px';
-        $id('homeBtn').style.left = '20px';
-        $id('homeBtn').style.zIndex = '9999';
-        $id('homeBtn').style.fontSize = '';
-        $id('homeBtn').style.width = '52px';
-        $id('homeBtn').style.height = '52px';
-        $id('homeBtn').style.boxShadow = '0 4px 15px rgba(0,0,0,0.15)';
       } else {
         document.body.classList.remove('viewer-mode');
-        $id('homeBtn').style.position = '';
-        $id('homeBtn').style.top = '';
-        $id('homeBtn').style.left = '';
-        $id('homeBtn').style.zIndex = '';
-        $id('homeBtn').style.fontSize = '';
-        $id('homeBtn').style.width = '';
-        $id('homeBtn').style.height = '';
-        $id('homeBtn').style.boxShadow = '';
       }
     }
 
@@ -1345,8 +1598,8 @@ HTML = """
     window.addEventListener('DOMContentLoaded', () => {
       loadServerPDFs();
       
-      // 캐시 상태를 주기적으로 확인 (5초마다)
-      setInterval(checkCacheStatus, 5000);
+      // 캐시 상태를 주기적으로 확인 (3초마다)
+      setInterval(checkCacheStatus, 3000);
     });
   </script>
 </body>