Gradio gr.HTML로 웹 앱 한 번에 만들기

섹션별 상세

Gradio 6의 gr.HTML은 html_template, css_template, js_on_load라는 세 가지 핵심 파라미터를 통해 강력한 커스텀 기능을 제공한다. ${value}를 통해 Python 상태를 HTML에 주입하고, JavaScript의 props.value 업데이트와 trigger('change') 호출을 통해 다시 Python으로 상태를 동기화하는 양방향 통신 구조를 갖추고 있다.

python

gr.HTML(
    value={"count": 0},
    html_template="Clicked ${value.count} times",
    css_template="button { background: #667eea; color: white; }",
    js_on_load="""
    element.querySelector('button').onclick = () => {
        props.value = { count: props.value.count + 1 };
        trigger('change');
    };
    """
)

Python 상태를 HTML에 주입하고 JavaScript로 업데이트하여 다시 Python으로 동기화하는 기본 예시

이 기능을 활용하면 기존에 별도의 React 컴포넌트나 복잡한 라이브러리가 필요했던 기능들을 순수 HTML5와 CSS만으로 구현할 수 있다. 드래그 앤 드롭이 가능한 Kanban 보드나 CSS 키프레임 애니메이션을 활용한 Pomodoro 타이머 등을 외부 의존성 없이 단일 파일로 제작할 수 있다.

ML 분야에서는 모델의 출력 형식을 시각화하는 전용 컴포넌트 제작에 매우 유용하다. 객체 탐지 결과를 보여주는 뷰어나 Three.js를 활용한 3D 카메라 컨트롤러 등을 gr.HTML 서브클래스로 만들어 기존 Gradio 컴포넌트처럼 재사용할 수 있다.

python

class Heatmap(gr.HTML):
    def __init__(self, value=None, theme="green", **kwargs):
        super().__init__(
            value=value,
            theme=theme,
            html_template=TEMPLATE,
            css_template=STYLES,
            js_on_load=SCRIPT,
            **kwargs
        )

# Heatmap() works like gr.Image() or gr.Slider()

gr.HTML을 상속받아 재사용 가능한 커스텀 컴포넌트를 정의하는 방법

LLM을 이용한 'Vibe Coding' 환경에서 이 기능은 특히 강력한데, 단일 파일 구조 덕분에 LLM이 전체 코드를 한 번에 생성하기 유리하기 때문이다. 개발자는 아이디어를 설명하고 생성된 코드를 즉시 실행하며 피드백을 주고받는 빠른 반복 루프를 통해 5분 만에 라이브 앱을 배포할 수 있다.

용어 해설

스코프 CSS(Scoped CSS): — 특정 컴포넌트나 요소 내에서만 유효하도록 범위를 제한한 CSS 스타일링 기법이다. 전역 스타일과의 충돌을 방지하여 독립적인 UI 컴포넌트를 안전하게 설계할 수 있게 한다.
상태 관리(State Management): — 애플리케이션의 데이터 변화를 추적하고 UI와 동기화하는 프로세스이다. 본문에서는 JavaScript의 props 업데이트와 Python 서버 간의 데이터 일치 과정을 의미한다.
원샷 생성(One-shot Generation): — LLM이 추가적인 수정이나 대화 없이 단 한 번의 프롬프트 입력만으로 완성된 코드나 결과물을 만들어내는 능력이다. 개발 생산성을 극대화하는 핵심 요소이다.
바이브 코딩(Vibe Coding): — 엄격한 설계보다는 LLM과의 대화를 통해 아이디어를 즉시 코드로 구현하고, 실행 결과를 보며 직관적으로 수정해 나가는 최신 개발 트렌드이다.

기술

Gradio 6
Python
JavaScript
CSS
Three.js

활용 사례

커스텀 ML 결과 뷰어
인터랙티브 대시보드
3D 시각화 도구
생산성 도구(타이머, 칸반 보드)

언급된 리소스

문서Gradio guide: Custom Components with gr.HTML

API DocsAPI docs: gr.HTML