feat: 랜딩 페이지에 MathLive 기반 수학 점역 데모 추가 및 한글·수학 탭 통합 by jessieyeon · Pull Request #177 · dev-five-git/braillify

jessieyeon · 2026-07-22T10:16:39Z

개요

랜딩 페이지에 수학 점역 체험 데모를 추가하고, 기존 한글 점역 데모와 함께 '한글' / '수학' 탭 토글 하나로 통합했습니다. 사용자는 MathLive 화면 수식 키보드로 수식을 WYSIWYG 편집하고, 자동 생성된 LaTeX가 실시간으로 한국 수학 점자로 변환되는 것을 체험할 수 있습니다.

주요 변경

수학 점역 데모

mathlive@^0.110.0 도입, MathLive 폰트를 public/mathlive/fonts/에 self-host (braillify의 "외부 연결 없이 실행" 원칙 유지 — CDN 미사용)
MathTransInput — MathLive <math-field> 웹 컴포넌트 래퍼. SSR 회피(동적 import), 데스크톱에서도 가상 수식 키보드 노출(manual 정책), 언마운트 시 키보드 자동 닫힘
MathLive가 생성한 LaTeX를 $...$ 로 감싸 기존 braillify WASM translateToUnicode에 전달 — 코어 엔진(libs/braillify) 무수정

한글·수학 탭 통합

DemoTabs — '한글'/'수학' 탭 토글(기본 '한글'). WAI-ARIA tablist/tab/tabpanel, 좌우 화살표 키 이동 지원
수학 안내문을 입력창 placeholder로 이동(한글 데모와 동일한 방식), 출력창은 예시만 표시
입력·출력 박스를 동일 flex-basis 2단 구조로 맞춰 전 브레이크포인트에서 크기 통일(모바일 343×203 / 태블릿 693×256 / 데스크톱 498×500, 모두 좌우 동일)
DemoChrome — 한글·수학 데모가 공유하는 헤딩/화살표 컴포넌트 추출

세부 보정

\frac 정규화: MathLive의 중괄호 생략 직렬화(\frac34)를 braillify가 인식하는 \frac{3}{4} 정규형으로 변환. 미종료 중괄호·제어기호 인자도 안전하게 처리
입력 박스 전체 클릭 시 수식 필드 포커스(기존 한글 데모와 동일 동작)

검증

bun run build 통과, 기존 테스트 스위트 14,165개 전부 통과(회귀 없음)
브라우저 확인: 한글 변환(학교→⠚⠁⠈⠬), 수학 변환(x²+1→⠭⠘⠼⠃⠢⠼⠁, ¾→⠼⠙⠌⠼⠉), 탭 전환/화살표 키 이동, 가상 키보드 열림·닫힘, 다크 테마 가독성, 폰트 로컬 서빙(404 없음)
반응형 3개 브레이크포인트에서 좌우 박스 크기 일치 실측

알려진 후속 작업 (이 PR 범위 밖)

braillify 엔진의 LaTeX 파서가 중괄호 없는 \frac34을 직접 분수로 인식하도록 일반화 — 현재는 랜딩측 normalizeFracBraces로 경계에서 처리. 엔진 수정은 별도 서브시스템(Rust + PDF 근거 테스트)이라 분리함.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

- MathTransInput: 박스 전체 클릭 시 math-field 포커스(TransInput과 동일 동작) - readArg: 미종료 중괄호 내용 보존, 제어기호 인자 균형 유지 - DemoChrome: 한글·수학 데모 공통 헤딩/화살표 컴포넌트 추출 - DemoTabs: type=button, aria-controls, role=tabpanel, 좌우 화살표 키 이동 - MathTransInput: latex 상태를 부모에서 단일 관리(controlled), placeholder 흐름 배치로 매직 넘버 제거 - 입출력 박스를 동일 flex-basis 2단 구조로 맞춰 크기(498×500) 통일 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

owjs3901

superpowers 를 gitignore에 추가요망

- Trans/MathTrans/MathTransInput의 세로 컨테이너를 Flex→VStack으로 변경 - VStack 기본값과 중복되는 flexDirection="column" 및 불필요한 w="100%" 제거 - DemoArrow의 transform 기본값 rotate(0deg)→null (항등 변환이라 불필요) - 미사용 Flex import 정리 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

- MathTransInput: math-field의 인라인 style을 css()로 전환 - Trans/MathTrans: VStack 기본값과 중복되는 flexDirection 맨 앞 column을 null로 - docs/superpowers 플랜 문서 2개 제거

바깥 컨테이너가 row 방향 flex라 align-items stretch가 가로를 늘리지 않아 w=100%가 제거되면 입력·출력 박스 너비가 어긋난다. w=100% 대신 flex=1로 가로를 채워 박스 크기 동일을 유지하면서 명시적 w=100%를 제거한다.

owjs3901

폰트에 라이센스 문제가 없는지 확인합시다, 만약 걱정되면 link 태그를 통해서 해결하면 좋을 것 같아요

owjs3901 · 2026-08-03T02:52:54Z

+        maskPosition="center"
+        maskRepeat="no-repeat"
+        maskSize="contain"
+        w={['17px', null, null, '28px']}


17px같은 홀수는 피해야 합니다

owjs3901 · 2026-08-03T02:53:25Z

+  return (
+    <Flex aria-hidden="true">
+      <Image
+        alt=""


alt를 넣는게 이롭습니다

owjs3901 · 2026-08-03T02:54:05Z

+  }
+
+  return (
+    <VStack flex="1" gap={['16px', null, null, '30px']} w="100%">


flex 1은 맨 처음 return에서 바로 쓰는 것 보다 이 컴포넌트를 호출하는 곳에서 flex=1을 안쓰더라도 넓게 펼쳐지도록 alignItems center 등의 옵션을 뺴는 것이 이롭습니다

owjs3901 · 2026-08-03T02:54:23Z

+            as="button"
+            bg={mode === key ? '$text' : 'transparent'}
+            border="1px solid $text"
+            borderRadius="9999px"


50%가 같은 의미일겁니다.

owjs3901 · 2026-08-03T02:55:02Z

+        <MathTransInput
+          latex={latex}
+          onLatexChange={setLatex}
+          placeholder="수식을 입력하면 이곳에 수학 점자가 표시됩니다."
+        />
+        <DemoArrow />
+        <TransInput
+          blurPlaceholder={'예: 사분의 삼 → ⠼⠙⠌⠼⠉'}
+          focusPlaceholder={'예: 사분의 삼 → ⠼⠙⠌⠼⠉'}
+          readOnly
+          value={braille}
+        />


이것만 따로 클라이언트 컴포넌트로 뺴는게 맞습니다

owjs3901 · 2026-08-03T02:55:11Z

+  const braille = latex.trim() ? translateToUnicode(`$${latex}$`) : ''
+
+  return (
+    <VStack flex="1" gap={['16px', null, null, '30px']}>


flex 1 위 피드백과 같이 개선되어야 합니다

owjs3901 · 2026-08-03T02:55:56Z

+export function normalizeFracBraces(latex: string): string {
+  let out = ''
+  let i = 0
+  while (i < latex.length) {
+    if (latex.startsWith('\\frac', i) && !/[a-zA-Z]/.test(latex[i + 5] ?? '')) {
+      const [num, j] = readArg(latex, i + 5)
+      const [den, k] = readArg(latex, j)
+      out += `\\frac${num}${den}`
+      i = k
+      continue
+    }
+    out += latex[i]
+    i += 1
+  }
+  return out
+}
+
+/** i 위치부터 LaTeX 인자 하나를 읽어 중괄호로 감싼 형태와 다음 인덱스를 돌려준다. */
+function readArg(latex: string, i: number): [string, number] {
+  while (latex[i] === ' ') i += 1
+  if (latex[i] === '{') {
+    let depth = 0
+    let j = i
+    do {
+      if (latex[j] === '{') depth += 1
+      else if (latex[j] === '}') depth -= 1
+      j += 1
+    } while (j < latex.length && depth > 0)
+    // depth === 0 이면 짝이 맞는 '}' 를 j-1 에서 소비한 것이고,
+    // depth > 0 이면 닫는 중괄호 없이 끝난 것이라 내용을 j 까지 살린다.
+    const end = depth === 0 ? j - 1 : j
+    return [`{${normalizeFracBraces(latex.slice(i + 1, end))}}`, j]
+  }
+  if (latex[i] === '\\') {
+    let j = i + 1
+    while (j < latex.length && /[a-zA-Z]/.test(latex[j] ?? '')) j += 1
+    // 제어기호(\, \! 등)는 백슬래시 뒤에 글자가 없으므로 기호 한 글자를 포함시킨다.
+    if (j === i + 1 && j < latex.length) j += 1
+    return [`{${latex.slice(i, j)}}`, j]
+  }
+  return [`{${latex[i] ?? ''}}`, i + 1]
+}


순수 함수는 ts파일로 빼는게 낫습니다

owjs3901 · 2026-08-03T02:56:05Z

+    // 바깥 Flex 는 padding 없는 flex 아이템으로, 출력측 TransInput 의 외곽
+    // Flex(flex=1 h=100% w=100%)와 flex-basis 를 동일하게 맞춰 좌우 박스 너비를
+    // 같게 한다. 실제 배경/여백은 안쪽 박스가 담당한다.
+    <Flex flex="1" h="100%" w="100%">


위 피드백과 같은 이슈

owjs3901 · 2026-08-03T02:56:17Z

+        bg="$containerBackground"
+        borderRadius={['16px', null, null, '30px']}
+        cursor="text"
+        flex="1"


이건 flex 1이 필요 없지 않나요

owjs3901 · 2026-08-03T02:56:22Z

+        onClick={() => fieldRef.current?.focus()}
+        p={['16px', null, null, '40px']}
+      >
+        <Flex flex="1" flexDirection="column" gap="8px">


VStack 사용

jessieyeon and others added 11 commits July 22, 2026 15:31

feat: 랜딩에 mathlive 의존성 추가 및 폰트 self-hosting

82b5d63

feat: MathLive 수식 입력 래퍼 컴포넌트 MathTransInput 추가

990c939

feat: 홈페이지에 MathLive 기반 수학 점역 데모 섹션 추가

3af34fd

fix: MathLive 중괄호 생략 \frac 정규화 및 수학 데모 접근성 속성 보정

c4c32c5

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docs: 수학 점역 랜딩 데모 구현 플랜 추가

f1ce9b9

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

fix: 수학 데모 마무리 보정 — 언마운트 시 가상 키보드 숨김, placeholder 정리

fa0c527

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

feat: 수학 데모 안내문을 입력창으로 이동하고 입출력 박스 크기 통일

1d8bb3c

fix: 수학 입력 박스 높이를 출력 박스와 동일한 동적 규격으로 보정

8ffa6cf

feat: 한글·수학 점역 데모를 탭 토글로 통합

3bd1df8

docs: 랜딩 데모 탭 통합 구현 플랜 추가

9e9f713

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

owjs3901 requested changes Jul 27, 2026

View reviewed changes

jessieyeon and others added 3 commits July 28, 2026 13:15

owjs3901 requested changes Aug 3, 2026

View reviewed changes

Uh oh!

Uh oh!

Conversation

jessieyeon commented Jul 22, 2026

개요

주요 변경

수학 점역 데모

한글·수학 탭 통합

세부 보정

검증

알려진 후속 작업 (이 PR 범위 밖)

Uh oh!

owjs3901 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

owjs3901 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants