플러스프로젝트 배경
[ 문제점 ] PC 전용 구형 레이아웃 → 모바일에서 확대·축소 필요 무거운 영상·이미지 → 첫 화면 로딩 지연 페이지마다 다른 브랜드 톤 → 통일성 부족 [ 목표 ] 하나의 반응형 코드베이스로 전 기기 대응 빠른 로딩과 또렷한 첫인상 일관된 브랜드 경험 [ 주안점 ] 영상·이미지 최적화로 성능 확보 스크롤 인터랙션으로 콘텐츠 강조 공통 컴포넌트로 유지보수성 확보
프로젝트 성과
전 기기 반응형 대응
PC 전용 화면을 반응형으로 재구성해,
모바일에서도 확대 없이 열람할 수 있게 했습니다.
카드·목록은 모바일에서 세로로 자동 재배치됩니다.
모바일에서도 확대 없이 열람할 수 있게 했습니다.
카드·목록은 모바일에서 세로로 자동 재배치됩니다.
첫 화면 로딩 개선
히어로 영상과 이미지를 최적화해
첫 화면 체감 로딩 속도를 크게 줄였습니다.
메인 성능 점수는 90점대를 확보했습니다.
첫 화면 체감 로딩 속도를 크게 줄였습니다.
메인 성능 점수는 90점대를 확보했습니다.
인터랙션으로 강화한 첫인상
영상 히어로와 스크롤·슬라이더 인터랙션으로
정적인 페이지에 생동감을 더하고,
핵심 콘텐츠에 시선이 모이도록 했습니다.
정적인 페이지에 생동감을 더하고,
핵심 콘텐츠에 시선이 모이도록 했습니다.
일관된 브랜드 경험
공통 GNB·푸터와 컬러·타이포 규칙을 정리해
페이지마다 제각각이던 브랜드 톤을 통일하고,
이후 확장에도 흔들리지 않는 기준을 세웠습니다.
페이지마다 제각각이던 브랜드 톤을 통일하고,
이후 확장에도 흔들리지 않는 기준을 세웠습니다.
핵심 기능
영상 히어로 배너
첫 화면에 자동재생 영상을 배경으로 깔고 로고·내비게이션을 얹어,
방문 즉시 기업 이미지를 강하게 전달합니다.
방문 즉시 기업 이미지를 강하게 전달합니다.
진행 단계
[1단계] 기획 · 정보구조 설계
2025.03.
메뉴와 섹션 구조를 정하고, 브랜드 컬러·타이포 등
디자인 시스템의 기준을 정리했습니다.
디자인 시스템의 기준을 정리했습니다.
프로젝트 상세
[ 한 줄 소개 ] 주거를 중심으로 한 종합건설사의 기업 이미지를 담아낸 홍보 웹사이트를 반응형 프론트엔드로 구축했습니다. [ 기획 배경 ] 기존 사이트는 PC 전용 구형 레이아웃이라 모바일에서 확대·축소해야 볼 수 있었습니다. 또한 영상·이미지가 무거워 첫 화면 로딩이 느렸고, 브랜드 톤이 페이지마다 제각각이었습니다. 그래서 하나의 반응형 코드베이스로, 빠르고 일관된 홍보 웹사이트를 만드
