완대전은 제가 완도고등학교 학생들을 위해 만들어본 학교 커뮤니티 사이트입니다. 다른 학교엔 자체 커뮤니티나 편의 기능을 모아둔 서비스가 있는 걸 보고, 우리 학교에도 이런 게 있으면 재밌겠다 싶어서 시작했습니다.
기술 스택 선택
처음부터 거창한 걸 쓰기보다는 제가 빠르게 만들고 고칠 수 있는 구조가 중요했습니다. 그래서 기술 스택도 최대한 익숙하고 단순한 쪽으로 골랐고요.
- Frontend: Vanilla HTML
- Backend: Express.js & Node.js
- Database: MongoDB
- 인증/보안: JWT & bcrypt
- UI/스타일링: Tailwind CSS
제작 과정
1. 기획
친구랑 얘기하다가 다른 학교에서 '과구리'라는 자체 커뮤니티를 운영한다는 걸 알게 되더라고요. 그때 "우리 학교도 이런 게 있으면 괜찮겠다" 싶었습니다.
이 사이트를 보면서 제가 만들고 싶은 커뮤니티 방향을 잡았습니다.
여름방학에 개발을 시작했는데 마침 그때 Claude 3.5 Sonnet이 막 나왔습니다. 그래서 Claude를 꽤 적극적으로 썼고요. 초기 개발을 끝내고 프론트엔드는 Netlify에, 백엔드는 Cloudtype에 올렸습니다. 제 이름 걸고 학교에 포스터도 붙여봤고요.
2. 개발
위가 메인 페이지입니다. 참고한 사이트랑 레이아웃이 어느 정도 비슷합니다. Claude 도움받아서 초안이랑 테스트를 일주일 정도에 끝냈습니다. 제 첫 풀스택 프로젝트였는데 지금 보면 아쉬운 데도 있지만 그땐 꽤 만족스러웠죠. 학교 상징색인 푸른색을 테마로 잡았고, 급식 정보는 나이스 OPEN API로 백엔드에서 가져오게 했습니다.
관리자 계정으로 로그인하면 보이는 공지사항 작성 페이지입니다. 공지 목록을 보고 쓰거나 고칠 수 있고요.
청원 페이지에서는 로그인한 사용자만 청원을 올리고 투표할 수 있게 했습니다.
학급 도우미 페이지엔 대포 뽑기, 타이머, 무작위 팀 뽑기 같은 걸 모아놨고요.
소개 페이지엔 사이트 소개랑 맨 아래에 개발자 연혁을 넣었습니다.
커뮤니티 페이지가 제일 고민을 많이 한 부분입니다. 익명 게시판으로 만들고 싶었는데, 로그인 사용자의 익명성이랑 비로그인 사용자의 악용 가능성을 같이 생각해야 했거든요. 고민 끝에 DC인사이드처럼 IP 기반 익명 시스템을 참고했고요.
글쓰기엔 이미지 업로드를 넣었습니다. 로그인 사용자는 실명으로, 비로그인 사용자는 익명으로 쓰게 했습니다.
게시글 페이지도 DC인사이드를 참고했습니다. 추천, 댓글, 주간 베스트 같은 걸 넣으면서 커뮤니티처럼 보이게 하는 데 집중했고요.
3. 마무리
완대전은 동아리 활동으로 만든 프로젝트입니다. 아직 쓰는 사람이 많다고 하긴 어렵습니다. 그래도 기획부터 배포, 홍보까지 혼자 해본 게 처음이었죠. 만들고 나서 포스터 붙이고 사람 모으는 일이 만드는 일만큼 오래 걸리더라고요.