25시간 안에 개발해 방문 800 이상 찍은 사이트 제작 과정과 후기

Jin-hyeok Bang·2024년 2월 13일

경기타임 시리즈

목록 보기

3/3

안녕하세요 경기대 학우들을 위한 시간표 작성 사이트 경기타임을 개발한 방진혁입니다. 경기타임을 사용해주시는 학우분들의 뜨거운 관심 덕분에 누적 방문자 800명을 찍고 현재도 계속 증가 중입니다! 설 연휴동안 빠르게 개발했던 경기타임의 제작 과정을 공유하고 싶어 글을 작성하게 되었습니다!

사이트 개발 계기

만든 사이트 소개

경기타임은 경기대학교 강의를 편하게 검색하고 시간표를 쉽게 만들수 있도록 도와주는 사이트입니다. 경기대학교는 작년부터 에브리타임의 시간표 업데이트가 중단되어 수강신청을 하는데 불편함이 있었습니다. 수강신청 기간에 시간표를 작성하는 불편함을 개선하고자 경기타임이 탄생하게 되었습니다.

에브리타임이란?

에브리타임은 대학생을 위한 커뮤니티 서비스로 대학교의 강의 정보와 연동되어 편리한 시간표 기능을 가지고 있습니다! 경기대학교에서도 가장 큰 커뮤니티로써 에브리타임이 사용되고 있습니다. 시간표 업데이트가 중단되기 전까지 시간표 기능은 경기대 학우들이 애용하던 기능이었으며 저 또한 에브리타임을 사용한 가장 큰 이유였습니다!
에브리타임을 소개하는 블로그 글

에브리타임의 시간표 업데이트 중단

그러나 작년 2학기부터 경기대학교는 시간표를 비공개로 전환했고 에브리타임의 시간표 업데이트가 중단되게 되었습니다. 학사혁신처에서는

에브리타임 커뮤니티의 허위정보로 인한 피해 사례 증가
전자출석 앱의 시간표 기능이 대안으로 존재

를 이유로 시간표 제공을 거부했습니다. 이번 2024년 1학기 시간표 업데이트 또한 이뤄지지 않았습니다.

에브리타임 시간표 업데이트에 관한 경기대신문 보도 (http://kgunews.com)

기존 서비스의 문제점

경기대 전자출석 앱이나 에브리타임을 이용해 시간표를 편하게 작성할 수 있었다면 경기타임은 개발되지 않았겠지만, 두 서비스는 다음과 같은 문제점을 가지고 있었습니다.

경기대 전자출석 앱의 문제점

수강 신청이 완료된 강의만 시간표에 자동으로 들어감 (= 수강 신청 기간땐 사용 불가)
GPS, Bluetooth를 켜지 않으면 앱을 사용할 수 없음
모바일에서만 사용 가능

에브리타임의 문제점

강의 정보 연동 불가 (= 불편하게 수동으로 하나하나 직접 입력해야 함)
에브리타임에 회원가입/로그인 하지 않으면 사용할 수 없음

사이트 개발을 마음먹은 계기

예상치 못한 강의 시간 변경, 시간표를 수정해야 하는데...

지난 2월 1일부터 7일까지 경기대학교는 예비 수강 신청을 진행했습니다. 예비수강신청이 끝난 다음날 8일, 경기대로부터 한 통의 전화가 왔습니다.

신청하신 강의의 시간이 변경되어 수강신청 기간에 다른 시간대로 다시 신청해주셔야 합니다!

결국 시간표를 수정해야 하는데... 강의를 검색하고 에브리타임의 시간표에 일일히 입력하는 과정이 너무 번거로웠습니다! 10일까지 시간표로 삽질하던 저는 문뜩 생각하게 되었습니다.

이렇게 불편한 시간표 기능으로 고생하느니 내가 직접 만들고 만다!!!

새로운 서비스로써 기대되는 점

두 서비스를 대체하는 새로운 시간표 기능은 다음을 기대할 수 있었습니다.

수강 신청 이전부터 사용 가능하고
로그인/회원가입이 필요없으며 PC에서 사용 가능한
강의 추가가 편리한 시간표 작성 기능

그리하여 두 서비스를 대체하는 시간표 기능을 얼마 안 남은 수강신청 기간에 맞춰 최대한 빨리 개발하는 것을 목표로 정하게 되었습니다.

D-1

개발 준비 준비

무슨 기술을 사용할 지 정해보자

수강신청이 며칠 남지 않았기 때문에 편한 시간표 작성을 위해선 저한테 익숙하면서 빠르게 개발할 수 있는 기술을 사용해야 했습니다. 그리하여 다음과 같은 기술을 사용하게 되었습니다.

사용한 기술과 이유

Nest.js (TypeScript)
이유:

클라이언트와 언어가 같음 (혼자 프론트까지 개발 할 땐 정말 유용합니다)
많이 사용해봐서 익숙하고 Boilerplate가 준비되어 있다.
TypeORM과의 연동이 편하다

MySQL
이유:

AWS RDS에서 프리티어로 지원한다. (가장 중요)
가장 익숙한 관계형 데이터베이스다.

Next.js (TypeScript)
이유:

Vercel을 사용하면 쉽게 무중단 자동 배포를 사용할 수 있다.
서버와 언어가 같다.
NextUI를 사용할 수 있는 React 기반이다.

AWS
이유:

프리티어 계정을 사용하면 서버 비용을 많이 절감할 수 있다 .
빠르게 VM과 DB를 구축할 수 있다.
지금 나에겐 남는 프리티어 계정이 있다

개발 준비

그대들은 어떻게 배포할 것인가

배포 방법을 정하는 데에 가장 중요하게 생각한 점은 빠른 구축 시간과 값싼 비용이었습니다. 그때 당시 저는 예상 사용자가 저 포함 10명 이내라고 추측하여 무중단 배포는 고려하지 않았습니다.
(출시한 당일 오후부터 다음날 새벽까지 접속한 사용자가 끊임이 없던 점을 생각하면 큰 패착이었습니다)
그래서 클라이언트는 Vercel, 서버는 AWS EC2에 PM2를 설치하여 기본 설정으로 배포했습니다.

도메인 구매 및 인프라 구축

Porkbun에서 kyonggiti.me을 구매한 이후 AWS로 서버 인프라를 구축했습니다. VPC, EC2, RDS, EIP를 사용했습니다.

개발 시작, 강의 목록 조회 개발

[서버] 강의 목록 조회 API

2월 10일 3시 47분, 서버 Repo의 첫 커밋으로 개발을 시작했습니다. 강의를 저장할 Entity를 정의한 다음 Controller와 Service를 구현해주었습니다.

[클라이언트] 강의 검색

NextUI로 간단하게 레이아웃을 만들고 Axios로 서버에서 강의 데이터를 불러왔습니다.

강의 데이터 수집을 위한 네트워크 분석

강의 데이터를 불러오기 위해 경기대 수강신청 앱의 http 요청을 분석했습니다. http 요청 중 강의 데이터가 담긴 sqlite 파일을 전달하는 것을 확인했습니다. sqlite 파일을 열어보니 개설된 모든 강의의 이름, 전공, 캠퍼스, 강의번호가 있는 것을 확인했습니다.

부족한 정보는 크롤러를 만들어서 확보했으며 잘못 들어갔거나 누락된 강의는 수동으로 넣어주었습니다.
25시간동안 개발하면서 수면 시간을 제외하면 가장 시간이 많이 들어간 부분이었습니다! (새벽 3시까지 수집하고, 다음날 아침부터 일어나 오후 2시까지 강의데이터를 모았습니다.)

D-Day

시간표 기능 개발

강의 데이터를 모두 수집한 이후 강의를 불러오는 데 문제가 없음을 확인한 직후 시간표 기능을 만들었습니다. 강의는 브라우저의 localStorage을 활용해 로컬에 저장했습니다.

25시간 안 개발 완료, 출시 & 홍보

그렇게 제가 의도했던 시간표 기능을 마침내 완성했습니다. 그리고 16시 28분 에브리타임에 홍보글을 올렸습니다.

홍보글을 올린 후 16시 34분, 개발 시작 24시간 57분만에 경기타임을 사용하는 첫 사용자를 받았습니다. (사진은 nginx의 access.log중 일부입니다)

Vercel 사용자 통계 수집

에브리타임에 올렸던 홍보글이 실시간 인기 글에도 올라온 덕분에 사용자가 증가했습니다. 어떤 기기를 사용해 얼마나 경기타임을 사용해주시는 지 궁금해 Vercel의 Analytics 기능을 활용해 사용자를 분석했습니다.

모바일 지원 및 PWA 추가

Vercel의 Analytics 기능으로 경기타임 사용자의 85%가 모바일인 것을 확인했습니다. 대부분이 모바일로 접속하는 만큼 PC만 지원하는 경기타임을 개선할 필요가 있었습니다. 모바일에서도 시간표를 확인할 수 있도록 개선하고 PWA를 추가해서 설치까지 가능하도록 만들었습니다!

D+1

검색 기능 개선

출시 당일과 그 다음날, 강의를 찾을 수 없다는 댓글이 두 개 생겼습니다. 두 댓글 모두 강의 데이터가 잘못 들어간 것이 아니라 검색 기능을 잘못 사용한 해프닝이었습니다. 그러나 검색 기능의 불편함으로 발생한 문제점인 점은 변함이 없었습니다. 따라서 불편한 검색 기능을 좀 더 사용하기 편하게 완성했습니다.

Before:

After:

PM2 기반 무중단 배포

예상보다 많은 학우분들이 경기타임을 이용해주시면서 무중단 배포가 필요해졌습니다.
https://engineering.linecorp.com/ko/blog/pm2-nodejs을 참고하여 서버를 무중단 배포 할 수 있도록 만들었습니다.

D+2 (오늘)

경기타임을 사용해주시는 학우분들 덕분에 감사하게도 사용자가 850명을 넘었습니다! 경기타임을 홍보하기 위해 올린 에브리타임 글 두 개 또한 학우분들 관심 덕분에 베스트 게시판까지 올라갔습니다. 제가 만든 사이트를 사용해주시고 피드백해주신 덕분에 설날을 개발하며 즐겁게 보낼 수 있었습니다!