한국소비자원 리뉴얼 프로젝트
본 프로젝트는 UX/UI 디자인과 퍼블리싱을 처음 학습한 후 진행한 첫 결과물로,
기획부터 디자인, 퍼블리싱까지 전 과정을 단독으로 수행했습니다.
대상 기관인 한국소비자원(Korea Consumer Agency)은
소비자 권익 보호와 공정한 거래 환경 조성을 목표로 하는 공공기관입니다.
웹사이트 리뉴얼은 다음의 목표를 중점으로 설계되었습니다
- - 웹 접근성 및 정보 구조 개선
- - 디자인 시스템 기반의 시각적 일관성
- - 모바일 대응 반응형 UI 구현
제작 일정
주요 기능
📌 메인 페이지
- Section 1 – 메인 비주얼로고 배경과 핵심 메시지, 4개의 주요 메뉴를 중심으로 직관적인 첫 화면 구성
- Section 2 – 기관 소개 및 뉴스기관 소개와 최신 소식을 통합 배치하여 브랜드 정보 전달 강화
- Section 3 – 공지사항 및 카드뉴스다양한 정보를 슬라이더로 구성해 콘텐츠 전달 흐름 최적화
- Section 4 – 상담 및 이벤트사용자의 빠른 접근을 위한 버튼과 배너 중심의 시각적 안내 제공
- 푸터사용자 유형에 따른 주요 메뉴 및 필수 정보 링크 구성
- 다크 테마시각 피로 감소와 명확한 정보 전달을 위한 컬러 대비 적용
- 반응형 설계다양한 기기 환경에서도 콘텐츠 구조 유지 및 접근성 확보
📌 서브 페이지
- 전체 구조정보 위계와 가독성을 고려해 콘텐츠를 정리하고, 탑버튼과 사용자별 메뉴로 접근성 향상
- 서브페이지1 - 피해 구제절차별 버튼 구성과 신청 가능 여부를 직관적으로 안내, 인포그래픽으로 시각적 이해도 강화
- 서브페이지2 - 공지사항명확한 리스트형 게시판 구성으로 공공정보 전달의 시인성 확보
디자인 방향성
- 정보 구조 단순화: 사용자가 필요한 정보를 빠르게 찾을 수 있도록 콘텐츠를 카테고리별로 정리
- 디자인 시스템 적용: 컬러, 폰트, 컴포넌트의 일관된 기준을 정의하고 적용
- 웹 접근성 강화: 고대비 색상과 명확한 텍스트 구조로 시각적 가독성 향상
- 반응형 UI 설계: PC, 태블릿, 모바일 환경에서 동일한 사용성 유지
- 공공기관에 적합한 신뢰감: 안정적이고 명료한 레이아웃과 컬러 사용
- 다크모드 적용: 시각 피로 감소 및 접근성 개선을 위한 색상 대응 설계
폴더 구조
📦 한국소비자원 ┣ 📂 styles ┣ 📂 script ┣ 📂 header ┣ 📂 section1 ~ section4 ┣ 📂 footer ┣ 📂 mobile ┗ 📂 notice
사용 기술 및 도구
- 개발 HTML5, CSS3, JavaScript, Swiper, 반응형 미디어쿼리
- 디자인 Figma, Photoshop
- 개발 환경 VS Code