jo5ephengineering

Portfolio / Case study

팝테일 - AI 이미지 기반 웹소설 플랫폼

SSR 기반 웹소설·웹툰 소설 뷰어 및 퍼포먼스 최적화

Next.jsSSRZustandReact Query
팝테일 - AI 이미지 기반 웹소설 플랫폼 대표 화면

Overview

AI 이미지 생성 기반 웹소설·웹툰소설을 지원하는 뷰어 중심 플랫폼입니다.

Key Features

  • 프론트 아키텍쳐 설계와 리딩을 담당
    • 서비스 초기 단계부터 핵심 개발자로 참여해 설계 → 구현 → 리딩 전 과정을 주도하며, 기능 확장성과 유지보수성을 고려한 구조를 구축
    • 기획자와 밀착 협업하여 사용자 경험 흐름과 주요 시나리오를 함께 정의하고, UX 의사결정의 근거를 체계화해 제품 완성도를 상승시킴
    • 작품 작성 → AI 이미지 생성 → 등록으로 이어지는 복잡한 제작 플로우를 백엔드와의 프로토콜·스키마 조율을 통해 단순화하고, 예외 처리 및 상태 관리 체계를 정립하여 안정적인 UX를 구현
  • SSR 도입으로 메인 페이지 초기 로딩 속도를 2400ms에서 1000ms로 단축
    • SSR과 썸네일 이미지를 도입하여 TTFB(Time To First Byte)를 개선하고, 메인 페이지 초기 로딩 속도를 2400ms → 1000ms(약 58%) 단축
    • SSR 적용 초기에 발생한 FOUC(Flash of Unstyled Content) 문제를 해결하기 위해 렌더링 구조와 스타일 주입 시점을 재설계하여 안정적인 초기 화면을 제공
    • 작품 및 뷰어 페이지에도 SSR을 확장 적용해 SEO를 최적화하고 검색 유입률을 높였으며, Next.js Middleware를 활용해 SSR 단계에서 로그인 유저를 판별함으로써 맞춤형 초기 렌더링과 효율적인 페이지 접근 제어를 구현
  • 고용량 이미지가 다수인 작품의 로딩 속도 문제 해결
    • EPUB 로딩 시 발생하던 고화질 이미지 지연 문제를 해결하기 위해 기존 EPUB 파서를 대체하고, HTML 기반 커스텀 렌더링 로직으로 전환하여 초기 로딩 속도를 약 80% 개선.
    • 이를 통해 이미지 콘텐츠가 많은 작품에서도 부드러운 화면 전환과 안정적인 독서 경험을 제공
    • 10장 이상의 이미지 콘텐츠 로딩 속도를 10초에서 2초로 단축(약 80% 개선)

Tech Stack

Next.js, Typescript, Styled-Components

Project gallery

팝테일 - AI 이미지 기반 웹소설 플랫폼 화면 1
팝테일 - AI 이미지 기반 웹소설 플랫폼 화면 2
팝테일 - AI 이미지 기반 웹소설 플랫폼 화면 3