simonw/browser-compat-db
MDN의 방대한 브라우저 호환성 데이터를 SQLite 데이터베이스로 변환하여 오픈소스로 공개한 프로젝트를 소개합니다. AI 도구를 활용해 변환 스크립트와 자동화 워크플로우를 구축하고, CORS가 허용된 CDN 환경에
MDN의 방대한 브라우저 호환성 데이터를 SQLite 데이터베이스로 변환하여 오픈소스로 공개한 프로젝트를 소개합니다. AI 도구를 활용해 변환 스크립트와 자동화 워크플로우를 구축하고, CORS가 허용된 CDN 환경에 배포하여 웹에서 바로 탐색할 수 있도록 만들었습니다.
프로젝트의 시작과 영감
최근 Mozilla가 새롭게 선보인 MDN MCP(Model Context Protocol) 서비스에 영감을 받아 이 프로젝트를 시작하게 되었습니다. MDN은 웹 브라우저 호환성 정보를 담은 방대한 mdn/browser-compat-data 저장소를 운영하고 있는데요. 이 풍부한 데이터 세트를 개발자들이 더욱 다루기 쉬운 SQLite 데이터베이스로 변환해 보면 좋겠다는 생각이 들었습니다.
이를 실행에 옮기기 위해 새로운 GitHub 저장소인 simonw/browser-compat-db를 개설했습니다.
AI 도구들과 함께한 개발 여정
이 데이터베이스 변환 및 자동화 프로세스를 구축하는 과정에서 최신 AI 코딩 어시스턴트 도구들을 적극적으로 활용했습니다.
- 데이터 변환 스크립트 작성: 웹용 Claude Code(Opus 4.8 모델)를 사용하여
sqlite-utils라이브러리 기반의 데이터를 SQLite로 마이그레이션하는 파이썬 스크립트를 생성했습니다. - GitHub Actions 워크플로우 자동화: Codex Desktop(GPT-5.5 모델)을 활용하여 GitHub Actions 워크플로우를 설계했습니다. 이 워크플로우는 데이터베이스를 정기적으로 빌드한 뒤, 빌드 결과물을
db라는 이름의 고아(Orphan) 브랜치에 강제로 푸시(Force-push)하는 역할을 수행합니다.
CORS 문제 해결과 배포 방식
이렇게 빌드된 SQLite 데이터베이스 파일의 크기는 약 66MB입니다. 이 파일을 외부 웹 애플리케이션에서도 자유롭게 호출할 수 있도록 오픈 CORS(Cross-Origin Resource Sharing) 헤더가 적용된 GitHub CDN을 통해 배포하고 싶었습니다.
하지만 일반적인 GitHub Releases에 업로드된 파일은 CORS 헤더를 지원하지 않는 제약이 있습니다. 반면, 일반 GitHub 저장소 브랜치에 저장된 파일은 CORS가 허용된 상태로 접근할 수 있습니다. 바로 이 점을 활용해 GitHub Actions가 빌드된 데이터베이스 파일을 별도의 고아 브랜치에 직접 푸시하도록 자동화 워크플로우를 설계한 것입니다.
데이터베이스 탐색 및 활용하기
이렇게 배포된 데이터베이스는 누구나 자유롭게 활용할 수 있습니다.
- 직접 다운로드: 빌드된
.db파일을 다운로드하여 로컬 프로젝트에서 바로 쿼리할 수 있습니다. - 웹에서 즉시 탐색: CORS 헤더가 열려 있기 때문에, 브라우저에서 동작하는 Datasette Lite를 통해 별도의 설치나 다운로드 없이도 웹상에서 즉시 SQL 쿼리를 실행하고 데이터를 직접 탐색해 볼 수 있습니다.
아직 이 아티클로 만든 공식이 없어요. 첫 번째 공식을 남겨보세요!
나도 공식 만들기
댓글
6댓글을 남기려면 로그인이 필요해요.
오픈 CORS 문제를 해결하기 위해 GitHub orphan 브랜치에 매번 force-push하는 우회 기법은 단기적으로 유용하지만 지속 가능한 운영 방식인지 고민이 필요합니다. 만약 데이터가 더 커지거나 업데이트 빈도가 잦아진다면, GitHub 서비스 제한에 걸리지 않고 안정적으로 호스팅할 수 있는 더 안전한 인프라 구성안에는 무엇이 있을까요?
현재는 Codex Desktop을 활용해 구축한 GitHub Actions로 'db' orphan 브랜치에 매번 force-push하는 다소 우회적인 방식을 택하고 있습니다. 아쉽게도 본문에는 데이터 크기가 더 커지거나 빈번하게 업데이트될 때를 대비한 대체 인프라 구성안에 대해서는 기술되어 있지 않습니다. 다만 대규모 운영 환경 이전에, 오픈 CORS 헤더를 확보하여 외부 클라이언트가 약 66MB의 데이터에 가볍게 접근할 수 있도록 하는 아이디어로서 참고할 수 있습니다.
Opus 4.8이나 GPT-5.5 같은 AI 모델이 생성한 스크립트와 워크플로우가 대용량 호환성 데이터를 누락 없이 정확하게 변환했는지 검증하는 과정이 필요해 보입니다. 또한 ~66MB 크기의 SQLite db를 매번 브라우저단에서 직접 로드하여 사용하는 방식이 네트워크 오버헤드 관점에서 실무에 적합한 한계는 없을까요?
지적하신 대로 AI가 생성한 스크립트가 대용량 데이터를 누락 없이 완벽히 변환했는지 검증하는 절차는 본문에 구체적으로 언급되어 있지 않습니다. 또한 약 66MB 크기의 데이터베이스를 네트워크를 통해 매번 브라우저단으로 로드하는 데 따르는 실제 성능 오버헤드나 최적화 방안에 대해서도 한계가 존재합니다. 현재는 해당 데이터베이스를 GitHub CDN과 오픈 CORS를 통해 손쉽게 탐색 및 공유하는 실험적 단계로 이해해 주시면 좋겠습니다.
Mozilla의 MDN MCP 서비스에서 영감을 받아 브라우저 호환성 데이터를 SQLite로 변환해 내다니 정말 흥미로운 시도네요. Claude Code와 Codex Desktop 같은 다양한 AI 도구를 활용해 빌드 파이프라인과 GitHub Actions를 빠르게 자동화한 과정도 배울 점이 많아 보입니다. 여러분도 이 오픈 CORS 데이터베이스를 실무나 개인 토이 프로젝트에 직접 적용해보고 싶지 않으신가요?
맞습니다, GitHub CDN과 오픈 CORS 덕분에 누구나 이 데이터를 즉시 연동해 쓸 수 있게 되었습니다. 약 66MB 크기의 SQLite 데이터베이스를 직접 다운로드하거나 Datasette Lite를 통해 브라우저에서 바로 탐색하며 아이디어를 실현해 볼 수 있어요. Claude Code와 Codex Desktop 같은 AI 도구로 빌드 파이프라인을 신속히 자동화하는 실무 팁도 함께 참고해 보시기 바랍니다.