[디자인블럭] he32 : 자주묻는질문 – 실사용자 궁금증을 친절하게 해소하는 정보 블럭

자주 묻는 질문

 

 

 

 

 

✅ [디자인블럭] he32 : 자주묻는질문 – 실사용자 궁금증을 친절하게 해소하는 정보 블럭

 

 

 

 

 

🔠 블럭개요

실제 제품이나 서비스 이용 시 자주 발생하는 질문과 답변을 카드형 UI로 정리한 블럭입니다. FAQ 형식을 유쾌한 캐릭터와 함께 제공하여 정보 전달력과 고객 신뢰도를 동시에 높입니다.

 

 

 

 

 

📌 사용목적

• 구매 고객의 사전 궁금증 해소
• 클레임이나 문의 대응 부담 감소
• 제품/서비스에 대한 이해도 및 신뢰도 향상
• 정보성 콘텐츠로 블로그, 상세페이지 등 활용도 높음

 

 

 

 

 

🎨 디자인 특징

• Q&A 형식 카드 디자인으로 직관적 정보 전달
• 유쾌한 캐릭터 이미지로 시각적 몰입도 강화
• 각 항목별 구분이 명확해 스크롤 시 가독성 우수
• 반응형 구성으로 모바일, PC 모두 최적화

 

 

 

 

 

❄️ 활용 예시 (제품/브랜드 등)

• 생활용품 / 청소기 브랜드
“먼지통 세척 주기나 필터 교체법을 바로 확인할 수 있어 너무 편했어요.”
→ 제품 관리법, 사용 팁을 FAQ 형식으로 구성하여 고객 문의를 줄이고 신뢰도 향상

 

• 뷰티 / 스킨케어 브랜드
“트러블 났을 때 사용해도 되나요? 같은 질문이 있어서 안심하고 구매했어요.”
→ 민감성 제품의 사용법, 주의사항을 상세히 안내하여 고객 불안 최소화

 

• 식품 / 수산물 브랜드
“문어 손질이나 보관법이 자세히 나와 있어서 처음 요리도 문제 없었어요.”
→ 손질법, 보관법, 비린내 제거법 등 조리 전 정보 안내로 소비자 만족도 증대

 

• 전자기기 / 웨어러블 디바이스
“충전시간이나 생활방수 범위가 정리되어 있어 헷갈리지 않아요.”
→ 제품 기능, 설정법 등 반복 문의를 Q&A로 간결하게 전달

 

• 교육 / 온라인 클래스
“수강 시작일, 환불 조건 같은 게 FAQ로 다 정리돼 있어서 문의할 필요가 없었어요.”
→ 학습 방식, 결제 및 환불 등 주요 질문을 카드형으로 구성하여 사용자 편의성 강화

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• 블로그 콘텐츠
– 제품 사용법, 고객후기와 함께 FAQ 영역 삽입하여 정보 제공 및 SEO 효과 강화

 

• SNS (인스타그램 스토리 / 리얼스)
– 질문 카드 한 장씩 업로드해 고객참여 유도 및 제품 기능 홍보

 

• 카카오톡 채널 자동응답
– 자주 묻는 질문 항목을 텍스트 링크로 제공해 CS 대응 자동화

 

• 오프라인 리플렛 / 매장 POP
– 구매 전 소비자의 궁금증을 인쇄형 Q&A로 정리해 안내자료로 활용

 

 

 

 

 

💻 HTML 설명

FAQ 항목은

.he32 클래스 내부에 각각의 카드 .box 요소로 구성되며, quesWrap은 질문 제목, ans는 답변 내용을 담습니다.

imgArea는 반응형에서만 표시되도록 설정되어 있으며, 768px 이상일 때 우측 하단에 캐릭터가 나타납니다.

질문별 캐릭터 이미지를 교체하거나, 질문 수를 늘리는 것도 손쉽게 가능합니다.

 

 

 

 

 

👉 커스터마이징 팁

• 캐릭터 이미지 대신 아이콘/일러스트로 변경 시 브랜드 성격에 맞게 조정 가능
• 질문 제목 색상이나 배경 색을 브랜드 컬러에 맞춰 설정하면 통일감 강화
• 각 질문에 링크 버튼 추가하여 상세페이지나 가이드 영상으로 연결하면 UX 향상

 

 

 

 

 

 

 

 

html

<!-- he32 : 자주묻는질문 -->
<div class="he32">
  <div class="row">


    <!-- 카드1 -->
    <div class="col-sm-12 col-md-12 col-lg-10 mx-auto">
      <div class="box">
        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he32/he32_face01.png" alt="캐릭터" />
        </div>
        <div class="txtArea">
          <div class="quesWrap">
            <span class="qicon">Q</span>
            <p class="ques">활문어는 어떻게 보관하나요?</p>
          </div>
          <p class="ans">
            받으신 즉시 냉장 보관해 주세요 (0~5℃).<br>
            되도록 빠르게 손질 및 섭취하시는 것이 신선도 유지에 가장 좋습니다.<br>
            장기 보관 시에는 손질 후 밀봉하여 냉동(-18℃ 이하) 보관해 주세요.
          </p>
        </div>
      </div>
    </div>


    <!-- 카드2 -->
    <div class="col-sm-12 col-md-12 col-lg-10 mx-auto">
      <div class="box">
        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he32/he32_face02.png" alt="캐릭터" />
        </div>
        <div class="txtArea">
          <div class="quesWrap">
            <span class="qicon">Q</span>
            <p class="ques">손질은 어떻게 하나요?</p>
          </div>
          <p class="ans">
            문어는 머리 속 내장 제거 후 다리와 몸통을 분리합니다.<br>
            소금으로 문질러 미끈거림을 제거한 뒤 흐르는 물에 헹궈 주세요.<br>
            부드러운 식감을 원할 경우 끓는 물에 살짝 데쳐 사용하셔도 좋습니다.
          </p>
        </div>
      </div>
    </div>


    <!-- 카드3 -->
    <div class="col-sm-12 col-md-12 col-lg-10 mx-auto">
      <div class="box">
        <div class="imgArea">
          <img src="{{$template}}/img/_hes/he32/he32_face03.png" alt="캐릭터" />
        </div>
        <div class="txtArea">
          <div class="quesWrap">
            <span class="qicon">Q</span>
            <p class="ques">비린내 없이 요리하려면?</p>
          </div>
          <p class="ans">
            손질 후 소금과 식초로 한 번 문지르면 비린내 제거에 효과적입니다.<br>
            생강, 대파, 월계수잎을 넣고 데치면 잡내 없이 더욱 풍미 있는 문어 요리가 가능합니다.
          </p>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he32 : 자주하는질문
*****************************************************************/
.he32 {}

.he32 .row>div {
    /* padding: 0 0px; */
    /* 양쪽여백 */
}

.he32 .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.he32 .box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    background-color: #eee;
    border-radius: 15px;
    padding: 0px 0px 20px;
    width: 100%;
    overflow: hidden;
}

.he32 .imgArea {
    display: none;
}

/*  */
.he32 .txtArea {
    position: relative;
    z-index: 2;
    width: 100%;
}

.he32 .txtArea .quesWrap {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    border: 1px solid #758f00;
    border-radius: 50px;
    /* 높이 절반으로 반원 유지 */
    height: 50px;
    /* 높이 고정 시 완벽한 반원 */
}

.he32 .txtArea .quesWrap .qicon {
    background-color: #758f00;
    border-radius: 30px;
    padding: 10px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
    font-weight: bold;
    font-size: 1.5em;
    color: #fff;
}

.he32 .txtArea .quesWrap .ques {
    margin: 0;
    font-size: 1.250em;
    font-weight: bold;
    color: #111;
}

.he32 .txtArea .ans {
    padding: 0px 15px 10px 15px;
    border-radius: 10px;
    background-color: transparent;
    font-size: 1.0em;
    color: #666;
}

@media screen and (min-width: 768px) {
    .he32 .imgArea {
        position: absolute;
        right: 0px;
        bottom: 0px;
        z-index: 999;
        display: block;
    }

    .he32 .imgArea img {
        height: 150px;
    }

    .he32 .txtArea .quesWrap {
        height: 62px;
    }

    .he32 .txtArea .ans {
        padding: 0px 150px 10px 15px;
    }
}