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

4.  ServiceFlowSection

ServiceFlowSection은 사용자가 실제로 서비스를 이용할 때
어떤 과정으로 진행되는지를 단계별로 보여주는 영역입니다.

서비스 이용 과정에 대한 문의가 자주 있었기 때문에
페이지 안에서 서비스 신청부터 이용 완료까지의 흐름을
한눈에 이해할 수 있도록 절차를 정리하여 구성했습니다.

 

또한 스크롤 진입 시 각 단계 카드가 순차적으로 등장하도록 애니메이션을 적용했습니다.

이 애니메이션은 CSS만으로 동작하는 것이 아니라
IntersectionObserver를 활용해 섹션이 화면에 들어왔을 때

애니메이션 클래스를 활성화하는 방식으로 구현했습니다.

초기에는 카드가 보이지 않는 상태로 시작하고,
섹션이 화면에 일정 비율 이상 나타나면 애니메이션이 실행되도록 구성했습니다.

.flowItemWrapper {
  opacity: 0;
  transform: translateY(20px);
}

@keyframes cardFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

또한 animation-delay를 다르게 적용해
카드가 한 번에 나타나는 것이 아니라 서비스 절차 순서에 맞춰 자연스럽게 등장하도록 설계했습니다.

이를 통해 사용자가 단순히 정보를 읽는 것이 아니라
서비스 진행 흐름을 따라가듯 이해할 수 있도록 구성했습니다.

 

 

5. Appsection

AppSection은

준비된사람들 서비스를 모바일 앱을 통해 더욱 편리하게 이용할 수 있다는 점을 안내하는 영역입니다.

서비스 신청 및 이용 과정에서 앱 사용이 필수이기 때문에,
웹사이트에서 서비스를 확인한 사용자가 자연스럽게 모바일 앱으로 이어질 수 있도록 구성했습니다.

이 섹션에서는 App Store와 Google Play 스토어 버튼을 배치하여
사용자가 앱 마켓으로 바로 이동할 수 있도록 딥링크를 연결했습니다.

 

또한 실제 앱 화면을 캡처하여 스마트폰 목업 이미지에 적용함으로써
사용자가 앱을 통해 어떤 기능을 이용하게 되는지 직관적으로 이해할 수 있도록 구성했습니다.

왼쪽 화면은 앱의 메인 화면이며,
오른쪽 화면은 서비스 제공 시간 동안 동행 메이트가 작성한 메모를 보호자에게 전달하는
동행 과정 공유 기능 화면입니다.

이 기능을 통해 보호자는 서비스 진행 상황을 앱을 통해 확인할 수 있으며,
서비스 이용 과정이 어떻게 공유되는지 미리 이해할 수 있도록 했습니다.

6. PricingSection

PricingSection은 서비스 이용에 필요한 가격 정보를 전달하는 영역입니다.

기존과 비교해 가격 정책 자체에는 변화가 없지만,
사용자가 서비스 이용 전에 가격 구조를 보다 쉽게 이해할 수 있도록
가격 정보의 시각적 구성과 정보 구조를 개선했습니다.

 

요금 정보는 서비스 유형에 따라 동행 서비스와 일시재가 서비스로 구분하여
두 서비스를 한 화면에서 비교할 수 있도록 2열 레이아웃으로 구성했습니다.

이를 통해 사용자가 서비스별 가격 구조를 직관적으로 비교할 수 있도록 했습니다.

또한 가격 정보는 데이터 구조를 기반으로 정의하고
이를 테이블 형태의 UI로 렌더링하도록 구성하여
요금 정책 변경 시 유지보수가 용이하도록 구현했습니다.

const pricingData = {
  hospital: [...],
  homecare: [...]
};

---

이렇게 메인 페이지를 구성하는 각 섹션의 역할을 정리하고
서비스의 핵심 메시지, 이용 흐름, 가격 정보까지
사용자가 자연스럽게 이해할 수 있도록 페이지 구조를 다시 설계했습니다.

 

다음으로 고민해야 했던 것은

코드 구조였습니다.

 

기획된 6개의 섹션을 하나의 페이지에 모두 구현해야 했기 때문입니다.

기존 메인 페이지는 비교적 단순한 구조였기 때문에
하나의 Main.jsx 파일 안에 모든 UI를 구현하는 방식으로 작성되어 있었습니다.

 

하지만 이번 리뉴얼에서는
여러 개의 섹션이 추가되고
각 영역의 UI도 점점 복잡해졌기 때문에

모든 코드를 하나의 파일 안에 작성하는 방식은

유지보수 측면에서 좋은 구조가 아니었습니다.

 

그래서 메인 페이지를
섹션 컴포넌트 구조로 분리하기로 결정했습니다.

각 섹션을 독립적인 컴포넌트로 분리하여

각각의 파일에서 UI와 스타일을 관리하도록 구조를 변경했습니다.

<Main />
    <HeroSection />
    <PromiseSection />
    <ServiceSection />
    <ServiceFlowSection />
    <AppSection />
    <PricingSection />
</>

이렇게 구조를 나누면

• 특정 섹션의 UI를 수정할 때 다른 영역에 영향을 주지 않고 작업할 수 있고
• 새로운 섹션이 추가되더라도 메인 페이지 구조를 크게 수정하지 않아도 되며
• 코드 가독성과 유지보수성이 크게 개선됩니다.

 

결과적으로 Main.jsx는
각 섹션 컴포넌트를 조합하는 페이지 오케스트레이션 역할만 담당하도록 단순화되었습니다.

메인 페이지를 구성하는 각 영역이
독립적인 컴포넌트로 관리되면서 디버깅이 쉬워지고
향후 디자인 수정이나 기능 확장도 훨씬 수월하게 진행할 수 있게 되었습니다.

 

이번 메인 페이지 개편에서는
서비스의 핵심 정보를 더 명확하게 전달하기 위해
페이지의 정보 구조와 코드 구조를 함께 정리했습니다.

메인 페이지를 구성하는 각 영역을
독립적인 컴포넌트로 분리하면서
페이지의 유지보수성과 확장성 또한 함께 고려했습니다.

다음 글에서는
준비된사람들 서비스 알아보기 페이지 역할 재설계 과정에 대해
이야기해보려고 합니다.