FastStrap은 FastHTML 앱에서 재사용할 수 있는 파이썬 기반 UI 구성요소 라이브러리다. 제작자는 폼, 대시보드, 데이터 도구, AI 에이전트 친화적 인터페이스를 만들 때 쓸 수 있도록 Bootstrap 5와 HTMX를 결합하고, 핵심 기능은 가볍게 유지한다고 설명한다.
저장소: FastStrap
FastStrap은 제품 웹앱, 관리자 패널, 분석 대시보드, 모델링 도구 등을 파이썬으로 구축하는 개발자를 대상으로 한다. 제작자에 따르면 npm·webpack·vite 빌드 과정 없이 사용할 수 있으며, 핵심 작업에는 자바스크립트 지식이 필요하지 않다. 구성요소는 HTMX 속성을 지원해 페이지를 다시 불러오지 않는 동적 업데이트를 만들 수 있고, 기본 애니메이션은 CSS로 제공한다. GSAP 모션은 add_gsap(app)으로 선택해 추가한다. 다크 모드, 타입 힌트, 테마와 CSS 변수, 컴포넌트 부분별 클래스 지정 기능도 제공한다.
현재 소스 트리에는 폼·표시·피드백·탐색·레이아웃·패턴에 걸친 등록 UI 구성요소 179개가 있다. 이와 별도로 HTMX 프리셋, SEO 및 PWA 도구, 접근성 도우미, 핵심 유틸리티와 선택 통합 기능을 제공한다. 컴포넌트 레지스트리는 범주와 안정성, 자바스크립트 필요 여부를 기록하며, 개발자와 AI 에이전트가 이미 있는 구성요소를 찾도록 돕는다. 다만 에이전트 인터페이스는 향후 지원을 위한 방향으로 소개돼 있다.
설치와 빠른 시작
Python 패키지를 설치한다.
pip install faststrap
Markdown 표시 구성요소를 사용할 때만 선택 의존성을 설치하면 된다.
pip install "faststrap[markdown]"
faststrap[markdown]은 Markdown 표시 구성요소가 사용하는 파이썬 패키지를 설치한다. Chart.js와 GSAP 통합은 add_chartjs(app)과 add_gsap(app)으로 브라우저 자산을 불러오며, 파이썬 의존성을 추가하지 않는다.
저장소는 FastHTML 0.14.13 이상(python-fasthtml>=0.14.13), Python 3.10 이상을 개발 전제조건으로 제시한다. Git도 필요하다. FastStrap은 최신 태그 릴리스가 v0.9.1이라고 안내하면서, 현재 소스 트리에는 CHANGELOG.md의 [Unreleased] 항목에 기록된 후속 작업도 포함될 수 있다고 밝힌다.
다음은 프로젝트가 제시한 기본 앱 예제다.
from fasthtml.common import FastHTML, serve
from faststrap import add_bootstrap, Card, Button, create_theme
app = FastHTML()
# Use built-in theme or create custom
theme = create_theme(primary="#7BA05B", secondary="#48C774")
add_bootstrap(app, theme=theme, mode="dark")
@app.route("/")
def home():
return Card(
"Welcome to FastStrap! Build beautiful UIs in pure Python.",
header="Hello World!",
footer=Button("Get Started", variant="primary")
)
serve()
프로젝트는 이 예제에 자바스크립트 없이 반응형 웹앱을 만드는 흐름이 담겼다고 설명한다. Bootstrap을 연결할 때는 기본 설정 외에 mode="dark", 사용자 테마, CDN 사용을 선택할 수 있다. CDN 설정은 FastStrap이 관리하는 자산에만 적용되며, 앱 자체 CSS와 이미지는 배포 환경에서 별도로 제공해야 한다.
from fasthtml.common import FastHTML
from faststrap import add_bootstrap, create_theme
app = FastHTML()
# Basic setup (includes default FastStrap favicon)
add_bootstrap(app)
# With dark mode
add_bootstrap(app, mode="dark")
# Custom theme
theme = create_theme(primary="#7BA05B", secondary="#48C774")
add_bootstrap(app, theme=theme)
# Using CDN
# Note: this covers Faststrap-managed assets only.
# Your own app CSS/images still need to be served by your deployment setup.
add_bootstrap(app, use_cdn=True)
구성요소와 활용 기능
컴포넌트는 Bootstrap 관례를 따르며 파이썬식 이름과 키워드 인자를 사용한다. 버튼·입력란·탭 같은 요소에 HTMX 속성을 전달할 수 있다. 예를 들어 버튼에 hx_post와 hx_target을 지정하거나 검색 입력란에 hx_get과 hx_trigger를 지정할 수 있다.
주요 범주와 개수는 다음과 같다.
- 프리셋 모듈: 문서의 이 절은 유틸리티 21개로 표기한다. 검색, 무한 스크롤, 자동 새로고침, 지연 로딩, 낙관적 동작, 위치 정보, 폴링, 확인 프롬프트, 디바운스, 이벤트 교체, HTMX 응답 도우미, SSE 스트림·이벤트·주석, 인증 데코레이터 등을 포함한다.
- 폼: 공개 구성요소·도우미 36개.
Button,Form,FormBuilder,Input,Select,Checkbox,DateRangePicker,FileInput,MultiSelect,LiveValidationField,FormWizard,ThemeToggle등이 있다. - 표시: 구성요소 42개와 표 별칭 5개.
Card,Chart,DataTable,JsonViewer,KPICard,MapView,Markdown,Mermaid,MetricCard,RecordDetail,SSETarget,Table,Timeline등이 있다. - 피드백: 35개. 알림, 확인 대화상자, 오류 화면과 토스트, 모달, 진행 표시, 로더, 툴팁 등을 포함한다.
- 탐색: 23개. 아코디언, 하단 탐색, 빵 부스러기 탐색, 드로어, 드롭다운, 내비게이션 바, 페이지네이션, 탭 등이 있다.
- 레이아웃: 10개.
Container,Row,Col,Stack,Hero,DashboardGrid,PageHeader등이 있다. - 조합 패턴: 8개. 기능 소개, 푸터, 현대식 내비게이션 바, 가격표, 추천사 등을 제공한다. 조합 레이아웃은
DashboardLayout,LandingLayout,AuthLayout세 가지다. - 접근성 도우미 4개:
SkipLink,LiveRegion,VisuallyHidden,FocusTrap이다. 효과 모듈Fx는 자바스크립트 없는 애니메이션과 시각 효과를 제공한다.
선택 통합에는 add_chartjs(app)을 이용한 Chart.js, add_gsap(app)을 이용한 GSAP·모션·GsapReveal, 그리고 핵심 Bootstrap 토스트 API와 분리된 ModernToast 표면이 있다. Markdown 표시 구성요소에는 faststrap[markdown] 설치가 필요하다.
HTMX 프리셋은 검색, 지연 로딩, 폴링, 낙관적 동작, 위치 정보, 서버 전송 이벤트(SSE) 등의 바로 사용할 수 있는 패턴을 제공한다. SEO 모듈은 메타 태그, Open Graph, Twitter Cards, 구조화 데이터를 다룬다. PWA 모듈은 매니페스트, 서비스 워커, 아이콘, 오프라인 기반 기능을 갖춘 설치형 앱 설정을 돕는다. 더 무거운 플로팅 기능, 머신러닝 대시보드, 에이전트 화면 등은 핵심 패키지에 포함해 부풀리기보다 선택 통합으로 제공하는 것이 로드맵의 방향이다.
등록 구성요소는 @stable, @beta, @experimental 표시로 API 성숙도를 나타낸다. 현재 소스 트리에는 등록 UI 구성요소 179개, faststrap.__all__에 공개된 이름 245개가 있다고 안내한다. 구성요소 탐색에는 list_components(), find_components(), get_components_by_pattern(), list_component_metadata()를 사용할 수 있다.
v0.6.1부터 Pydantic 폼 빌더 API의 권장 이름은 FormBuilder다. v0.6.0 이하에서는 Form.from_pydantic()을 계속 사용하고, v0.6.1 이상에서는 FormBuilder.from_pydantic()을 권장한다. Form은 호환성 별칭으로 남는다. Table, THead, TBody, TRow, TCell은 기본 표 API이며, FastHTML과 FastStrap의 표 구성요소를 함께 가져오는 프로젝트를 위해 v0.6.1에서 BsTable, BsTHead, BsTBody, BsTRow, BsTCell 별칭을 추가했다.
테마와 정적 파일
create_theme()으로 기본·보조 색상 등을 지정한 사용자 테마를 만들 수 있다. 내장 테마로는 green-nature, blue-ocean, purple-magic, red-alert, orange-sunset, teal-oasis, indigo-night, pink-love, cyan-sky, gray-mist가 있다. 구성요소는 스타일 딕셔너리, CSS 변수, data·aria 속성, 슬롯별 클래스 재정의를 지원한다. None과 False 값은 자동으로 제외된다고 안내한다. 버튼에는 링크 렌더링, 로딩 문구와 스피너, 전체 너비, pill 모양, 활성 상태, 아이콘 위치 등을 설정할 수 있다.
v0.5.1 이상에는 자체 이미지와 CSS 등을 연결하는 mount_assets 도우미가 포함된다.
from faststrap import mount_assets
# Mount your "assets" directory at "/assets" URL
mount_assets(app, "assets")
# Use in your app
Img(src="/assets/logo.png")
Div(style="background-image: url('/assets/hero.jpg')")
자세한 내용은 정적 파일 안내를 참고하면 된다.
오프라인 구성요소 미리보기
별도 패키지인 FastStrap Preview Studio는 로컬 컴퓨터에서 구성요소를 시험하고 속성을 조정하는 도구다. 소개에는 미리 볼 수 있는 구성요소가 73개로 적혀 있으며, 네트워크 연결 없이 설치 후 사용할 수 있다고 설명한다.
pip install faststrap-preview-studio
faststrap-preview
실행하면 http://localhost:8080에서 스튜디오가 열린다. 모바일(375px), 태블릿(768px), 노트북(1024px), 데스크톱 화면을 시험하고, 변형·크기·색상·불리언 옵션을 실시간 조정할 수 있다. from faststrap import ... 형태의 가져오기 경로를 포함한 파이썬 코드 조각을 복사하고, 검색·로딩 상태·데이터 표를 위한 HTMX 샌드박스도 사용할 수 있다. 스튜디오는 FastStrap 스타일시트와 Bootstrap JS를 로컬에 포함하므로 설치 뒤에는 오프라인으로 작동한다.
문서와 개발
문서와 예제는 전체 API 범위를 반영하도록 확장 중이다. 프로젝트는 컴포넌트 색인, 아키텍처·성능·업그레이드 안내와 사용자 컴포넌트 가이드를 제공한다. 문서 사이트, 구성요소 색인, 아키텍처 안내, 성능 안내, 업그레이드 안내에서 확인할 수 있다.
저장소에는 학습 경로별 예제와 제품형 쇼케이스가 있다. 예제에는 첫 앱, 카드, 폼, HTMX 상호작용, 블로그·계산기·게임·전자상거래 앱, 사용자 테마, 컴포넌트 기본값, v0.7.0 구성요소와 워크플로 패턴, 선택 통합 예제가 포함된다. 쇼케이스에는 SaaS 랜딩 페이지, 명령 센터 대시보드, 온보딩 앱, 분석·운영 대시보드, 금융 화면 등이 있다. 전체 갤러리는 쇼케이스 문서에 있다.
개발 환경을 설치하고 테스트·검사를 수행하는 명령은 다음과 같다.
git clone https://github.com/Faststrap-org/Faststrap.git
cd Faststrap
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
pip install -e ".[dev]"
pytest
pytest --cov=faststrap
mypy src/faststrap
black src/faststrap tests
ruff check src/faststrap tests
문제 해결 도구는 faststrap doctor다. 기본 실행은 일반적인 설정 문제를 찾으며, 경로를 지정하려면 faststrap doctor --path .를 사용한다. 안내된 점검 대상에는 add_bootstrap() 누락, 서버리스 자산 모드 불일치, 지원되지 않는 의존성 버전이 있다. Bootstrap CSS·JS가 404를 반환하는 문제는 v0.4.6 이상에서 수정됐으며, 해결 방법으로 최신 버전 업데이트를 제시한다.
pip install --upgrade faststrap
fast_app()에서 테마가 적용되지 않을 때는 루트 요소에 data_bs_theme을 지정하라고 안내한다. Html()과 Head()를 직접 만들 때는 FastStrap 스타일을 위해 *app.hdrs를 포함해야 한다. 자세한 내용은 문제 해결 안내를 참고하면 된다.
기여자는 기여 안내, 컴포넌트 제작 안내, 로드맵을 참고할 수 있다. 기여 안내는 활성 또는 계획된 항목을 선택하고, 기존 제작 패턴을 따르고, 테스트를 작성한 뒤 PR을 제출하는 흐름을 제시한다. 테스트는 컴포넌트당 8~15개를 목표로 100% 커버리지를 권장하며, 프로젝트는 PR을 48시간 안에 검토한다고 안내한다.
그 밖의 자료는 컴포넌트 명세, 변경 기록, 저장소 README, 이슈, 토론에서 볼 수 있다. FastStrap은 MIT 라이선스로 배포된다. FastHTML, Bootstrap, HTMX와 기여자들을 프로젝트의 기반으로 언급한다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요