텍사스주 카일(Kyle, TX) 시는 오픈 데이터 포털을 운영하고 있습니다. 예산, 투자 보고서, 경찰 데이터, 수도 유틸리티 등 모든 정보가 공개되어 있다는 점에서 이미 규모 대비 대부분의 도시보다 앞서 있습니다. 하지만 많은 지방 자치 단체의 포털과 마찬가지로, 이 포털은 무겁게 느껴지는 호스팅 카탈로그 플랫폼 위에서 작동합니다. 페이지 로딩이 느리고, UI는 구식이며, 사용자 경험은 현대적인 웹사이트라기보다는 문서 관리 시스템에 가깝습니다.

저는 데이터 포털 구축을 위한 오픈 소스 (MIT) 프레임워크인 PortalJS의 유지 관리자 중 한 명입니다. 그리고 이번 사례는 우리가 최근 출시한 기능, 즉 평이한 영어 브리프(brief)만으로 포털을 구축하고 개편하는 에이전트 기술 (agent skills)을 테스트하기에 완벽한 기회라고 느꼈습니다. 그래서 저는 카일 시의 포털 프론트엔드를 재구축하는 시간을 직접 측정해 보았습니다. 실제 작업 시간은 약 30분이었으며, 그 결과물은 이 포스트의 마지막 부분에서 확인할 수 있습니다.

설정 (2분)

권장되는 경로는 단 한 줄의 명령어로, Node 22+ 외에는 설치할 것이 없습니다:

npm create portaljs@latest my-portal

이 명령은 샘플 데이터가 포함된 기본적인 Next.js 포털을 스캐폴딩 (scaffold)하며, PortalJS 기술 (skills)이 프로젝트 내에 미리 설치됩니다. 해당 디렉토리에서 Claude Code 세션을 시작하고 /를 입력하면 portaljs-* 명령어를 사용할 수 있습니다.

포털 설명하기 (한 번의 프롬프트)

/portaljs-new-portal build a revamped open data portal for City of Kyle in TX

여기서부터 흥미로워졌습니다. 기술 (skill)이 카일 시가 실제로 무엇을 게시하는지 살펴본 다음, 이를 바탕으로 포털을 구축했습니다: 6개 시 부서에 걸친 62개의 데이터 세트 (datasets), FY2026 일반 기금 (General Fund) 수치가 포함된 홈 페이지, 수익 내역 차트 (판매세, 재산세, 이전 지출), 부서별로 그룹화된 데이터 세트, 그리고 예산서, 투명성 대시보드, 전략 계획을 위한 주요 쇼케이스 (showcases) 등이 포함되었습니다.

모든 포털은 동일한 세 가지 인터페이스를 갖습니다: 홈 페이지, /search 경로의 카탈로그 (Catalog), 그리고 메타데이터, 미리보기, 다운로드 링크가 포함된 데이터 세트별 쇼케이스 (Showcase) 페이지입니다. 이 모든 것은 편집 가능한 순수한 Next.js로 구성됩니다. 종속성 (lock-in)도 없고, 특정 플랫폼에 갇히지도 않습니다.

네 번의 빌드, 하나의 투표

이 부분은 그 어떤 기능 목록보다도 이 워크플로우(workflow)에 대해 더 많은 것을 말해줍니다. 팀원 4명이 각각 동일한 과제를 수행했고, 동일한 브리프(brief)로부터 각자 자신만의 포털 버전을 구축했습니다. 그 후 우리는 그것들을 비교하고 가장 강력한 결과물에 투표했습니다. 전체 포털의 스캐폴딩 (scaffolding)에 몇 주가 아닌 30분밖에 걸리지 않는다면, "네 개를 만들고 가장 좋은 것을 고른다"는 방식은 설계의 완전히 합리적인 방법이 됩니다.

네 가지 결과물 모두 라이브 상태이므로, 여러분이 직접 우리의 투표 결과를 판단해 보실 수 있습니다:

1. https://city-of-kyle-open-data.arc.portaljs.com/ (우승작이며, 이 포스트에서 설명하는 버전입니다)
2. https://city-of-kyle.arc.portaljs.com/
3. https://kyle-open-data.arc.portaljs.com/
4. https://kyle-tx-open-data-portal.arc.portaljs.com/

배포하기 (5분)

/portaljs-deploy

이 명령은 정적 내보내기 (static export)를 빌드하고, 라이브 URL과 함께 PortalJS Arc (Cloudflare에서 관리하는 Datopian 호스팅)에 게시합니다. 동일한 앱은 Next.js가 지원하는 어디든 배포할 수 있습니다: Vercel, Cloudflare Pages, 또는 여러분의 자체 서버.

명확히 말씀드리자면, 이것은 시의 공개 데이터를 활용한 시연용 재구축이며, Kyle 시의 공식 프로젝트가 아닙니다. 핵심은 소규모 팀이 오후 시간 동안 무엇을 할 수 있는지를 보여주는 것입니다.

여러분의 도시에서 시도해 보세요

스캐폴딩 (scaffold) 외에도, 실제 포털에 필요한 덜 화려한 부분들을 처리하는 다른 기능들이 있습니다: CSV 및 GeoJSON을 로드하기 위한 /portaljs-add-dataset, 국가 카탈로그가 데이터를 수집할 수 있도록 표준을 준수하는 DCAT 피드(feeds)를 위한 /portaljs-add-dcat, CKAN, Socrata, OpenDataSoft 또는 ArcGIS에서 전체 카탈로그를 가져오기 위한 /portaljs-migrate, 그리고 기존 백엔드는 유지하면서 프론트엔드만 교체하고 싶을 때를 위한 /portaljs-connect-ckan이 있습니다.

대부분의 도시 포털은 더 나은 프론트엔드 (frontend)를 가질 자격이 있으며, 이제 무엇이 "더 나은" 것인지 알아내는 데 드는 비용은 단 하나의 프롬프트 (prompt)뿐입니다. 저장소 (repo)는 https://github.com/datopian/portaljs에 있습니다. 귀하의 도시 데이터로 직접 시도해 보세요. 만약 유용하다면, 스타 (star)를 눌러 다른 사람들이 찾을 수 있도록 도와주세요. 여러분이 무엇을 만들어낼지 정말 기대됩니다. 비판은 이슈 (issues)나 이곳의 댓글을 통해 언제든 환영합니다.