웹사이트 탄소 발자국을 측정하는 에코 웹 감사 도구 출시!
지속가능성(Sustainability)을 위한 웹 성능 감사 도구로, 기존 Lighthouse와 달리 탄소 발자국(Carbon Footprint)에 초점
20가지 디지털 지속가능성 지표(Digital Sustainability Metrics)를 기반으로 웹사이트를 평가하고, AI 기반 분석을 통해 맞춤형 개선 팁(Customized Improvement Tips) 제공
Google Gemini API(Google Gemini API)를 활용하여 HTML을 분석하고, 서버 측 PHP(Server-side PHP) 구현으로 API 키 보안 강화
지속가능성 측정 지표 및 AI 기반 분석
본 도구는 20가지 디지털 생태 지표(Digital Ecological Metrics)를 기반으로 웹사이트를 평가하며, AI를 활용하여 맞춤형 개선 방안(Customized Improvement Plans)을 제시한다.
10가지 주요 지표(Primary Metrics)에 80% 가중치, 10가지 보조 지표(Secondary Metrics)에 20% 가중치를 부여하여 웹사이트의 탄소 발자국(Carbon Footprint)을 측정
Google Gemini API(Google Gemini API)를 활용하여 HTML을 분석하고, 지속가능성 관련 인사이트(Sustainability Insights)를 제공
AI 환각(Hallucination)을 방지하기 위해, Gemini의 답변을 검증하고, 신뢰할 수 있는 정보만을 활용하는 것이 중요하다.
서버 측 PHP 구현을 통한 보안 강화
API 키(API Key) 보호를 위해 클라이언트 측 JavaScript 대신 서버 측 PHP(Server-side PHP)를 사용하여 API 호출을 처리한다.
API 키 노출(API Key Exposure) 위험 감소: 클라이언트 측에서 API 키를 직접 사용하지 않으므로, 키 유출 위험을 방지
보안 강화(Security Enhancement): 서버 측에서 API 호출을 처리함으로써, 악의적인 사용자의 접근을 제한
데이터 격리 아키텍처(Data Isolation Architecture)를 통해 API 키와 관련된 민감한 정보를 안전하게 관리하고, 데이터 미저장 정책(Zero-Retention Policy)을 통해 사용자 데이터를 보호한다.
사용자 경험(UX) 및 접근성(Accessibility) 개선
사용자 편의성을 위해 로딩 상태(Loading State)를 구현하고, 접근성을 고려한 UI/UX 디자인을 적용했다.
로딩 상태 구현(Loading State Implementation): 감사 진행 중 버튼 비활성화 및 스피너 표시를 통해 사용자 경험 개선
접근성 향상(Accessibility Enhancement): 고대비 UI(High-contrast UI), 스크린 리더(Screen Reader) 최적화, 다크 모드(Dark Mode) 지원
ARIA 속성(ARIA Attributes) 추가: 입력 필드(Input Field)에 label 또는 aria-label 속성을 추가하여 스크린 리더 사용성을 향상
결과적으로, 사용자 중심 디자인(User-centered Design)을 통해 모든 사용자가 편리하게 웹 감사 도구를 이용할 수 있도록 설계되었다.
