기존 파이썬으로 작성한 네이버 웹툰 다운로더 입니다. 현재 릴리즈 된 최신 버전은 v4.3입니다.
2022.03.03 네이버 웹툰 사이트 개편 업데이트
댓글로 세 분 정도가 제보해 주셔서 알았는데 네이버 웹툰 사이트가 개편되었습니다.
네이버 서비스가 대부분 그렇지만 특히 네이버 웹툰 사이트는 몇 년째 거의 변화 없이 짜잘 짜잘한 디자인 업데이트나 편의성 개선만 있어왔습니다. 이번엔 일종의 웹 앱 형식으로 사이트 구조가 개편되었습니다.
당연히 네이버 웹툰 사이트가 변화함에 따라 HTML 구조도 변화하였고 기존에 네이버 웹툰 다운로더는 작동하지 않게 되었습니다.
네이버 웹툰 사이트 응답 코드 (Python Requests 로 요청한 결과값)
JS로 api에 요청하여 React로 동적으로 로딩하는듯 함.
Server Side Rendering -> Client Side Rendering?
<!DOCTYPE html>
<html lang="ko">
<head>
<title>네이버 웹툰</title>
<link rel="shortcut icon" href="https://ssl.pstatic.net/static/m/comic/im/favicon/1804/webtoon_favicon_32x32.ico" type="image/x-icon">
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta property="og:type" content="article">
<meta property="og:article:author" content="네이버 웹툰">
<meta property="og:article:author:url" content="https://comic.naver.com">
<meta property="og:title" content="덴마">
<meta property="og:image" content="https://shared-comic.pstatic.net/thumb/webtoon/119874/thumbnail/title_thumbnail_20150706185233_t220x202.jpg">
<meta property="og:url" content="http://comic.naver.com/webtoon/list?titleId=119874">
<meta property="og:description" content="특수능력을 지닌 악당 덴마가꼬마의 몸에 갇혀 우주택배 업무를 하며 겪는 기상천외한 모험이야기.">
<script>
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
window.location = 'microsoft-edge:' + window.location;
setTimeout(function () {
window.location = 'https://go.microsoft.com/fwlink/?linkid=2135547';
}, 1);
}
</script>
<script async src='https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js'></script>
<script>
var ccsrv = 'cc.naver.com';
window.gladsdk = window.gladsdk || { cmd: [] };
</script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="/runtime-0f538c4e89f6a95957ca.js"></script>
<script type="text/javascript" src="/vendor-react-d37d9c657a271200d9cf.js"></script>
<script type="text/javascript" src="/vendor-react-common-37956e291f4123b1240a.js"></script>
<script type="text/javascript" src="/vendor-common-0b0b0cc3031d3b0a1965.js"></script>
<script type="text/javascript" src="/vendor-log-8df3dc520d958957bcbd.js"></script>
<script type="text/javascript" src="/router-4a1df355348c2657e193.js"></script>
</html>
GET /api/article/list/info?titleId=119874 HTTP/1.1
{"titleId":119874,"thumbnailUrl":"https://image-comic.pstatic.net/webtoon/119874/thumbnail/thumbnail_IMAG21_3762587498966376754.jpg","sharedThumbnailUrl":"https://shared-comic.pstatic.net/thumb/webtoon/119874/thumbnail/title_thumbnail_20150706185233_t220x202.jpg","titleName":"덴마","webtoonLevelCode":"WEBTOON","author":{"writers":[{"id":29,"name":"양영순"}],"painters":[{"id":29,"name":"양영순"}],"originAuthors":[]},"thumbnailBadgeList":["DAILY_PASS"],"age":{"type":"RATE_15","description":"15세 이용가"},"publishDescription":"1414화 완결","synopsis":"특수능력을 지닌 악당 덴마가\n꼬마의 몸에 갇혀 우주택배 업무를 하며 겪는 기상천외한 모험이야기.","favoriteCount":318849,"favorite":true,"latestReadArticle":{"no":25,"subtitle":"25화 야엘 로드(1)","charge":false},"firstArticle":{"no":1,"subtitle":"1화 파마나의 개(1)","charge":false},"publishDayOfWeekList":["TUESDAY","FRIDAY","SUNDAY"],"rest":false,"finished":true,"dailyPass":true,"curationTagList":[{"id":119874,"tagName":"판타지","urlPath":"/webtoon?tab=genre&genre=FANTASY","curationType":"GENRE_FANTASY"},{"id":119874,"tagName":"완결판타지","urlPath":"/curation/list?type=FINISH_GENRE_FANTASY","curationType":"FINISH_GENRE_FANTASY"}],"adBannerList":[],"chargeBestChallenge":false,"contentsNo":442532,"new":false}이번에 네이버 웹툰 사이트가 개편되면서 바뀐 흥미로운 점은 바로 웹툰 사이트 요청에 대한 API 서버가 새로 생겼다는 겁니다.
기존 네이버 웹툰 사이트는 서버쪽에서 모든 사이트 구조(HTML, CSS, JS) 를 만들어서 한꺼번에 응답하는 Server Side Rendering의 형태였지만 이제는 서버쪽(Backend) 단에서는 API 서버를 통해 JSON 으로 웹툰에 대한 정보 데이터만 응답하고 Client 쪽에서 렌더링하는 Client Side Rendering 의 형태로 바뀐 것으로 추정됩니다.
그리고 React를 도입하면서 사이트 반응도 아주 빠른것으로 보아 Single Page Application 의 형태로 웹을 제작한 듯 합니다.
결론적으로는 이제 웹툰 사이트에 직접가서 Python Request 로 요청을 걸어봤자 requests 모듈은 HTML의 응답 데이터만 가져오므로 JS 코드를 실행시킬 수 없습니다. 클라이언트 쪽에서 JS로 API 요청을 걸어서 실시간으로 렌더링 할건데 이 코드를 실행시킬 수 없다는 것이죠.
다만 상관은 없는게 Client 에서 받는 JS 코드가 어짜피 API 서버에 요청해서 응답 데이터대로 그려내는 일이기 때문에, 그냥 우리는 request 로 웹툰 API 서버에 요청을 걸어서 JSON 응답 데이터를 받고 이에 맞게 네이버 웹툰 프로그램을 수정하면 됩니다.
아무튼 기존 네이버 웹툰 사이트에 직접 요청을 걸어서 HTML 데이터를 가져오던 옛날 방식에서 이번에 새로 생긴 웹툰 API 서버에 요청을 걸어서 응답을 받는 형태로 프로그램을 전부 수정하였습니다.
사실 돈도 안받고 작업하는 것들이고 제가 취미로 유지하는 것들이라.. 이렇게 변동 사항이 생길때마다 상당히 짜증나고 귀찮습니다. 이래서 웹 파싱하는 프로그램은 GitHub에 유지하기가 참 그렇습니다 ㅎㅎ;
사이트가 바뀌면 언제든 동작을 안할 수가 있게 되는게 웹 파싱 프로그램들이라서.. 뭐 어찌됐건 이번에 API 서버가 새로 생겼으니 Client HTML 페이지에 직접 요청을 걸어서 가져오는 것보다는 조금 더 안전성이 생겼겠지요. API 응답 데이터가 바뀌는 일은 많이 없을듯 하니..
SPA / Client Side Rendering 그리고 Server Side Rendering
SPA와 클라이언트 사이드 렌더링 서버사이드 렌더링을 정리해보았다. SPA : Single Page Application 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션 (
velog.io
https://korshika.tistory.com/58
Client side - Server side rendering
■ Client Side Rendering 1) 정의: 모든 작업을 Client side에서 수행하는 것 > React / Vue / Angular 등등 요즘 핫한 Single Page Application 의 프레임워크가 해당 2) 과정: (a) 서버에서 client의 request에 의해 index html
korshika.tistory.com
HTML 생성 기능 추가 (준비중)
네이버 웹툰 사이트에서 이미지를 받으면 스크롤 위부터 끝까지 통짜의 큰 이미지 파일 하나가 나오는게 아니라, 작은 크기로 쪼개진 여러개의 이미지 파일이 다운로드가 됩니다.
이는 작가님들이 웹툰을 작업하실 때 컷을 작은 크기로 나누어서 작업하기 때문입니다. 그래서 웹툰 마다 쪼개진 이미지 파일의 갯수나 크기가 천차만별로 다릅니다. (작가님들마다 작업 성향이 다르시기 때문에)
웹툰을 다운로드 해서 보는 입장에서는 이게 좀 불편하기에 쪼개진 웹툰 이미지들을 한개의 큰 이미지로 합쳐서 보는 방법엔 2가지 정도 방법이 있습니다.
1. 외부 서드파티 프로그램을 이용한다. (여러개의 작은 이미지를 세로 일렬로 합쳐줘서 보여주는 뷰어 프로그램을 이용)
2. 프로그램의 이미지 병합 기능을 사용한다.
1번의 경우 간단한 방법이지만 기기별로 이미지를 보여주는 뷰어를 설치해야된다는 불편한점이 있고 (크로스플랫폼 미지원이라는 뜻) 2번의 경우 이미지들이 많아지면 1개로 합쳤을때 병합된 이미지의 크기가 기하급수적으로 커지는 경향이 있습니다. 예를 들어서 어떤 웹툰의 쪼개진 상태의 이미지가 50~60개 정도일때 이걸 세로로 1개의 png 파일로 합치면 용량이 100~200MB까지 치솟습니다.
웹툰 이미지를 이어서 보고 싶은데 용량 문제도 없고, 기기 호환성과 상관없이 볼 수 있는 방법이 없을까? 해서 생각해본게 바로 HTML을 생성하는 겁니다.
HTML을 생성해서 웹툰 사이트처럼 웹툰 목록을 만들어주고 이미지를 <img> 태그로 이어서 붙여주면 흡사 웹툰 사이트에서 보던것과 유사한 편의성을 제공하게 되겠죠.
그래서 일단은 기초적이지만 웹툰 다운로드 받은 폴더 경로를 입력해주면 HTML 을 자동 생성하는 기능을 준비중입니다.
일단은 리모콘도 있고 뭐 잘 작동합니다 ㅎㅎ
아직은 버그가 좀 있고 디자인도 안해놔서 이건 릴리즈 할지 말지 고민중입니다.
'프로그래밍 > Talk' 카테고리의 다른 글
| Electron, Vue, Typescript으로 개발을 도전 해보려 합니다 (1) | 2023.05.14 |
|---|---|
| PC방 프로그램 불법 프로그램 감지에 대한 고찰 Feat. Python - 크롬 창 이름 못보게 하기 (0) | 2023.04.10 |
| C# SMS 전송기 소소한 업데이트 (0) | 2023.01.26 |
| IDA PRO는 신이다. (0) | 2022.12.26 |
| 2023 강의 작성 고민중입니다. (0) | 2022.12.19 |
