팀즈 툴킷 처음 사용해 보기
이 글은 2024-08-09에 최종 업데이트 되었습니다.
Table of contents
1. VS Code 로 첫 프로젝트 만들기
이제 처음으로 VS Code를 이용한 첫 코파일럿 플러그인을 만들어 보겠습니다. 사실은 팀즈 앱의 한 종류인 메세지 확장 (Message Extension, ME)이며, 이 메세지 확장앱이 코파일럿의 플러그인으로도 활용되는 것이라고 보시면 좋습니다.
1-1. VS Code 실행하기
시작메뉴를 이용해 VS Code를 시작하거나,
명령 프롬프트에서 VS Code를 시작하십시오.
1-2. 팀즈 툴킷으로 새로운 앱 (ME) 생성
자 이제 VS Code를 이용해서 새로운 앱을 만들 차례 입니다. 왼쪽 메뉴에서 팀즈 아이콘을 클릭합니다. 그러면 왼쪽에 팀즈 툴킷의 패널이 보여집니다. 여기에서 Create a New App 버튼을 클릭합니다. 상단에 만들 수 있는 팀즈 앱을 선택하는 옵션이 펼쳐집니다. 지금 선택해야할 것은 Message Extension 입니다.
메세지 익스텐션의 종류를 선택하는 옵션이 펼쳐집니다. Custom Search Results 를 선택합니다.
검색을 하기 위한 메세지 익스텐션의 종류 중 Start with a Bot 을 선택합니다.
사용할 개발 언어는 JavaScript를 선택합니다.
프로젝트를 저장할 로컬컴퓨터의 폴더를 선택합니다. 저는 항상 Default folder 에 프로젝트를 만들고 있습니다. 여러분은 Browse를 클릭하여 원하는 위치를 지정하셔도 좋습니다.
프로젝트의 이름을 정해주어야 합니다. 각자 유니크한 이름의 프로젝트를 지어서 입력해 주십시오. 그리고 엔터키를 누릅니다.
여러명이 동일한 테넌트에서 같이 테스트하는 환경에서는 Azure에 만들어지는 자신의 앱을 잘 식별할 수 있어야 합니다. 따라서 테스트를 위한 환경에서는 프로젝트 이름이 자신의 별명이나 알리아스를 사용하는 것을 추천합니다.
프로젝트 이름까지 지어주고 엔터키를 치면 VS Code가 프로젝트를 만들고 새 창을 열어줍니다.
이렇게 새로운 프로젝트가 만들어 졌습니다.
공부를 하는 차원에서는 새로운 프로젝트가 만들어졌을 때, README.md 문서를 꼭 읽어보는 것을 추천합니다. 굉장히 많은 것을 배울 수 있습니다.
1-3. 팀즈 툴킷 M365 계정 로그인
이제 팀즈 툴킷에 나의 M365 계정을 넣어주어 코파일럿 플러그인을 개발할 수 있는 환경에 제대로 마련되었는지 확인해 봐야 합니다.
왼쪽메뉴에서 Teams 아이콘을 클릭하여 팀즈툴킷의 패널을 엽니다. 그리고 그 상단에서 Accounts 섹션안에 있는 Sign in Microsoft 365 를 클릭합니다.
팀즈 툴킷이 정상동작하려면 커스텀 앱 업로드 권한이 필요하다는 내용의 모달 확인창이 뜹니다. Sign in을 클릭합니다.
사인인 버튼을 클릭하면 웹브라우저로 M365 로그인 페이지가 뜹니다. M365와 코파일럿 라이선스를 가진 계정으로 로그인해줍니다.
비밀번호도 제대로 넣어줍니다.
정상적으로 로그인이 완료되면 이 페이지는 닫아도 됩니다.
로그인이 끝나면 팀즈 툴킷의 왼쪽 패널에 로그인한 계정이 보여지고, 해당 계정이 팀즈 커스텀 앱 업로드를 할 수 있는지, 코파일럿 라이선스를 가지고 있는지 확인하여 보여줍니다. 이 두개의 확인항목 모두 녹색 아이콘인지를 확인해 주세요.
커스텀 앱 업로드
커스텀 앱 업로드는 개발자가 자신이 만든 앱 패키지를 사이드 로딩 방식으로 업로드 하여 실행하고 테스트 할 수 있도록 하는 기능입니다. 사이드 로딩으로 업로드된 커스텀 앱은 나에게만 노출 됩니다.
2. 첫번쨰 앱 디버깅 모드로 실행하기
이제 바로 앱을 실행하여 잘 동작하는지 확인해 보겠습니다. 현재의 개발환경에 문제가 없는지 확인해볼 수 있는 가장 확실한 방법입니다. 실제 개발을 하기 전에 꼭 이 과정을 수행하여 문제가 있다면 해결하고 진행하셔야 합니다.
2-1. 디버깅 환경 설정
로컬 디버깅의 기본 옵션이 팀즈 툴킷의 빌트인 도구로 설정되어 있습니다. 이걸 웹브라우저로 변경해줄 필요가 있습니다. VS Code의 왼쪽 메뉴에서 Run and Debug 아이콘을 클릭하며 디버깅 패널을 엽니다. 패널 상단의 디버깅 환경을 선택하는 옵션에서 Debug in Teams (Edge) 혹은 Debug in Teams (Chrome)을 선택해줍니다. 저는 엣지 브라우저에 회사 프로필이 연결되어 있어 개발용 테넌트를 사용하는데 불편함이 있어서, 크롬브라우저로 선택하였습니다.
2-2. F5 키로 디버깅 시작
키보드로 F5를 누르거나, 마우스로 디버깅 시작 버튼을 클릭합니다.
그러면 VS Code가 프로젝트를 빌드하고, 배포하는 등의 작업을 자동으로 시작합니다.
모든 작업이 문제없이 완료되면 아래와 같이 웹브라우저로 팀즈가 실행되고 (로그인을 요구할 수도 있습니다.) 내가 만든 팀즈 앱을 추가하는 화면이 자동으로 뜹니다. 추가 버튼을 클릭합니다.
자동으로 업로드되어 배포된 앱이 내가 부여한 이름뒤에 local 이라는 접미사가 붙어 있는 것을 볼 수 있습니다. 이는 로컬 디버깅용으로 빌드되어 배포된 앱이라는 표식입니다.
버튼을 클릭하면 앱을 추가하는 작업이 진행됩니다. 작업이 완료되면 창은 닫합니다.
이렇게 배포된 앱은 팀즈의 왼쪽 메뉴에서 앱 아이콘을 클릭하여 앱화면으로 이동하고, 하단의 앱 관리 를 클릭하여 내가 추가한 앱 목록에서 찾아볼 수 있습니다. 여기에서 추가된 앱들의 정보를 확인하고, 삭제할 수도 있습니다.
3. 첫 플러그인 테스트 하기
이제 배포한 앱을 테스트 해보겠습니다. 이것이 코파일럿 플러그인 이지만 근본적으로 팀즈의 메세지 익스텐션을 활용한 것이므로, 개발자가 테스트할 때에는 먼저 이 앱이 메세지 익스텐션으로써 정상동작하는지 확인하여 문제가 없다면, 그 다움에 코파일럿 플러그인으로 동작하는 것을 테스트 하는 방법을 추천합니다.
3-1. 메세지 익스텐션 동작 테스트
메세지 익스텐션은 대화나 그룹챗에서 활용하는 추가기능입니다. 임의의 대상자와의 채팅에서 메세지 창 오른쪽의 + 아이콘을 클릭합니다. 사용가능한 앱의 목록이 펼쳐지면 현재 테스트 중인 메세지 익스텐션 앱을 찾습니다. 앱을 찾으면 클릭합니다.
메세지 익스텐션 앱의 창이 뜹니다. 검색어를 입력할 수 있는 필드가 나타납니다. 검색하고 싶은 단어를 입력해 보면 검색결과가 아래에 나오는 것을 볼 수 있습니다. 테스트로 쉬운 영어 단어를 입력해 보시길 바랍니다.
우리가 팀즈툴킷의 템플릿으로 만들어 배포한 메세지 익스텐션 앱은 기본 기능으로 입력된 검색어에 대한 NPM 패키지의 검색결과를 제공하는 기능을 가지고 있습니다. 만약 “fire” 라는 단어를 입력한다면 NPM 패키지 목록에서 fire 라는 단어로 검색하여 받은 NPM 패키지 목록을 보여주는 식입니다.
검색어를 입력하여 보여지는 NPM 패키지 들의 목록에서 하나를 클릭해 봅니다. 그러면 대화입력창에 커스텀 메세지 카드가 추가되는 것을 볼 수 있습니다. 카드에는 NPM 패키지의 이름과 설명이 보여집니다. 여기까지 문제가 없다면 메세지 익스텐션의 동작은 성공한 것입니다.
이 메세지 카드를 어댑티브 카드라고 부릅니다.
3-2 코파일럿 플러그인 동작 테스트
메세지 익스텐션으로의 기능 테스트가 정상적으로 완료되었으니 코파일럿 플러그인으로도 잘 동작하는지 확인할 차례 입니다. 팀즈의 M365 Chat 챗의 대화입력창에서 플러그인 버튼을 클릭하며 플러그인 목록창을 띄웁니다.
2024년 8월 기준으로 코파일럿의 플러그인은 아직 프리뷰 상태 입니다. 따라서 팀즈안에 있는 M365 Chat 에서만 플러그인이 동작합니다.
지금 우리가 디버깅 테스트 중인 플러그인의 이름을 찾습니다. 플러그인 이름 옆의 토클 버튼을 클릭하여 활성화 합니다.
플러그인은 기본적으로 비활성화되어 있는 상태 입니다. 사용자가 개별적으로 활성화 해야 해당 플러그인이 동작합니다.
이 플러그인을 사용하는 기본적인 프롬프트는 Find the npm pakage info in 검색어 using 플러그인이름 입니다. 현재 배포된 플러그인의 이름과 검색어를 활용해 프롬프트를 작성해 주십시오.
플러그인을 명시하여 호출
현재의 고객사 환경에는 노출되지 않는 기능이지만, 향후에는 아래와 같이 플러그인을 @맨션하여 명시적으로 해당 플러그인을 사용하는 지침을 줄 수 있습니다.
코파일럿의 답변은 내가 제공한 검색어와 관련있는 NPM 패키지의 목록입니다. 해당 목록의 아이템별로 숫자 아이콘의 링크 붙어 있는 것을 볼 수 있습니다. 마우스를 가져가 올려보면 메세지 카드가 팝업으로 보여집니다.
검색어를 다양하게 넣어보면서 테스트 해보시길 바랍니다.
4. 디버깅 종료
이제 웹브라우저를 닫으면 VS Code의 디버깅이 종료됩니다.