토이 프로젝트 일지 1 : 네이버 웹툰 크롤링 서비스를 제공하는 Nodejs 서버 만들기
그림 1. 프로그램 동작 화면
1. 시작 계기
필자는 현재 컴퓨터 공학 4학년을 재학 중이며, 4학년까지 여러 가지 프로젝트들을 많이 만들어보았으나 지금 시점에서 보면 체계성도 매우 부족하고 너무 구현에만 급급했다는 생각이 많이 들었다. 그래서 좀 더 체계성을 키우기 위해서 개인적으로 토이 프로젝트를 만들어보자고 생각했으나 마땅히 할만한 주제가 잘 떠오르지 않았었다.
그때, 니꼴라스님이 저자이신 'Do it ! 클론 코딩' 시리즈를 모두 읽고 내가 너무 토이 프로젝트에 대해서 너무 복잡한 프로그램을 만들려고 하다 보니까 제대로 시작을 못 하고 있다는 것을 알게 되었다. 그래서 이번에는 가벼운 마음으로 '네이버 웹툰 크롤링 서비스'를 주제로 처음으로 제대로 된 토이 프로젝트를 만들어보려고 한다.
2. 프로젝트 개요
가. 프로젝트 소개
1. 프로젝트 유형: 개인 토이 프로젝트
2. 구현 서비스 : 네이버 웹툰 크롤링
3. 개발 환경 : replit(WEB IDE)
4. 구동 환경 : linux
5. 활용 기술
- 프론트 엔드 : bootstrap 4
> Vue, Angular와 같은 MVC 라이브러리는 사용하지 않았다.
- 백엔드 : Nodejs-Express
> 첫 토이 프로젝트인 만큼 필자에게 익숙한 프레임워크를 사용했다.
6. 개발 기간: 2023.1.17 ~ 2023.2.10
나. 프로젝트 목표
첫 번째로 시도해보는 토이 프로젝트인 만큼 끝까지 성공적으로 마무리하고, 관련 개발일지를 남기는 것이 가장 중요한 목표다. 그리고, 유지보수가 어려운 스파게티 코드가 되지 않도록 최대한 체계적으로 구현해보는 것도 주요 중점이다.
3. 프로젝트 구현
가. 개발 중점 요소들
1. 최소한의 요구 조건으로 v1.0.0부터 만들기
처음에 프로젝트를 시작하려고 하면 너무 구현해야 하는 사항들이 많아서 어디서부터 시작해야 할지 막막하다. 필자는 가장 필수적인 최소 구현 요구사항들이 뭔지부터 정리하고, 그 부분을 구현해서 v1.0.0을 만든 뒤에 성능을 추가하는 방식으로 만드는 게 프로젝트를 가볍게 시작하는데 도움이 된다고 생각한다.
여러 가지 부가 기능들이 있을 수 있지만, 필수적인 부분만을 추려내면 웹툰명 검색, 다운로드 받은 화수 선택, 그 화수들을 기준으로 .zip로 다운로드 받는 것으로 생각했다. 이러한 부분을 고려해서 스크럼 방법론을 참조한 시트를 통해 핵심 요구사항들을 그림 2와 같이 정리했다.
2. 자주 변경되지 않는 기능부터 구현하기
백엔드와 프론트엔드 중에서 무엇을 먼저 구현해야 할까? 필자는 백엔드부터라고 생각했다. 왜냐하면 프론트엔드쪽은 구현하는 과정에서 잘못 구현된 부분이 있으면 쉽게 수정된다고 생각하기 때문이다. 처음부터 완전하게 설계하는 것은 불가능하므로, 자주 변경되지 않는 백엔드부터 구현하는 게 구현 시간 단축에 도움이 된다고 생각한다.
3. 적어놓은 요구사항을 하나 달성할 때마다 리팩토링하기
스파게티 코드를 피하기 위해서는 리팩토링은 필수적이다. 그렇다면 언제 리팩토링을 하는 게 이상적일까? 필자는 요구사항 하나를 완전히 구현한 직후라고 생각한다. 요구사항을 구현하는 도중에는 요구사항 구현에 집중하기 바쁘기 때문에 리팩토링을 신경 쓰기는 힘들지만, 요구사항 하나를 완전히 구현하고 난 다음에는 마음에 여유가 생겨서 코드를 정돈하기가 수월했다.
4. 요구사항을 달성하기 전에 잘 모르는 부분이 있으면 프로토타입을 미리 만들어보기
만들어야 하는 요구사항들을 보았다고 바로 코드를 짜기보다는 손으로 어떻게 설계하면 좋을지 미리 설계도를 그려보고, 내가 구현하는 데 있어서 잘 모르는 부분들을 추출한 뒤에 프로토타입을 만들어서 모르는 부분들을 말끔히 해결하고 구현하는 게 구현에 대한 불안감을 덜어내는 데 도움이 되었었다.
이렇게 미리 설계나 프로토타입을 만들면 해야 할 일이 늘어나서 오히려 시간이 더 걸리는 게 아니냐는 생각이 들 수 있는데 필자의 경험에 의하면 오히려 길을 헤매지 않고, 신속하게 구현할 수 있기 때문에 결과적으로 훨씬 빠르게 구현할 수 있었다.
나. 프로젝트 요구 사항 설정하기
v1.0.0 : 크롤링에 필요한 최소한의 요구사항들을 추가했다.
v1.1.0 : 사용자의 편의성을 위한 UI 개선 중심의 요구사항들을 추가했다.
다. 백엔드 구현
1. REST API 설계 및 구현하기
네이버 웹툰 크롤러가 상호 작용하는 요소는 크게 웹툰 제목, 웹툰 목차, 웹툰 이미지로 나눠진다. 이 부분을 URL 접근 요소로 사용하고 나머지 상호작용하는 방식은 HTTP 메소드를 이용하도록 구현했다.
2. 점진적으로 계층적 설계로 구현하기
중복코드 사용을 줄이기 위해서 함수형 프로그래밍의 계층적 설계방식을 차용했다. 다만, 처음부터 모든 데이터, 액션 등을 만들려고 하면 복잡하므로 각각의 요구사항을 구현할 때 시행하는 리팩토링 과정에서 데이터, 액션을 추출하는 방식으로 점진적으로 계층적 설계를 수행하도록 했다. 각각의 층의 역할을 다음과 같다.
- REST API 층
클라이언트 측 코드와 가장 밀접한 부분이다. 클라이언트 측 코드에 대한 입력 방식, 처리방식, 응답 방식들을 작성한다.
- WEBTOON SERVICE 층, WEBTOON API 층
REST API가 네이버 웹툰 크롤링을 위해서 직접 통신하기보다는 각각 분리된 기능들은 WEBTOON API 층으로 분리하고, 그 기능들을 조합한 REST API가 제공하는 서비스들은 WEBTOON SERVICE 층으로 분리해서 유지보수성을 향상했다.
- BASE MODULES 층
대부분 계산, 데이터와 관련된 함수들이 들어있다. 대표적으로 일관된 파라미터 체크를 위한 함수나 일관된 네트워크 통신을 위한 모듈들이 있다.
3. .zip 다운로드 로직 관련 순서도
이 프로젝트에서 가장 복잡한 부분은 이미지를 다운받아서 zip로 압축시키고, 그것을 다시 클라이언트로 전달하는 과정이다. 압축하는 부분은 nodejs 모듈을 사용하기보다는 zip 시스템 커맨드를 사용하기로 했다. 왜냐하면, 모듈을 사용할 경우 각각을 폴더에 담고 그것을 다시 압축하는 것이 복잡할뿐더러 이미지가 매우 많을 경우 그것을 프로그램 메모리에 계속 올려두는 것도 좋지 못하다고 생각했기 때문이다.
다중 처리 작업을 고려해서 작업 공간을 분리하기 위해서 UUID를 이름으로 한 임시 폴더를 만들고, 그곳에서 작업하도록 만들었다.
라. 프론트엔트 구현
1. 계층적 설계 및 UML 다이어그램
프론트엔드 쪽도 다.2 에서 설명한 것과 동일한 방식으로 구현했다. 서버와 직접적으로 통신하는 부분은 REST API 층으로 분리하고, 여러 데이터, 계산 로직을 기본 모듈 층으로 분리했다. 또한 UI에서 핵심적인 요소들인 웹툰 타이틀, 목차, 다운로드 과정, 순서 표시 과정들은 Manager 클래스로 묶어서 관리함으로써 유지보수성을 향상했다.
2. UI 설계
전체적인 진행 과정을 왼쪽에서 오른쪽으로 순차적으로 진행되도록 만들었고, 현재 상황에서 필요 없는 UI는 가리게 하여서 사용자가 혼란스러워할 부분을 미리 차단해두었다.
마. 추가로 할 수 있는 작업들
네이버 웹툰에는 유료 웹툰이 있는데, 이 부분을 로그인 세션이 필요하기 때문에 다운받을 수 없다. 추후에 로그인 세션을 받아서 구현하는 로직을 만들어 볼 생각이다.
4. 프로젝트 소감
토이 프로젝트를 만들어서 개발 일지를 적어볼 것이라는 생각은 했지만, 너무 복잡해 보여서 시작하기 힘들었는데 이번 토이 프로젝트를 통해서 시작을 끊은 부분이 제일 만족스러웠다.
