학교 커뮤니티 웹사이트 만들기
완대전은 제가 완도고등학교 학생들을 위해 만들어본 학교 커뮤니티 사이트입니다. 다른 학교에는 자체 커뮤니티나 편의 기능을 모아둔 서비스가 있는 걸 보고, 우리 학교에도 이런 게 있으면 재미있겠다는 생각으로 시작했습니다.
기술 스택 선택
처음부터 거창한 기술을 쓰기보다는, 제가 빠르게 만들고 고칠 수 있는 구조가 중요했습니다. 그래서 기술 스택도 최대한 익숙하고 단순한 쪽으로 골랐습니다.
- 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. 마무리
완대전은 학교 동아리 활동의 일환으로 만든 프로젝트입니다. 아직 사용자가 많다고 하긴 어렵지만, 기획부터 배포와 홍보까지 직접 해봤다는 점에서 많이 배웠습니다. 특히 "만드는 것"과 "사람들이 실제로 쓰게 만드는 것"은 완전히 다른 문제라는 걸 느꼈습니다.