Dorong Dorong 💻😴

웹개발자로서 AI를 학습하고 활용하던 중 문득 궁금해졌습니다.

"AI/ML 엔지니어들은 자신들이 만든 복잡한 모델의 결과를 어떻게 확인하고 공유할까?" 그리고 "비개발자들은 어떻게 AI를 활용해 원하는 것을 만들어낼까?"

이 궁금증으로 '스파르타에서 주관하는 AI와 100인의 용사들 - 해커톤'에 참가해 봤어요.
프론트엔드 개발자로서 AI 생태계에 발을 담가보고 싶었습니다.

해커톤에서 만난 Streamlit

해커톤에 참가하면서 처음으로 Streamlit이라는 프레임워크를 접하게 되었습니다.

AI/ML 개발자들 사이에서는 꽤 유명한 도구더라구요?!

처음에는 'Django나 React, Next 같은 웹 프레임워크의 일종인가?' 하고 생각했지만, 실제로는 좀 다른 용도로 사용되고 있었습니다.

Streamlit은 파이썬 개발자, 특히 데이터나 ML 엔지니어가 복잡한 웹 개발 지식 없이도 데이터 기반 애플리케이션을 빠르게 제작할 수 있게 도와주는 프레임워크였습니다.

파이썬 코드만으로 웹 인터페이스를 구축할 수 있다니, 프론트엔드 개발자로서 상당히 흥미로운 개념이었어요.

문서 링크입니다!

AI 엔지니어와 비개발자의 활용법

해커톤에서 관찰한 바로는, AI/ML 엔지니어들이 Streamlit을 사용하는 주된 이유는 다음과 같았습니다.

1. 빠른 프로토타이핑: 복잡한 모델의 결과를 즉시 시각화하고 상호작용 가능한 형태로 만들 수 있습니다.
2. 협업 용이성: 비기술적 팀원들에게 모델의 동작을 직관적으로 설명할 수 있습니다.
3. 배포 용이성: 몇 번의 클릭만으로 웹에 공개할 수 있어 공유가 쉽습니다.

가장 놀라웠던 점은 비개발자들도 이 도구를 활용해 자신만의 AI 애플리케이션을 만들어내었다는 사실입니다..!!

마케터, 디자이너, 심지어 의사나 교사와 같은 전혀 다른 도메인의 전문가분들도 간단한 파이썬 코드를 배워 자신의 아이디어를 구현하셨습니다!!

내 경험! Streamlit으로 서비스 구축하기

저도 평소 사용하던 React, Vue 진영이 아닌 Streamlit을 사용해 간단히 아이디어 구현을 보기로 했습니다. 프론트엔드 개발자로서 HTML, CSS, JavaScript에 익숙한 저에게는 굉장히 재밌었어요!

기본적인 설정은 놀라울 정도로 간단했습니다. (설명을 위한 코드로 실제 Github에 게시한 코드와는 전혀 다릅니다!)

import streamlit as st
import pandas as pd
import custom_nlp_model  # 내 커스텀 모델

st.title("텍스트 감정 분석기")
user_input = st.text_area("분석할 텍스트를 입력하세요:")

if st.button("분석하기"):
    result = custom_nlp_model.analyze_sentiment(user_input)
    st.write(f"현재 상황 분석: {result['sentiment']}")
    st.bar_chart(result['confidence_scores'])

이 코드만으로 작동하는 웹 앱이 생성되었습니다! React 컴포넌트를 구성하고, CSS를 작성하고, 상태 관리를 설정하는 등의 작업 없이 말이죠. 자동 배포는 더더욱 쉬웠습니다!!

웹개발자로써 느낀 불편한 점

그러나 프로젝트가 진행될수록, 프론트엔드 개발자로서의 본능이.. 조금씩.. 깨어났습니다. "이 버튼의 스타일을 바꾸고 싶은데...", "이 차트를 더 인터랙티브하게 만들 수 없을까?", "페이지 전환 애니메이션은 어떻게 추가하지?" 같은 생각들이 들기 시작했어요.

Streamlit은 기본적인 스타일링 옵션을 제공하지만, 프론트엔드 개발자가 기대하는 수준의 커스터마이징은 어려웠습니다. 결국 HTML과 CSS를 직접 삽입하기 시작했습니다. (애초에 목적이 이쁘게 꾸미는 프레임워크가 아닙니다!! Streamlit이 잘못된게 아니에요!!)

custom_html = """
<div class="result-card" style="border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; margin: 20px 0;">
    <h3 style="color: #333; font-family: 'Segoe UI', sans-serif;">분석 결과</h3>
    <div class="sentiment-meter" style="background: linear-gradient(to right, #ff4b4b, #ffff4b, #4bff4b); height: 20px; border-radius: 10px;">
        <div class="marker" style="position: relative; left: {}%; transform: translateX(-50%); width: 10px; height: 30px; background-color: #333; border-radius: 5px;"></div>
    </div>
</div>
"""

st.markdown(custom_html.format(sentiment_score * 100), unsafe_allow_html=True)

이런 방식은 작동은 했지만,  익숙한 컴포넌트 기반 개발 방식과는 거리가 멀었습니다. 마치 오래된 웹사이트를 유지보수하는 느낌이었어요.

페이지네이션과 DOM 컨트롤

특히 고전했던 부분은 페이지네이션과 DOM 컨트롤이었습니다.

React나 Vue에서는 상태 관리와 컴포넌트 라이프사이클을 통해 쉽게 구현할 수 있는 기능들이 Streamlit에서는 상당히 번거로웠습니다.

(물론 제가 제대로 찾아보지 못한 것일 수도 있습니다!!)

예를 들어, 분석 결과를 페이지로 나누어 표시하려면 이런 식으로 접근해야 했습니다.

(배포한 코드와는 차이가 있습니다! - 페이지네이션 제거)

import streamlit as st
import pandas as pd

# 세션 상태를 사용한 페이지네이션
if 'page_number' not in st.session_state:
    st.session_state.page_number = 0
    
# 데이터 로드
data = pd.read_csv("large_results.csv")
items_per_page = 10
total_pages = len(data) // items_per_page + (1 if len(data) % items_per_page > 0 else 0)

# 현재 페이지 데이터 계산
start_idx = st.session_state.page_number * items_per_page
end_idx = min(start_idx + items_per_page, len(data))
current_page_data = data.iloc[start_idx:end_idx]

# 현재 페이지 데이터 표시
st.write(f"결과 {start_idx+1}–{end_idx} / 총 {len(data)}개")
st.table(current_page_data)

# 페이지네이션 컨트롤
col1, col2 = st.columns(2)
if col1.button("이전 페이지") and st.session_state.page_number > 0:
    st.session_state.page_number -= 1
    st.experimental_rerun()
    
if col2.button("다음 페이지") and st.session_state.page_number < total_pages - 1:
    st.session_state.page_number += 1
    st.experimental_rerun()

이 방식은 작동은 하지만, 페이지 전환 시 전체 앱이 새로고침되어 사용자 경험이 매끄럽지 않았습니다.

React에서 라이브러리를 사용하지 않더라도 useState와 조건부 렌더링으로 간단히 해결할 수 있는 문제가 훨씬 복잡해진 느낌이었죠.

웹과 AI의 접점

해커톤과 팀 프로젝트를 통해 느낀 점은, Streamlit이 '웹 개발'과 'AI/ML 개발' 사이의 간극을 메우기 위한 도구라고 생각합니다.

완벽한 프론트엔드 솔루션은 아니지만, AI/ML 엔지니어와 비개발자들이 자신의 아이디어를 빠르게 시각화하고 공유하는 데는 탁월한 도구였어요.

위에서도 언급했지만 저에게 가장 놀라웠던 점은 비개발자들도 Streamlit을 통해 자신의 아이디어를 AI 생태계 안에서 구현해볼 수 있다는 것입니다. 아이디어가 있지만 기술적 장벽 때문에 실현하지 못했던 사람들이, 이제는 간단한 파이썬 코드만으로도 자신의 아이디어를 프로토타입으로 만들어 초기 검증을 할 수 있게 된 것이죠.

이런 초기 검증 과정에서 가능성이 확인되면, 그 후에는 스스로 더 깊게 학습하거나 전문가를 찾아 협업함으로써 더 완성도 높은 서비스로 발전시킬 수 있게 됩니다. 진입 장벽이 낮아지면서 AI 기술을 활용하는 접근성이 크게 향상된 것입니다! 이는 마치 워드프레스나 아임웹등의 서비스가 웹 개발을 모르는 사람들에게 웹사이트 제작의 문을 열어준 것과 비슷한 변화라고 생각합니다.

Streamlit의 진짜 목적

이번 해커톤을 경험하며 생각한건, Streamlit을 프론트엔드, 웹 개발 도구의 관점에서 바라보는 것 자체가 잘못된 접근이라는 점입니다! Streamlit은 애초에 화려한 UI/UX나 복잡한 인터랙션을 위한 도구가 아닙니다.

사실, 스타일링이나 페이지네이션의 한계는 Streamlit의 '단점'이라기보다는 그냥 이 도구의 범위를 벗어난 기능입니다.

이건 마치 망치로 나사를 박으려고 하면서 망치가 나쁘다고 말하는 것과 비슷하다 생각해요.

Streamlit의 진짜 목적은 ML 엔지니어들이 자신이 만든 모델을 쉽고 빠르게 시각화하고 상호작용할 수 있게 하는 것이었습니다.

ML 엔지니어들에겐 완벽한 UI보다 모델의 성능과 결과를 확인하는 것이 훨씬 중요하니까요.

프론트엔드 개발자인 저로서는 처음에 이 점을 놓기가 힘들었습니다. 모든 것을 '좋은 UI/UX'의 관점에서만 바라봤거든요. 하지만 해커톤을 통해 AI/ML 엔지니어의 이야기나 다양한 사람들과 대화하면서, 그들에게 필요한게 화려한 애니메이션이나 완벽한 반응형 디자인이 아니라 '모델이 제대로 작동하는지 빠르게 확인하고 팀원들과 공유할 수 있는 방법'이라는 걸 깨달았습니다.

그래서 Streamlit은 ML 엔지니어들이 웹 개발 없이도 자신의 작업 결과를 확인하고 공유할 수 있게 만들어주는, 정확히 그 목적에 최적화된 도구입니다!!