워드프레스 7.1 반응형 스타일, 기존 CSS와 충돌 없이 적용하는 순서

핵심만 먼저

워드프레스 7.1은 블록의 스타일을 기본 화면, 태블릿, 모바일 범위에 맞춰 편집할 수 있는 반응형 기능을 제공합니다. 기본 스타일 위에 태블릿과 모바일 값이 덮이는 구조이므로, 작은 화면부터 임의로 수정하면 기존 테마 CSS와 우선순위가 꼬일 수 있습니다. 업데이트 뒤에는 사이트 전체를 다시 꾸미지 말고 핵심 CTA·가격표·2열 섹션을 기본→태블릿→모바일 순서로 점검하는 편이 안전합니다.

7.1 반응형 스타일은 무엇인가요

WordPress 7.1의 반응형 블록 스타일은 같은 블록이 화면 너비에 따라 다른 간격, 글자 크기, 배치 값을 갖도록 편집기에서 지정하는 기능입니다. 이전에도 테마 CSS나 사용자 정의 CSS로 미디어 쿼리를 만들 수 있었지만, 7.1에서는 편집 화면과 `theme.json`에서 반응형 값을 더 직접 다룰 수 있습니다.

공식 개발 문서에 따르면 기본 스타일은 모든 화면에 먼저 적용되고, Tablet과 Mobile 값이 해당 범위에서 이를 덮어씁니다. 기본 viewport는 Mobile이 480px 이하, Tablet이 480px 초과에서 782px 이하입니다. 테마는 이 기준을 `px`, `em`, `rem` 단위로 조정할 수 있지만 별도의 `@desktop` 키를 두는 방식은 아닙니다.

오늘 확인할 이슈와 근거

업데이트 직후 가장 먼저 생길 수 있는 문제는 새 기능 자체보다 기존 CSS와의 중복입니다. 테마나 페이지 빌더가 이미 768px, 1024px 같은 자체 breakpoint를 쓰고 있다면 WordPress의 기본 범위와 어긋날 수 있습니다. 같은 블록에 편집기 반응형 값과 사용자 CSS가 동시에 적용되면 어느 규칙이 최종 화면을 이기는지 찾기 어려워집니다.

또 하나의 중요한 점은 반응형 편집 UI를 비활성화한다고 저장된 값과 생성 CSS가 자동으로 없어지지는 않는다는 사실입니다. 공식 개발 문서는 기능을 끈 뒤에도 이미 저장된 반응형 스타일이 남을 수 있다고 설명합니다. 시험하다가 UI만 끄고 원상복구됐다고 생각하면 운영 화면에는 변경이 계속 남을 수 있습니다.

따라서 7.1 반응형 기능은 ‘이제 CSS가 필요 없다’는 선언이 아닙니다. 테마가 가진 breakpoint, 블록에 저장된 값, 사용자 정의 CSS의 역할을 먼저 나눠야 합니다. 특히 결제·문의 CTA처럼 첫 화면 접근성이 중요한 요소는 세 화면 범위에서 직접 확인해야 합니다.

사장님 실무 적용 5단계

1. 운영 사이트를 수정하기 전에 스테이징이나 백업 가능한 복제 환경을 준비합니다. 업데이트와 디자인 변경을 한 번에 묶지 마세요.
2. 테마와 페이지 빌더가 쓰는 breakpoint를 확인하고, WordPress 기본 Mobile·Tablet 범위와 표로 비교합니다.
3. 기본 화면에서 콘텐츠 폭, 글자 크기, 간격을 먼저 정합니다. 그다음 태블릿, 마지막에 모바일에서 꼭 필요한 값만 덮어씁니다.
4. 핵심 CTA, 가격표, 2열 서비스 소개, 메뉴를 실제 브라우저 너비에서 점검합니다. 편집기 미리보기만으로 합격시키지 마세요.
5. 문제가 생기면 반응형 UI를 끄는 것으로 끝내지 말고 블록에 저장된 스타일과 생성 CSS, 사용자 정의 CSS를 각각 확인합니다.

검수표에는 ‘예쁘다’ 대신 행동 가능한 기준을 적는 편이 좋습니다. 버튼이 첫 화면 안에 있는가, 두 열이 좁은 화면에서 읽는 순서대로 쌓이는가, 가격과 단위가 분리되지 않는가, 가로 스크롤이 생기지 않는가를 확인하면 사장님도 결과를 판단할 수 있습니다.

흔한 실수

• 모바일 값을 먼저 만들고 기본 스타일과 태블릿 값을 나중에 덮습니다.
• 테마·페이지 빌더·WordPress가 서로 다른 breakpoint를 써도 그대로 둡니다.
• 편집기 미리보기 한 장만 보고 실제 브라우저 검수를 생략합니다.
• 기능 UI를 끄면 저장된 반응형 값도 삭제된다고 생각합니다.
• 업데이트, 테마 변경, 전체 페이지 재디자인을 같은 날 진행합니다.

제스토코스트의 판단

반응형 기능의 가치는 CSS를 없애는 데 있지 않습니다. 자주 바꾸는 콘텐츠 영역의 규칙을 편집자가 이해할 수 있는 위치로 옮기는 데 있습니다. 반대로 전역 레이아웃과 복잡한 컴포넌트까지 모두 편집기 값으로 옮기면 관리 위치만 늘어날 수 있습니다.

사장님 사이트에서는 매출과 문의에 직접 연결되는 몇 개 요소부터 적용하는 것이 맞습니다. 핵심 CTA와 가격표가 세 화면에서 안정적으로 보이면 다음 섹션으로 넓히고, 기존 CSS가 잘 작동하는 영역은 이유 없이 다시 만들지 마세요. 작은 회귀 점검을 반복하는 것이 한 번의 전면 개편보다 안전합니다.

자주 묻는 질문

기본 Mobile과 Tablet 범위는 어떻게 되나요?

공식 개발 문서의 기본값은 Mobile 480px 이하, Tablet 480px 초과에서 782px 이하입니다. 다만 테마가 viewport를 바꿀 수 있으므로 실제 사이트의 `theme.json`과 테마 문서를 확인해야 합니다.

데스크톱 전용 값을 따로 넣을 수 있나요?

별도 `@desktop` 키를 쓰는 구조가 아니라 기본 스타일이 모든 화면에 적용되고 Tablet·Mobile에서 필요한 값이 덮이는 방식입니다. 따라서 기본값을 데스크톱 포함 공통 기준으로 설계하세요.

반응형 기능을 끄면 변경이 모두 사라지나요?

아닙니다. 공식 문서는 UI를 비활성화해도 이미 저장된 반응형 스타일과 생성 CSS가 남을 수 있다고 설명합니다. 블록 저장값과 실제 출력 CSS를 별도로 확인해야 합니다.

출처

• WordPress 공식 뉴스: WordPress 7.1 Mary Lou
• WordPress Core: 7.1 반응형 블록 스타일과 viewport 설정
• WordPress Core: WordPress 7.1 Field Guide
• WordPress Core: 2026년 8월 26일 개발 회의 안건

CTA

오늘 사이트에서 문의 버튼, 가격표, 2열 섹션 한 곳씩만 골라 데스크톱·태블릿·모바일에서 확인해 보세요. 문제가 있다면 새 CSS를 더하기 전에 기존 breakpoint와 저장된 반응형 값이 겹치는지부터 찾으시기 바랍니다.

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