어코디언·FAQ 요소

수강 신청 페이지나 상품 소개 페이지를 만들다 보면 방문자가 늘 묻는 질문이 있습니다. 결제는 어떻게 하는지, 기간은 얼마인지, 환불은 어떻게 하는지 같은 내용을 본문에 모두 늘어놓으면 페이지가 길어집니다. 에디터의 어코디언과 FAQ 요소는 질문 줄만 먼저 보여 주고, 방문자가 누른 질문의 답변만 펼쳐 보여 줍니다. 이 글에서는 두 요소를 넣고, 질문과 답변을 고치고, 항목을 늘리는 방법을 안내합니다.

1. 어코디언과 FAQ는 어디에 있나요

편집 화면 왼쪽 레일에서 요소 추가를 열고 콘텐츠 묶음으로 내려가면 어코디언과 FAQ 항목이 있습니다. 두 요소를 넣을 섹션을 먼저 선택한 뒤 항목을 누르면 그 섹션 안에 바로 들어갑니다.

두 요소의 모양은 조금 다릅니다. 어코디언은 연한 회색 질문 줄 두 개가 각각 테두리 상자에 담긴 형태이고, FAQ는 회색 카드 위에 자주 묻는 질문이라는 제목이 있고 그 아래에 흰색 질문 상자가 하나 놓인 형태입니다. 질문 하나와 그 답변이 항목 하나를 이룹니다.

2. 펼치고 접기, 답변 고치기

편집 화면에서도 질문 줄을 누르면 답변이 펼쳐지고, 다시 누르면 접힙니다. 답변을 고치려면 먼저 질문 줄을 눌러 펼친 뒤 답변 글을 두 번 누릅니다. 글 편집 상태가 되면 Ctrl+A로 전체를 선택해 새 문구를 입력하고 Esc를 누르면 끝납니다. 항목마다 펼쳐 가며 같은 방법으로 답변을 채웁니다. FAQ의 자주 묻는 질문 제목도 같은 방법으로 고칠 수 있습니다.

3. 질문 고치기와 항목 늘리기

질문 줄의 문구와 항목 수는 섹션 소스에서 고칩니다. 요소가 들어 있는 섹션의 빈 곳을 눌러 선택하면 오른쪽 위에 톱니바퀴 단추(섹션 설정)가 나타나고, 누르면 펼쳐지는 아이콘 줄에서 HTML 소스 편집을 고릅니다. 섹션 소스 편집 창이 열립니다.

소스에서 항목 하나는 details 태그 한 덩어리이고, 그 안의 summary 태그가 질문 줄, 뒤따르는 div가 답변입니다. 질문 문구는 summary 안의 글자를 바꾸면 됩니다. 항목을 늘리려면 details부터 </details>까지 한 덩어리를 복사해 아래에 붙여 넣고 질문과 답변을 바꿉니다. 항목 사이 간격은 마지막 항목을 뺀 각 details 태그의 margin-bottom 값이 만드므로, 새 항목을 맨 아래에 붙일 때는 그 앞 항목에 같은 값이 있는지 확인합니다. 고친 뒤 적용(또는 Ctrl+Enter)을 누르면 화면에 반영됩니다.

색도 소스에서 바꿉니다. 질문 줄은 background(바탕색)와 color(글자색), 상자는 border(테두리) 값으로 이루어져 있어서, 브랜드 색에 맞춰 이 값들을 고치면 질문 줄의 색이 바뀝니다.

4. FAQ 요소 넣기

FAQ도 같은 방법으로 넣고 고칩니다. 아래는 다른 섹션에 FAQ를 넣고, 제목과 질문과 답변을 바꾸고, 질문 하나를 더한 모습입니다. 첫 번째 질문은 펼쳐 둔 상태입니다.

5. 저장하고 확인하기

상단의 저장을 누르면 질문과 답변이 그대로 남습니다. 라이브 미리보기에서는 저장된 내용을 배포 화면과 같은 모습으로 볼 수 있고, 질문 줄을 눌러 펼치고 접는 동작을 직접 시험할 수 있습니다. 항목은 서로 독립적이어서 여러 질문을 동시에 펼쳐 둘 수 있습니다.

저장하는 순간의 펼침 상태가 방문자가 처음 보는 상태가 됩니다. 첫 질문을 열어 둔 채로 보여 주고 싶으면 그 항목만 펼친 채로 저장하고, 모든 질문을 접은 채로 시작하려면 모두 접은 상태에서 저장합니다. 모바일 보기 단추로 전환하면 질문 상자가 화면 폭에 맞춰 줄어든 모습을 볼 수 있습니다.

6. 이렇게 활용해 보세요

• 수강 신청 폼 바로 위에 결제·기간·환불에 대한 질문을 어코디언으로 모아 두세요.
• 상품 소개 페이지의 마지막 섹션에 FAQ를 두고, 구매 전에 가장 많이 받는 질문부터 위에 적어 보세요.
• 질문은 방문자가 실제로 입력할 법한 문장으로 쓰면 찾기 쉽습니다.
• 답변은 방문자가 가장 먼저 알고 싶은 내용을 첫 문장에 적어 보세요.
• 첫 번째 항목만 펼쳐 둔 채 저장하면, 질문을 누르면 답변이 열린다는 것을 방문자에게 보여 줄 수 있습니다.

7. 알아 두실 점

• 어코디언은 질문 두 개, FAQ는 질문 하나로 들어옵니다. 항목은 위의 소스 편집으로 늘리고 줄입니다.
• 어코디언과 FAQ는 질문과 답변을 펼치고 접어 보여 주는 표시용 요소입니다.
• 이 글의 화면은 모두 데스크탑 편집 화면 기준입니다.
• 고친 뒤에는 상단의 저장을 눌러야 다음에 열었을 때도 남습니다.

같은 콘텐츠 묶음의 뱃지·카드와 테이블 요소, 탭 요소는 별도 글에서 다룹니다.