아임웹 FAQ 아코디언 만들기 | HTML CSS JS로 깔끔한 자주 묻는 질문 섹션 구현하기

 

홈페이지를 제작하다 보면 고객이 반복적으로 물어보는 질문들이 있습니다.

제작 비용, 제작 기간, 유지보수, 예약 방법, 상담 절차 등 비슷한 질문이 계속 발생하는 경우가 많습니다.

이럴 때 FAQ 섹션을 만들어두면 방문자는 필요한 정보를 빠르게 확인할 수 있고, 문의 전환율도 높아질 수 있습니다.

 

이번 코드는 아임웹 HTML 위젯에서 바로 사용할 수 있는 FAQ 아코디언 디자인입니다.

질문을 클릭하면 답변이 열리고, 다른 질문을 클릭하면 기존 답변은 자동으로 닫히는 방식으로 구성되어 있습니다.

 

실제 구현 예시

믓아 스튜디오

 

---

 

이 코드로 구현되는 기능

이 코드를 적용하면 다음과 같은 기능을 사용할 수 있습니다.

• FAQ 아코디언 UI
• 질문 클릭 시 답변 열기
• 다른 질문 클릭 시 기존 답변 자동 닫기
• 부드러운 열림 애니메이션
• 플러스(+), 마이너스(-) 아이콘 전환
• 모바일 반응형 지원
• 아임웹 HTML 위젯 적용 가능

방문자가 많은 정보를 한 번에 보지 않아도 되기 때문에 화면이 훨씬 깔끔해집니다.

---

 

사용하면 좋은 상황

다음과 같은 홈페이지에서 특히 활용도가 높습니다.

홈페이지 제작 업체

• 제작 비용 안내
• 제작 기간 안내
• 유지보수 안내

병원 홈페이지

• 예약 방법
• 진료 절차
• 주차 안내

법률사무소 홈페이지

• 상담 절차
• 상담 비용
• 방문 상담 여부

기업 홈페이지

• 견적 문의
• 서비스 범위
• 계약 절차

---

 

적용 방법

STEP 1 : 아임웹 관리자 접속

STEP 2 : HTML 위젯 추가

STEP 3 : 아래 전체 코드를 붙여넣기

STEP 4 : FAQ 내용 수정

 

질문 부분

<button class="motsa-faq-question">
질문 내용
</button>

답변 부분

<div class="motsa-faq-answer">
답변 내용
</div>

만 수정하면 됩니다.

---

 

전체 코드

아래 코드를 그대로 복사해서 사용하세요.

<section class="motsa-faq-section">
  <div class="motsa-faq-inner">
    <div class="motsa-faq-head">
      <span>FAQ</span>
      <h2>자주 묻는 질문</h2>
      <p>믓아스튜디오 홈페이지 제작 전 많이 물어보는 내용을 정리했습니다.</p>
    </div>

    <div class="motsa-faq-list">

      <div class="motsa-faq-item active">
        <button class="motsa-faq-question">
          홈페이지 제작은 어떤 방식으로 진행되나요?
          <span></span>
        </button>
        <div class="motsa-faq-answer">
          <p>
            업종과 목적을 먼저 확인한 뒤, 방문자가 이해하기 쉬운 구조를 잡고 디자인을 진행합니다.
            단순히 예쁜 화면보다 문의로 이어지는 흐름을 중요하게 설계합니다.
          </p>
        </div>
      </div>

      <div class="motsa-faq-item">
        <button class="motsa-faq-question">
          아임웹으로 제작하면 어떤 장점이 있나요?
          <span></span>
        </button>
        <div class="motsa-faq-answer">
          <p>
            관리자 사용이 쉬워 제작 후에도 직접 텍스트, 이미지, 게시글을 수정하기 좋습니다.
            예약, 문의폼, 결제, 게시판 등 기본 기능을 활용할 수 있어 운영 부담도 줄일 수 있습니다.
          </p>
        </div>
      </div>

      <div class="motsa-faq-item">
        <button class="motsa-faq-question">
          제작 비용은 어떻게 정해지나요?
          <span></span>
        </button>
        <div class="motsa-faq-answer">
          <p>
            페이지 수, 디자인 난이도, 필요한 기능, 콘텐츠 정리 범위에 따라 달라집니다.
            믓아스튜디오는 필요한 범위를 먼저 확인한 뒤 과하지 않은 구성으로 제안드립니다.
          </p>
        </div>
      </div>

      <div class="motsa-faq-item">
        <button class="motsa-faq-question">
          기존 홈페이지 리디자인도 가능한가요?
          <span></span>
        </button>
        <div class="motsa-faq-answer">
          <p>
            가능합니다. 기존 사이트의 문제점을 확인하고, 방문자가 이탈하는 구간이나 문의 동선을 개선하는 방향으로 리디자인합니다.
          </p>
        </div>
      </div>

      <div class="motsa-faq-item">
        <button class="motsa-faq-question">
          제작 후 수정이나 관리도 가능한가요?
          <span></span>
        </button>
        <div class="motsa-faq-answer">
          <p>
            제작 완료 후 기본적인 관리 방법을 안내드리며, 추가 수정이나 유지보수가 필요한 경우 별도로 진행할 수 있습니다.
          </p>
        </div>
      </div>

    </div>
  </div>
</section>

<style>
  .motsa-faq-section {
    width: 100%;
    padding: 100px 20px;
    background: #f7f7f8;
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
  }

  .motsa-faq-inner {
    max-width: 980px;
    margin: 0 auto;
  }

  .motsa-faq-head {
    text-align: center;
    margin-bottom: 46px;
  }

  .motsa-faq-head span {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .motsa-faq-head h2 {
    margin: 0 0 14px;
    font-size: 38px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.04em;
  }

  .motsa-faq-head p {
    margin: 0;
    font-size: 16px;
    color: #6b7280;
    line-height: 1.7;
  }

  .motsa-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .motsa-faq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
  }

  .motsa-faq-item.active {
    border-color: #111827;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  }

  .motsa-faq-question {
    width: 100%;
    padding: 24px 28px;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 18px;
    font-weight: 750;
    color: #111827;
    text-align: left;
    letter-spacing: -0.03em;
  }

  .motsa-faq-question span {
    position: relative;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
  }

  .motsa-faq-question span::before,
  .motsa-faq-question span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #111827;
    transform: translate(-50%, -50%);
    transition: all 0.25s ease;
  }

  .motsa-faq-question span::before {
    width: 12px;
    height: 2px;
  }

  .motsa-faq-question span::after {
    width: 2px;
    height: 12px;
  }

  .motsa-faq-item.active .motsa-faq-question span::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
  }

  .motsa-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .motsa-faq-answer p {
    margin: 0;
    padding: 0 28px 26px;
    font-size: 16px;
    line-height: 1.8;
    color: #4b5563;
    letter-spacing: -0.02em;
  }

  .motsa-faq-item.active .motsa-faq-answer {
    max-height: 220px;
  }

  @media (max-width: 768px) {
    .motsa-faq-section {
      padding: 70px 16px;
    }

    .motsa-faq-head h2 {
      font-size: 30px;
    }

    .motsa-faq-question {
      padding: 20px;
      font-size: 16px;
    }

    .motsa-faq-answer p {
      padding: 0 20px 22px;
      font-size: 15px;
    }
  }
</style>

<script>
  document.querySelectorAll(".motsa-faq-question").forEach(function(button) {
    button.addEventListener("click", function() {
      const item = this.closest(".motsa-faq-item");

      document.querySelectorAll(".motsa-faq-item").forEach(function(el) {
        if (el !== item) {
          el.classList.remove("active");
        }
      });

      item.classList.toggle("active");
    });
  });
</script>

 

---

 

코드 수정 포인트

 

배경색 변경

기본 배경

background: #f7f7f8;

원하는 색상으로 변경 가능

예시

background: #ffffff;

 

 

 

 

FAQ 제목 변경

<h2>자주 묻는 질문</h2>

↓

<h2>홈페이지 제작 FAQ</h2>

 

 

 

 

질문 카드 둥글기 변경

현재

border-radius: 22px;

더 둥글게

border-radius: 30px;

 

 

 

 

최대 높이 조정

현재

max-height: 220px;

답변 내용이 길다면

max-height: 400px;

으로 변경하면 됩니다.

---

 

자주 발생하는 오류와 해결 방법

-FAQ가 열리지 않는 경우

원인

<script>

부분이 누락된 경우

 

해결 방법

전체 코드를 다시 붙여넣기

 

 

 

-답변이 잘리는 경우

원인

max-height:220px;

값이 작음

해결 방법

max-height:400px;

이상으로 수정

 

 

 

-디자인이 깨지는 경우

원인

기존 CSS와 충돌

해결 방법

HTML 위젯 하나에 전체 코드를 넣는 것을 권장

 

 

 

-모바일에서 글자가 너무 큰 경우

아래 부분 수정

.motsa-faq-question{
font-size:16px;
}

---

 

왜 FAQ가 중요한가?

생각보다 많은 홈페이지가 방문자를 설득하기 전에 이탈시키고 있습니다.

방문자는 문의하기 전에 반드시 궁금한 내용을 확인합니다.

FAQ는 단순한 질문 모음이 아니라 문의 전환을 돕는 장치입니다.

특히 홈페이지 제작, 병원, 법률사무소, 제조업, B2B 기업 홈페이지에서는 FAQ만 잘 구성해도 상담 문의가 늘어나는 경우가 많습니다.

---

 

마무리

이번 코드는 아임웹에서 쉽게 적용할 수 있는 FAQ 아코디언 디자인입니다.

HTML, CSS, JS만으로 제작되었기 때문에 별도 플러그인 없이 사용할 수 있으며, 모바일에서도 깔끔하게 동작합니다.

홈페이지 제작 시 FAQ 영역을 추가하고 싶다면 활용해 보세요.

---

 

홈페이지 제작이 필요하신가요?

믓아 스튜디오는 단순히 예쁜 디자인보다 방문자가 이해하기 쉽고 문의로 이어질 수 있는 구조를 우선 설계합니다.

병원, 법률사무소, 제조업, B2B 기업 홈페이지 제작 및 아임웹 리디자인을 진행하고 있습니다.

포트폴리오를 참고하시고 편하게 문의해 주세요.

 

믓아 스튜디오