바닐라 JS, CSS, HTML로 구현한 현대적인 직원 대시보드 개발기

핵심 기술

바닐라 HTML, CSS, JavaScript만을 사용하여 현대적이고 사용자 친화적인 직원 대시보드인 'InnovateCorp Hub'를 개발한 과정을 공유합니다. 특히, 시각적인 디자인 요소와 사용자 경험(UX) 개선에 중점을 두었습니다.

기술적 세부사항

• 기능 구현: 팀원, 프로젝트, 미팅 통계, 근태 요청 및 IT 티켓 버튼, 날씨 위젯, 팀 하이라이트, 예정된 이벤트, 회사 공지, 중요 리소스 링크 등 일반적인 기업 포털 기능을 포함합니다.
• 디자인 테마: 전문적이면서도 지루하지 않은 느낌을 주기 위해 다크 테마에 블루 악센트를 사용했습니다.
• UI/UX: 모든 요소에 클릭 및 호버 효과를 적용했으며, 검색창 기능, 알림 기능, 헤더의 실시간 시계 등을 구현했습니다.
• 시각적 효과:
  • 글래스모피즘 효과 (backdrop-blur 사용)
  • 실시간 시계 (1초마다 업데이트)
  • 부드러운 애니메이션 효과
  • 클릭 시 나타나는 커스텀 알림 시스템 (toast notification)
• 폰트 및 로고: 가독성을 위해 Inter 폰트를 사용했으며, 차트 바가 있는 빌딩 형태의 커스텀 SVG 로고를 제작했습니다.
• 반응형 디자인: CSS Grid를 사용하여 모바일 화면에서도 깨지지 않는 반응형 레이아웃을 구현했습니다.

개발 임팩트

프레임워크 없이도 기본 웹 기술만으로 매력적이고 기능적인 웹 애플리케이션을 만들 수 있음을 보여줍니다. 사용자 경험을 고려한 인터랙티브 요소들은 대시보드의 활용도를 높입니다.

커뮤니티 반응

톤앤매너

개발자의 시점에서 프로젝트 진행 중 겪었던 어려움(균형 잡힌 디자인, 애니메이션 조정)과 성취감을 솔직하게 공유하며, 기술적인 내용뿐만 아니라 개발 과정 자체에 대한 흥미를 유발합니다.