엑셀 보고서를 실시간 웹 대시보드로 자동화하는 방법

CloudFlare R2와 Workers 무료 서비스 구조 이해하기

CloudFlare는 전 세계 웹 트래픽의 상당 부분을 처리하는 네트워크 서비스입니다. 이 강의에서 활용하는 핵심 구성 요소는 두 가지입니다. 하나는 데이터를 저장하는 R2 오브젝트 스토리지, 다른 하나는 저장된 데이터를 읽어 대시보드로 내보내는 Workers 서버리스 플랫폼입니다.

R2의 무료 티어 혜택은 저장 용량 10GB, 월 업로드 횟수 100만 회, 월 조회 횟수 1,000만 회이며 데이터 전송 요금은 0원입니다. 엑셀 파일만 보관한다면 10GB는 사실상 무제한으로 사용할 수 있습니다!

Workers는 하루에 10만 회 요청을 무료로 처리하며, 임직원 500명 미만인 조직이라면 두 서비스 모두 무료 티어로 충분히 운용할 수 있습니다.

R2는 외부에 공개되지 않는 잠긴 창고이고, Workers는 그 창고의 데이터를 안전하게 꺼내 보여주는 공개 서버입니다. 이 역할 분리 구조가 이 강의 전체의 핵심입니다.

파워쿼리로 여러 엑셀 파일 자동 취합하기

여러 엑셀 파일에 분산된 데이터를 하나의 시트에 자동으로 취합하는 보고서를 파워쿼리의 폴더 가져오기 기능으로 만들 수 있습니다. 마우스 클릭 10번이면 누구나 쉽게 만들 수 있습니다!

이렇게 쿼리를 한 번만 만들어두면, 이후에는 폴더에 파일을 추가하고 새로 고침만 하면 자동으로 업데이트되는 엑셀 보고서로 활용할 수 있습니다.

1. 엑셀 상단 데이터 탭을 -> 데이터 가져오기를 클릭합니다.
   
2. 파일에서 -> 폴더에서를 클릭해 취합할 파일들이 들어있는 폴더를 지정합니다.
   
3. 폴더를 선택하면, 새로운 창이 나오며 폴더 내 파일 목록을 확인할 수 있습니다. 목록에 이상이 없으면, 미리 보기 창 왼쪽 아래의 결합 -> 결합 및 로드를 선택합니다.
   
4. 파일 병합 창이 실행되면, 좌측 목록에서 시트를 선택한 후 데이터를 확인합니다. 데이터에 이상이 없다면 확인 버튼을 클릭합니다.
   
   
   오빠두Tip : 파워 쿼리는 각 파일의 머리글 순서가 다르더라도, 머리글 이름만 동일하다면 취합이 가능합니다!👍
5. 잠시만 기다리면 선택한 폴더의 엑셀 데이터 취합이 완료됩니다.
   
6. 이제 폴더에 새 파일을 추가한 뒤 표를 우클릭하고 새로 고침을 실행하면 자동으로 반영됩니다.
   
   
   오빠두Tip : 만약 폴더 경로가 바뀌면 파워쿼리 편집기 안에서 경로를 함께 업데이트해야 합니다. 폴더 경로를 실시간으로 반영하거나 M함수를 활용한 파워쿼리의 다양한 고급 예제는 파워쿼리 마스터 클래스를 확인하세요!
7. 만약 결합 버튼이 보이지 않는 엑셀 2016 및 2019 이전 버전을 사용중이라면, 데이터 변환을 클릭해 파워쿼리 편집기를 엽니다.
   
8. 파워쿼리 편집기가 실행되면 [Content] 열 오른쪽의 펼침 버튼을 클릭하면 동일한 파일 병합을 실행할 수 있습니다.
   
9. 설정을 마친 뒤 닫기 및 로드를 클릭하면 데이터가 시트에 불러와집니다.
   

무료 AI로 대시보드 구성과 레이아웃 설계하기

이제 취합한 데이터를 AI에 입력해 대시보드 구성 요소와 레이아웃 초안을 잡고, 완성된 HTML 코드를 받아 대시보드 파일을 만들어보겠습니다. 만약 유료 구독중인 AI 모델이 있다면, 해당 모델을 사용하시고 무료 버전으로는 Gemini의 Pro 모델을 활용하는 걸 추천드립니다.

1. 취합된 데이터 중 머리글을 포함한 일부를 선택해 복사합니다. 전체 데이터를 복사할 필요 없이 데이터 구조를 파악할 수 있는 분량이면 충분합니다.
   
2. AI 채팅 창에 Ctrl+Shift+V로 텍스트 형식으로 붙여넣기합니다. (엑셀 범위를 복사한 후, Ctrl+V로 붙여넣으면 이미지 형식으로 입력됩니다. 값으로 붙여넣을 땐, Ctrl + Shift + V 를 사용하세요.)
   
3. 붙여넣기한 데이터 아래에 Shift+Enter로 줄바꿈을 추가한 뒤, 대시보드 구성 요소와 레이아웃 초안을 요청하는 프롬프트를 입력하고 실행합니다.
   # 역할
   당신은 데이터를 분석하고 시각화 대시보드를 설계하는 프론트엔드 전문가입니다.# 목표
   위에 주어진 판매 데이터를 바탕으로, 대시보드를 만들기 전에 필요한 '구성 요소'와 '레이아웃'을 먼저 기획합니다.
   - 사용 대상: 삼성그룹 임직원 및 경영진
   - 핵심 목적: 매출·영업이익 현황을 한눈에 파악# 작업 순서
   1. 이 데이터로 분석 가능한 핵심 관점을 3~5개로 요약
   2. 위 목적에 맞는 KPI 지표 후보 제안 (각 지표의 계산 방식 포함)
   3. 추천 차트 목록 제안 (각 차트가 '답하는 질문' + 차트 유형)
   4. 화면 레이아웃 구성안 제시 (위 → 아래 배치 순서)# 출력 형식
   - 표 또는 항목별 목록으로 간결하게 정리합니다.
   - 다른 세션에 바로 복사해서 사용할 수 있는 md 텍스트로 작성합니다.
   - 경영진이 빠르게 검토할 수 있도록 핵심 위주로 구성합니다.# 주의사항
   - 지금은 '기획 단계'입니다. 대시보드 제작은 별도 세션에서 진행하겠습니다.
   - HTML 코드는 아직 작성하지 마세요. 구성안을 먼저 제안합니다.
4. AI가 KPI 지표, 차트 목록, 레이아웃 구성을 분석해 초안을 제안합니다. 레이아웃 초안이 마음에 든다면 그대로 사용하거나, 수정이 필요할 경우 상황에 맞는 구성으로 적절히 수정합니다.
   
5. 대시보드에 적용할 디자인 시스템 스타일 가이드를 선택합니다. 강의 자료에 포함된 링크에 접속하면 글로벌 브랜드 약 250개의 디자인 시스템이 정리되어 있습니다.
   https://www.oppadu.com/tools/design-systems-site/

   

6. 데이터 성격에 어울리는 브랜드를 검색해 스타일 가이드를 선택한 후, [시스템 가이드 다운로드] 버튼을 클릭해 가이드 파일을 다운로드 받습니다.
   
7. AI 입력창에 레이아웃 초안·구성 요소·스타일 가이드를 모두 넣은 후, 대시보드 HTML 코드를 요청합니다. HTML 코드 요청시에는 아래 프롬프트를 그대로 복붙해서 사용하셔도 좋습니다.
   # 역할
   당신은 주어진 데이터를 분석하고 HTML 코드로 작성된 시각화 대시보드를 만드는 프론트엔드 전문가입니다.# 목표
   위에 첨부한 데이터를 분석하는 대시보드(index.html)를 생성합니다.
   - 사용 대상: 삼성그룹 임직원 및 경영진
   - 핵심 목적: 매출·영업이익 현황을 한눈에 파악# 디자인 시스템
   첨부한 디자인 시스템 md 문서를 참고하세요.# 데이터 구조
   위에 주어진 데이터 샘플을 참고합니다.#데이터 연결 방식
   - 아래 데이터 연결 규칙은 반드시 지켜서 제작하세요.## 경로 설정
   - 데이터는 같은 서버의 상대경로 /data.xlsx를 fetch로 읽어올 것 (전체 URL 사용 금지)
   - data.xlsx 경로는 코드 상단에 변수(DATA_URL)로 선언합니다.
   - 같은 서버의 상대경로 './data.xlsx' 를 사용합니다. (전체 URL 사용 금지)
   → 로컬 폴더, 로컬 서버, Cloudflare R2 어디에 올려도 동일하게 동작해야 합니다.
   - SheetJS(xlsx) 라이브러리로 브라우저에서 직접 .xlsx 를 파싱합니다.
   - 데이터를 못 불러오면 화면에 안내 메시지 표시
   - 차트는 Chart.js 를 사용합니다## 실행 환경 자동 분기 (중요)
   페이지의 location.protocol 을 확인해 두 가지 모드로 자동 분기합니다.1) http/https 로 열린 경우 (R2·로컬 서버):
   - './data.xlsx' 를 fetch 로 자동 로드합니다.
   - 캐시 무력화: fetch URL 뒤에 '?t=' + Date.now() 를 붙여 매번 고유 URL을
   만들고, 옵션에 cache: 'no-store' 를 함께 적용합니다.
   (브라우저 캐시뿐 아니라 Cloudflare 엣지 캐시까지 우회하기 위함)
   - 60초마다 자동으로 다시 읽어 차트를 갱신합니다.2) file:// 로 열린 경우 (사용자가 HTML 파일을 더블클릭):
   - fetch 는 브라우저 보안상 동작하지 않으므로, "파일 선택" 버튼과
   드래그&드롭으로 사용자가 data.xlsx 를 직접 불러오게 합니다.
   - 읽은 파일은 FileReader 로 ArrayBuffer 변환 후 동일 파싱 로직으로 처리합니다.
   - 이 모드에서는 자동 갱신 없이, 파일을 다시 선택하면 갱신됩니다.

   - 두 모드는 워크북 파싱·렌더링 로직을 공용 함수로 공유합니다.

   # 포함할 항목 및 레이아웃

8. AI가 생성한 코드를 코드 다운로드 버튼으로 받아 저장합니다.
   

실시간으로 동작하는 웹 대시보드 만들기

이제 AI가 생성한 대시보드 코드를 로컬 환경에서 먼저 테스트한 뒤 CloudFlare에 배포할 파일 구조를 완성해보겠습니다. 대시보드가 데이터 파일을 정상으로 읽어 표시하는지 로컬에서 먼저 확인한 후, 클라우드플레어에서 웹 배포를 진행합니다.

1. 새 폴더를 생성한 후, 폴더 안에 파워쿼리로 취합한 데이터 엑셀 파일과 AI가 생성한 대시보드 파일을 함께 넣습니다.
   
2. 대시보드 파일 이름을 index로 변경합니다. (CloudFlare 에 등록한 URL 주소로 접속하면 index 파일이 표시됩니다.)
   
3. index 파일을 브라우저에서 열고, 파일 선택 기능으로 데이터 엑셀 파일을 불러옵니다. (이 단계는 로컬 환경에서 동작을 확인하는 테스트이며, 이후 웹에 등록하면 데이터가 자동으로 로딩됩니다.)
   
4. 웹 대시보드가 출력됩니다. KPI 수치, 차트, 필터 등 대시보드의 각 구성 요소가 정상으로 표시되는지 확인합니다.
   

CloudFlare 회원 가입 및 R2·Workers 생성법은 영상 강의를 참고하세요!

CloudFlare 계정 생성부터 R2 버킷 생성, Workers 배포, Cloudflare Access 보안 로그인 적용, 임직원 이메일 등록까지의 전체 설정 과정은 영상의 16:10~32:46 구간에서 상세히 정리했습니다.

영상 강의를 참고해 클라우드 플레어에 파일을 올리고, 엑셀과 연동해 자동화 대시보드를 제작해보세요. 실습 중 막히거나 어려운 부분은 댓글로 남겨주시면 확인 후 도움드리겠습니다.