홈페이지 리뉴얼 ep.1 - '이용 후기' 페이지

이 페이지를 처음 열어보는 고객은 두 가지를 확인시켜야 한다.

1. 정말 믿을 만한 서비스인지
2. 다른 사람들은 어떤 경험을 했는지

하지만 기존 구조로는 이 두 가지를 충분히 전달하지 못했다.
그래서 이용후기 페이지를 고객이 후기를 ‘경험할 수 있는 공간’으로 만들기 위해 리뉴얼하기로 했다.

이번 글에서는 1) 왜 수정했는가, 2) 어떻게 수정했는가에 대해 이야기하려 한다.

기존의 이용후기 페이지

1) 왜 수정했는가

1. 진정성 있는 후기가 묻혀버리는 문제

동행 서비스가 종료되면 고객들은 리뷰를 작성할 수 있다. 

리뷰는 아직 서비스를 경험해보지 못한 잠재 고객에게 실사용자의 경험을 그대로 전달해 주는 가장 좋은 매개체다.

서비스 특성상, 가족의 병원 동행이나 재가 서비스를 의뢰하는 경우가 많기 때문에,

잠재 고객은 “다른 가족들은 어떤 경험을 했는지”가 가장 궁금할 것이다.

그렇기에 후기 하나가 광고 여러 개보다 설득력이 높을 수밖에 없다.

 

특히 그중에는 서비스 진행 과정, 느꼈던 감정, 동행메이트에 대한 감사 등을 자세하게 적어주신 장문의 후기가 있다. 

이런 후기들은 준비된사람들을 처음 알게 된 사람에게 큰 신뢰를 줄 수 있는 소중한 자산이다.

그런데 기존 UI에서는 이 중요한 후기들이 단순히 시간 순으로만 정렬되어, 짧은 리뷰들과 똑같은 레벨로 섞여 노출되고 있었다.

그 결과, 진심이 담긴 후기의 가치가 눈에 잘 띄지 않고 쉽게 지나쳐지는 문제가 발생했다.

---

 

2. 개인정보 보호 이슈 

이용후기에는 동행을 수행한 동행메이트의 이름과 프로필 사진이 함께 노출된다.
하지만 동행메이트는 실명과 얼굴이 드러나는 순간,
개인정보 보호 측면에서 불필요한 노출 위험을 안게 된다.

기존 구조는 이 부분에 대한 고려가 충분하지 못해서,
서비스 신뢰도와는 별개로, 개인정보 보호 정책 측면에서 개선이 필요하다고 판단했다.

---

3. 3열 구조의 한계

기존 후기 페이지는 3열 그리드 구조로 되어 있었다.
처음에는 많은 후기를 한 화면에 보여줄 수 있어 좋아 보였지만, 실제 사용성에서는 다른 문제가 드러났다.

• 글이 길어질수록 줄바꿈이 어색하게 보이고
• 눈이 화면을 좌→우로 여러 번 왔다 갔다 하면서 시선 흐름이 불편하고
• 특히 장문 후기가 잘 읽히지 않아 또다시 묻히는 구조가 되어 버렸다.

결국, “후기를 강조하고 싶어서 만든 페이지인데,
정작 후기가 잘 읽히지 않는” 아이러니한 상황이 된 것이다.

이런 문제들을 해결하기 위해,
이용후기 페이지는 단순한 디자인 수정이 아니라 구조 자체를 다시 설계해야 하는 대상이 되었다.

---

 

2) 어떻게 수정했는가

개선 후 이용후기 페이지

 

1. ‘베스트 댓글’ 전용 영역 신설

고객의 경험이 자세하게 담긴 후기, 동행메이트에 대한 감사가 진하게 느껴지는 후기 등

서비스의 가치를 가장 잘 보여주는 후기를 선별해 ‘베스트 댓글’ 섹션으로 따로 분리했다.

이 영역은 페이지 상단에 배치하고, 한 카드에 더 넉넉한 공간을 줘서 가장 먼저, 가장 크게 눈에 들어오도록 설계했다.

 

2. 개인정보 보호를 위한 안전한 정보 노출

이용후기에는 동행메이트의 이름이 함께 노출된다.
하지만 실명을 그대로 보여줄 경우, 개인이 불필요하게 식별될 수 있는 위험이 있다.

그래서 이름은 첫 글자만 보여주고, 나머지는 별표로 처리하는 방식으로 바꿨다.
실제 화면에서는 아래와 같은 형태로 렌더링된다.

<b className={styles.praise}>
  <span className={styles.helperName}>
    {review?.helper?.name?.charAt(0)}**
  </span>
  님을 칭찬해요
</b>

 

• name.charAt(0)으로 이름의 첫 글자만 사용하고 뒤에는 **를 붙여 박**님처럼 표현한다.

이렇게 하면 고객 입장에서는
“어떤 메이트를 칭찬하고 있는지” 감각적인 느낌은 유지되면서도,
실제 개인이 누구인지 특정되지는 않도록 개인정보를 안전하게 보호할 수 있다.

3. 후기 레이아웃 재구성 (베스트 1열 + 일반 2열)

후기 가독성을 최우선으로 두고 레이아웃을 재설계했다.

 

기존 리뷰 리스트는 다음과 같은 CSS로 구성돼 있었다.

Before:

.reviewList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

After:

.bestGrid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px;
}

.reviewList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

• 베스트 댓글: 1열
  → 장문 후기를 자연스럽게 읽을 수 있도록 한 줄 한 줄 흐름을 살린 구조
• 일반 후기: 2열 그리드
  → 정보량은 유지하면서도 안정적인 시선 흐름 확보

이를 위해 CSS 그리드/플렉스, 카드 여백, 글씨 크기, 줄 간격 등을 전면적으로 조정했고,
React 컴포넌트 구조 또한 베스트/일반 영역을 분리하여 재정리했다.

그 결과, 스크롤을 내리며 읽었을 때 내용이 눈에 잘 들어오고 진짜 고객의 감정이 자연스럽게 전달되는 페이지로 개선되었다.

3-1.  로딩 경험 개선: Skeleton + 부드러운 등장 애니메이션 + 호버 효

리뉴얼의 핵심 목표 중 하나는
고객이 후기를 읽는 동안 “끊김 없이 자연스러운 경험”을 제공하는 것이었다.

기존 리뷰 페이지에서는 API 응답이 늦어질 경우,
화면에 텅 빈 영역이 그대로 노출되어 사용자가 순간적으로 “버그인가?” 혹은 “후기가 없나?”라고 오해할 가능성이 있었다.

이 문제를 해결하기 위해 두 가지 기술적 접근을 적용했다.

1) Skeleton UI (Shimmer 로딩) 도입

Skeleton UI 예시 ❘ 출처: https://yeon-design.tistory.com/51

후기 데이터를 불러오는 동안
placeholder 형태의 스켈레톤 박스가 먼저 렌더링되도록 했다.
특히 단순한 회색 박스가 아니라, 빛이 스르륵 지나가는 듯한 shimmer 애니메이션을 적용해
기다리는 시간의 답답함을 최소화했다.

적용된 CSS

@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.bestSkeleton,
.reviewSkeleton {
  background: linear-gradient(90deg, #f2f2f2 25%, #eaeaea 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 16px;
}

.bestSkeleton { height: 160px; }
.reviewSkeleton { height: 140px; }

2) 후기 등장 시 자연스러운 Fade-up 애니메이션

로딩이 끝나고 실제 후기가 나타날 때,
갑자기 툭 튀어나오는 대신
아래에서 위로 살짝 떠오르며 나타나는 fade-up 효과를 적용했다.

적용된 CSS

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

.reviewCard {
  animation: fadeUp 0.35s ease both;
}

 

3) 호버 효과 적용

데스크탑 환경에서는 후기 카드와 BEST 카드에 호버 효과(hover effect)를 적용했다.
마우스를 카드 위에 올리면 요소가 살짝 위로 떠오르며 그림자가 강조되는 방식이다.

사용자가 후기 하나하나에 자연스럽게 집중할 수 있도록 해당 효과를 추가하였다.

또한 이런 미세한 모션은 과하지 않으면서도 웹사이트의 완성도를 높여주는 품질감 있는 사용자 경험을 제공한다.
카드가 “살아있는 것처럼” 반응하면서,
고객은 이 페이지가 더 정교하고 잘 만들어진 서비스라는 인상을 받게 된다.

적용된 CSS

.bestCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07);
}

.loadMore:hover {
  transform: translateY(-1px);
  background: rgba(71, 121, 99, 0.14);
}