B컷전문 | 개발과 인생의 이야기

Gradio의 Blocks 구조를 기반으로 복잡한 UI를 설계할 때 필수적으로 사용되는 Row, Column, Tab 등을 다루며, 실전 예제와 함께 고급 사용자 인터페이스 구성 방법을 안내합니다.

 

Gradio가 단순한 데모 도구를 넘어 실전형 앱 제작 도구로 자리 잡을 수 있었던 핵심 이유는 Blocks 구조의 등장입니다.
특히 Row, Column, Tabs는 실제 UI를 구성하는 데 있어 가장 많이 활용되는 기본 단위입니다.

이번 편에서는 이 세 가지 구조를 중심으로, Gradio Blocks UI를 어떻게 실무적으로 구성할 수 있는지 상세히 설명드리겠습니다.

---

Blocks 구조란?

Gradio의 Blocks는 UI를 컴포넌트 단위로 쌓아 올리는 구조입니다.
이 구조를 사용하면 다음과 같은 장점이 있습니다:

• 다양한 레이아웃 배치 가능 (수평/수직/탭 분리)
• 컴포넌트 간 논리적 흐름 제어 가능
• 상태 유지, 조건부 실행, 비동기 처리 등 구현 가능

📌 사실 기반 참고:
Gradio의 Blocks는 React 기반 컴포넌트 구조에 착안하여 설계되었으며,
2022년부터 Interface 방식보다 Blocks 중심 개발을 공식 권장하고 있습니다 (Gradio 공식 문서 기준).

---

1. Row: 수평 정렬 구성

구조

with gr.Row():
    comp1 = gr.Textbox(label="이름")
    comp2 = gr.Button("전송")

설명

• 내부에 선언된 컴포넌트들이 가로 방향으로 나란히 배치됩니다.
• 화면 폭에 따라 자동으로 반응형으로 조정됩니다.
• 보통 입력창과 버튼 조합에 자주 사용됩니다.

예제: 이름 입력 후 전송

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        name = gr.Textbox(label="이름")
        greet_btn = gr.Button("인사하기")

    output = gr.Textbox()

    def greet(name):
        return f"{name}님 안녕하세요!"

    greet_btn.click(fn=greet, inputs=name, outputs=output)

demo.launch()

---

2. Column: 수직 정렬 구성

구조

with gr.Column():
    gr.Textbox(label="이메일")
    gr.Button("제출")

설명

• 기본 정렬 방식으로, 각 컴포넌트가 위에서 아래로 나열됩니다.
• Row와 조합해 양쪽 정렬이나 Form 구조 구성에 유용합니다.

예제: 양쪽 정렬 Form UI

with gr.Row():
    with gr.Column():
        gr.Textbox(label="성")
        gr.Textbox(label="이름")
    with gr.Column():
        gr.Textbox(label="이메일")
        gr.Textbox(label="전화번호")

✅ 실무 팁: 모바일 대응이 필요한 경우 Row 안에 Column을 구성해 반응형 UI를 고려하세요.

---

3. Tabs: 기능별 분할 구성

구조

with gr.Tabs():
    with gr.Tab("요약기"):
        ...
    with gr.Tab("번역기"):
        ...

설명

• 각 탭은 독립적인 기능이나 인터페이스를 구성할 수 있는 별도의 공간입니다.
• 다기능 앱에서 매우 유용하며, 사용자 혼란을 줄여줍니다.
• 탭 간 상태 공유가 가능하거나, 독립 실행도 가능합니다.

예제: 요약 vs 번역 기능 구분

with gr.Blocks() as demo:
    with gr.Tabs():
        with gr.Tab("요약"):
            text1 = gr.Textbox(label="입력 텍스트")
            out1 = gr.Textbox()
            gr.Button("요약").click(lambda t: t[:50] + "...", inputs=text1, outputs=out1)

        with gr.Tab("번역"):
            text2 = gr.Textbox(label="입력 텍스트")
            out2 = gr.Textbox()
            gr.Button("번역").click(lambda t: "Translated: " + t, inputs=text2, outputs=out2)

demo.launch()

✅ 실무 팁: 탭 내부에 다시 Row나 Column을 중첩하여 복합 UI 구성도 가능
예: 챗봇, 로그 뷰어, 설정 탭 등으로 구성된 AI 앱

---

고급 UI 설계 사례: 3단 구조 레이아웃

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=1):
            gr.Image()
        with gr.Column(scale=2):
            gr.Textbox()
        with gr.Column(scale=1):
            gr.Button("Submit")

• scale 인자를 통해 각 Column의 폭 비율을 조정할 수 있음
• 화면 비율을 정교하게 제어할 수 있어 대시보드형 UI에 적합

---

마무리 – UI 구성도 전략적으로 하자

Gradio Blocks는 단순히 예쁜 UI를 만드는 도구가 아닙니다.
사용자 흐름을 설계하고, 명확한 상호작용을 유도하는 구조적 사고가 필요합니다.

• Row: 조작성과 직관성 강화
• Column: 그룹별 시각적 분리
• Tabs: 기능별 명확한 구획

이 구조들을 적절히 조합하면 Gradio는 연구용 데모를 넘어 MVP 수준의 인터페이스 제작 도구가 될 수 있습니다.

 

다음 화에서는 Gradio에서 사용자 입력과 세션을 지속적으로 유지하는 방법, 즉 상태관리(gr.State)와 인터랙션 흐름 제어를 실전 예제로 다뤄보겠습니다.