Flutter에서 수학 수식 표기하는 방법, 어떤 오픈소스 라이브러리를 써야 할까?

서론

flutter로 수학 관련한 앱을 개발해보고 있다. flutter 로 이런 기능을 개발해보는 것이 처음이기에 어떤 오픈소스 라이브러리를 사용해야 하는지 몰라서, 가장 처음 접한것으로 진행을 했었다. 바로 flutter_tex 이다.

현재 구글에 flutter latex 로 검색해보면 가장 최상단에 뜬다.

그리고 생각보다 Flutter가 아직까지 Spring, React 같은 Web개발 환경보다 커뮤니티, 사용자가 적다보니..

이런 마이너틱한 부분에 대해서는 실제 개발자 경험.. 살아있는 정보를 찾기가 어려운것 같다.

(이러니… 구글검색 최상단에 뜨는 이것부터 써보게 된 것 같다.)

그래서 수식 관련한 것들을 모두 flutter_tex로 개발을 했는데,

결론부터 애기하면 사전에 다음 정보를 미리 알고 있었다면, flutter_tex로 절대로 구현하지 않았을 것 같다.

아무튼 간단하게 위 수식을 랜더링 해보는 예제와 함께!

두 가지 오픈소스 라이브러리를 실제 사용해보고 비교 정리를 해보았다.

라이브러리

flutter_tex

Html과 JavaScript 런타임으로 WebView로 동작한다.

dependencies:
  flutter:
    sdk: flutter
  flutter_tex: ^4.0.9

• Html과 JavaScript 런타임으로 WebView로 동작 → 모바일 랜더링 속도가 느림

• 실제 LaTeX 엔진을 사용하는 것이 아니라, HTML과 MathJax 또는 Katex 를 사용하여 LaTeX 문법을 렌더링

  → 표준 LaTex 문법 수식 출력과 달라지는 경우들이 존재.

• 외부 리소스 로드가 필요하기에, 네트워크 연결 권한이 필요.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_app_name">

    <!-- 기존 내용 -->

    <!-- 인터넷 권한 추가 -->
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:label="your_app_name"
        android:icon="@mipmap/ic_launcher">
        <!-- 기존 내용 -->

        <!-- Allow cleartext (non-HTTPS) connections if needed -->
        <application
            android:usesCleartextTraffic="true"
            ...>
            <!-- 기존 내용 -->
        </application>

    </application>
</manifest>

import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';

class FormulaView extends StatelessWidget {
  final String formula;
  final Color? color;
  final int? fontSize;

  const FormulaView({
    super.key,
    required this.formula,
    this.fontSize,
    this.color,
  });

  @override
  Widget build(BuildContext context) {
    return TeXView(
      child: TeXViewContainer(
        child: TeXViewDocument(
          formula,
          style: TeXViewStyle(
            contentColor: color ?? Colors.black,
            fontStyle: TeXViewFontStyle(fontSize: fontSize ?? 14),
          ),
        ),
      ),
      style: const TeXViewStyle(
        margin: TeXViewMargin.all(10),
        padding: TeXViewPadding.all(10),
      ),
    );
  }
}

이 라이브러리로 수식 랜더링을 여기저기 쓰다보면, 코드가 다소 복잡해서 따로 컴포넌트화를 시켜서 사용할 필요가 생기게 되었다.

TeXViewDocument 를 TeXViewContainer 로 감싸고 다시 TexView 로 감싸야한다.

import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter TeX Example')),
        body: const Center(
            child: FormulaView(formula: r'\[\frac{a}{b} + \sqrt{c}\]')
        ),
      ),
    );
  }
}

이 라이브러리는 시작 \[ 과 끝 \] 을 넣어줘야만 제대로 랜더링 된다.

(모바일)

(Web)

• 웹에서도 동작 지원한다고 하는데, 동일한 코드로 웹 환경에서 동작되지 않았다.

flutter_math_fork

WebView 기반이 아닌 Flutter 의 Widget 기반으로 동작한다.

dependencies:
  flutter:
    sdk: flutter
  flutter_math_fork: ^0.7.2

• Flutter 내부에서 Widget 기반으로 동작 → 빠른 랜더링 속도

• 단순한 사용법

• 표준 LaTex 문법과 호환

• 외부 리소스 필요없이 로컬 환경만으로 동작

• 모바일, 테스크톱, 웹 환경에서도 동작

  
  

import 'package:flutter/material.dart';
import 'package:flutter_math_fork/flutter_math.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
     theme: ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter Math Fork Example')),
        body: Center(
          child: Math.tex(
            r'\frac{a}{b} + \sqrt{c}',
            textStyle: const TextStyle(fontSize: 25),
          ),
        ),
      ),
    );
  }
}

모바일 뿐만 아니라 웹 환경에서도 동일코드로 잘 동작되는 것을 확인해볼 수 있다.

실제 테스트해보면 랜더링 속도도 차이가 많이 나는데, 수식이 복잡해질 수록 체감이 커진다.

웹뷰가 아니라 Flutter 네이티브 위젯기반으로 동작하기에 랜더링 속도가 더 뛰어난 것을 확인해 볼 수 있다.

웹 데모페이지

다음 페이지에서 동작을 테스트해 볼 수 있다.

• https://znjameswu.github.io/flutter_math_demo/

마이그레이션 하기

결국 flutter_tex로 마이그레이션 하기로 결정했고, 그 과정을 담아봤다.

그런데, flutter_tex 에서 동작하는 문법 수식을 그대로 옮기면 flutter_math_fork 에서 오류나는 경우들이 존재했다.

위 테스트 사이트에서 Math's Output에 제대로 출력이 되어야, 제대로 랜더링 되는 것을 확인할 수 있다.

수식 변경

여기서 Flutter TeX's output은 실제 flutter_tex 코드에서 사용해 나오는 결과랑은 다르다.

flutter_tex 실제 코드에서는 개행을 \\ 대신 \[ ~ \] 을 사용. 표준 latex 문법으로 동작되지 않는 경우들이 있다.

flutter_tex 에서 랜더링

어찌보면 이 문법이 좀 더 편리한 부분도 있는것 같지만, 아래처럼 표준 latex 문법으로 동작되지 않는 경우가 생긴다.

나중에 다른 환경에서 해당 수식을 바로 가져다가 쓸 수도 있는데, 이런 부분이 호환성 부분에 있어서도 확실히 좋지 않다.

flutter_math_fork 에서 랜더링

표준 latex 문법은 개행을 \\ 로 하고 여러줄을 입력할 때는 aligend 를 사용해야 한다.

이런 flutter_tex 에서만 동작하는 문법을 모두 표준 latex 문법으로 모두 변환해야 한다.

컴포넌트 재설계

import 'package:flutter/material.dart';
import 'package:flutter_math_fork/flutter_math.dart';

class FormulaView extends StatelessWidget {
  final String formula;
  final double fontSize;
  final EdgeInsetsGeometry geometry;
  final Color color;
  final FontWeight fontWeight;

  const FormulaView({
    super.key,
    required this.formula,
    this.fontSize = 16.0,
    this.geometry = const EdgeInsets.all(10.0),
    this.color = Colors.black,
    this.fontWeight = FontWeight.w500
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: geometry, 
      padding: geometry,
      alignment: Alignment.center, // 가운데 정렬
      child: Math.tex(
        formula,
        textStyle: TextStyle(fontSize: fontSize, color: color, fontWeight: fontWeight), 
      ),
    );
  }
}

flutter_tex 기반으로 구현한 컴포넌트를 재설계를 했다.

그런데 동일한 fontSize를 사용하더라도 flutter_tex보다 flutter_math_fork 의 폰트 크기가 좀더 작게 출력이 되어서, 사용하는 곳들마다 폰트 크기를 조금씩 늘려줘야 했다.

결론

랜더링 속도, 외부리소스 의존성, 원소스로 다양한 플랫폼 호환성 등을 종합적으로 고려해 볼때,

flutter_tex를 사용할 만한 이유가 없으며, flutter_math_fork 로 구현하는 것이 좋다고 생각된다.

회고

이런 오픈 소스 라이브러리를 사용할 때는 좀더 신중히 비교를 해보고 선택을 해야겠다는 생각이 들었다.

이미 개발이 상당부분 진행된 상태에서 고치는 것은 더 많은 비용이 수반되기 때문이다.