콘텐츠로 이동

프론트엔드 재구축

프론트엔드 재구축

한국자원봉사아카이브의 사용자 경험(UX)을 개선하고, 성능 및 유지보수성을 확보하기 위한 Drupal 기반 화면 재구축 전략을 수립합니다.

1. 현행 문제점 요약

현행 프론트엔드의 상세 분석은 기술적 이슈 및 개선 영역을 참고합니다.

문제 영역	현황	Drupal 전환 시 개선
라이브러리 충돌	jQuery 이중 로드, Alpine.js 혼용	현대적 프론트엔드 구조로 일원화
빌드 환경 부재	번들링/최적화 없이 직접 서빙	빌드 파이프라인 통합
웹 접근성 부족	키보드 내비게이션, 명암 대비 이슈	접근성 기준(WCAG 2.1 AA) 준수 관리자 테마 기본 제공
비반응형 관리자	관리자 페이지 모바일 미지원	반응형 관리자 화면 기본 제공
SEO 미비	og:url 프로토콜 오류 등	검색 최적화 도구 기본 제공

2. 화면 구축 방식

Drupal 기반으로 두 가지 방식을 검토하며, 상황에 따라 혼합 적용할 수 있습니다.

방식 비교

항목	Option A: 분리형 (Headless)	Option B: 통합형 (Drupal 테마)
개요	Drupal은 관리/API 역할만 수행, 사용자 화면은 별도 구축	Drupal 내장 테마 엔진으로 사용자 화면 직접 구축
성능	정적 페이지 생성 가능, 최고 수준	우수 (캐싱 활용)
관리 편의	화면과 관리가 분리되어 별도 관리 필요	하나의 시스템에서 통합 관리
레이아웃 편집	별도 개발 필요	시각적 레이아웃 편집 기능 활용 가능
개발 비용	프론트엔드 별도 개발/배포 필요	단일 시스템으로 효율적

3. 주요 화면 재설계

기존 사이트의 핵심 기능을 재구성합니다.

화면/기능	개선 방향
상단 내비게이션	18개 공동운영기관 드롭다운 최적화, 모바일 반응형 강화
메인 캐러셀	이미지 지연 로딩 적용, 접근성 개선
아카이브 검색	한국어 형태소 분석 지원, 실시간 필터링 UI
기록물 상세	고해상도 이미지 뷰어, 메타데이터 레이아웃 개선
전시 페이지	시각적 레이아웃 편집 기능으로 스토리텔링 강화
기록 기증 폼	단계별 입력, 유효성 검사, 파일 업로드

4. 품질 목표

웹 접근성

모든 이미지에 적절한 대체 텍스트 부여
시맨틱 마크업 철저 준수
키보드 탐색 및 스크린 리더 호환성 확보

성능 목표

Lighthouse 성능 점수: 90점 이상
최대 콘텐츠 표시 시간 (LCP): 2.5초 이내
레이아웃 안정성 (CLS): 0.1 이하

검색 최적화 (SEO)

구조화 데이터 자동 생성으로 검색 엔진 가시성 증대
소셜 미디어 공유 시 올바른 제목/이미지/설명 표시
구글 검색 랭킹 핵심 지표(Web Vitals) 충족