워드프레스 7.1 반응형 스타일, 기존 CSS를 지우기 전에 6화면부터 비교하세요

핵심만 먼저

WordPress 7.1은 Site Editor에서 블록의 모바일·태블릿 스타일을 직접 조정하는 기능을 제공합니다. 코드 없이 여백·글자·색상·배경·테두리·레이아웃을 화면 크기별로 바꿀 수 있어 편리합니다. 그러나 업데이트 직후 기존 미디어쿼리 CSS를 지우면 테마, 플러그인, 사용자 정의 블록이 서로 다른 방식으로 반응형 값을 적용해 화면이 깨질 수 있습니다. 먼저 홈·글·상품의 모바일과 태블릿 6화면을 비교한 뒤 한 영역씩 옮기는 것이 안전합니다.

7.1 반응형 스타일은 무엇이 달라졌나요

WordPress 공식 발표는 Global Styles와 개별 블록 설정에서 화면 크기별 스타일을 지정하고, 편집기에서 여러 viewport를 미리 볼 수 있다고 설명합니다. 공식 개발 문서는 기본 desktop 스타일 위에 `@tablet`과 `@mobile` 값을 덮어쓰는 구조를 안내합니다. 별도의 `@desktop` 키는 없으며, 재정의하지 않은 속성은 기본 스타일을 이어받습니다.

기본 breakpoint는 모바일 480px, 태블릿 782px로 안내됐고 테마가 `settings.viewport`에서 조정할 수 있습니다. 하지만 모든 블록이 똑같이 지원되는 것은 아닙니다. 표준 block supports를 쓰는 블록은 여러 스타일을 지원하지만, 자체 컨트롤로 CSS를 출력하는 사용자 정의 블록은 별도 대응이 필요할 수 있습니다.

오늘 이슈와 공식 근거

WordPress 7.1 “Mary Lou” 공식 글은 반응형 스타일을 주요 기능으로 소개합니다. 8월 개발자 정리에서는 typography, color, background, border, dimensions, spacing, layout 같은 표준 지원 범위와 사용자 정의 컨트롤의 예외를 구분합니다. breakpoint 값은 `px`, `em`, `rem` 같은 길이여야 하며 잘못된 값이나 모바일보다 작거나 같은 태블릿 값은 기대대로 적용되지 않을 수 있습니다.

또한 7.1은 버튼과 내비게이션 링크의 hover·focus·active 상태도 다룹니다. PC 마우스 화면만 확인하면 모바일 터치, 키보드 포커스, 현재 메뉴 상태가 빠집니다. 반응형 변경은 단순 디자인 수정이 아니라 접근성과 전환 동선까지 포함한 회귀검수 작업입니다.

사장님 실무 적용 6단계

1. 업데이트 전 화면을 저장합니다. 홈, 대표 글, 상품·예약·문의 페이지를 모바일 390px과 태블릿 768px에서 캡처합니다.
2. 기존 반응형 출처를 찾습니다. 테마 추가 CSS, child theme, 페이지빌더, 블록 설정, 플러그인의 미디어쿼리를 목록으로 만듭니다.
3. 한 블록만 시험합니다. 가장 단순한 Group 또는 Heading 블록 하나에 모바일 여백을 적용하고 실제 화면과 편집기 미리보기를 비교합니다.
4. 6화면을 다시 봅니다. 홈·글·전환 페이지 각각 모바일·태블릿을 확인합니다. 메뉴, CTA, 폼, 표, 이미지 잘림을 함께 봅니다.
5. 중복 CSS를 표시만 합니다. 새 설정이 정상이라고 해서 기존 CSS를 바로 삭제하지 말고, 어느 선택자와 속성이 겹치는지 주석과 작업표에 남깁니다.
6. 작은 묶음으로 제거합니다. 여백 한 종류처럼 되돌리기 쉬운 범위만 없애고 캐시를 갱신한 뒤 다시 6화면을 비교합니다.

예를 들어 기존 CSS가 768px 이하에서 버튼 폭을 100%로 만들고, 7.1 모바일 설정이 같은 버튼에 고정 폭을 주면 480~768px 사이에서 예상치 못한 우선순위가 생길 수 있습니다. 편집기 한 화면만으로는 발견하기 어렵습니다.

흔한 실수

• 업데이트 후 기존 미디어쿼리를 한꺼번에 삭제합니다.
• 편집기 모바일 미리보기만 보고 실제 브라우저를 확인하지 않습니다.
• 표준 블록과 사용자 정의 블록이 같은 지원 범위를 가진다고 생각합니다.
• 모바일과 태블릿 breakpoint 순서를 뒤집습니다.
• hover만 확인하고 focus-visible과 터치 상태를 놓칩니다.

제스토코스트의 판단

7.1 반응형 스타일은 CSS를 없애는 기능이 아니라 반응형 책임을 어디에 둘지 다시 선택하는 기능입니다. 새 글과 단순 블록은 Site Editor로 관리하고, 복잡한 컴포넌트는 테마나 플러그인의 검증된 CSS에 남겨도 됩니다. 한 사이트 안에서도 책임을 나눌 수 있습니다.

사장님 사이트에서 중요한 것은 최신 기능 사용 여부보다 주문·문의·예약 버튼이 모든 화면에서 보이는지입니다. 그래서 검수 순서는 기능 목록이 아니라 전환 동선 중심이어야 합니다. 되돌릴 수 있는 작은 변경이 한 번에 옮기는 대공사보다 빠릅니다.

자주 묻는 질문

WordPress 7.1이면 기존 반응형 CSS가 자동 변환되나요?

아닙니다. 기존 CSS는 그대로 남고 새 block style 출력과 함께 적용될 수 있습니다. 중복과 우선순위를 직접 검수해야 합니다.

모든 블록이 모바일·태블릿 설정을 지원하나요?

표준 block supports를 사용하는 블록은 폭넓게 지원되지만 사용자 정의 컨트롤은 별도 구현이 필요할 수 있습니다. 사용하는 블록별로 확인해야 합니다.

breakpoint를 바꿔도 되나요?

테마는 `settings.viewport`에서 조정할 수 있습니다. 다만 기존 CSS와 페이지빌더 breakpoint도 함께 맞추지 않으면 경계 구간이 생길 수 있습니다.

출처

• WordPress News: WordPress 7.1 Mary Lou
• WordPress Developer Blog: 2026년 8월 개발자 변경

CTA

추가 CSS를 지우기 전에 홈·글·전환 페이지의 390px과 768px 화면을 먼저 저장하세요. 그다음 가장 단순한 블록 한 개만 7.1 방식으로 옮겨 차이를 비교하시기 바랍니다.

편집 고지: 이 글은 공식 자료 조사와 초안 정리에 자동화 도구를 활용했으며, 공개 전 출처·표현·실무 적합성을 검수합니다.