플러스프로젝트 배경
1) 문제점
- 기업 홈페이지 또는 랜딩페이지에서 고품질의 이미지를 활용해 브랜드 가치와 경험을 전달하는 경우가 많습니다.
- 그러나 이미지로 인해 로딩이 오래걸리거나 잦은 버벅거림으로 사용자 경험이 악화되는 경우가 많습니다.
2) 프로젝트 목표
- 고품질 이미지를 사용하면서도 최적화하여 성능을 개선합니다.
- 구체적으로 처음으로 화면에 콘텐츠가 나타나기까지의 시간(First Contentful Paint)과 가장 큰 콘텐츠가 나타나기까지의 시간(Largest Contentful Paint) 등을 최소화하여 사용자 경험을 개선합니다.
- 구글 페이시 속도 측정 도구(https://pagespeed.web.dev/)를 기준으로 측정합니다.
- 기업 홈페이지 또는 랜딩페이지에서 고품질의 이미지를 활용해 브랜드 가치와 경험을 전달하는 경우가 많습니다.
- 그러나 이미지로 인해 로딩이 오래걸리거나 잦은 버벅거림으로 사용자 경험이 악화되는 경우가 많습니다.
2) 프로젝트 목표
- 고품질 이미지를 사용하면서도 최적화하여 성능을 개선합니다.
- 구체적으로 처음으로 화면에 콘텐츠가 나타나기까지의 시간(First Contentful Paint)과 가장 큰 콘텐츠가 나타나기까지의 시간(Largest Contentful Paint) 등을 최소화하여 사용자 경험을 개선합니다.
- 구글 페이시 속도 측정 도구(https://pagespeed.web.dev/)를 기준으로 측정합니다.
프로젝트 성과
첫 페이지 로딩 0.2초, 이미지 로딩 0.7초
캐싱, 이미지 파일 최적화, SSR 등으로 최대 1.1MB 크기의 원본 이미지를 포함한 랜딩 페이지가
최초 로딩시 0.2초, 이미지의 로딩까지 0.7초로 측정되어 성능 항목에서 99점을 달성했습니다.
최초 로딩시 0.2초, 이미지의 로딩까지 0.7초로 측정되어 성능 항목에서 99점을 달성했습니다.
접근성, 권장사항, 검색 엔진 최적화
그 외 접근성 94점, 검색 엔진 최적화 100점, XSS 공격 방지 등 여러 측정 항목에서 높은 점수를 달성했습니다.
핵심 기능
이미지를 포함한 웹페이지 로딩 최적화
최대 1.1MB 크기의 원본 이미지를 포함한 랜딩 페이지가 최적화될 수 있도록
캐싱, 이미지 파일 최적화, SSR 등을 활용합니다.
캐싱, 이미지 파일 최적화, SSR 등을 활용합니다.
반응형 디자인과 부드러운 애니메이션
반응형 디자인에 맞춰 모든 디바이스에서 적절히 보이도록 반응형으로 구성합니다.
한편 사용자의 스크롤에 따라 콘텐츠를 부드럽게 등장하도록 합니다.
한편 사용자의 스크롤에 따라 콘텐츠를 부드럽게 등장하도록 합니다.
진행 단계
기획 및 디자인
2025.07.
디자인 에이전시를 소개하는 목적의 랜딩 페이지를 기획합니다.
에이전시의 감각적인 작품이 강조되도록 페이지를 구성했으며,
흑백톤을 활용해 세련된 느낌을 주도록 디자인했습니다.
에이전시의 감각적인 작품이 강조되도록 페이지를 구성했으며,
흑백톤을 활용해 세련된 느낌을 주도록 디자인했습니다.
개발 및 배포
2025.07.
기획과 디자인에 맞춰 반응형 랜딩 페이지를 구축합니다.
캐싱, 이미지 파일 최적화, SSR 등을 활용해 페이지를 최적화합니다.
캐싱, 이미지 파일 최적화, SSR 등을 활용해 페이지를 최적화합니다.
프로젝트 상세
1) 포트폴리오 소개
- 디자인 에이전시를 소개하기 위한 반응형 랜딩 페이지 개발
2) 작업 범위
- 기획, UI/UX 디자인, Front-end 개발, 운영
- 반응형 웹
3) 주안점
- 성능 최적화와 사용자 경험
- 디자인 에이전시를 소개하기 위한 반응형 랜딩 페이지 개발
2) 작업 범위
- 기획, UI/UX 디자인, Front-end 개발, 운영
- 반응형 웹
3) 주안점
- 성능 최적화와 사용자 경험
