워드프레스 블록 에디터에서 코딩 없이 그리드 정렬 없이 자유 배치하는 법

2025-06-26

많은 사용자들은 워드프레스 블록 에디터를 사용할 때, 콘텐츠 배치의 한계를 경험하게 됩니다. 기본적으로 블록은 수직 정렬 중심의 구조이기 때문에, 사용자가 원하는 자유로운 위치나 겹침, 미세한 이동 등이 어렵다고 느끼게 됩니다. 특히 이미지와 텍스트를 창의적으로 배치하고 싶은 사용자들에게는 이러한 제약이 창의력을 제한하는 요인으로 작용합니다. 하지만 그리드 시스템을 우회하거나, 간단한 CSS 트릭을 통해 자유로운 블록 배치가 가능한 방법들이 존재합니다. 이 글에서는 별도의 페이지 빌더나 코딩 지식 없이도, 워드프레스 기본 블록 에디터만으로 블록의 위치를 자유롭게 설정할 수 있는 실제 사례와 함께 그 방법을 소개합니다.

Table of Contents

1. 블록 에디터의 기본 구조 이해하기

워드프레스의 블록 에디터(Gutenberg)는 콘텐츠를 수직적으로 구성하는 데 최적화되어 있습니다. 기본적으로 블록들은 한 줄씩 쌓이는 구조로 되어 있고, 각 블록은 부모-자식 관계의 레이아웃을 따릅니다. 열(Column) 블록을 사용하더라도, 여전히 ‘격자’에 가까운 정렬 방식으로 제한됩니다. 이러한 특성은 간단한 블로그 글쓰기에는 좋지만, 창의적이고 비정형적인 배치를 하고자 할 때는 한계를 드러냅니다.

2. 그룹 블록을 활용한 미세 배치 기법

첫 번째 해결책은 그룹 블록을 이용하는 것입니다. 사용자는 콘텐츠 요소(텍스트, 이미지 등)를 그룹 블록으로 감싼 후, 내부 여백(Padding)과 외부 여백(Margin)을 개별적으로 조절할 수 있습니다.

예시

텍스트와 이미지 블록을 하나의 그룹으로 감싼 후, 이미지에만 margin-left를 주면 좌우 비대칭 배치 가능
‘간격 조절’ 블록(Spacer)을 사용하여 상하 위치도 미세 조정 가능

이 방식은 시각적으로 큰 변화를 줄 수 있으면서도, 별도의 CSS나 플러그인을 사용하지 않아도 된다는 장점이 있습니다.

3. 사용자 정의 CSS 클래스 삽입으로 고급 배치 구현

더 정밀한 배치를 원할 경우, 블록 설정에서 추가 CSS 클래스를 설정한 뒤, 커스터마이저 또는 테마 설정의 ‘추가 CSS’ 항목에 스타일을 삽입할 수 있습니다.

단계별 따라하기

실제 제가 만든 소스를 css 창에 추가해보시면서 따라해보시면 이해가 빠릅니다. css 추가 창에서 소스를 추가하면 바로 옆 칸에 실시간으로 수정되는 모습이 보이기 때문에 직접 따라해보시길 권장합니다.

블록 선택 → 고급 설정 → 추가 CSS 클래스에 custom-position 입력
‘외모 → 사용자 정의하기 → 추가 CSS’에 아래 코드 삽입

.custom-position {
  margin-left: 30px;
  transform: translateY(-15px);
  z-index: 2;
  position: relative;
}

이 방법을 활용하면 이미지 겹치기, 텍스트 띄우기, 미세 이동 등 원하는 배치를 자유롭게 할 수 있습니다.

4. 플러그인 없이도 가능한 겹침, 정렬 우회법

특정 효과(예: 이미지가 텍스트 위에 떠있는 형태)를 위해 페이지 빌더를 사용하는 경우가 많지만, 워드프레스 기본 블록만으로도 상당히 다양한 연출이 가능합니다.

참고로, 저의 경우에 초보때 각종 플러그인을 많이 깔았는데 플러그인끼리 충돌이 발생하거나 업데이트하지 않는 경우 작동하지 않는 것도 있었습니다. 그래서 플러그인을 최소로 설치하며 플러그인 없이 구현하는게 중요하다고 생각합니다.

Spacer 블록으로 여백 확보 후 겹치기 구현
마이너스 margin 사용 시 위 블록과 겹치는 효과 가능
z-index를 활용하여 블록 간 계층 지정 가능

이러한 방식은 사이트 속도나 안정성 측면에서도 매우 유리합니다.

5. 반응형 디자인까지 고려하는 배치 전략

요즘은 모바일 기기 사용이 많기 때문에 기기 사이즈에 따라 보기 좋게 구성해야 합니다. 자유 배치를 구현하면서도, 모바일 반응형까지 고려해야 합니다. 미디어 쿼리를 몰라도, 퍼센트 단위와 max-width 속성을 활용하면 어느 정도 해결이 가능합니다.

예시 CSS

.custom-position {
  max-width: 90%;
  margin: auto;
  transform: translateY(-10%);
}

이는 화면 너비에 따라 자동으로 줄어들며 배치가 깨지지 않는 구조를 유지시켜 줍니다.

이번 포스팅에서는 블록에디터 없이 간단하게 css로 화면배치를 알아봤습니다. 워드프레스 블록 에디터는 단순한 에디터처럼 보이지만, 설정을 조금만 응용하면 창의적인 배치가 충분히 가능합니다. 사용자는 그리드에 얽매이지 않고, 그룹 블록과 CSS 조합을 통해 더 자유로운 콘텐츠 배치를 시도할 수 있습니다. 별도의 플러그인 없이도 구현 가능한 이 방식은 속도, 접근성, 유지관리 측면에서 매우 효과적인 전략이 될 수 있습니다. 한번 직접 따라하면서 공부해보시기 바랍니다.