IPython.display로 HTML 출력하고 ipywidgets로 실시간 슬라이더까지! #3

오늘은 지금까지 다뤄왔던 프롬프트 엔지니어링 기술 이외 파이썬 자체 라이브러리 중 Jupyter Notebook이나 콘솔 환경에서 아주 유용한 IPython 라이브러리에 대해 살펴보겠습니다.

IPython.display와 ipywidgets

 

반응형

IPython.display와 ipywidgets

IPython이란?

파이썬을 다루다 보면 콘솔에 출력해야 하는 경우가 흔히 있죠. 특히 Jupyter Notebook을 이용해서 간단한 테스트를 실행해 본다던가 하는 경우는 거의 콘솔과 같은 환경에서 출력을 확인해야 합니다. 이때, 다양한 출력 형태를 만들어 주는 라이브러리가 IPython입니다. 

IPython은 Jupyter Notebook의 핵심 커널로서 작동하며, 코드 실행뿐 아니라 시각적 피드백을 즉각 제공하는 것이 장점입니다.

 

Jupyter Notebook

• 코드, 텍스트, 시각화를 한 곳에서 통합 관리 가능
• 정적 결과뿐 아니라 동적인 대화형 인터페이스도 구현 가능
• Markdown, LaTeX, HTML 등을 통한 문서화 및 발표 활용 가능

 

 

 

 

 

  IPython.display로 시각적 출력

Jupyter Notebook은 코드 실행 환경을 넘어서, 데이터 분석 결과를 시각적으로 전달하는 플랫폼입니다. `IPython.display` 모듈을 사용하면 Markdown, HTML, 이미지 등 다양한 리치 콘텐츠를 Notebook 셀에 출력할 수 있어 리포트 및 대시보드 작성 시 매우 유용합니다.

 

Ipython.display의 주요 클래스

클래스	설명
HTML	HTML 코드 렌더링
Markdown	Markdown 포맷 출력
Image	이미지 파일 또는 URL 표시
display()	위 객체들을 Notebook에 출력

 

  간단한 다음 예제를 보시죠. h2 테그를 이용해서 아이콘이 있는 제목을 출력하는 코드예요.

from IPython.display import HTML, display

display(HTML("<h2 style='color: #4CAF50;'>📊 데이터 분석 리포트</h2>"))

• HTML(): HTML 마크업을 받아 Notebook 셀에서 브라우저처럼 렌더링 합니다.
• display(): 단일 객체뿐 아니라 여러 시각 요소를 함께 출력할 때 사용합니다.
• style 속성: CSS 인라인 스타일로 색상, 크기 등을 조절합니다.

위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다. 

IPython.display와 ipywidgets-01

 

 

 

 

 

 

  예제 코드 하나 더 볼까요? 다음과 같이 구성해 볼게요.

import pandas as pd
from IPython.display import display, HTML

df = pd.DataFrame({
    "모델": ["Grok-3", "Llama-3", "Mistral"],
    "정확도": [92.5, 89.7, 88.9]
})

display(HTML(df.style.set_properties(**{
    'background-color': '#f5f5f5',
    'border': '1px solid #ddd',
    'padding': '8px',
    'color': 'black'
}).to_html()))

• df.style.set_properties(): DataFrame 내 각 셀에 CSS 스타일 적용
• to_html(): 스타일링 된 DataFrame을 HTML 문자열로 반환
• display + HTML 조합으로 시각화 테이블 구성

파이썬의 데이터프레임도 콘솔에 출력할 때는 기본적으로 테이블 스타일의 출력을 볼 수 있어요. 하지만, 위 예시코드처럼 CSS 스타일의 테이블을 구성할 수 있다면 필요에 따라 요소들을 편집할 수 있겠죠. 

그럼 위 코드의 출력은 다음과 같아요.

IPython.display와 ipywidgets-02

 

 

 

 

 

 

  ipywidgets로 대화형 UI 설계

사용자의 입력에 따라 실시간으로 결과가 반영되는 대화형 인터페이스는 데이터 분석, 실험 설정, 교육 도구 등에서 유용하게 사용할 수 있어요.

 

먼저, ipywidgets은 설치해야 해요.

pip install ipywidgets

 

주요 위젯

위젯	설명
IntSlider	정수 슬라이더
FloatSlider	실수 슬라이더
Button	클릭 버튼
Dropdown	선택 메뉴
Text	텍스트 입력 상자

 

 

 

 

 

 

  버튼 클릭 시 메시지 출력하는 코드를 만들어 볼게요.

import ipywidgets as widgets
from IPython.display import display

button = widgets.Button(description="분석 시작", button_style="success")
output = widgets.Output()

def on_button_click(b):
    with output:
        print("분석이 시작되었습니다!")

button.on_click(on_button_click)
display(button, output)

• Button: UI 상에 버튼 생성, `button_style`로 색상 조정 가능
• on_click(callback): 버튼 클릭 시 실행할 함수 등록
• Output(): 출력 전용 위젯, `with` 블록으로 내용 업데이트

코드를 실행하면 다음과 같은 버튼이 출력되는 것을 보게 되는데, 아래 그림은 "분석 시작" 버튼을 눌렀을 때, "분석이 시작되었습니다!"가 나타난 모습입니다.

IPython.display와 ipywidgets-03

 

 

 

 

 

 

  슬라이더로 실시간 값 출력하는 코드를 하나 더 볼게요. 위 표에서 언급했던 정수형으로요.

import ipywidgets as widgets
from IPython.display import display

slider = widgets.FloatSlider(value=90, min=85, max=95, step=0.1, description="정확도:")
output = widgets.Output()

def on_value_change(change):
    with output:
        output.clear_output()
        print(f"선택된 정확도: {change['new']}%")

slider.observe(on_value_change, names='value')
display(slider, output)

• observe(handler, names='value'): 위젯 값이 바뀔 때마다 핸들러 실행
• clear_output(): 이전 출력 지우기, 실시간 업데이트에 적합

이 코드를 실행하면 다음과 같이 출력됩니다.

IPython.display와 ipywidgets-04

 

위 그림의 가운데 동그란 스위치를 좌우로 움직이면 다음과 같이 출력되죠.

IPython.display와 ipywidgets-05

 

재미있죠?

 

자, 지금까지 IPython.display와 ipwidgets을 이용하여 보다 더 능동력인 시각화 효과를 만들 수도 있고, 대화형 효과도 만들어 봤습니다.

 

 

 

 

 

---

2025.04.25 - [Generative AI/Prompt Engineering] - OpenAI GPT 출력 형식 설정으로 JSON 파싱과 프롬프트 엔지니어링 #2

OpenAI GPT 출력 형식 설정으로 JSON 파싱과 프롬프트 엔지니어링 #2

2025.04.22 - [Generative AI/Prompt Engineering] - 프롬프트 엔지니어링으로 챗GPT와 OpenAI API 활용 - GPT에게 원하는 답을 얻는 법 #1

프롬프트 엔지니어링으로 챗GPT와 OpenAI API 활용 - GPT에게 원하는 답을 얻는 법 #1