[언더스코어] 빅카인즈 지역이슈 큐레이션 서비스

2026/03/17 ~ 2026/04/03배포 링크

역할 프론트엔드 (1인 / 언더스코어 외주 / 백엔드 2인 및 빅카인즈 운영사와 협업)

요약 개발 완료 후 추가된 제약(사이트 내 삽입, iframe 금지, API 클라이언트 호출 금지)을 IIFE 빌드 + 정적 삽입으로 해결함. 최소 구조로 시작한 덕에 전환 비용이 빌드 설정 선에서 끝난 경험

프로젝트 개요

  • 당일 아침 발행된 신문기사를 수집해 LLM으로 지역, 주제별로 큐레이션하는 서비스입니다. 한국언론진흥재단 빅카인즈 사이트에 삽입되어 있으며, 프론트엔드 전체(대시보드, D3.js 차트, 이슈 상세)를 개발했습니다.

  • 이 프로젝트에는 발주처, 복수의 운영사, 원 사이트 개발사, 기능별 외주 업체가 얽혀 있어 의사결정이 한 곳에서 이루어질 수 없는 구조였고, 간단한 안건도 며칠씩 메일로 오가며 결정되는 환경이었습니다. 제약들이나 요구사항이 개발 완료 후에, 하나씩 추가된 배경입니다.

  • Java 기반의 JSP 프로젝트에 React 앱을 삽입했습니다.

  • 프론트엔드 파트를 모두 개발했습니다.

구현 화면

메인 화면 - 메인 대시보드
메인 화면 - 메인 대시보드

메인 화면 - 해당 지역의 주제별 이슈 리스트
메인 화면 - 해당 지역의 주제별 이슈 리스트
이슈 상세 화면 - 요약, 지표, 출처, 키워드, 발언
이슈 상세 화면 - 요약, 지표, 출처, 키워드, 발언

주요 구현 — 제약 타임라인

  1. 별도 서비스로 기획, 개발 완료

  2. 개발 말미, "운영사 사이트 내부에 삽입" 요구 → 유지보수성을 위해 iframe 삽입을 제안, 승인받아 개발 서버에 배포

  3. "내부망 API를 클라이언트가 직접 호출 금지" → Java Controller 프록시를 만들고 iframe과 postMessage로 통신

  4. 3일 뒤, 다른 담당자가 iframe 사용 반려, 운영 톰캣 서버에서 직접 기동하도록 요청

  5. 브라우저 히스토리 기반 내비게이션도 보안상 반려, URL 라우팅 대신 상태 기반 화면 전환으로 변경

React로 개발이 끝난 상태에서 JSP로 재구현은 무리라고 판단했고, React 빌드가 결국 <div id="root"> + JS 번들 조작이라는 점에 착안해 빌드 결과물(JS/CSS)을 JSP 템플릿에 정적 삽입하는 방향으로 결정했습니다.

트러블슈팅 및 디버깅

1. 정적 파일 삽입

당초 별도 서비스로 기획되었으나 개발 완료된 시점에 "운영사 사이트 내부 삽입, API 클라이언트 직접 호출 금지, iframe 금지"라는 제약이 하나씩 추가되었습니다. 당초 iframe으로 시도했으나 마지막 제약에 대한 대책으로 IIFE 빌드를 한 후, JSP 템플릿에 정적 js/css를 추가하는 방향으로 결정했습니다.

초기에 Next.js 도입을 검토했으나 사양 확인 후 프레임워크 없는 React를 선택했는데, 서버 런타임이 없는 구조였기 때문에 설정 변경만으로 정적 빌드를 시도할 수 있었습니다.

2. 스코프 오염 (JS/CSS) 및 IIFE 빌드

JS

삽입 직후, React 앱이 아니라 JSP 사이트의 기존 내비게이션이 멈추는 현상이 발생했습니다.

Plain text
Uncaught TypeError: Cannot read properties of undefined (reading 'css')
    at hasOwnProperty.call(props, 'css')
    at jsx (xxxxxxx.js:...)
    at HTMLElement.dispatch (jquery-2.1.1.js:3:6404)

JSX, Jquery를 보고 JS의 전역 스코프 오염으로 인해 사이트가 작동하지 않는 것으로 판단, IIFE로 빌드 방법을 변경했습니다.

이렇게 되면 번들 자체가 하나의 함수가 되기 때문에 번들을 쪼갤 수 없게 됩니다. 다만 번들을 쪼개서 얻는 이점보다 앱을 격리해 안정성을 얻는 것이 목적이었습니다. 실제로 JSP 앱의 각 섹션에서는 의존성들(d3.js, charts.js, 등)이 정적 파일로 import되었고 그대로 조립되는 환경이었기 때문입니다.

CSS

CSS의 경우 JSP 템플릿의 전역 스타일은 수정 권한이 없었기 때문에 모듈 레벨에서 전역 스타일을 덮어씌우는 방식을 사용했고, vanilla-extract의 해시된 클래스명이 React → JSP 방향 오염을 차단해 주었습니다.

회고

  • 레거시(JSP, jQuery)와 모던 프론트엔드 스택의 공존 문제를 JS 모듈 시스템에 대한 기초 지식으로 해결한 경험이었습니다.

  • 최소 구조가 리스크 대응력이 됐습니다. 초기에 Next.js 도입을 검토했다가 사양 확인 후 Vite + React로 가볍게 시작했는데, 서버 런타임이 없는 구조였기에 "삽입" 요구를 빌드 설정 변경만으로 통과할 수 있었습니다. SSR 프레임워크로 시작했다면 IIFE 우회 자체가 불가능했습니다.

  • 이해관계자가 많은 프로젝트에서는 승인된 결정도 뒤집힐 수 있다는 것을 알게 됐고, 이후 프로젝트에서는 각종 제약 사항(기동 환경, 네트워크 정책)을 프로젝트 시작 단계에서 먼저 모두 정리해야겠다는 생각을 했습니다.