워드프레스 Layout Grid 플러그인 기능 및 사용 방법

• 플러그인 개요
  Layout Grid 블록은 Automattic에서 제공하는 Gutenberg 컨테이너 블록으로, 페이지나 포스트 내에서 콘텐츠를 일정한 그리드(격자) 위에 배치할 수 있도록 도와줍니다. 한 번 설정해 두면 데스크톱·태블릿·모바일 각각의 뷰포트에서 컬럼 수를 다르게 지정하여 반응형 레이아웃을 간편히 구현할 수 있습니다
• 주요 기능
  1. 반응형 브레이크포인트
     • 데스크톱: 기본 12컬럼
     • 태블릿: 기본 8컬럼
     • 모바일: 기본 4컬럼
       각 기기별로 ‘컬럼 수(Span)’, ‘여백(Offset)’, ‘거터(Gutter)’를 별도 설정 가능
  2. 컬럼 그룹화
     • 그리드 라인(Vertical line)을 묶어 1~4개 컬럼 단위로 콘텐츠 블록을 삽입
  3. 거터(Gutter) 조절
     • 컬럼 사이의 간격을 픽셀 단위 또는 비율로 자유롭게 조정
  4. 오프셋(Offset) 기능
     • 특정 컬럼을 시작 지점으로부터 몇 칸 띄울지 설정하여 레이아웃 변주 가능
  5. 고급 설정(Advanced)
     • CSS 클래스 추가, 인라인 스타일 적용, ARIA 레이블 등 접근성 및 커스터마이징 옵션 지원

• 설치 및 활성화
  1. 워드프레스 관리자 대시보드 → 플러그인 → 새로 추가 https://wordpress.com/plugins/layout-grid/korea-pop1.com
  2. 검색창에 “Layout Grid” 입력 → Layout Grid Block (by Automattic) 설치
  3. 설치 완료 후 활성화
  4. (Gutenberg 에디터 사용 시 별도 활성화 없이 블록 인서터에서 바로 사용 가능)
• 사용 방법
  1. 블록 추가
     • 글 편집 화면에서 ‘+ 블록 인서터’ → “Layout Grid” 선택
     • 또는 본문에 /layout 입력 후 Enter
  2. 그리드 설정
     • 처음 추가 시 컬럼 수(1~4) 선택
     • 사이드바(Block Settings)에서 언제든 변경 가능
  3. 콘텐츠 삽입
     • 각 컬럼 안의 ‘+’ 버튼 클릭 → 원하는 다른 블록(문단, 이미지, 버튼 등) 추가
  4. 툴바(블록 툴바)
     • 블록 선택 시 나타나는 상단 툴바에서
       • 블록 유형/스타일 변경
       • 가로 정렬(전체 너비·넓게·기본)
       • 반응형 뷰포트(데스크톱·태블릿·모바일) 즉시 전환
       • 수직 정렬(위·가운데·아래)
       • 추가 옵션(복제·고급 설정 등)
  5. 사이드바(Block Settings)
     • 우측 설정 패널에서
       • Layout: 컬럼 갯수, 행(Row) 간격
       • Responsive Breakpoints: 각 기기별 Span/Offset 설정
       • Gutter: 컬럼 사이 간격값
       • Advanced: 추가 CSS 클래스, ARIA 속성
• 고급 팁
  • 컬럼 병합: 동일 그리드 안에 중첩된 Layout Grid 블록을 넣어 복잡한 레이아웃 구현 가능
  • 내비게이션 그리드: 메뉴, 버튼 등을 일정한 그리드에 맞춰 나열할 때 유용
  • 반응형 미리보기: 상단 툴바의 디바이스 아이콘 클릭으로 즉시 레이아웃 확인
  • 커스텀 CSS 활용: Advanced 패널에 클래스명 부여 후 테마 CSS에서 세부 제어
• 주의 사항
  • 구텐베르크 에디터에서만 지원되며, 레거시 클래식 에디터 환경에서는 작동하지 않습니다.
  • 테마나 다른 레이아웃 관리 플러그인과 충돌 가능성이 있으니, 설치 후 레이아웃 깨짐을 확인하세요.

위 과정을 따라 하시면, 별도의 코드 작성 없이도 다양한 반응형 그리드 레이아웃을 손쉽게 구성하실 수 있습니다!

https://k-food-1.com/%EC%A0%80%EC%9E%A5%EC%86%8C/827