Teams 앱 개발 입문: 초보자를 위한 소개

By Mirko Peters · 2026-05-19 · Updated 2026-09-13

탭, 봇, 확장 기능, 프로젝트 설정, 로컬 테스트, UI 사용자 지정, 앱 게시까지 살펴보며 Microsoft Teams 앱 개발을 시작해 보세요.

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

Microsoft Teams용 앱을 만들면 팀의 디지털 작업 공간을 한 단계 더 발전시킬 수 있습니다. 기본 제공 기능에만 의존하지 않고, Teams 앱을 사용하면 사람들이 이미 협업하는 바로 그 자리에 맞춤형 도구, 대화형 대시보드, 봇 등을 추가할 수 있습니다. 조직에서는 이를 통해 업무 흐름이 더 원활해지고 시간을 절약할 수 있으며, Teams를 우리 팀에 꼭 맞게 만들 수 있습니다.

이 가이드에서는 핵심 개념부터 직접 해보는 설정까지, Teams 앱 개발의 기초를 차례로 배우게 됩니다. Teams Toolkit이 무엇인지 살펴보고, Microsoft 365가 왜 중요한지 설명하며, 탭, 봇, 확장 기능, 커넥터 같은 핵심 용어를 소개합니다. 이 가이드를 마치면 무엇이 가능한지 알게 되고, Microsoft Teams에서 팀에 맞는 맞춤형 솔루션을 만들 준비가 되어 있을 것입니다.

Teams Toolkit 앱 및 개발자 환경 시작하기

Microsoft Teams용 앱 개발을 시작할 때는 적절한 도구를 선택하고 작업 환경을 설정하는 것이 매우 중요합니다. Teams Toolkit이 핵심 도구이며, Visual Studio Code에 바로 연결되어 모든 요소를 하나로 묶어 줍니다. 이를 통해 Teams 앱을 설계, 개발, 테스트, 배포할 수 있는 올인원 환경을 얻을 수 있어 작업이 훨씬 간단해지고 생산성도 크게 높아집니다.

처음 시작하는 경우에도 Teams Toolkit을 사용해 Visual Studio Code 안에서 작업하면 여러 프로그램을 오갈 필요가 없고, 까다로운 명령줄 단계를 기억할 필요도 없습니다. 템플릿, 설정, 심지어 로컬 테스트까지 모두 손이 닿는 곳에 있습니다. 이 구성은 속도와 반복 가능성을 고려해 설계되었으며, 초보자의 작업 속도를 떨어뜨리는 어려움을 줄여 줍니다.

도구를 사용해 작업을 시작하기 전에 확인해야 할 필수 항목이 몇 가지 있습니다. 올바른 소프트웨어를 설치하고, Microsoft 365 테스트 테넌트를 설정하고, 작업 도중 막히지 않도록 필요한 권한을 갖추었는지 확인하는 것입니다. 개발 환경을 준비하고 나면 프로젝트 생성부터 완성된 앱 게시까지 더 원활하게 진행할 수 있습니다. 각 세부 사항을 차근차근 살펴보며 놓치는 부분 없이 바로 시작할 수 있도록 안내하겠습니다.

사전 요구 사항 및 Microsoft 365 고려 사항 검토

• Visual Studio Code 및 Teams Toolkit 확장 기능: 먼저 Visual Studio Code를 설치한 다음 Teams Toolkit 확장 기능을 추가해야 합니다. 이 확장 기능이 Teams 앱 개발을 위한 주요 작업 공간이 됩니다.
• Node.js 및 관련 도구: 많은 Teams 앱이 JavaScript 또는 TypeScript를 사용하므로, 종속성 처리와 스크립트 실행을 위해 Node.js(LTS 버전)가 설치되어 있는지 확인하세요.
• Microsoft 365 개발자 계정: Microsoft 365 테스트 테넌트를 설정하세요. 이를 통해 실제 조직 환경에 영향을 주지 않고 앱을 안전하게 빌드, 테스트, 미리 보기할 수 있습니다.
• 권한 및 관리자 액세스: 테스트 테넌트에서 관리자 권한 또는 개발 권한이 있는지 확인하세요. 일부 기능(봇 또는 데이터 커넥터 등)에는 상승된 액세스 권한이 필요합니다.
• 인터넷 액세스 및 브라우저: 코드 동기화, 미리 보기 실행, 클라우드 서비스 인증을 위해서는 안정적인 인터넷 연결이 필요합니다. Teams 및 앱 미리 보기 포털에 접속하려면 최신 브라우저도 있어야 합니다.

Teams 앱 유형과 기능 이해하기

모든 Teams 앱이 같은 방식으로 만들어지는 것은 아닙니다. Microsoft Teams는 여러 유형의 앱을 지원하며, 각 유형은 특정 시나리오에 맞는 고유한 강점을 가지고 있습니다. 주요 유형은 탭, 봇, 메시지 확장, 커넥터입니다. 적절한 유형을 선택하면 솔루션이 팀의 업무 흐름에 꼭 맞게 적용되고, 나중에 시간과 혼선을 줄일 수 있습니다.

탭은 Teams 채널이나 채팅 안에 웹 앱으로 내장되어 표시됩니다. 사람들이 Teams를 벗어나지 않고 사용해야 하는 대시보드, 보고서, 양식 등을 떠올려 보십시오. 봇은 대화형 도우미와 같습니다. 질문에 답하고, 알림을 제공하거나, 프로세스를 단계별로 안내하기도 합니다. 보다 작업 중심의 기능이 필요하다면 메시지 확장을 사용하여 사용자가 메시지 입력창에서 앱과 상호 작용하도록 할 수 있습니다. 레코드를 검색하거나, 링크를 공유하거나, Teams 어디에서든 작업을 실행할 수 있습니다. 이러한 기능이 생산성을 어떻게 높이고 작업을 어떻게 간소화하는지 더 잘 이해하려면 Teams 메시지 확장에 대한 이 심층 분석을 확인해 보십시오.

그리고 커넥터가 있습니다. 커넥터는 다른 시스템의 업데이트나 알림을 Teams 채널로 자동 전송합니다. 예를 들어 GitHub나 Trello의 알림을 Teams에서 바로 확인할 수 있어, 탭을 전환하지 않아도 모든 구성원이 최신 상황을 파악할 수 있습니다. 어떤 유형이 필요에 맞는지, 그리고 언제 사용해야 하는지 이해하는 것이 핵심입니다. 봇은 자동화와 대화에 적합하고, 탭은 심층적인 상호 작용에 적합하며, 메시지 확장은 채팅으로 데이터를 가져오고, 커넥터는 팀이 자동으로 최신 상태를 유지하도록 돕습니다. 이처럼 올바르게 선택하면 아무 도구가 아니라 작업에 맞는 도구를 만들 수 있습니다.

Visual Studio Code에서 새 Teams Toolkit 앱 프로젝트 시작하기

개발자 도구 설정이 끝나면 Teams Toolkit을 사용하여 Visual Studio Code에서 본격적인 작업이 시작됩니다. 이곳은 첫 번째 Teams 앱 프로젝트를 만들기 위한 출발점입니다. 앱 유형(탭 또는 봇 등)을 선택하도록 안내하는 프롬프트가 나타나며, 바로 사용할 수 있는 템플릿 중에서 선택하여 작업을 빠르게 시작할 수 있습니다.

템플릿 선택은 건물을 짓기 위한 설계도를 고르는 것과 같습니다. 대시보드를 만드는 것인가요, 대화형 봇을 만드는 것인가요, 아니면 데이터를 가져와 채팅에 공유하는 기능을 만드는 것인가요? Teams Toolkit은 이러한 모든 시나리오에 맞는 유용한 출발점을 제공합니다. 설정 과정은 단순히 양식을 채우는 것이 아니라, 앱이 무엇을 할지, 그리고 어떤 Teams 기능을 사용할지 정의하는 기회입니다.

프로젝트 초기화를 마치면 작업 공간에 특정 폴더 구조와 파일 세트가 나타나며, 각 파일은 코드를 처리하거나, 설정을 정의하거나, 배포를 관리하는 등 저마다 다른 역할을 합니다. 각 부분의 역할을 미리 알아두면 혼란을 줄이고, 프로젝트가 커지더라도 방향을 잃지 않도록 할 수 있습니다. 다음으로 각 폴더와 파일이 어떤 역할을 하는지 자세히 살펴보겠으니, 무엇이 무엇인지 헷갈리지 않도록 참고하십시오.

프로젝트 구조 및 디렉터리 레이아웃 살펴보기

• src 디렉터리: 앱의 핵심 로직과 UI 코드가 모두 위치하는 곳입니다. 봇을 만들든 탭을 만들든, TypeScript 또는 JavaScript 파일을 여기에서 작성하고 정리하게 됩니다.
• env 폴더: 개발 및 운영 환경 등 환경별 구성 파일을 보관합니다. 비밀 정보를 코드에 직접 입력하지 않고도 설정을 관리하는 데 도움이 됩니다.
• infrastructure 또는 infra 폴더: Azure 리소스나 기타 배포 요구 사항에 사용되는 스크립트와 템플릿이 들어 있습니다. 앱이 클라우드 서비스를 프로비저닝하는 경우에 필요합니다.
• 앱 매니페스트 폴더: 아이콘, 앱 이름, 설명, 권한 등 앱 매니페스트를 정의하는 곳입니다. Teams가 앱을 인식하고 설치하는 방식을 결정합니다.
• README.md 및 docs: 이 파일들은 문서, 지침, 메모를 제공하여 여러분과 팀원들이 프로젝트의 설정과 목적을 한눈에 이해하도록 돕습니다.

Ngrok으로 Teams Toolkit 앱을 로컬에서 미리 보기

Teams 앱을 조직 전체에 배포하기 전에, 사용자가 보게 될 것과 똑같은 환경에서 실시간으로 테스트해 보고 싶을 것입니다. Teams Toolkit이 많은 부분을 자동으로 처리하지만, Microsoft Teams는 클라우드 서비스이므로 로컬 웹 서버를 열기만 하면 모든 것이 바로 작동하지는 않습니다. 이때 ngrok이 필요합니다.

Ngrok은 공용 인터넷에서 로컬 컴퓨터로 이어지는 보안 터널을 설정합니다. 즉, 내 컴퓨터에서 실행 중이더라도 Teams 앱(탭, 봇, 메시지 확장 모두 해당)에 Microsoft Teams가 접근할 수 있습니다. Teams Toolkit은 ngrok과 통합되어 있어 몇 번의 클릭만으로 설정할 수 있으며, 방화벽이나 네트워킹 문제로 고생할 필요가 없습니다.

Teams Toolkit와 ngrok으로 로컬 미리 보기를 하면 Teams 인터페이스 안에서 무엇이 잘 작동하고 무엇을 고쳐야 하는지 바로 피드백을 받을 수 있습니다. 문제를 발견하면 코드를 수정하고 다시 로드하기만 하면 됩니다. 이렇게 피드백을 빠르게 주고받으면 만드는 단계에서 실제 결과를 확인하기까지 걸리는 시간이 줄어듭니다. 버그를 잡거나 출시 전에 사용자 경험을 다듬을 때 특히 중요합니다. Teams에서 로컬 미리 보기를 하면 팀 전체에 보여주기 전에 미리 제대로 완성할 수 있습니다.

Teams Toolkit 앱 사용자 지정: UI 및 데이터 개선

기본 작업을 익히고 앱이 실행되고 나면, 이제 앱을 완전히 내 것으로 만들 차례입니다. Teams 앱을 사용자 지정한다는 것은 색상을 바꾸거나 로고를 붙이는 것에 그치지 않습니다. 사용자가 브랜드를 쉽게 알아보고 도구가 팀의 요구에 맞도록 UI를 다듬는 일입니다. 앱 제목을 업데이트하거나, 갤러리 배경을 조정하거나, 아이콘을 교체해 조직의 개성에 맞추는 것부터 시작할 수 있습니다.

하지만 외관만의 문제는 아닙니다. 실제 데이터를 연결하면 앱이 데모에서 꼭 필요한 업무 도구로 바뀔 수 있습니다. 스프레드시트에서 정보를 가져오거나, 테이블의 행을 관리하거나, 사용자 지정 API 호출로 백엔드에 연결하고 싶을 수 있습니다. 이러한 개선을 통해 앱에 무엇을 표시하고 사용자가 매일 어떻게 상호 작용할지 직접 제어할 수 있습니다.

UI를 조정하거나 데이터 테이블을 설정할 때는 사용성도 잊지 마십시오. 명확한 양식, 알기 쉬운 레이블, 상호 작용하는 카드가 큰 도움이 됩니다. Teams의 상호 작용성을 높이는 아이디어를 더 얻고 싶다면 Teams에서 상호 작용형 Adaptive Card를 활용하는 방법을 읽어 보시기 바랍니다. 알림을 사용자 지정하여 사용자가 최신 정보를 놓치지 않도록 하려면 더 스마트한 Teams 알림과 Adaptive Card 가이드에서 많은 내용을 확인할 수 있습니다. 다음으로 앱 제목, 배경, 수동 데이터 연결을 처리하여 앱의 완성도와 유용성을 높이는 방법을 자세히 살펴보겠습니다.

앱 제목 및 갤러리 배경 업데이트

• 앱 제목 변경: 매니페스트 파일을 열고 앱의 표시 이름을 조직 또는 프로젝트 브랜딩에 맞게 업데이트합니다.
• 갤러리 배경 이미지 교체: 기본 배경을 팀의 스타일이나 색상 팔레트를 반영한 사용자 지정 이미지로 바꿉니다.
• 앱 아이콘 업데이트: Teams 갤러리용 정사각형 아이콘과 윤곽선 아이콘을 업로드합니다. 이렇게 하면 Teams 앱 목록에서 앱이 시각적으로 돋보일 수 있습니다.

데이터 수동 연결 및 테이블 관리

• 데이터 소스 연결: 데이터베이스, Excel 파일 또는 API 엔드포인트에 앱을 수동으로 연결합니다. 앱의 구성에서 올바른 소스를 지정하기만 하면 됩니다.
• 테이블 생성 및 수정: 새 테이블을 설정하고, 사용자 정보, 상태 또는 앱에 필요한 사용자 지정 필드를 위한 열을 추가합니다.
• 행 추가 또는 편집: 샘플 데이터를 입력하거나 값을 조정하고, 사용자가 정보를 동적으로 입력하도록 합니다. 이렇게 하면 앱의 콘텐츠가 최신 상태를 유지하고 유용하게 쓰일 수 있습니다.

Fluent UI와 Adaptive Card로 일관된 사용자 경험 설계하기

훌륭한 Teams 앱은 단순히 작동하는 것에 그치지 않고, Microsoft Teams 환경에 맞게 보이고 느껴져야 합니다. Fluent UI는 Teams 고유의 스타일과 맞는, 오픈 소스 기반의 접근성 높은 UI 구성 요소 세트를 제공합니다. Fluent UI를 사용하면 처음부터 만들지 않고도 최종 사용자에게 자연스럽게 보이는 양식 필드, 버튼, 목록, 레이아웃을 구성할 수 있습니다.

Adaptive Card도 핵심 요소입니다. Adaptive Card는 설계가 쉬운 상호 작용형 카드로, 채팅, 탭 또는 메시지 확장에 표시됩니다. 사용자 입력을 수집하거나, 동적 콘텐츠를 표시하거나, 워크플로 트리거를 만드는 데 사용할 수 있으며, 모두 유연한 카드 기반 인터페이스로 제공됩니다. Teams UI 가이드라인을 따르면 기기와 관계없이 모든 요소가 터치하기 쉽고 접근성이 보장됩니다.

Teams에서 UX 모범 사례의 핵심은 명확성과 속도입니다. 버튼에는 명확한 레이블을 붙이고, 관련 정보는 묶어서 표시하며, 카드에 세부 정보를 과하게 담지 마십시오. 반응형 디자인을 적용하면 앱이 웹, 데스크톱, 모바일에 맞게 조정됩니다. Adaptive Card와 자동화를 제대로 익히고 싶은 개발자와 Power Platform 전문가라면, 상호 작용형 Teams Adaptive Card 구축 가이드에 워크플로와 실용적인 JSON 예제가 가득하니 참고하시기 바랍니다.

요약하면, Fluent UI와 적응형 카드를 그대로 사용하면 앱이 기본 제공 기능처럼 자연스럽고 신뢰할 수 있게 느껴집니다. 사용자의 참여를 유도하고 혼란을 줄이며, 앱이 무시되는 탭 중 하나가 아니라 매일 사용하는 습관이 될 가능성을 높여 줍니다.

Teams Toolkit 앱 사용자 지정 및 게시

Teams 앱이 원하는 모습과 동작을 갖추었다면, 이제 개발 환경에서 조직 전체로 배포할 차례입니다. 게시 과정은 Teams Toolkit 앱을 사용자 지정하는 것에서 시작합니다. 매니페스트 파일, 권한, 브랜딩을 마지막으로 다듬으면 앱이 팀의 기대에 부합하고 조직의 검토 기준을 통과할 수 있습니다.

앱을 패키징한다는 것은 모든 파일, 이미지, 코드를 Teams가 인식할 수 있는 형식으로 모으는 것입니다. 매니페스트에서 필수 아이콘, 개인 정보 처리방침, 앱이 요청하는 권한을 다시 한번 확인해야 합니다. 보안은 특히 중요합니다. Teams에 설치되려면 앱이 조직 및 Microsoft 365 표준을 준수해야 합니다.

Teams Toolkit은 Microsoft 365 테넌트의 App Catalog에 앱을 제출하는 과정을 안내합니다. 더 광범위하게 배포하려면 Microsoft의 검토 절차를 거쳐 Teams App Store에 제출할 수도 있습니다. 모든 사용자가 새 도구를 설치하기 전에 관리자 승인이 필요할 수 있습니다. 이 단계에서 프로비저닝도 진행됩니다. 즉, 앱에 필요한 클라우드 리소스를 설정하여 설치되는 순간부터 실제 사용자가 바로 사용할 수 있도록 준비합니다.

성공적인 배포는 파일을 업로드하는 것 이상을 의미합니다. 철저히 테스트하고, 변경 사항을 알리고, 게시 후 문제를 모니터링하여 팀이 중단 없이 혜택을 누릴 수 있도록 해야 합니다.

학습 리소스와 Teams 앱 개발자를 위한 다음 단계 살펴보기

첫 Microsoft Teams 앱 프로젝트를 마친 것은 큰 성과입니다. 기술을 더 발전시키고 싶다면 여러분을 도와줄 리소스와 커뮤니티가 많이 있습니다. 먼저 공식 Microsoft 문서를 살펴보는 것이 좋습니다. 자주 업데이트되며 샘플 코드와 실제 시나리오가 포함되어 있어 추측에 의존할 일이 없습니다.

튜토리얼과 동영상 실습은 학습 곡선을 줄이는 데 도움이 됩니다. SharePoint와 Power Automate를 활용한 Teams 프로젝트 구성 가이드처럼 단계별 가이드를 찾아보시기 바랍니다. 이런 가이드는 앱이 복잡해질수록 더 구조화되고 자동화된 Teams 솔루션을 구축하는 데 도움이 됩니다. 프로젝트를 체계적으로 관리하고 Teams에서 자동화가 어떻게 활용되는지 익혀 두면 다른 개발자와 차별화할 수 있습니다.

커뮤니티 포럼과 토론 그룹은 실용적인 조언의 보고입니다. 다른 개발자와 연결하고, 피드백을 공유하고, 질문을 던져 보시기 바랍니다. Teams 앱 개발자 커뮤니티는 활발하고 포용적이며, 초보자이든 고급 통합으로 규모를 키우는 개발자이든 모두에게 도움이 됩니다. 거버넌스와 모범 사례는 Teams 거버넌스에 관한 이 리소스를 참고하시면, 솔루션의 성숙도가 높아질수록 규정 준수와 보안을 이해하는 데 도움이 됩니다.

다음 단계로는 Teams 앱 개발 역량을 입증하는 자격증 취득을 고려하거나, 봇, 자동화, 보안과 같은 고급 시나리오를 깊이 있게 학습해 보는 것도 좋습니다. 학습과 커뮤니티 참여를 적절히 병행하면 첫 앱을 출시한 뒤에도 계속 성장하게 될 것입니다.