수식 블록

수학 및 과학 표기 — 분수, 지수, 아래첨자, 그리스 문자, 그리고 \ce{...}를 통한 화학식 — 을 실제 alt 텍스트가 있는 이미지로 서버 측에서 렌더링합니다. 어떤 이메일 클라이언트도 실제 수식을 조판할 수 없기 때문입니다.

작동 방식

이 블록은 작은 LaTeX 유사 표기 문자열(예: \frac{-b \pm \sqrt{b^2-4ac}}{2a})을 받아 GET /api/formula를 통해 서버 측에서 PNG로 렌더링합니다. 이는 분석 차트 블록이 이미 사용하는 것과 동일한, 완전한 자체 제작 래스터/PNG 인코딩 기반 위에 구축된 서명된 엔드포인트입니다: 클라이언트 측 수학 라이브러리는 전혀 관여하지 않으며, 렌더러 뒤에 어떤 npm 의존성도 없습니다.

수식의 내용은 작성된 순간 고정되며, 매 조회마다 새로 생성되어야 하는 카운트다운 GIF와는 다릅니다. 그래서 렌더링 요청 전체(표기, 표시 모드, 색상)가 URL 자체에 서명되며, 엔드포인트는 Firestore 읽기를 전혀 필요로 하지 않습니다 — 응답에는 장기 캐시 불변 헤더가 포함됩니다.

표기 문법은 분수, 지수(^), 아래첨자(_), 제곱근, 그리스 문자, 이름 있는 함수(\sin, \lim, \log 등), 집합/논리 기호(\forall, \in, \cup, \neg 등), 그리고 일반적인 연산자를 다룹니다. \left(/\right(는 인식되지만 내용에 맞게 자동으로 크기가 조절되지는 않고 일반 크기로 렌더링됩니다 — 이는 완전한 TeX 엔진이 아니라 작은 비트맵 렌더러이기 때문입니다. \text{...}는 수식 중간에서 항목에 라벨을 붙이기 위해 일반 단어로 되돌아갑니다.

화학식에는 전용 \ce{...} 매크로가 있으며, mhchem과 유사한 소규모 서브셋입니다. 원소 개수는 자동으로 아래첨자가 되고(H2O는 아래첨자 2로 렌더링됩니다), 뒤에 붙는 이온 전하는 자동으로 위첨자가 되며(H3O+, SO4^2-), ->는 반응 화살표로 렌더링됩니다. 즉 \ce{2H2 + O2 -> 2H2O}를 작성할 때 원자 개수와 전하마다 ^/_를 직접 입력할 필요가 없습니다.

파서가 인식하지 못하는 문법 — 전체 LaTeX 문서, 패키지, 행렬, 표 등 — 은 발송을 절대 망가뜨리지 않습니다. 대신 원본 표기 문자열을 그대로 일반 텍스트로 렌더링하는 방식으로 대체됩니다. 이 보장은 두 계층에서 강제됩니다: 파서 자체가 알 수 없는 매크로를 텍스트로 대체하며, 렌더러의 최외곽 호출은 레이아웃 예외 상황에서도 절대 예외를 던지지 않습니다.

이미지는 표시 모드에 맞는 배율로 배치됩니다: 블록 모드는 더 크게, 인라인 모드는 더 작게. 이메일 안전 크기 예산을 초과할 경우 자동으로 배율이 줄어듭니다. 대부분의 수식은 첫 시도에서 맞아떨어지며, 유독 긴 수식만 더 작은 배율이 필요하고, 극단적인 경우는 무한히 반복되는 대신 최소 배율로 고정됩니다.

렌더링된 <img>는 이 레이아웃 계산에서 나온 명시적인 width/height 속성을 가지므로, Outlook을 비롯한 클라이언트가 이미지 로딩 중에 화면을 다시 배치하며 튀는 일이 없습니다. 결정적으로, 원본 표기 문자열 그대로를 담은 alt 속성도 함께 가집니다. 수식은 이미지를 차단하는 클라이언트나 비트맵을 해석할 수 없는 스크린 리더에서도, 텍스트 대응물 없이 그림 안에 갇히는 일이 절대 없습니다.

설정 가능한 필드:

• 표기(LaTeX 유사) — 수식 텍스트로, 300자로 제한됩니다(초과된 값은 렌더링 전에 조용히 잘리며, 발송이 깨지는 일은 절대 없습니다).
• 표시 모드 — 인라인(작게, 텍스트 줄 안에 위치) 또는 블록(크게, 독립된 줄).
• 정렬 — 왼쪽, 가운데, 오른쪽(블록 모드에서만 적용됩니다).
• 색상 — 표기의 선 색상입니다. 값이 유효하지 않거나 비어 있으면 서명된 엔드포인트에 거부될 값을 전달하는 대신 렌더러 자체의 기본 검정에 가까운 색으로 대체됩니다.
• 카드의 배경색, 패딩, 테두리, 모서리 반경.

표기가 비어 있으면 빈 이미지 대신 아무것도 렌더링되지 않습니다 — 조판할 텍스트가 없으면 블록이 단순히 아무것도 출력하지 않습니다.

지원되는 문법

아래의 모든 예시는 실제 /api/formula 엔드포인트에서 가져온 진짜 실시간 서명된 이미지이며 목업이 아닙니다. 즉 여기서 보는 모습이 수신자의 받은편지함에서 렌더링되는 모습과 정확히 같습니다. 이 목록에 없는 것(전체 LaTeX 문서, 패키지, 행렬, 표, \bar/\hat 같은 악센트, \dots 같은 생략 부호)은 인식되지 않습니다. 발송을 망가뜨리는 대신 입력한 텍스트 그대로 렌더링되므로, 미리보기에서 어떤 매크로가 지원되지 않는지 대체로 한눈에 알 수 있습니다.

분수

\frac{a+b}{c-d}

지수와 아래첨자

a_n = a_1 + (n-1)d

제곱근, 분수와 중첩

\sigma = \sqrt{\frac{1}{n}\sum (x_i - \mu)^2}

근의 공식 — 분수, ±, 제곱근이 함께

x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}

그리스 문자

\Delta = b^2 - 4ac

이름 있는 함수와 극한(이탤릭이 아닌 정체)

\lim_{x \to 0} \frac{\sin x}{x} = 1

집합 및 논리 기호

\forall x \in S,\ x^2 \geq 0

\left(/\right) 구분 기호 — 인식되지만 내용에 맞게 자동으로 크기가 조절되지는 않습니다

y = \left(x+1\right)^2

수식 중간의 라벨을 위한 \text{...}

d = 5\text{ mi}

\ce{...}를 통한 화학식 — 원자 개수 자동 아래첨자, 반응 화살표

\ce{2H2 + O2 -> 2H2O}

\ce{...} — 이온 전하 자동 위첨자

\ce{SO4^2-}

예시

화학 수업 요약 이메일은 균형 반응식을 문장 안에 인라인으로 조판합니다: "광합성: \ce{6CO2 + 6H2O -> C6H12O6 + 6O2}"가 설명 텍스트 바로 옆에 놓입니다. 수식 블록이 과제, 퀴즈, 플래시카드 덱과 함께 교실 다이제스트에서 어떻게 어우러지는지는 교육을 참고하세요. 물리 문제집은 근의 공식을 블록 모드로 독립된 줄에 더 크게, 가운데 정렬로 배치한 뒤 풀이 예시를 이어 붙입니다. 통계 뉴스레터는 주변 문단의 흐름을 깨지 않고 \mu = \frac{\sum x_i}{n}처럼 짧은 인라인 수식을 문장 중간에 사용합니다. \bar{x}가 아니라 \mu인 점에 주의하세요: \bar/\hat 같은 악센트 매크로는 위의 지원 문법 목록에 없으므로, 평균을 나타내야 할 때는 일반 그리스 문자가 안전한 대체 표기입니다.

정적 폴백의 모습

<div style="margin:8px 0;text-align:left">
  <img src="https://mailinapp.com/api/formula?d=eyJub3RhdGlvbiI6...&s=abc123..."
       width="184" height="52" alt="E = mc^2"
       style="display:inline-block;max-width:100%;height:auto;vertical-align:middle" />
</div>

여기에는 렌더링 티어가 하나뿐입니다 — 서명된 <img>이며, 그 alt 텍스트는 항상 정확한 표기 문자열을 담고 있으므로 이미지 자체가 로드되지 않는 곳에서도 수식은 여전히 전달됩니다.

관련 페이지

• 블록 리퍼런스 개요
• 분석 & 차트 블록
• 폴백 작동 방식