조잡한 Web Advent Calendar 개발기

Advent Calendar란?

Advent Caldendar은 간단히 말하면 크리스마스가 오기를 기다리며 12/1 ~ 12/25까지 매일매일 뭔가 하나씩 꺼내어 즐기기 위한 달력이다. 구글 신에 의하면미래의 나를 위해 매일매일 써 둔 편지라던가, 초콜렛 같은 작은 과자를 꺼내 먹으며 크리스마스를 기다린다고 한다. 

 

개발자에게 Advent Calendar란?

개발자에게 있어 advent calendar는 기술 커뮤니티나 회사에서 특정 주제와 관계 없이 개발에 관련된 글들을 블로그나 위키에 게재한 다음, 그 글의 주소와 제목을 advent calendar에 적어 매일매일 하나씩 오픈하는데 사용된다고 한다.

 

예를 들어, LINE Enginieering의 Advent Calendar이다

 

 

이와 같이 개발자들은 초콜렛이나 과자, 편지 대신 개발 칼럼을 매일매일 하나씩 읽는 용도로 사용한다! 그래서 내가 속해 있는 Zeropage에서 이 Advent Calendar를 도입해서 해보기로 했다. 방학때 그다지 할 일도 없을 뿐더러 방학때 공부했거나 자기가 자신 있는 분야의 글을 블로그에 쓸 수도 있고 다른 사람의 글도 읽을 수 있어 정보 공유에 굉장히 도움이 많이 될 것 같기 때문이다.

 

Advent Calendar 서비스 찾기

 사실, 전통적인 Advent Calendar는 개인이나 특정 단체가 즐기기 위한 것이기 때문에 단체로 Advent Calendar를 사용하기엔 조금 무리가 있다. (직접 편지 같은 걸 꽂을 수도 없고). 따라서 아래의 조건을 만족하는 서비스가 필요했다.

 

1. 정해진 구성원만 볼 수 있고
2. 정해진 구성원만 게재할 수 있는
3. (되도록이면) 웹 어드벤트 캘린더가 필요했다. 

그래서, 먼저 이미 개발 된 어드벤트 캘린더가 없는지 찾아보기로 하려고 했지만, 이미 나와 같은 오사카 대학교로 유학을 다녀온 oula이라는 친구가 오사카 대학교 OUCC에서 사용했던 Advent Calendar의 github주소를 알려주었다.

 

해당하는 어드벤트 캘린더는 실제로 이곳에서 서비스 되고 있었고, 많은 사람(일본인)들이 연말에 자기들만의 어드벤트 캘린더를 만들어 사용하고 있었다. 우리도 그냥 개발하지 말고 여기서 만들어서 쓸 까 했지만 다음과 같은 문제가 발생했다.

 

1. 지원하는 메인 언어가 한국어가 아니다
2. 우리만의 Advent Calendar라는 느낌이 없었다
3. 정해진 구성원만 볼 수 있는 기능은 없다
4. 참가 버튼을 누르면 구성원이 아니더라도 게재할 수 있다.

그래서, github에 올라와 있는 소스코드를 수정해 한국어 패치를 하고 서비스를 오픈할 시도를 했다. 이 일을 같이 주도하고 제안한 pula는 진행 중인 프로젝트가 있기 때문에 내가 하기로 했다. 그래서 먼저 adventar의 소스코드를 읽기 시작했다.

 

Adventar.org 서비스의 구성

github에서 소스코드를 분석해보니 대충 이 서비스는 다음과 같이 구성되어 있었다.

 

adventar 서비스 구조도

개발 경험이 조금 있는 사람이 작성해서그런지 코드 모듈화가 잘되어있었고 REST API가 아닌 gRPC를 사용했다는 점이 마음에 들었다. 마침 저번 캡스톤 프로젝트에서 Python으로 gRPC를 사용해 본 적이 있어 더욱 하고싶었다.

 

발생한 문제들

처음엔 소스코드를 고쳐보고, 설명이 너무 빈약해 영어로 설명서를 작성하고 pull request까지 할 생각이었다. 하지만, 가면 갈 수록 깔끔해보였던 코드들은 사라지고 복잡하게 뒤얽혀있는, 남에게 공유할 목적으로 만들어 진 것이 아닌, 개인 프로젝트의 향기가 강하게 났다. 하지만, 참고 protobuf 컴파일러를 설치하기 위한 부분의 설명을 깔끔하게 작성했다.

 

내가 읽어도 잘 쓴 설명이었다. 하지만, 소스를 읽으면 읽을 수록 AWS S3, lambda, ECS 등 여러가지 클라우드 서비스까지 엮여 있기 때문에 함부로 건드릴 만한 프로젝트가 아니라는걸 깨닫고 말았다. 그래서 저기까지만 작성한채로 커밋을 한 뒤 다른 오픈소스 advent calendar가 있는지 찾아보기로 했다.

 

하지만 대부분은 개인만 작성할 수 있는 어드벤트 캘린더였고 타인과 함께 작성할 수 있는 것이 아니었다. 그럼 어떻게 해야할까..? 정말 처음부터 바로 짜야하는 것인가? 하던 찰나에 어떤 프로젝트를 발견했다.

PHP로 만들어진 간단한 Advent Calendar

github을 좀 더 뒤져보니 php로 만들어진 간단한 어드벤트 캘린더라는 레포지토리가 있었다. 찾아보니 adventar와 구성 요소는 매우 비슷하지만 아쉽게도 개인만 작성 가능한 advent calendar였다.

 

하지만, 다른 프로젝트들과는 다르게 설정과 캘린더에 내용을 등록하는게 매우 간단했으며(json) 날짜도 꼭 12월 1일~ 12월 25일로 설정되어 있는 것이 아니라 한 달 범위에서 자유롭게 선택을 할 수 있는 확장성을 가지고 있었기 때문에 잘 수정하면 좋은 재료가 될 수 있을 것 같았다.

프로젝트 구성

처음에 나한테 주어진 소스코드는 php소스로 짜인 advent calendar 하나였다.

 

 

backend만 할 줄 알았지 frontend부분은 하나도 할 줄 몰랐기 때문에 PHP5를 30분정도 공부했다. 그렇게 어려운 내용은 아니었기 때문에 약간의 프로그래밍 지식이 늘었다.

 

PHP는 독립적으로 실행할 수 있는 소스코드가 아니기 때문에 반드시 웹서버같은데 물려줘야 했다. Apache같은걸 많이 쓰지만 나는 nginx가 더 좋기 때문에 웹서버로 nginx를 사용했고 어드벤트 캘린더는 총 2월, 3월 2개가 필요했기 때문에 같은 프로젝트를 하나 더 만들어 각각 2월과 3월 코드로 사용하기로 했다. 그래서 아래와 같은 구조가 되었다. 

 

 

처음에는 URL로만 접근할 수 있었기 때문에 확장성을 위해서라도 메인 페이지를 만들어 줘야만 했었고 PHP Advent calendar의 설정 파일이나 데이터 파일(json파일)을 건드릴 수 없게 접근 권한도 수정해주어야만 했다. 그리고 언젠가 사용될 것이기 때문에 캘린더의 내용을 채워 넣을 수 있는 "작성 페이지"도 추가했다. 그리고 이 세 페이지로 한번에 이동할 수 있는 메인 페이지 또한 추가해서 아래와 같은 구성이 되었다.

 

 

사실 이대로만 만들어서 바로 서비스를 할 수 있었다. 하지만, 이렇게 50년 전에나 쓰던 File 기반 DB를 사용하면 여러가지 큰 문제가 생기게 된다. (물론 사용자가 충분히 있다는 전제 하에..)

 

1. 파일 DB이기 때문에 Data Integrity가 보장되지 않는다.
2. 수정 충돌이 발생할 수 있다.
3. PHP에서 파일 입출력 같은 걸 하기가 까다롭다.

그렇기 때문에, json db 파일은 반드시 2,3월 캘린더를 작성할 때 한 번 갱신되어야만 했다. 그리고 누군가가 2, 3월 데이터를 변경하고 있을 때에는 반드시 다른사람이 동시에 변경할 수 없어야 했다. 이 문제를 해결하기 위해서는 DB에 내용을 기록하는 요청의 시간 우선순위를 매길 수 있어야하기 때문에 요청을 관리할 수 있는 REST API 서버를 구축했다. 그리고 데이터 무결성과 기타 등등 문제를 해결하기 위해 sqlite같은 파일 기반 DB를 사용하기로 했다. 사실, MySQL도 좋았지만 정말 귀찮았다. 그래서 최종적인 프로젝트의 설계도는 아래와 같이 정되었다.

 

 

Write Calendar Page는 PHP form으로 만들어진 페이지이며, 해당 form에 작성된 내용을 기반으로

 

API서버에 HTTP 리퀘스트를 전송한다. 리퀘스트를 받은 API서버는 sqlite3 DB에 월,일, {내용}을 기록하며,

 

API서버는 해당 내용을 기록한 것을 비동기 이벤트로 확인한 후 (DB에 최종 commit이 완료되면) DB의 해당 월에 해당하는 내용을 불러와 json DB파일에 기록한다.

 

따라서, 무결성 문제도 해결되었고 PHP의 까다로운 파일 입출력 문제도 해결되었고 API 서버에서 제공하지 않는 보안 취약점(내가 모르는, 있을지도 모르는)도 해결했다.

 

수많은 디버깅과 패치를 통해 버그도 수정했으며 사용자 편의성을 위해 각 어드벤트 캘린더 게시물에서 방향키를 누르면 전페이지와 다음 페이지로 넘어갈 수 있는 기능도 추가하였다.

후기

총 개발 시간은 한 6시간 정도 걸린 것 같은데, 의외로 길어서 조금 놀랐다. PHP같은건 내 생에 절대 쓰지 않을 것 같았는데 이번에 써봐서 너무 좋았고 너무 인프라, 백엔드, 언어, 네트워크만 공부하지 말고 프론트 영역도 공부해서 풀스택 개발자의 자리도 노려봐야겠다는 생각도 든다.

 

조금 더 시간이 남으면 메인페이지와 Advent Calendar부분을 전부 vue.js나 react같은걸로 바꿔서 제대로 만들어보고 싶다.

 

같이 기획을 진행해준 친구(pula)의 글은 여기서 보실 수 있습니다.