홈페이지 리뉴얼 ep.2 - '문의하기' 페이지

B2C 비즈니스에서 개발자의 중요한 역할 중 하나는
고객이 서비스로 들어올 수 있는 통로를 만드는 것이라고 생각합니다.

그중에서도 고객이 서비스에 대해 궁금증이 생겼을 때
그 궁금증을 빠르게 해결할 수 있도록 만드는 일은 매우 중요합니다.

궁금증이 생겼다는 것 자체가 이미 서비스에 대한 인지가 생겼다는 의미이기 때문입니다.

그 과정에서 이용을 가로막는 작은 장애물들을 해결해 준다면
그 고객은 서비스를 이용할 가능성이 가장 높은 후보가 될 수 있습니다.

하지만 기존 문의하기 페이지는
필요한 정보를 찾거나 문의를 남기기까지의 흐름이
조금 매끄럽지 않다고 느껴졌습니다.

특히

• FAQ 영역의 가독성이 떨어진다는 점
• 문의 작성 시 입력 경험이 직관적이지 않다는 점

이 두 가지가 주요 문제였습니다.

그래서 이번 리뉴얼에서는 문의하기 페이지의 기능 자체는 유지하면서

인라인 스타일 중심 구조를
컴포넌트 기반 구조 + 접근성 + 폼 UX + 반응형 UI 중심으로
리팩토링하기로 했습니다.

 

이번 글에서는 FAQ와 문의하기 섹션에서

1. 기존 문의 페이지의 문제
2. 어떤 UX 개선을 진행했는지

두 가지를 중심으로 이야기해보겠습니다.

---

1. FAQ  part UI/UX

[기존 문의 페이지의 문제]

1. 명확하지 않는 질문과 답변 구획

기존 FAQ는 질문과 답변의 구획이 명확하게 나뉘지 않아
여러 항목이 하나의 흐름처럼 이어져 보이는 문제가 있었습니다. 

제목과 답변이나 항목들의 색상차이로 구분하지만 명확하지 않아

사용자가 각 질문을 구분해 읽기 어렵고
전체적으로 가독성이 떨어지는 구조였습니다.

 

 

2. 자꾸 닫히는 질문 카드

또한 기존 FAQ에서는 질문(Q)을 클릭하면 답변(A)이 열리지만,
답변 영역을 클릭하면 FAQ가 다시 닫히는 구조였습니다.

이 때문에 사용자가 답변을 읽는 도중에도
의도치 않게 FAQ가 닫히는 경험이 발생할 수 있었고,
사용자 경험 측면에서 불편함이 있었습니다.

 

 

[개선 방향]

• 이번 리뉴얼에서는 FAQ의 구조와 인터랙션을 함께 개선했습니다.
  먼저 각 질문을 카드 형태로 분리하여 항목 간 경계를 명확하게 만들었고,
  마우스를 올리면 hover 효과가 나타나도록 하여
  사용자가 선택 가능한 질문을 직관적으로 인지할 수 있도록 했습니다.

.faqRow:hover {                                                                                                                  
    background: rgba(111, 43, 127, 0.06);                                                                                          
  } 
  .faqRow:hover .faqTitleText {                                                                                                    
    color: #different color;                                                                                                                
  }

• 또한 FAQ를 아코디언 구조로 개선하여
  질문(Q) 영역을 클릭했을 때만 답변이 열리고 닫히도록 수정했습니다.
  이를 통해 답변을 읽는 중에 실수로 닫히는 문제를 방지했습니다.
  아울러 현재 열려 있는 항목은 화살표 방향과 스타일 변화를 통해
  사용자가 상태를 쉽게 확인할 수 있도록 했습니다.

#변경 전에는 바깥 div 전체에 onClick={() => toggleContent(index)},질문 영역이든 답변 영역이든 같은 카드 안을 클릭하면 닫힘                                                                                                                                                                
  <div                                                                                                                                                    
    key={index}
    ...                                                                                                                                                   
    onClick={() => toggleContent(index)}                                                                                                                  
  >                                                                                                                                                       
    ...                                                                                                                                                                                                                                                                        
      <div                                                                                                                                                
        className={styles.faqContent}                                                                                                                                                                                                                   
      ></div>                                                                                                                                             
    )}                                                                                                                                    
  </div>                                                                                                                                                  
                                                                                                                                                          
  #변경 후에는 onClick이 faqRow에만                                                                                                                                                                                                                                                    
  <div                                                                                                                                                    
    key={index}                                                                                                                               
    className={`${styles.faqItem} ${isOpen ? styles.faqItemOpen : ""}`}                                                                                   
  >                                                                                                                                                       
    <div                                                                                                                                                  
      className={styles.faqRow}                                                                                                                           
      onClick={() => toggleContent(index)}                                                                                                                
    >

 #답변 영역 클릭이 부모로 전파되지 않도록
  <div
    className={styles.faqContent}
    onClick={(e) => e.stopPropagation()}
  />

• 마지막으로 기존에는 첫 번째 질문이 기본적으로 열려 있었지만,
  이번 리뉴얼에서는 모든 질문이 닫힌 상태에서 시작하도록 변경하여
  사용자가 필요한 질문만 선택해 확인할 수 있도록 구성했습니다.

  #변경 전
  const [expandedIndex, setExpandedIndex] = useState(0);

  #변경 후
  const [expandedIndex, setExpandedIndex] = useState(null);

2. 문의하기 part UI/UX

Before

[기존 문의 페이지의 문제]

1. 작은 글자 크기와 입력 영역의 낮은 가독성

기존 문의 페이지는 전반적으로 글자 크기가 작고
입력 필드 또한 최소한의 라인 형태로 구성되어 있어
문의 내용을 읽고 작성하는 과정에서 가독성이 충분하지 않았습니다.

특히 준비된사람들 서비스는
어르신 보호자나 중장년 사용자가 많이 이용하기 때문에
텍스트의 크기와 입력 영역의 명확성은
사용자 경험에 중요한 요소라고 판단했습니다.

 

2. 문의 작성 영역의 시각적 구분 부족

또한 기존 UI는 입력 필드가 라인 형태로 구성되어 있어
사용자가 어디에서 내용을 입력해야 하는지
시각적으로 한 번 더 확인해야 하는 불편함이 있었고
전체적으로 문의 작성 화면이 다소 단조롭게 느껴지는 구조였습니다.

 

3. 문의 전 확인할 수 있는 안내 정보 부족

기존 문의 페이지에서는
단순히 이메일과 전화번호만 안내되어 있어
사용자가 문의를 남기기 전에 참고할 수 있는 정보가 부족했습니다.

예를 들어 문의 가능 시간이나 예상 응답 시간과 같은 안내가 없어
고객 입장에서 언제 답변을 받을 수 있는지
미리 파악하기 어려운 부분이 있었습니다.

After

[개선 방향]

• 이번 리뉴얼에서는 문의 페이지의 가독성과 사용성을 함께 개선하는 방향으로 구조를 정리했습니다.
  먼저 전반적인 텍스트 크기와 입력 필드의 크기를 확대하여
  사용자가 내용을 더 쉽게 읽고 입력할 수 있도록 개선했습니다.
• 또한 기존에는 단순한 라인형 입력 스타일을 사용하고 있었지만,
  리뉴얼 이후에는 카드형 UI를 적용해
  문의 작성 영역이 하나의 명확한 공간으로 인식되도록 구성했습니다.
  입력 필드의 포커스 상태, 버튼의 활성/비활성 상태,
  그리고 hover 인터랙션을 추가하여
  사용자가 현재 입력 상태를 직관적으로 인지할 수 있도록 했습니다.
• 마지막으로 문의 페이지에 고객 안내 정보를 새롭게 추가했습니다.
  기존에는 이메일과 전화번호만 안내되어 있었지만,
  이번 리뉴얼에서는 문의 가능 시간과 예상 응답 시간 등의 정보를 함께 제공하도록 개선했습니다.
  이를 통해 사용자가 문의 전에 필요한 정보를 미리 확인하고,
  보다 편안하게 문의를 남길 수 있는 환경을 만들고자 했습니다.

 

3. 반응형 UI/UX 

모바일 환경에서도 편하게 사용할 수 있도록  
반응형 레이아웃을 강화했습니다.

900px 기준 미디어쿼리를 적용해

• FAQ 레이아웃
• 입력 폼 간격
• 버튼 크기
• 텍스트 가독성 

등을 모바일 화면에 맞게 조정했습니다.

이를 통해 스마트폰에서도

문의 페이지를 보다 편하게 사용할 수 있도록 개선했습니다.

 

---

 

문의 페이지는 단순히 메시지를 보내는 기능이 아니라  
고객이 서비스와 처음으로 직접 연결되는 중요한 접점입니다.

이번 리뉴얼을 통해 고객이 궁금한 정보를 빠르게 확인하고  
필요할 때 부담 없이 문의를 남길 수 있는 경험을 만드는 데 집중했습니다.

앞으로도 준비된사람들 웹사이트는  
사용자 경험을 중심으로 지속적으로 개선해 나갈 예정입니다.