웹용 VS Code - Azure

Name: Visual Studio Code
Author: Microsoft

VS Code for the Web은 설치가 필요 없는 브라우저 기반 Visual Studio Code 버전입니다. https://vscode.dev/azure를 통해 액세스할 수 있는 /azure(약칭) 환경은 Azure 개발을 위한 전용 공간으로, 몇 초 안에 Azure로 애플리케이션을 실행, 디버그 및 배포할 수 있습니다.

Azure Cloud Shell에서 제공되는 이 환경은 **최대 4시간의 컴퓨팅 시간**을 제공하여 개발 환경을 수동으로 구성하거나 종속성을 설치할 필요가 없습니다. /azure에는 최신 라이브러리, 확장 및 도구가 사전 로드되어 있어 즉시 코딩을 시작할 수 있습니다.

VS Code for the Web Azure

시작하기

/azure 환경에는 Azure 애플리케이션 개발 및 배포를 시작하는 데 필요한 모든 것이 포함되어 있습니다.

사전 설치된 확장

Azure Developer CLI - 이 확장을 사용하면 Azure Developer CLI를 사용하여 Azure 리소스를 더 쉽게 실행, 생성 및 Azure 애플리케이션을 배포할 수 있습니다.

지원되는 프로그래밍 언어

모든 주요 런타임이 사전 설치되어 있습니다.

Python - 3.12.9
Java - openjdk 17.0.16 2025-07-15 LTS
- OpenJDK Runtime Environment Microsoft-11926113 (build 17.0.16+8-LTS)
- OpenJDK 64-Bit Server VM Microsoft-11926113 (build 17.0.16+8-LTS, mixed mode, sharing)
Node.js - v20.14.0
C# - 9.0.304

GitHub 리포지토리

GitHub Repository 확장을 사용하여 변경 사항을 GitHub 리포지토리에 직접 커밋할 수 있습니다. GitHub Repositories를 사용하면 로컬 컴퓨터로 코드를 풀링할 필요 없이 편집기 내에서 리포지토리를 원격으로 탐색하고 편집할 수 있습니다. 확장에 대한 자세한 내용과 작동 방식은 GitHub Repositories 가이드에서 확인할 수 있습니다.

데스크톱 VS Code에서 작업 계속하기

Azure Cloud Shell 컨테이너 시간이 만료된 후 데스크톱 VS Code에서 작업을 계속할 수 있습니다. VS Code for the Web의 상태 표시줄에 있는 **Continue Working on** 버튼을 사용하여 코드를 선택한 GitHub 리포지토리에 커밋하고 로컬 환경으로 이동합니다.

이 환경 내에서 로컬 연속성에 대한 두 가지 옵션이 있습니다.

Docker 사용: 사전 구성된 개발 컨테이너를 시작합니다.
로컬 VS Code 사용: 리포지토리를 복제하고 README를 사용하여 환경을 구성합니다.

Azure 진입점

/azure 환경은 Microsoft Foundry와 통합되어 코드를 개발자에게 더 가깝게 가져옵니다. **Chat Playground**, **Agent Playground** 및 **Microsoft Foundry 홈페이지**와 같은 환경 내에서 **Open in VS Code for the Web**과 같은 버튼을 직접 사용할 수 있습니다. 자세한 내용은 샘플 사용 사례 또는 시나리오 섹션을 참조하십시오.

시작하기

모델 선택
에이전트 빌드 및 테스트
View Code를 선택한 다음 프로그래밍 언어 및 SDK를 선택합니다.
**Open in VS Code** 버튼을 클릭하여 VS Code for the Web으로 직접 이동합니다.

또는 Microsoft Foundry 홈페이지에서 에이전트를 만들 수도 있습니다.

Microsoft Foundry 홈페이지 열기 (https://ai.azure.com)
홈페이지에서 생성된 제안 코드 스니펫 보기
생성된 코드를 기반으로 에이전트를 생성하기 위한 원클릭 환경으로 **Open in VS Code**를 선택합니다.

또한 개발자는 AI App Gallery(https://aka.ms/aiapps)의 템플릿을 사용하여 시작하고 **Open in VS Code**를 선택하여 /azure 환경으로 템플릿을 한 번에 실행할 수 있습니다.

시작하기

AI 앱 갤러리로 이동(https://aka.ms/aiapps)
실행하려는 템플릿을 선택하거나 검색합니다.
드롭다운 메뉴에서 **Open in VS Code**를 선택합니다.
VS Code로 직접 시작하고 GitHub Copilot을 사용하여 궁금한 점에 답변합니다.

Azure 포털과의 통합도 있습니다. 개발자는 이제 코드 생성 시 Azure Copilot에서 "Open in VS Code" 버튼에 액세스할 수 있습니다.

시작하기

Azure 포털(https://portal.azure.com)을 열고 Azure 계정으로 로그인합니다.
Azure Copilot으로 이동하여 빌드하려는 시나리오 개발을 시작합니다.
Copilot이 코드를 생성하면 생성된 코드 파일을 선택하고 **Open in VS Code**를 선택합니다.
VS Code로 직접 시작하고 GitHub Copilot을 사용하여 추가 질문에 답변합니다.

샘플 사용 사례 또는 시나리오

다음은 \azure 환경에 대해 일반적으로 사용되는 시나리오입니다.

Microsoft Foundry를 사용하여 에이전트 만들기
1. Microsoft Foundry NextGen 포털에 액세스하고 에이전트에 대해 생성된 코드 옆에 있는 **Open in VS Code**를 선택합니다.
2. VS Code for the Web - Azure 환경이 초기화되고 환경 설정되도록 합니다.
3. README 파일을 읽고 **create_and_run_agent.py** 파일을 실행하는 단계를 따릅니다.
4. 에이전트가 성공적으로 생성되고 실행되었습니다! 에이전트를 미세 조정하려면 Foundry Extension(사전 설치됨)을 계속 사용하거나 아래 단계에 따라 에이전트로 애플리케이션을 만듭니다.
Microsoft Foundry를 사용하여 모델 배포를 만들고 VS Code에서 코드를 엽니다.
1. Microsoft Foundry 포털에서 Foundry Models의 o3, o4-mini 또는 MAI-DS-R1을 포함하여 사용 사례에 가장 적합한 모델을 선택합니다. 이 경우 에이전트 워크플로의 예제 모델로 gpt-4o-mini를 사용합니다.
2. gpt-4o-mini 모델 카드에서 모델 엔드포인트를 프로비저닝합니다.
3. 에이전트 플레이그라운드로 이동하여 최대 응답 및 이전 메시지와 같은 생성 제어를 수정합니다. 지식, 도구 및 작업을 추가합니다.
4. 샘플 프롬프트를 반복하고 에이전트 플레이그라운드에서 계속 실험합니다.
5. 만족스러우면 **View Code** 버튼을 선택하여 에이전트 플레이그라운드에서의 상호 작용에 대한 컨텍스트별 코드 샘플을 확인합니다.
  
  여기에서 Python, C#, JavaScript의 다국어 코드 샘플과 JSON, cURL, JavaScript, C#, Go를 포함하는 모델에 대한 샘플을 볼 수 있습니다. Entra ID는 "키 인증"을 사용하여 에이전트에 인증하는 데 사용할 수 있으며 이제 모델에 사용할 수 있습니다.
6. 준비가 되면 **Open in VS Code**를 선택하고 VS Code for the Web의 /azure 환경으로 리디렉션됩니다.
  
  환경이 설정되면서 코드 샘플, API 엔드포인트 및 키가 새로운 VS Code for the Web 작업 영역에 자동으로 가져와지는 것을 볼 수 있습니다.
  
  오른쪽 하단에서 API 키가 터미널 환경 변수에 설정되었고 샘플 코드가 성공적으로 다운로드되었음을 확인할 수 있습니다.
7. python agent_run.py를 통해 터미널에서 모델을 로컬로 실행합니다. 몇 초 안에 성공적인 모델 응답을 볼 수 있습니다.
8. azd 명령을 사용하여 에이전트를 사용하는 웹 앱을 프로비저닝하고 배포할 수 있습니다. azd init는 에이전트를 사용할 수 있는 기본 Azure 작업 영역을 생성하는 git 리포지토리를 초기화합니다.
9. azd up은 관련 Azure 리소스를 생성하여 웹 앱을 프로비저닝합니다. 완료되면 터미널에 제공된 링크를 선택하여 브라우저에서 애플리케이션이 실행되는 것을 볼 수 있습니다.
10. 왼쪽 하단에 있는 "Continue on Desktop"을 선택하여 데스크톱 VS Code 또는 GitHub Desktop에서 계속합니다. 이 버튼을 사용하면 작업 영역을 한 번의 작업으로 로컬 환경으로 이동할 수 있습니다. 기존 애플리케이션에 연결된 dev 컨테이너가 있는 경우 해당 컨테이너를 사용하거나 로컬 환경으로 이동하는 옵션이 있습니다.
빠른 Azure Function 앱 시작

위의 빠른 시작은 vscode.dev/azure에 적용 가능합니다. vscode.dev/azure는 모든 필수 구성 요소를 다루기 때문입니다.
- Python 설치됨
- Azure Functions Core Tools 설치됨
- 이것들을 직접 설치해야 합니다.
- Azure Functions 확장
AI Toolkit을 사용하여 AI 에이전트 빌드 및 테스트

주요 기능
- 풍부한 생성 AI 모델 소스(GitHub, ONNX, OpenAI, Anthropic, Google 등)가 있는 모델 카탈로그
- 원격으로 호스팅된 모델 또는 로컬에서 실행되는 Ollama 모델에서 나만의 모델 가져오기
- 채팅을 통한 모델 추론 또는 테스트를 위한 플레이그라운드
- 다중 모달 언어 모델에 대한 첨부 파일 지원
- 선택한 AI 모델에 대한 일괄 처리 프롬프트 실행
- 지원되는 인기 있는 평가자(F1 점수, 관련성, 유사성, 일관성 등)를 위한 데이터 세트로 AI 모델 평가
VS Code 확장 및 Python을 사용한 빠른 프로토타이핑
Azure Copilot을 사용하여 에이전트 생성, 편집 및 배포