학교 커뮤니티 웹사이트를 만들게 된 계기

안녕하세요, Sungblab입니다! 완도고등학교 학생들을 위한 커뮤니티 사이트 '완대전' 개발 이야기를 공유하려고 합니다. 기존의 여러 커뮤니티 사이트들이 있었지만, 우리 학교만의 특화된 기능들이 필요하다고 생각했습니다.

기술 스택 선택

프로젝트를 시작하면서 가장 중요하게 생각한 것은 구조가 쉽고 빠르게 개발하는 것이었습니다. 이를 위해 다음과 같은 기술 스택을 선택했습니다:

• Frontend: Vanilla HTML
• Backend: Express.js & Node.js
• Database: MongoDB
• 인증/보안: JWT & bcrypt
• UI/스타일링: Tailwind CSS

제작 과정

1. 기획

친구와 이야기를 나누던 중, 다른 학교에서 '과구리'라는 자체 커뮤니티와 다양한 시스템을 운영하고 있다는 것을 알게 되었습니다. 이를 계기로 저도 우리 학교만의 커뮤니티 사이트를 만들어보고 싶다는 생각을 하게 되었습니다.

위 사이트가 제가 벤치마킹한 사이트입니다. 이를 참고하여 제가 만들고 싶은 커뮤니티 사이트의 모습을 구상하게 되었습니다.

여름방학에 개발에 착수했는데, 마침 그때가 Claude 3.5 Sonnet이 처음 출시되었을 때였습니다. 이를 적극 활용하여 개발을 진행했고, 초기 개발 완료 후 테스트를 거쳐 프론트엔드는 Netlify에, 백엔드는 Cloudtype에 호스팅을 진행했습니다. 커뮤니티 기능을 제외한 모든 부분이 성공적으로 구현되었고, 이후 제 이름을 걸고 학교에 포스터를 게시하여 홍보도 진행했습니다(비록 아직 활발한 사용은 이루어지지 않고 있지만요).

2. 개발

위 이미지는 메인 페이지입니다. 벤치마킹한 사이트와 레이아웃이 비슷한 것을 확인할 수 있습니다. Claude의 도움으로 초안 제작 및 테스트를 일주일 만에 완료했습니다. 제 첫 풀스택 프로젝트였는데, 나름 만족스러운 결과물이 나왔습니다. 우리 학교의 상징색인 푸른색을 테마로 적용했으며, 급식 정보는 나이스 OPEN API를 활용하여 백엔드에서 구현했습니다.

관리자 계정으로 로그인했을 때 볼 수 있는 공지사항 작성 페이지입니다. 목록에서 작성 및 수정이 가능합니다.

청원 페이지에서는 로그인한 사용자만 청원을 요청하고 투표에 참여할 수 있습니다.

학급 도우미 페이지에는 대포 뽑기, 타이머, 무작위 팀 뽑기 등 여러 가지 유용한 기능들을 모아놓았습니다.

소개 페이지에는 사이트 소개와 함께 맨 아래에 개발자 연혁을 포함했습니다.

커뮤니티 페이지는 가장 고민을 많이 한 부분입니다. 익명 게시판으로 만들고 싶었지만, 여러 문제점들을 고려해야 했습니다. 로그인 사용자의 익명성 보장 문제, 비로그인 사용자의 악용 가능성 등을 고민한 끝에 DC인사이드와 같은 IP 기반 익명 시스템을 도입하기로 결정했습니다.

이미지 업로드 기능을 포함한 글쓰기 기능을 구현했으며, 로그인 사용자는 실명으로, 비로그인 사용자는 익명으로 글을 작성할 수 있도록 설정했습니다.

게시글 페이지도 DC인사이드를 참고하여 추천 시스템과 댓글 기능을 구현했으며, 주간 베스트 시스템도 추가했습니다.

3. 마무리

이 프로젝트는 학교 동아리 활동의 일환으로 제작되었습니다. 아직 활성화되지는 않았지만, 성공적으로 개발을 완료하고 운영 중이라 만족스럽습니다. 현재 서비스를 운영 중이므로, 코드가 궁금하신 분들은 개별적으로 연락 주시면 감사하겠습니다.