웹 UI 다루기

NiceGUI는 "HTML, CSS, JavaScript를 몰라도, 파이썬만으로 모던한 웹사이트(UI)를 만들 수 있게 해주는 라이브러리"입니다.

기존의 파이썬 GUI 라이브러리(Tkinter, PyQt)는 디자인이 투박하고, 웹 프레임워크(Django, Flask)는 프론트엔드 지식이 필요했습니다. NiceGUI는 이 두 가지 문제점을 해결하며 가장 쉽고 빠르게 예쁜 UI를 만드는 것을 목표로 합니다.

NiceGUI의 핵심 특징 5가지

1. 100% 파이썬 코드

HTML 파일이나 JavaScript 코드를 따로 작성할 필요가 없습니다. 파이썬 함수 하나로 버튼, 그래프, 입력창 등을 다 만듭니다.

2. 강력한 기술 스택 (검증된 성능)

내부적으로 FastAPI(고성능 서버)와 Vue.js/Quasar(최신 프론트엔드 디자인)를 사용합니다. 덕분에 속도가 빠르고 디자인이 기본적으로 깔끔합니다.

3. 직관적인 상호작용 (Event Loop)

Streamlit 같은 도구는 버튼을 누르면 코드가 처음부터 다시 실행되지만, NiceGUI는 이벤트 기반이라 필요한 부분만 딱 실행됩니다.
버튼 클릭, 타이머, 데이터 변경 등에 아주 매끄럽게 반응합니다.

4. 데이터 바인딩 (Data Binding)

변수 값이 바뀌면 화면의 숫자도 자동으로 바뀌는 기능이 내장되어 있습니다. 복잡한 업데이트 코드를 짤 필요가 없습니다.

5. 다재다능한 배포

웹 앱: 브라우저에서 접속 가능.
데스크톱 앱: native=True 옵션 하나면 일반 프로그램처럼 창으로 실행됩니다.
IoT/로봇: 라즈베리 파이 같은 소형 기기의 제어 패널로도 많이 쓰입니다 (원래 개발사가 로봇 제어용으로 만듦).

실습 따라하기

시작하기 (Hello World)

가장 기본적인 텍스트 출력과 실행 방법입니다.

python

from nicegui import ui

ui.label('안녕하세요, NiceGUI!')

ui.run() # 웹 서버 실행

기본 요소 다루기 (UI Elements)

사용자와 상호작용하는 버튼과 아이콘을 배치해 봅니다.

python

from nicegui import ui

def button_clicked():
    ui.notify('버튼이 클릭되었습니다!')

with ui.row(): # 가로로 배치
    ui.icon('thumb_up')
    ui.button('눌러보세요', on_click=button_clicked)

ui.run()

레이아웃 잡기 (Layout)

화면을 구성하는 Row(가로), Column(세로), Card(카드) 개념을 익힙니다.

python

from nicegui import ui

with ui.card(): # 카드 박스 생성
    ui.label('카드 제목').classes('text-h6') # 스타일 적용 (Tailwind CSS)
    ui.label('여기에 내용을 적습니다.')
    
    with ui.row():
        ui.button('확인')
        ui.button('취소', color='red')

ui.run()

데이터 바인딩 (Binding) - 핵심

NiceGUI의 가장 강력한 기능입니다. 변수 값이 바뀌면 화면도 자동으로 바뀝니다.

python

from nicegui import ui

class Data:
    text = '초기 텍스트'

data = Data()

# 입력창과 라벨을 data.text 변수와 연결(bind)합니다.
ui.input(label='입력하세요').bind_value(data, 'text')
ui.label().bind_text(data, 'text')

ui.run()

웹 UI 다루기 ​

NiceGUI의 핵심 특징 5가지 ​

실습 따라하기 ​

시작하기 (Hello World) ​

기본 요소 다루기 (UI Elements) ​

레이아웃 잡기 (Layout) ​

데이터 바인딩 (Binding) - 핵심 ​

추천 학습 리소스 ​

웹 UI 다루기

NiceGUI의 핵심 특징 5가지

실습 따라하기

시작하기 (Hello World)

기본 요소 다루기 (UI Elements)

레이아웃 잡기 (Layout)

데이터 바인딩 (Binding) - 핵심

추천 학습 리소스