제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자 및 디자이너

• 난이도: 중급*
• 설명: CSS Grid, JavaScript, AWS Amplify 배포 관련 지식이 필요한 프론트엔드 프로젝트 개발자*

핵심 요약

• 인터랙티브 달력 구현: CSS Grid와 Flexbox를 사용한 반응형 달력 그리드, 이벤트 필터링 시스템 구현
• AWS Amplify 배포: 정적 웹사이트 호스팅 시 AWS Amplify Console 사용 권장
• 접근성 및 성능 최적화: 사용성 향상 및 애니메이션 성능 개선을 위한 최적화 기법 적용

섹션별 세부 요약

1. 연구 단계

• 주요 이벤트 데이터 수집: 문화적 축제, 역사적 사건, 환경 현상 등 6월 관련 데이터 수집
• 이벤트 카테고리 정의: 문화, 역사, 인식 일, 자연 현상 등 분류 기준 확정

2. 디자인 단계

• 색상 구성: 여름의 따뜻한 느낌을 강조하는 색상 팔레트 선택
• 반응형 디자인: 모든 기기에서 일관된 UX 제공을 위한 레이아웃 설계

3. 개발 단계

• CSS Grid 활용: 일관된 그리드 크기 유지 및 다양한 화면 크기 대응
• JavaScript 이벤트 처리: 필터링 로직 구현 및 DOM 조작
• 접근성 준수: ARIA 속성 사용 및 키보드 네비게이션 지원

4. 테스트 및 개선

• 크로스 브라우저/디바이스 테스트: Chrome, Firefox, Safari, 모바일 기기에서 호환성 검증
• 성능 최적화: 애니메이션 트랜지션과 필터링 로직 최적화

결론

• AWS Amplify 배포 권장: Amplify Console 사용 시 zip 파일 패키징 문제 해결 가능
• 대체 배포 옵션: GitHub Pages, Netlify, Vercel 등 정적 사이트 호스팅 플랫폼 활용 가능
• 향후 개선 방향: 검색 기능 추가, 연간 뷰 구현, 사용자 기여 시스템 도입 계획