Vanilla JS 기반의 현대적인 인트라넷 포털 'Axero Intranet Hub' 개발 후기

핵심 기술

바닐라 JavaScript, HTML, CSS만을 사용하여 프레임워크 없이 현대적이고 기능적인 인트라넷 포털을 구축하며, 클라이언트 측 데이터 관리 및 사용자 인증 시스템 구현 경험을 공유합니다.

기술적 세부사항

• 프로젝트 개요: "Axero Intranet Hub"는 직원 협업 및 생산성 향상을 위한 중앙 집중식 대시보드 역할을 하는 현대적이고 반응형 인트라넷 포털입니다.
• 주요 기능:
  • 역할 기반 접근 제어를 포함한 사용자 인증 시스템
  • 실시간 지표 및 공지사항을 갖춘 인터랙티브 대시보드
  • 직원 업적을 기리는 팀 스포트라이트 및 상세 프로필
  • 이벤트 관리 기능을 갖춘 캘린더 시스템
  • 상세 연락처 정보 및 인터랙티브 프로필을 포함한 직원 디렉토리
  • 회사 장비 추적을 위한 장치 관리 시스템
  • 실시간 채팅 기능이 있는 커뮤니케이션 허브
  • OpenWeatherMap API 및 지리 위치 정보(Geolocation)를 사용한 날씨 위젯
  • 최근 회사 활동을 보여주는 활동 피드
  • 모든 콘텐츠 유형에 대한 클릭 가능한 결과가 있는 향상된 검색 기능
  • HR, IT, 지식 베이스, 카페테리아 섹션을 포함한 리소스 포털
  • 사용자 선호도를 위한 다크/라이트 모드 토글
  • 생산성 향상을 위한 키보드 단축키
  • 시스템 관리 및 사용자 관리를 위한 관리자 패널
• 데이터 관리: 클라이언트 측 데이터 영속성을 위해 IndexedDB를 사용하며, Web Storage API를 통해 세션 만료와 함께 인증 데이터를 안전하게 저장합니다.
• 개발 환경: 외부 프레임워크나 라이브러리 없이 순수 JavaScript, HTML, CSS로 개발되었습니다.

개발 임팩트

• UX/UI: 직관적인 탐색과 부드러운 애니메이션을 갖춘 깔끔한 레이아웃을 통해 사용자 경험을 최적화했습니다.
• 기능성: 단순한 시각적 목업이 아닌 실제 작동하는 기능을 구현하여 실질적인 유용성을 제공합니다.
• 적응성: 다양한 화면 크기에 완벽하게 적응하는 반응형 디자인을 구현했습니다.
• 접근성: 키보드 탐색, 적절한 명암비, 시맨틱 HTML을 통해 접근성을 확보했습니다.

커뮤니티 반응

• 이 글은 IT 개발 커뮤니티 플랫폼(DEV Community)에 게시되어 Frontend Challenge의 일부로 공유되었습니다. (별도의 커뮤니티 반응 내용은 원문에 명시되지 않았습니다.)

톤앤매너

기술적 깊이와 실용적인 구현에 초점을 맞춰, 프레임워크 없이도 복잡한 웹 애플리케이션을 구축할 수 있다는 점을 강조하는 전문적인 톤을 유지합니다.