VBA에서 Office 추가 기능으로의 마이그레이션: 웹 개발자가 유리한 이유

By Mirko Peters · 2026-08-11

수십 년 동안 일반적으로 VBA(Visual Basic for Applications)로 알려진 기술은 사무 자동화 분야에서 명실상부한 강자였습니다. Microsoft Excel이나 Word 안에서 사용자 지정 양식을 만들고, 데이터 처리를 자동화하고, 복잡한 보고서를 생성하려면 VBA가 주된 도구였습니다. 하지만 시대는 바뀌었습니다. 기업이 클라우드 우선 아키텍처, 플랫폼 간 호환성, 최신 웹 개발 스택을 도입하면서, 데스크톱에 묶인 기존 매크로는 점점 기술 부채의 병목이 되고 있습니다.

Automatically translated with AI from the original post. Read the English original

Titelbild: Migrating from VBA to Office Add-ins: Why Web Developers Have the Advantage

HTML, CSS, JavaScript를 아는 최신 웹 개발자라면 Microsoft 365를 확장할 때 이미 큰 경쟁력을 갖추고 있는 것입니다. Windows 아키텍처에 묶인 레거시 언어를 새로 배울 필요가 없습니다. 대신 기존 웹 개발 스택을 활용해 강력하고 안전하며 플랫폼에 구애받지 않는 Office 확장 기능을 만들 수 있습니다. VBA에서 최신 Office 추가 기능으로 옮겨 가는 것이 여러분의 경력과 조직에 가장 현명한 선택인 이유를 자세히 살펴보겠습니다.

핵심 요약

Office 추가 기능은 Office 내부에서 실행되는 웹 앱입니다. 작은 XML 매니페스트가 추가 기능이 표시되는 위치를 제어하며, Office JavaScript API를 통해 코드가 문서 데이터를 안전하게 읽고 쓸 수 있습니다. 한 번 빌드하면 Windows, Mac, Office for the web에서 모두 실행되며, 일반적인 최신 웹 앱처럼 업데이트를 배포할 수 있습니다.

무엇인가요(그리고 무엇이 아닌가요)

해당하는 것: 웹 서버에서 호스팅되는 HTML/CSS/JS(또는 React/Angular/Vue)이며, Office에서는 작업 창, 콘텐츠 추가 기능 또는 명령으로 렌더링됩니다.
해당하지 않는 것: COM/VSTO 바이너리, 머신 설치 프로그램 또는 OS에 종속된 플러그인입니다. 업데이트는 웹 앱을 다시 배포하여 제공됩니다.

복잡한 머신 수준 설치 프로그램, 레지스트리 편집, 로컬 운영 체제와의 긴밀한 결합이 필요했던 기존 VSTO(Visual Studio Tools for Office) 또는 COM 추가 기능과 달리, 최신 Office 추가 기능은 본질적으로 Office에 내장된 보안 브라우저 컨트롤 안에서 호스팅되는 웹 페이지입니다. 따라서 배포 파이프라인은 다른 웹 애플리케이션을 배포하는 방식과 동일하게 보입니다.

핵심 구성 요소 세 가지

매니페스트(XML): 설계도에 해당하며, 배치 위치(리본/명령), 범위(Word/Excel), 권한, SourceLocation URL을 정의합니다.
웹 앱: 사용자 인터페이스와 로직을 담당하며, 어떤 프런트엔드 스택이든 사용할 수 있고 API와 통신합니다.
Office JS API: 통합 문서(워크북) 및 문서 데이터와 연결하는 브리지입니다(비동기 방식이며, Office/Excel/Word 객체를 통해 범위가 지정됩니다).

최소 매니페스트(복사하여 붙여넣는 시작 코드)

<?xml version="1.0" encoding="UTF-8"?><OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp" Version="1.0.0.0" Id="00000000-0000-0000-0000-000000000001" ProviderName="Contoso" DefaultLocale="en-US" DisplayName DefaultValue="Contoso Reports"> <Hosts> <Host Name="Workbook"/> <Host Name="Document"/> </Hosts> <DefaultSettings> <SourceLocation DefaultValue="https://yourdomain.com/addin/index.html"/> </DefaultSettings> <Permissions>ReadWriteDocument</Permissions> <VersionOverrides xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xsi:type="VersionOverridesV1_0"> <Hosts> <Host xsi:type="Workbook"> <Ribbons> <Ribbon> <Tabs> <Tab id="Contoso.Tab" label="Contoso"> <Group id="Contoso.Group" label="Reports"> <Control id="Contoso.OpenPane" label="Open" type="Button" superTip="Open Contoso task pane" onAction="ContosoAction.OpenPane"/> </Group> </Tab> </Tabs> </Ribbon> </Ribbons> <Actions> <FunctionFile resid="Contoso.FunctionFile.Url"/> <Function Name="ContosoAction.OpenPane"/> </Actions> </Host> </Hosts> <Resources> <bt:Urls xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"> <bt:Url id="Contoso.FunctionFile.Url" DefaultValue="https://yourdomain.com/addin/functions.html"/> </bt:Urls> </Resources> </VersionOverrides></OfficeApp>

SourceLocation과 URL을 호스트에 맞게 변경하세요. 실제로 쓰기 권한이 필요하기 전까지는 Permissions를 최소한으로 유지하세요(예: 쓰기 전까지 ReadDocument).

Office.js 기반 최소 Excel 코드

// index.html includes: <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>Office.onReady(() => { // Wire UI events, then…});async function writeMarkup() { await Excel.run(async (context) => { const sheet = context.workbook.worksheets.getActiveWorksheet(); const range = sheet.getRange("A1:B2"); range.values = [["Product", "Revenue"], ["Widgets", 125000]]; range.format.autofitColumns(); await context.sync(); });}async function readSelection() { await Excel.run(async (context) => { const range = context.workbook.getSelectedRange(); range.load("values,address"); await context.sync(); console.log("Selected:", range.address, range.values); });}

핵심 규칙

작업을 묶어 적용하려면 Excel.run(ctx => { …; return ctx.sync(); })를 사용하세요.
먼저 로드하고(range.load("props")), await context.sync()를 호출한 다음 값을 읽으세요.
모든 작업은 비동기입니다. DOM을 직접 조작하듯 명령형으로 편집하는 대신 작업을 연결하세요.

작업 창 vs 콘텐츠 추가 기능

작업 창: 옆에 표시되는 패널 UI로, 도구, 조회, 데이터 작업, 자동화에 적합합니다.
콘텐츠 추가 기능: 문서나 시트 안에 렌더링됩니다(예: 삽입형 시각 자료, 지도, KPI 타일).
명령: 작업 창을 열거나 JS 함수를 실행하는 리본 버튼입니다.

배포 방식

중앙 배포(관리 센터): 사용자, 그룹, 테넌트 단위로 할당합니다.
네트워크/URL 매니페스트 공유: 개발 및 테스트를 위한 사이드로드입니다.
AppSource: 공개 마켓플레이스입니다(브랜딩 및 규정 준수 필요).

보안 및 거버넌스 팁

<Permissions>에서 최소 권한 원칙을 지키세요.
모든 리소스에 CORS, CSP, HTTPS를 적용하세요.
토큰을 localStorage에 저장하지 마세요. 세션과 수명이 짧은 토큰을 사용하는 것이 좋습니다.
SSO를 사용한다면 Entra 앱과 함께 Office SSO를 구성하고, 그렇지 않으면 PKCE/OAuth로 대체하세요.
지원을 위해 작업을 기록하되(개인 식별 정보 제외), 테넌트의 DLP 정책을 준수하세요.

Power Platform 연계(보너스 기능)

작업 창에서 Power Automate 흐름을 트리거하세요(예: “Submit to Finance”).
작업 창에 Power BI 타일이나 보고서를 삽입하세요.
적절한 경우 M365 데이터(메일, 파일)에는 Graph를 사용하세요.

흔한 문제와 해결 방법

리본에 아무것도 표시되지 않음: 매니페스트의 ID나 위치가 잘못되었거나 호스트가 잘못되었습니다(예: Excel에서 Word 전용 설정 사용).
코드가 "아무 동작도 하지 않음": Excel.run 또는 await context.sync()가 누락되었습니다.
Mac/웹에서 인증 실패: 교차 출처(cross-origin), SSO, 팝업 흐름이 허용되었는지 확인하고, 모든 호스트에서 테스트하세요.
권한 오류: 요청한 기능이 매니페스트에 없습니다(예: ReadWriteDocument 없이 쓰기 시도).

시작 파일 구조

/addin /public index.html functions.html styles.css /src app.js excel-actions.js manifest.xml

이번 주에 직접 만들어 보기: 5단계 체크리스트

골격 만들기: index.html을 만들고, office.js를 포함한 뒤 간단한 UI를 렌더링합니다.
Excel 연결: Excel.run으로 읽기(선택 영역) 작업 하나와 쓰기(A1:B2) 작업 하나를 추가합니다.
매니페스트: SourceLocation이 index.html을 가리키도록 설정하고, ReadDocument를 먼저 설정합니다.
사이드로드: 개발용으로 설치(Office 웹 또는 데스크톱)한 뒤 리본 단추와 작업 창이 표시되는지 확인합니다.
안정화: 오류 처리를 추가하고, 권한을 줄이고, Mac과 웹에서 테스트한 다음 중앙 배포를 계획합니다.

자주 묻는 질문

Q: VBA나 VSTO 경험이 필요한가요?
아닙니다. 최신 추가 기능은 Office JS를 사용하는 순수 웹 앱이므로, 웹 개발 기술을 그대로 활용할 수 있습니다.

Q: 하나의 코드베이스로 모든 환경에서 실행할 수 있나요?
네. Windows, Mac, Office 웹에서 실행할 수 있습니다(호스트와 요구 사항 집합별로 기능을 검증하세요).

Q: 업데이트는 어떻게 배포되나요?
새 웹 빌드를 배포하면 클라이언트는 다음 로드 시 이를 받게 됩니다. 새 명령이나 권한이 추가될 때만 매니페스트를 업데이트하면 됩니다.

결론

Office 추가 기능은 웹 기술을 실제 Excel/Word 자동화로 바꾸는 가장 깔끔한 방법입니다. 이식성이 높고, 관리하기 쉬우며, 빠르게 배포할 수 있습니다. 매니페스트를 익히고 비동기 Office JS 흐름을 존중하면, 수많은 수작업 보고서와 반복적인 복사 붙여넣기 작업에서 벗어날 수 있습니다. VBA 없이 이러한 기능을 활용하는 방법을 더 알고 싶다면, 함께 제공되는 팟캐스트 에피소드를 꼭 확인해 보세요: Build Office Add-Ins for Excel and Word Without VBA.