스크래핑으로 만든 초고속 만화 뷰어, SvelteKit으로 구현하기
SEO 키워드: SvelteKit, 만화 뷰어, 웹 스크래핑
# 서론 – “만화 읽기가 이렇게 불편할 줄은 몰랐어요”
일상에서 작은 불편함을 마주하면 “코드로 해결할 수 있겠지” 하는 생각이 듭니다.
특히 만화를 읽을 때, 광고가 끊임없이 뜨고, 페이지 전환이 느려서 독서 흐름이 깨지는 경험은 누구에게나 익숙합니다.
이 글에서는 SvelteKit과 웹 스크래핑을 활용해, 광고 없이 빠르게 로드되는 만화 뷰어를 직접 만드는 과정을 초보자도 이해할 수 있도록 단계별로 설명합니다.
# 본론
# 1. 프로젝트 준비 – SvelteKit 기본 설정
Node.js 설치 (버전 18 이상 권장)
터미널에서 아래 명령어로 SvelteKit 프로젝트 생성
bash
npm init svelte@next manga-reader
cd manga-reader
npm install
npm run dev
src/routes에+page.svelte파일을 만들고, 기본 레이아웃을 잡습니다.SvelteKit은 SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)을 자유롭게 전환할 수 있어, 페이지 로드 속도를 최적화하는 데 큰 장점이 있습니다.
# 2. 웹 스크래핑 – 만화 이미지 추출하기
만화 사이트는 일반적으로 이미지 URL을 직접 노출하지 않으므로, 서버 측에서 스크래핑을 수행합니다.
- Cheerio와 node-fetch 설치
bash
npm install cheerio node-fetch
src/lib/scraper.js파일을 만들고, 목표 사이트의 HTML을 파싱해 이미지 URL을 추출합니다.
js
import fetch from 'node-fetch';
import cheerio from 'cheerio';
export async function getMangaPages(chapterUrl) {
const res = await fetch(chapterUrl);
const html = await res.text();
const $ = cheerio.load(html);
// 예시: <img class='page-img' src='...'>
const imgUrls = [];
$('img.page-img').each((_, el) => {
imgUrls.push($(el).attr('src'));
});
return imgUrls;
}
- Edge Runtime(Vercel, Netlify 등)에서 동작하도록
src/routes/api/[chapter].js엔드포인트를 만들면, 클라이언트는 별도 CORS 문제 없이 이미지 리스트를 받아올 수 있습니다.
# 3. 프리로드와 캐시 전략 – 초고속 로딩 구현
SvelteKit의 load 함수와 Service Worker를 활용해 페이지 전환 시마다 이미지를 미리 받아두는 전략을 적용합니다.
js
// +page.js
export async function load({ params, fetch }) {
const { chapter } = params;
const res = await fetch(`/api/${chapter}`);
const pages = await res.json();
return { pages };
}
그리고 src/service-worker.js에 캐시 로직을 추가합니다.
js
self.addEventListener('fetch', (event) => {
if (event.request.destination === 'image') {
event.respondWith(
caches.open('manga-images').then(cache =>
cache.match(event.request).then(resp =>
resp || fetch(event.request).then(networkResp => {
cache.put(event.request, networkResp.clone());
return networkResp;
})
)
)
);
}
});
이렇게 하면 사용자가 다음 페이지를 넘길 때마다 네트워크 요청이 최소화돼 즉시 표시가 가능합니다.
# 4. UI/UX – 직관적인 만화 뷰어 만들기
가로·세로 자동 맞춤: 이미지가 화면 크기에 맞게
object-fit: contain을 적용합니다.스크롤 대신 페이지 넘김:
wheel이벤트와touch이벤트를 감지해 페이지를 전환합니다.다크 모드와 배경 색상 옵션을 제공해 눈의 피로를 줄입니다.
svelte
<script>
export let pages = [];
let current = 0;
function next() {
if (current < pages.length - 1) current += 1;
}
function prev() {
if (current > 0) current -= 1;
}
</script>
<div class='viewer' on:wheel|preventDefault={e => e.deltaY > 0 ? next() : prev()}>
<img src={pages[current]} alt='Manga page' />
</div>
<style>
.viewer {
display:flex; justify-content:center; align-items:center;
height:100vh; background:#111;
}
img { max-width:100%; max-height:100%; object-fit:contain; }
</style>
# 5. 배포와 모니터링 – Edge에서 최적화 유지하기
Vercel 혹은 Netlify에 프로젝트를 푸시하면 자동으로 Edge 네트워크에 배포됩니다.
vercel.json에regions옵션을 지정해 사용자와 가장 가까운 엣지 로케이션을 선택하면 지연 시간이 30ms 이하로 떨어집니다.Google Analytics와 Sentry를 연동해 페이지 전환 속도와 에러를 실시간 모니터링합니다.
# 결론 – 직접 만들어 보는 초고속 만화 뷰어
SvelteKit과 웹 스크래핑을 조합하면, 광고 없이 즉시 로드되는 만화 뷰어를 손쉽게 구현할 수 있습니다.
1️⃣ 프로젝트 초기 설정 → 2️⃣ 서버‑사이드 스크래핑 → 3️⃣ 프리로드·캐시 전략 → 4️⃣ 직관적인 UI → 5️⃣ 엣지 배포
위 흐름을 따라가면 초보자도 몇 시간 안에 나만의 만화 뷰어를 만들 수 있습니다.
지금 바로 코드를 복제하고, 자신만의 만화 컬렉션을 빠르게 즐겨보세요!
행동 유도: 이 글이 도움이 되었다면 GitHub에 포크하고, 댓글로 구현 중 겪은 어려움을 공유해주세요. 여러분의 피드백이 다음 개선에 큰 힘이 됩니다. 🚀