워드프레스 7.1 탭 블록 사용법과 CSS 꾸미기, FAQ에 적용하는 기준

워드프레스에서 요금제나 제품 사양, FAQ를 한 페이지에 모두 펼쳐 놓으면 내용이 길어지고 핵심을 찾기 어려워집니다. 워드프레스 7.1의 탭(Tabs) 블록은 이런 정보를 주제별로 나눠 한 영역 안에 정리하는 기능입니다. 엘리멘터 같은 페이지 빌더를 추가하지 않아도 구텐베르크 블록 편집기에서 사용할 수 있다는 점이 가장 큰 변화입니다.

워드프레스 탭 블록은 어떤 기능인가

탭 블록은 상단에 여러 개의 탭 제목을 배치하고, 제목을 클릭했을 때 해당 콘텐츠 패널만 표시하는 블록입니다. 예를 들어 ‘스타터·프로·터보’처럼 요금제를 구분하거나, ‘제품 정보·주요 기능·사양’처럼 제품 설명을 나눌 수 있습니다.

한 화면에 모든 정보를 동시에 노출하지 않기 때문에 비교 대상이 많아도 페이지가 지나치게 길어지지 않습니다. 다만 탭 안에 들어간 내용은 처음부터 모두 보이지 않으므로, 중요한 안내나 검색 사용자가 반드시 읽어야 하는 정보까지 탭 속에 숨기는 방식은 적합하지 않을 수 있습니다.

탭 콘텐츠에는 일반 문단뿐 아니라 이미지, 표, 목록 등 다른 블록도 넣을 수 있습니다. 따라서 단순한 텍스트 전환 기능이라기보다, 하나의 콘텐츠 영역을 여러 주제별 패널로 나누는 레이아웃에 가깝습니다.

삽입 조건과 추가 방법

탭 블록을 사용하려면 워드프레스 7.1 이상이어야 하며, 블록 편집기인 구텐베르크가 기본 편집기로 작동해야 합니다. 워드프레스 5.0부터 블록 편집기가 기본 편집기로 채택되었지만, 클래식 편집기를 사용 중이라면 탭 블록이 바로 나타나지 않을 수 있습니다.

블록 삽입기에서 찾기

페이지나 글 편집 화면에서 블록 삽입기 버튼을 누른 뒤 디자인 영역에서 탭 블록을 찾으면 됩니다. 검색창에 Tabs를 입력해도 찾을 수 있습니다. 한국어 관리자 화면에서는 이 블록이 ‘탭들’로 번역되어 표시될 수 있어 검색 결과를 찾지 못하는 경우가 있습니다.

슬래시 명령으로 넣기

더 빠른 방법은 빈 문단에서 /탭들을 입력하는 것입니다. 자동 완성 목록에서 탭 블록을 선택하면 기본 탭 구조가 삽입됩니다. 삽입한 뒤 각 탭의 제목을 지정하고 패널에 내용을 작성하면 됩니다.

탭 제목과 콘텐츠를 편집하는 순서

기본으로 생성된 탭에는 탭 제목과 콘텐츠 영역이 함께 표시됩니다. 제목을 ‘설치 및 기본 설정’, ‘보안 및 백업’처럼 짧고 구분하기 쉽게 정한 뒤, 해당 주제에 맞는 내용을 패널 안에 배치합니다.

탭을 더 만들려면 블록 상단에 있는 탭 추가 기능을 사용합니다. 반대로 필요하지 않은 항목은 탭 제거 기능으로 삭제할 수 있습니다. 각 패널에는 이미지나 표도 넣을 수 있으므로, 제품 사양처럼 행과 열이 중요한 정보는 표 블록을 활용하는 편이 읽기 좋습니다.

예를 들어 호스팅 요금제를 탭으로 구성한다면 각 패널에 가격, 웹사이트 수, 스토리지, 메모리, 백업 횟수, SSL, 고객 지원 등 실제 선택에 영향을 주는 정보를 넣을 수 있습니다. 제품 페이지라면 제품명과 출시일은 제품 정보 탭에, 카메라·성능·멀티태스킹 설명은 주요 기능 탭에, 디스플레이·배터리·통신 규격은 사양 탭에 배치하는 식입니다.

탭 제목은 너무 길게 만들지 않는 것이 좋습니다. 모바일 화면에서는 탭이 한 줄에 모두 들어가지 않을 수 있기 때문에, 긴 문장을 제목으로 쓰면 줄바꿈이나 가로 스크롤이 생길 수 있습니다. 제목만 보고 패널의 내용을 예상할 수 있도록 핵심 단어 위주로 정리하는 것이 안전합니다.

색상과 기본 스타일 설정

탭 블록을 선택하면 오른쪽 블록 설정 패널에서 탭 제목의 텍스트 색상과 배경색을 조정할 수 있습니다. 사이트의 기본 색상과 대비가 충분한 조합을 사용해야 활성 탭과 비활성 탭을 쉽게 구분할 수 있습니다.

기본 설정만으로도 기능은 작동하지만, 테마의 버튼 스타일이나 링크 스타일이 탭에 함께 적용되면 예상하지 못한 테두리, 밑줄, 여백이 나타날 수 있습니다. 특히 탭 제목은 일반 링크가 아니라 role="tab" 속성을 가진 버튼 형태로 출력되므로, 테마 CSS가 버튼 요소에 적용되는지 확인해야 합니다.

탭 패널의 내부 여백과 줄 간격도 확인할 부분입니다. 표나 이미지가 들어간 패널의 여백이 지나치게 좁으면 답답해 보이고, 반대로 모바일에서 패딩이 너무 크면 실제 콘텐츠 영역이 줄어듭니다. 데스크톱에서만 확인하지 말고 스마트폰 화면에서도 탭 제목이 잘 눌리는지 점검해야 합니다.

사용자 지정 CSS로 디자인 바꾸기

더 구체적인 디자인이 필요하면 탭 블록에 CSS 클래스를 지정하고 추가 CSS에서 해당 클래스만 선택하면 됩니다. 먼저 탭을 선택한 상태에서 툴바의 ‘상위 블록 선택’ 아이콘을 눌러 전체 탭 블록을 선택합니다. 이후 블록 설정의 ‘고급’ 영역에 있는 ‘추가 CSS 클래스’에 tab-1 같은 이름을 입력합니다.

그 다음 관리자의 모양 → 사용자 정의 → 추가 CSS에 스타일을 작성합니다. 예를 들어 다음처럼 탭 목록을 가로로 배치하고, 활성 탭의 색상을 다르게 지정할 수 있습니다.

.tab-1 .wp-block-tab-list {
  display: flex;
  gap: 6px;
  padding: 10px;
  background: #eef2f8;
}

.tab-1 .wp-block-tab-list button[role="tab"] {
  padding: 9px 18px;
  border: 0;
  border-radius: 7px;
  background: #c2d3e8;
  color: #274b6d;
}

.tab-1 .wp-block-tab-list button[role="tab"][aria-selected="true"] {
  background: #1c4870;
  color: #fff;
}

이 예시는 공통 구조와 색상 테마를 분리하는 방식입니다. tab-1은 딥 블루 계열, tab-2는 웜 크림과 코럴 계열로 지정해 같은 사이트 안에서도 용도별로 다른 분위기를 줄 수 있습니다. 코어 블록에 표시되는 활성 상태의 장식선을 숨기고 싶다면 ::before, ::after 의사 요소를 조정할 수도 있지만, 테마마다 구조가 다를 수 있으므로 적용 후 실제 화면을 확인해야 합니다.

AI에게 CSS 수정을 요청할 때는 현재 사용 중인 클래스명, 원하는 색상, 모바일 동작, 테마 이름을 함께 전달하는 편이 결과가 낫습니다. 코드를 바로 붙여 넣기보다 먼저 미리보기에서 활성 상태, 키보드 이동, 좁은 화면의 가로 넘침을 확인해야 합니다.

탭과 토글·아코디언은 어떻게 다른가

FAQ를 정리할 때는 탭과 토글 또는 아코디언을 혼동하기 쉽습니다. 탭은 상위 주제별로 콘텐츠 묶음을 전환하는 데 적합합니다. ‘설치’, ‘보안’, ‘속도’처럼 카테고리를 나눌 때 자연스럽습니다.

토글은 질문과 답변처럼 각 항목을 독립적으로 열고 닫는 방식입니다. 여러 항목을 동시에 펼쳐 둘 수 있습니다. 아코디언은 보통 한 항목을 열면 기존에 열려 있던 항목이 닫히는 구조입니다. 질문이 많고 한 번에 하나의 답변만 확인하게 하려면 아코디언이 더 알맞을 수 있습니다.

	탭	토글	아코디언
전환 단위	상위 주제 묶음	항목 하나하나	항목 하나하나
동시에 펼치기	불가(한 패널만)	가능	불가(하나 열면 닫힘)
어울리는 경우	설치·보안·속도처럼 카테고리가 뚜렷할 때	여러 답변을 나란히 두고 볼 때	질문이 많고 한 번에 하나만 볼 때
주의할 점	중요한 정보가 가려짐	모두 펼치면 페이지가 길어짐	이전 답변이 닫혀 비교가 어려움

검색 노출과 사용성도 고려해야 합니다. 방문자가 모든 FAQ를 빠르게 훑어봐야 한다면 내용을 탭 안에 감추기보다 일반 본문이나 토글을 사용하는 편이 나을 수 있습니다. 반대로 카테고리가 뚜렷하고 각 그룹의 콘텐츠가 길다면 탭이 페이지 구조를 깔끔하게 만드는 데 도움이 됩니다.

실제 적용 전에 확인할 항목

탭 블록은 기능 자체보다 어떤 정보를 숨기고 어떤 정보를 처음 보여줄지 정하는 일이 중요합니다. 가격, 지원 여부, 핵심 조건처럼 선택에 직접 영향을 주는 내용은 기본적으로 보이는 영역에 배치하고, 세부 사양이나 부가 설명을 탭으로 분리하는 구성이 이해하기 쉽습니다.

또한 탭 제목이 많아질수록 모바일 사용성이 떨어질 수 있습니다. 제목 수를 줄이거나 짧게 만들고, 클릭 영역을 충분히 확보해야 합니다. CSS 애니메이션을 추가할 때도 전환 효과가 콘텐츠 확인을 방해하지 않는지 살펴야 합니다.

• 선택에 직접 영향을 주는 정보(가격·지원 여부·핵심 조건)가 탭 밖에 있는가
• 제목만 보고 패널 내용을 예상할 수 있는가
• 모바일에서 탭 제목이 줄바꿈되거나 가로로 넘치지 않는가
• 테마 CSS가 role="tab" 버튼에 예상치 못한 테두리·밑줄·여백을 주지 않는가
• 키보드로 탭 사이를 이동할 수 있는가

워드프레스 7.1 미만이거나 클래식 편집기를 계속 사용해야 한다면 기본 탭 블록 대신 테마 기능, 페이지 빌더, 별도 플러그인 등을 검토해야 합니다. 다만 외부 도구를 추가하면 디자인 선택지는 늘어나는 대신 플러그인 의존성, 업데이트 호환성, 성능 관리가 필요해집니다.

새 탭 블록은 요금제 비교, 제품 설명, 카테고리형 FAQ처럼 콘텐츠의 구분이 명확한 페이지에서 특히 유용합니다. 반면 중요한 정보를 감추거나 제목만으로 내용을 파악하기 어려운 구조를 만들면 오히려 탐색성이 떨어집니다. 삽입 후에는 데스크톱과 모바일에서 직접 각 탭을 열어 보고, 정보가 빠지지 않았는지와 CSS 충돌이 없는지 함께 확인하는 것이 좋습니다.