프레젠테이션 모드 폰트 크기 문제 해결기

요약

프레젠테이션 모드에서 p만 커지고 h1~h6은 그대로였던 이유는 두 가지였습니다.

첫째, 기존 content.css가 h1~h6의 font-size를 직접 지정해두고 있었고, p는 그러지 않았습니다. 그래서 p만 기본 폰트 크기(1.5rem)를 상속받아 커졌습니다.

둘째, @layer utilities로 넣은 프레젠테이션 오버라이드는 unlayered CSS(content.css)보다 항상 우선순위가 낮습니다.

해결 방법은 Tailwind Typography를 스타일의 유일한 기준점으로 삼고, content.css에서 마크다운 관련 규칙을 제거하는 것이었습니다.

문제 상황

프레젠테이션 모드 버튼을 누르면 이런 현상이 생겼습니다.

p만 24px로 커짐
h1~h6은 기존 크기 유지
코드 블록 박스는 커지는데, 글씨는 11.67px로 작음
테이블 글씨는 14px로 더 작아짐

선택자 특이도는 충분한데 왜 적용되지 않는지 의문이 들었습니다.

원인 분석

1. p만 커지는 이유

content.css에서 헤딩은 font-size가 고정되어 있었고, p는 없었습니다.

/* content.css (기존) */
.markdown-body h1 { font-size: 2rem; }
.markdown-body h2 { font-size: 1.5rem; }
/* ... */
.markdown-body p { font-size: 없음 }

프레젠테이션 모드에서 기본 폰트를 1.5배로 올리면 p는 상속받아 커지지만, h1~h6은 이미 고정값이 있어서 상속이 끊깁니다.

2. `.prose-presentation`이 적용되지 않는 이유

@layer utilities로 정의한 프레젠테이션 규칙은 unlayered CSS보다 우선순위가 낮습니다. 결국 content.css가 이깁니다.

3. 코드 블록 글씨가 작았던 이유

react-syntax-highlighter는 인라인 스타일로 fontSize를 지정합니다. CSS !important로도 이기기 어렵습니다.

해결 방법

핵심은 하나입니다. Tailwind Typography를 유일한 스타일 기준점으로 만들고, 기존 CSS를 걷어내는 것입니다.

1. Tailwind Typography로 이관

tailwind.config.ts에 기존 마크다운 스타일을 통째로 옮겼습니다. 기본 모드(DEFAULT)와 프레젠테이션 모드(presentation)를 분리해 관리했습니다.

// tailwind.config.ts (요약)
const typographyContentBase = {
  css: {
    h1: { fontSize: '2rem', borderBottomWidth: '2px', borderBottomColor: '#0066cc' },
    h2: { fontSize: '1.5rem', borderBottomWidth: '1px', borderBottomColor: '#dddddd' },
    p: { marginTop: '0.75rem', marginBottom: '0.75rem' },
    li: { marginTop: '0.5rem', marginBottom: '0.5rem' },
    table: { fontSize: '1rem' },
    th: { fontSize: '1rem' },
    td: { fontSize: '1rem' },
    // 기존 content.css의 스타일을 그대로 이관
  },
}

const typographyPresentation = {
  css: {
    ...typographyContentBase.css,
    h1: { ...typographyContentBase.css.h1, fontSize: '3rem' },
    h2: { ...typographyContentBase.css.h2, fontSize: '2.25rem' },
    p:  { ...typographyContentBase.css.p,  fontSize: '1.5rem' },
    li: { ...typographyContentBase.css.li, fontSize: '1.5rem' },
    table: { ...typographyContentBase.css.table, fontSize: '1.5rem' },
    th: { ...typographyContentBase.css.th, fontSize: '1.5rem' },
    td: { ...typographyContentBase.css.td, fontSize: '1.5rem' },
  },
}

2. prose 적용 위치 통일

이전에는 MarkdownViewer 바깥에서 prose를 감싸고 있었고, content.css의 .markdown-body가 따로 존재했습니다.

이 이중 구조를 제거하고 MarkdownViewer가 prose를 직접 관리하도록 바꿨습니다.

<MarkdownViewer
  content={chapter.content}
  proseClassName="prose prose-presentation max-w-none"
  presentationMode
/>

3. 코드 블록은 컴포넌트에서 직접 제어

react-syntax-highlighter는 인라인 스타일이 우선이므로, 컴포넌트에서 직접 폰트를 지정했습니다.

const codeFontSize = presentationMode ? '1.125rem' : '1rem'

<SyntaxHighlighter
  customStyle={{ fontSize: codeFontSize }}
>

결과

원하는 목표대로 맞춰졌습니다.

요소	일반 모드	프레젠테이션 모드
h1	32px	48px (3rem)
h2	24px	36px (2.25rem)
h3	20px	30px (1.875rem)
p, li	16px	24px (1.5rem)
코드 블록	16px	18px (1.125rem)
테이블	16px	24px (1.5rem)

교훈

Tailwind Typography는 스타일의 유일한 기준점이 되어야 합니다. content.css로 스타일을 따로 관리하면 우선순위 싸움이 발생합니다.

Cascade Layer의 우선순위를 잊으면 안 됩니다. @layer utilities는 unlayered CSS보다 항상 낮습니다.

컴포넌트에 박힌 인라인 스타일은 CSS로 이길 수 없습니다. 코드 블록처럼 인라인 스타일을 쓰는 컴포넌트는 직접 제어하는 게 확실합니다.

점검 목록

비슷한 문제를 만났을 때 다음을 확인하세요.

prose 적용 위치를 한 곳으로 통일했는가?
기존 CSS가 Tailwind를 덮고 있지는 않은가?
Typography 기본값(예: table 0.875em)을 확인했는가?
인라인 스타일이 있는 컴포넌트를 사용하는가?

이 점검 목록만 기억하면, p만 커지는 이상 현상을 훨씬 빠르게 해결할 수 있습니다.