홈페이지 리뉴얼 ep.4 – 서비스 알아보기 페이지에서 회사 소개 페이지로 구조 전환

이번에는 서비스 알아보기 페이지를회사 소개 페이지로 구조 전환한 내용에 대해 이야기해보려고 합니다.1. 왜 서비스 알아보기 페이지를 바꾸었는가기존 웹사이트에는 ‘서비스 알아보기’ 페이지가 존재했습니다.이 페이지는 서비스에 대한 내용을 소개하기 위해 만들어졌으며,서비스 요금이나 앱 사용 방법 등에 대한 정보가 포함되어 있었습니다. 하지만 리뉴얼을 진행하며 서비스에 대한 핵심 설명은메인 페이지에서 전달하는 것이 더 적절하다고 판단했습니다.실제로 메인 페이지에서 서비스의 주요 내용과 이용 흐름을 충분히 설명하도록 구조를 변경하면서,기존 ‘서비스 알아보기’ 페이지에는 서비스에 대해 새롭게 전달할 내용이 거의 남지 않게 되었습니다. 또한 페이지 곳곳에는 사용자에게 의미 있는 정보를 전달하지 못하는 dead zon..

홈페이지 리뉴얼 ep.3 - Main 페이지 구성 개편(2)

4. ServiceFlowSectionServiceFlowSection은 사용자가 실제로 서비스를 이용할 때어떤 과정으로 진행되는지를 단계별로 보여주는 영역입니다.서비스 이용 과정에 대한 문의가 자주 있었기 때문에페이지 안에서 서비스 신청부터 이용 완료까지의 흐름을한눈에 이해할 수 있도록 절차를 정리하여 구성했습니다. 또한 스크롤 진입 시 각 단계 카드가 순차적으로 등장하도록 애니메이션을 적용했습니다.이 애니메이션은 CSS만으로 동작하는 것이 아니라IntersectionObserver를 활용해 섹션이 화면에 들어왔을 때 애니메이션 클래스를 활성화하는 방식으로 구현했습니다.초기에는 카드가 보이지 않는 상태로 시작하고,섹션이 화면에 일정 비율 이상 나타나면 애니메이션이 실행되도록 구성했습니다..flowIt..

홈페이지 리뉴얼 ep.3 - Main 페이지 구성 개편(1)

메인 페이지는 서비스의 첫인상을 만드는 중요한 공간입니다.사용자는 메인 페이지에 들어온 뒤 몇 초 안에• 어떤 서비스를 제공하는지• 왜 이 서비스를 믿을 수 있는지• 서비스를 어떻게 이용하면 되는지를 이해하게 해야합니다.기존 문제점 1. 서비스 핵심 정보 전달 부족서비스가 무엇인지 한눈에 이해하기 어려웠고서비스를 이용하려면 어떻게 신청해야 하는지에 대한 설명도 부족했습니다.또한 히어로 섹션 하단에시각적인 균형을 맞추기 위해 로고와 문장을 배치한filler 성격의 콘텐츠가 일부 포함되어 있었습니다. 2. 서비스 신청의 한계기존 메인 페이지에서는 서비스 신청을 위한 주요 CTA(Call To Action)가명확하게 드러나지 않는 문제가 있었습니다.특히 로그인 상태에서만 신청 버튼이 활성화되는 구조로 되어 있..