CampusConnect: Vue.js 없이 HTML, CSS, JavaScript와 localStorage로 구현한 역할 기반 대학 관리 웹 앱 프로토타입

핵심 기술: 이 글은 HTML, CSS, JavaScript의 기본 기술 스택만으로 역할 기반의 대학 관리 웹 애플리케이션 프로토타입인 'CampusConnect'를 구축한 과정을 소개합니다. 특히 복잡한 프레임워크 없이 localStorage를 활용한 세션 관리와 사용자 역할에 따른 기능 분리를 구현한 점이 주목할 만합니다.

기술적 세부사항:
* Frontend: HTML, CSS, JavaScript를 사용하여 초기 웹 애플리케이션 구축.
* Session Management: 복잡한 백엔드 없이 localStorage를 활용하여 사용자 세션 관리.
* Role-Based System: Admin, Faculty, Student 각 역할에 맞는 대시보드 및 기능 제공.
* Admin Features: 사용자 추가, 모든 학생 보기, 방문/이벤트 로그 관리, 수료증 발급, 알림 전송.
* Faculty Features: 학습 자료(PDF/링크) 업로드, 할당된 학생 목록 보기, 출석 체크, 학업 수료증 발급.
* Student Features: 강좌 확인, 학습 자료 보기, 출석 확인, AI 튜터, 웰니스 센터, 개인 튜터링 접근.
* Problem Solving: 수동 증명서 발급, 분실물 관리 시스템 부재, 중앙 집중식 커뮤니케이션 부재, 학생-교수 간 비효율적인 피드백 채널 문제를 해결.
* Amazon Q Developer 활용: 코드 생성 및 JavaScript UI 버그 수정, localStorage 세션 처리 설명, 향후 배포를 위한 Terraform 템플릿 제공, 역할 기반 접근 제어 구조화 가이드.
* Infrastructure (Planned): Terraform을 사용한 인프라 계획, S3 + CloudFront를 사용한 호스팅 계획.

개발 임팩트: 이 프로젝트는 아이디어를 실제 작동하는 프로토타입으로 빠르게 전환하는 방법을 보여주며, 기본적인 웹 기술만으로도 사용자 중심의 기능 구현이 가능함을 시사합니다. Amazon Q Developer와 같은 AI 도구를 활용하여 개발 속도를 높이고 문제 해결 시간을 단축하는 실질적인 사례를 제공합니다.

커뮤니티 반응: GitHub 저장소를 공유하며 기여와 제안을 환영하고 있으며, '좋아요'를 통해 프로젝트에 대한 지지를 요청하고 있습니다. 개발자 커뮤니티와의 협업 및 피드백 공유를 장려하는 태도를 보여줍니다.

톤앤매너: 프로젝트의 초기 단계임을 솔직하게 밝히면서도, 기술적 구현 방식과 AI 도구 활용 경험을 공유하는 데 집중하여 전문적이고 실용적인 톤을 유지하고 있습니다.