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

메인 페이지는 서비스의 첫인상을 만드는 중요한 공간입니다.

사용자는 메인 페이지에 들어온 뒤 몇 초 안에

• 어떤 서비스를 제공하는지
• 왜 이 서비스를 믿을 수 있는지
• 서비스를 어떻게 이용하면 되는지

를 이해하게 해야합니다.

기존 문제점

 

1. 서비스 핵심 정보 전달 부족

서비스가 무엇인지 한눈에 이해하기 어려웠고
서비스를 이용하려면 어떻게 신청해야 하는지에 대한 설명도 부족했습니다.

또한 히어로 섹션 하단에
시각적인 균형을 맞추기 위해 로고와 문장을 배치한

filler 성격의 콘텐츠가 일부 포함되어 있었습니다.

 

2. 서비스 신청의 한계

기존 메인 페이지에서는 서비스 신청을 위한 주요 CTA(Call To Action)가
명확하게 드러나지 않는 문제가 있었습니다.

특히 로그인 상태에서만 신청 버튼이 활성화되는 구조로 되어 있어
웹사이트를 처음 방문한 사용자 입장에서는
서비스를 어떻게 신청할 수 있는지 직관적으로 이해하기 어려웠습니다.

 

3. 다른 페이지에 존재하는 중복 정보

기존 메인 페이지에는
이미 다른 페이지에서 상세하게 설명되고 있는 내용이
일부 중복되어 배치되어 있었습니다.

이로 인해 메인 페이지의 정보 구조가 다소 모호해지고
사용자가 핵심 정보를 파악하기 어려운 문제가 있었습니다.

 

4. 서비스 설명 및 이미지 적절함 부족

기존 메인 페이지에서는
서비스 설명과 함께 사용되는 이미지가
실제 서비스 내용을 충분히 전달하지 못하고 있었습니다.

서비스의 특징이나 제공되는 도움의 범위가
시각적으로 잘 드러나지 않아 사용자가 서비스를 이해하기 어려운 부분이 있습니다.

---

새로운 구조 설계

기존 문제점에서 정리한 여러 이슈들을 해결하기 위해,

이번 리뉴얼은 단순한 UI 수정이 아니라 메인 페이지의 기획부터 다시 정리하는 작업으로 시작했습니다.
사용자가 홈페이지에 접속했을 때 가장 먼저 이해해야 하는 정보가 무엇인지 다시 정의했고,

그 우선순위에 따라 메인 페이지를 6개의 section으로 재구성했습니다.

HeroSection
PromiseSection
ServiceSection
ServiceFlowSection
AppSection
PricingSection

이제부터 각 section을 어떤 의도로 설계했고,

어떻게 구현했는지 하나씩 정리해보겠습니다.

1. HeroSection

메인 페이지에서 사용자가 가장 먼저 마주하게 되는 영역이 바로 HeroSection입니다.
따라서 이 섹션은 사용자가 웹사이트에 접속했을 때 서비스의 핵심 메시지를 가장 먼저 이해할 수 있도록 설계했습니다.

히어로 섹션의 시작은 준비된사람들이 전달하고자 하는 핵심 메시지인 "따뜻한 동행’이라는 문구로 구성했습니다.
사용자가 페이지에 들어왔을 때 서비스의 성격과 방향성을 직관적으로 느낄 수 있도록 메시지를 가장 상단에 배치했습니다.

 

또한 페이지 첫 화면이 지나치게 정적으로 보이지 않도록
텍스트와 이미지 카드에는 간단한 등장 애니메이션을 적용했습니다.

애니메이션은 CSS 기반으로 구현하여 페이지 로딩 시 콘텐츠가 자연스럽게 나타나도록 구성했습니다.
특히 transform과 opacity 속성을 활용한 애니메이션을 사용하여 브라우저 렌더링 성능에 부담을 주지 않도록 설계했습니다.

.heroText {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease-out forwards;
}

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

이러한 방식으로 텍스트와 이미지가 순차적으로 등장하도록 구성하여
사용자의 시선이 자연스럽게 핵심 메시지로 향하도록 했습니다.

또한 기존 문제점에서도 언급되었던 서비스 신청 버튼 구조도 함께 개선했습니다.
기존에는 로그인 상태에서만 신청 버튼이 활성화되는 구조로 되어 있어
사용자가 서비스 신청 경로를 직관적으로 이해하기 어려운 문제가 있었습니다.

 

이번 리뉴얼에서는 로그인 여부와 관계없이
히어로 섹션과 상단 메뉴에서 항상 신청 페이지로 이동할 수 있도록 CTA 구조를 수정했습니다.

이를 통해 사용자가 웹사이트 어디에서든
서비스 신청 흐름을 쉽게 인지할 수 있도록 개선했습니다.

 

2. PromiseSection

PromiseSection은
준비된사람들이 어떤 마음과 방향성으로 서비스를 운영하고 있는지,
서비스의 철학과 신뢰 메시지를 전달하기 위한 영역입니다.

이 섹션에서는 고객에게 우리가 어떤 태도로 서비스를 제공하는지,
그리고 왜 준비된사람들을 선택해야 하는지에 대한
차별점과 근거를 전달하는 데에 집중했습니다.

특히 ‘태도가 프리미엄입니다’라는 문구와
따뜻한 눈길을 마주하는 이미지를 통해
고객이 서비스를 이용하기 전에
준비된사람들이 지향하는 태도를 미리 느낄 수 있도록 구성했습니다.

 

3. ServiceSection

PromiseSection에서 준비된사람들이 어떤 태도와 기준으로 서비스를 운영하는지 전달했다면,
ServiceSection에서는 실제로 어떤 서비스를 제공하는지 구체적으로 설명하는 역할을 합니다.

사용자가 서비스를 이용하기 전에
어떤 서비스를 선택할 수 있는지, 그리고 어떤 도움을 받을 수 있는지를
직관적으로 이해할 수 있도록 구성했습니다.

 

두 서비스를 하나의 화면에서 비교하면서 확인할 수 있도록
좌측에서는 서비스 유형을 선택하고 우측에서는 해당 서비스의 상세 내용을 확인하는
구조로 설계했습니다.

 

ServiceSection은 사용자가 서비스 유형을 선택하면
오른쪽 영역의 설명과 이미지가 함께 변경되는 상태 기반 UI로 구현했습니다.

React의 state를 활용하여 선택된 서비스에 따라
해당 서비스의 콘텐츠가 동적으로 렌더링되도록 구성했습니다.

const [selectedService, setSelectedService] = useState("hospital");

이를 통해 페이지 이동 없이
하나의 섹션 안에서 두 가지 서비스를 비교하면서 확인할 수 있도록 했습니다.

 

또한 각 서비스에서 제공되는 업무 범위는
Accordion UI를 활용하여 구성했습니다

const [openIndex, setOpenIndex] = useState(null);

const toggleAccordion = (index) => {
  setOpenIndex(openIndex === index ? null : index);
};

. 기본적으로는 핵심 항목만 노출하고
사용자가 필요할 때 세부 내용을 펼쳐볼 수 있도록 하여
한 화면에 너무 많은 정보를 노출하지 않으면서도
필요한 정보를 단계적으로 확인할 수 있도록 설계했습니다.

 

---

ServiceFlowSection
AppSection
PricingSection 

남은 3가지 섹션의 수정 사항에 대해서는

다음 Main 페이지 구성 개편(2)의 이야기로 가져오겠습니다!