홈페이지 메인화면 리뉴얼
건축사무소 홈페이지 UX 개편 프로젝트
홈페이지 메인화면 리뉴얼
건축사무소 홈페이지의 메인화면을 전면 리뉴얼했습니다. 태양광 모니터링 데이터 시각화, 히스토리 타임라인, 반응형 레이아웃 개선 등 사용자 경험 중심의 UI 개편 작업을 진행했습니다.
HiSoft를 파트너로 선택한 이유
기존 홈페이지는 PC 환경에만 최적화되어 있어 모바일 접속 시 레이아웃이 깨지는 문제가 있었습니다. 또한 태양광 모니터링 데이터가 단순 텍스트로만 표시되어 직관성이 부족했고, 회사 히스토리 섹션도 정보 구조가 복잡해 방문자가 핵심 내용을 파악하기 어려운 상황이었습니다.
직면했던 문제들
1. 모바일 대응 미흡
반응형 웹이 적용되지 않아 스마트폰·태블릿에서 레이아웃이 무너지고, 전체 방문자의 60% 이상이 모바일 환경임에도 이탈률이 높았습니다.
2. 데이터 시각화 부재
태양광 모니터링 수치가 텍스트 나열 방식으로 표시되어 한눈에 현황을 파악하기 어려웠고, 클라이언트 신뢰도 저하로 이어졌습니다.
3. 히스토리 섹션 가독성 저하
회사 연혁이 단순 목록 형태로 나열되어 있어 시각적 흐름이 없고, 방문자가 회사의 성장 스토리를 직관적으로 이해하기 어려웠습니다.
핵심 목표
이번 리뉴얼의 핵심 목표는 모든 디바이스에서 일관된 사용자 경험을 제공하고, 태양광 데이터를 차트로 시각화하여 정보 전달력을 높이는 것이었습니다. 또한 히스토리 섹션을 타임라인 구조로 재편해 회사의 성장 스토리를 직관적으로 전달할 수 있도록 설계했습니다.
주요 구현 내용
반응형 레이아웃 전면 개편
모바일·태블릿·PC 모든 환경에서 최적화된 레이아웃을 구현했습니다.
- Flexbox·Grid 기반 반응형 구조 적용
- 모바일 터치 인터랙션 최적화
- 이미지·폰트 사이즈 디바이스별 자동 조정
태양광 모니터링 데이터 시각화
Chart.js를 활용해 발전량·효율 데이터를 인터랙티브 차트로 전환했습니다.
- 일별·월별·연별 발전량 라인 차트
- 실시간 효율 게이지 위젯
- 데이터 필터링 및 기간 선택 기능
히스토리 타임라인 재설계
연도별 주요 이벤트를 시각적 타임라인으로 재구성해 가독성을 높였습니다.
- 좌우 교차 배치 타임라인 레이아웃
- 연도별 아이콘·컬러 구분
- 스크롤 애니메이션 효과 적용
이번 리뉴얼을 통해 모바일 이탈률이 크게 감소했으며, 태양광 데이터 시각화로 클라이언트 신뢰도가 향상되었습니다. HiSoft는 단순한 화면 수정을 넘어 사용자 경험 전반을 재설계하여 비즈니스 성과로 연결되는 개발을 지향합니다.
프로젝트 정보
기술 스택