자습서: 변형 기능 플래그를 사용하여 실험 실행(미리 보기)

아티클
05/21/2024

애플리케이션에서 실험을 실행하면 합리적 결정을 내려 앱 성능과 사용자 환경을 개선하는 데 도움이 될 수 있습니다. 이 가이드에서는 App Configuration 저장소 내에서 실험을 설정하고 실행하는 방법을 알아봅니다. App Configuration, Application Insights(미리 보기) 및 분할 실험 작업 영역(미리 보기)의 기능을 사용하여 데이터를 수집하고 측정하는 방법을 알아봅니다.

이렇게 하면 데이터 기반 결정을 내려 애플리케이션을 개선할 수 있습니다.

참고 항목

실험 과정을 시작하는 빠른 방법은 Quote of the Day AZD 샘플을 실행하는 것입니다. 이 리포지토리는 Azure App Configuration을 .NET 애플리케이션과 통합하여 실험을 실행하는 방법에 대한 Azure 리소스 프로비전 및 첫 번째 실험이 포함된 포괄적인 예를 제공합니다.

이 자습서에서는 다음을 수행합니다.

변형 기능 플래그 만들기
저장소에 Application Insights 리소스 추가
저장소에 분할 실험 작업 영역 추가
실험을 실행하기 위한 앱 설정
변형 기능 플래그에서 원격 분석 사용 및 실험 만들기
실험에 대한 메트릭 만들기
실험 결과 가져오기

필수 구성 요소

변형 기능 플래그 만들기(미리 보기)

기능 플래그 빠른 시작에 설명된 대로 끄기 및 켜기의 두 변형을 사용하여 인사말이라는 변형 기능 플래그를 만듭니다.

Application Insights(미리 보기) 리소스를 구성 저장소에 연결

실험을 실행하려면 먼저 작업 영역 기반 Application Insights 리소스를 App Configuration 저장소에 연결해야 합니다. 이 리소스를 App Configuration 저장소에 연결하면 실험을 위한 원격 분석 원본으로 구성 저장소가 설정됩니다.

App Configuration 저장소에서 원격 분석 > Application Insights(미리 보기)를 선택합니다.
변형 기능 플래그 및 애플리케이션에 대한 원격 분석 공급자로 사용할 Application Insights 리소스를 선택하고 저장을 선택합니다. Application Insights 리소스가 없으면 새로 만들기를 선택하여 리소스를 만듭니다. 진행 방법에 대한 자세한 내용을 보려면 작업 영역 기반 리소스 만들기를 참조하세요. 그런 다음 Application Insights(미리 보기)로 돌아가 사용 가능한 Application Insights 리소스 목록을 다시 로드하고 새 Application Insights 리소스를 선택합니다.
알림은 App Configuration 저장소에 대해 Application Insights 리소스가 성공적으로 업데이트되었음을 나타냅니다.

분할 실험 작업 영역(미리 보기)을 저장소에 연결

Azure App Configuration에서 실험을 실행하려면 분할 실험 작업 영역을 사용합니다. 분할 실험 작업 영역을 저장소에 연결하려면 아래 단계를 따릅니다.

App Configuration 저장소의 왼쪽 메뉴에서 실험>분할 실험 작업 영역(미리 보기)을 선택합니다.
분할 실험 작업 영역을 선택한 다음 저장을 선택합니다. 분할 실험 작업 영역이 없으면 분할 실험 작업 영역 빠른 시작에 따라 새로 만듭니다.

참고 항목

분할 실험 작업 영역에서 선택한 데이터 원본은 이전 단계에서 선택한 것과 동일한 Application Insights 리소스여야 합니다.
알림은 작업이 성공했음을 나타냅니다.

실험을 실행하기 위한 앱 설정

이제 Application Insights(미리 보기) 리소스를 App Configuration 저장소에 연결했으므로 실험(미리 보기)을 실행할 앱을 설정합니다.

이 예에서는 Quote of the Day라는 ASP.NET 웹앱을 만듭니다. 앱이 로드되면 인용문이 표시됩니다. 사용자는 좋아요를 표시하기 위해 하트 단추를 누를 수 있습니다. 참여를 개선하기 위해 개인 설정 인사말 메시지가 인용문을 좋아하는 사용자 수를 늘릴 수 있는지 알아보려고 합니다. Azure App Configuration에서 끄기 및 켜기의 두 가지 변형을 사용하여 인사말 기능 플래그를 만듭니다. 끄기 변형을 받은 사용자에게는 표준 제목이 표시됩니다. 켜기 변형을 가져오는 사용자는 인사말 메시지를 가져오게 됩니다. Application Insights에서 사용자 상호 작용의 원격 분석을 수집하고 저장합니다. Split Experimentation Workspace를 사용하면 실험의 효과를 분석할 수 있습니다.

앱 만들기 및 사용자 비밀 추가

명령 프롬프트를 열고 다음 코드를 실행합니다. 이렇게 하면 개별 계정 인증을 사용하여 ASP.NET Core에서 새 Razor Pages 애플리케이션이 QuoteOfTheDay라는 출력 폴더에 만들어집니다.
```
dotnet new razor --auth Individual -o QuoteOfTheDay
```
명령 프롬프트에서 QuoteOfTheDay 폴더로 이동하고 다음 명령을 실행하여 애플리케이션에 대한 사용자 비밀를 만듭니다. 이 비밀은 App Configuration에 대한 연결 문자열을 보유합니다.
```
dotnet user-secrets set ConnectionStrings:AppConfiguration "<App Configuration Connection string>"
```
Application Insights에 대한 연결 문자열을 보유하는 다른 사용자 비밀을 만듭니다.
```
dotnet user-secrets set ConnectionStrings:AppInsights "<Application Insights Connection string>"
```

애플리케이션 코드 업데이트

QuoteOfTheDay.csproj에서 기능 관리 및 App Configuration SDK의 최신 미리 보기 버전을 필수 패키지로 추가합니다.

<PackageReference Include="Microsoft.Azure.AppConfiguration.AspNetCore" Version="8.0.0-preview.2" />
<PackageReference Include="Microsoft.FeatureManagement.Telemetry.ApplicationInsights" Version="4.0.0-preview3" />
<PackageReference Include="Microsoft.FeatureManagement.Telemetry.ApplicationInsights.AspNetCore" Version="4.0.0-preview3" />
<PackageReference Include="Microsoft.FeatureManagement.AspNetCore" Version="4.0.0-preview3" />

Program.cs의 var builder = WebApplication.CreateBuilder(args); 줄 아래에 애플리케이션이 시작될 때 Azure에서 구성을 끌어오는 App Configuration 공급자를 추가합니다. 기본적으로 UseFeatureFlags 메서드는 레이블이 없는 모든 기능 플래그를 포함하고 캐시 만료 시간을 30초로 설정합니다.
```
builder.Configuration
    .AddAzureAppConfiguration(o =>
    {
        o.Connect(builder.Configuration.GetConnectionString("AppConfiguration"));

        o.UseFeatureFlags();
    });
```

Program.cs에서 다음 using 문을 추가합니다.

using Microsoft.ApplicationInsights.AspNetCore.Extensions;
using Microsoft.ApplicationInsights.Extensibility;
using Microsoft.FeatureManagement.Telemetry.ApplicationInsights.AspNetCore;

builder.Configuration.AddAzureAppConfiguration이 호출되는 위치 아래에 다음을 추가합니다.
```
// Add Application Insights telemetry.
builder.Services.AddApplicationInsightsTelemetry(
    new ApplicationInsightsServiceOptions
    {
        ConnectionString = builder.Configuration.GetConnectionString("AppInsights"),
        EnableAdaptiveSampling = false
    })
    .AddSingleton<ITelemetryInitializer, TargetingTelemetryInitializer>();
```
이 코드 조각은 다음 작업을 수행합니다.
- Application Insights 원격 분석 클라이언트를 애플리케이션에 추가합니다.
- 나가는 원격 분석에 대상 정보를 추가하는 원격 분석 이니셜라이저를 추가합니다.
- 적응 샘플링을 사용하지 않도록 설정합니다. 적응 샘플링 사용 안 함에 대한 자세한 내용을 보려면 문제 해결을 참조하세요.

루트 폴더 QuoteOfTheDay에서 ExampleTargetingContextAccessor.cs라는 새 파일을 만듭니다. 그러면 ExampleTargetingContextAccessor라는 새 클래스가 만들어집니다. 아래 콘텐츠를 파일에 붙여넣습니다.

using Microsoft.FeatureManagement.FeatureFilters;

namespace QuoteOfTheDay
{
    public class ExampleTargetingContextAccessor : ITargetingContextAccessor
    {
        private const string TargetingContextLookup = "ExampleTargetingContextAccessor.TargetingContext";
        private readonly IHttpContextAccessor _httpContextAccessor;

        public ExampleTargetingContextAccessor(IHttpContextAccessor httpContextAccessor)
        {
            _httpContextAccessor = httpContextAccessor ?? throw new ArgumentNullException(nameof(httpContextAccessor));
        }

        public ValueTask<TargetingContext> GetContextAsync()
        {
            HttpContext httpContext = _httpContextAccessor.HttpContext;
            if (httpContext.Items.TryGetValue(TargetingContextLookup, out object value))
            {
                return new ValueTask<TargetingContext>((TargetingContext)value);
            }
            List<string> groups = new List<string>();
            if (httpContext.User.Identity.Name != null)
            {
                groups.Add(httpContext.User.Identity.Name.Split("@", StringSplitOptions.None)[1]);
            }
            TargetingContext targetingContext = new TargetingContext
            {
                UserId = httpContext.User.Identity.Name ?? "guest",
                Groups = groups
            };
            httpContext.Items[TargetingContextLookup] = targetingContext;
            return new ValueTask<TargetingContext>(targetingContext);
        }
    }
}

이 클래스는 FeatureManagement의 대상 지정이 사용자에 대한 컨텍스트를 가져오는 방법을 선언합니다. 이 경우에는 UserId에 대해 httpContext.User.Identity.Name을 읽고 이메일 주소의 도메인을 Group으로 처리합니다.

Program.cs로 다시 이동하여 다음 using 문을 추가합니다.

using Microsoft.FeatureManagement.Telemetry;
using Microsoft.FeatureManagement;
using QuoteOfTheDay;

AddApplicationInsightsTelemetry가 호출된 위치에서 App Configuration 새로 고침을 처리하기 위한 서비스를 추가하고, 기능 관리를 설정하고, 기능 관리 대상 지정을 구성하고, 기능 관리를 사용하도록 설정하여 원격 분석 이벤트를 게시합니다.

builder.Services.AddHttpContextAccessor();

// Add Azure App Configuration and feature management services to the container.
builder.Services.AddAzureAppConfiguration()
    .AddFeatureManagement()
    .WithTargeting<ExampleTargetingContextAccessor>()
    .AddTelemetryPublisher<ApplicationInsightsTelemetryPublisher>();

var app = builder.Build(); 줄 아래에 적절한 경우 App Configuration 새로 고침을 트리거하는 미들웨어를 추가합니다.
```
// Use Azure App Configuration middleware for dynamic configuration refresh.
app.UseAzureAppConfiguration();
```
그 아래에 다음 코드를 추가하여 TargetingTelemetryInitializer가 HttpContext에 저장하여 대상 지정 정보에 액세스할 수 있도록 합니다.
```
// Add TargetingId to HttpContext for telemetry
app.UseMiddleware<TargetingHttpContextMiddleware>();
```
QuoteOfTheDay>페이지>공유>_Layout.cshtml에서 QuoteOfTheDay.styles.css가 추가된 위치 아래에 다음 줄을 추가하여 font-awesome 버전 5.15.3용 CSS를 추가합니다.
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
```

QuoteOfTheDay>Pages>Index.cshtml.cs를 열고 견적 앱의 콘텐츠를 덮어씁니다.

using Microsoft.ApplicationInsights;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.FeatureManagement;

namespace QuoteOfTheDay.Pages;

public class Quote
{
    public string Message { get; set; }

    public string Author { get; set; }
}

public class IndexModel(IVariantFeatureManagerSnapshot featureManager, TelemetryClient telemetryClient) : PageModel
{
    private readonly IVariantFeatureManagerSnapshot _featureManager = featureManager;
    private readonly TelemetryClient _telemetryClient = telemetryClient;

    private Quote[] _quotes = [
        new Quote()
        {
            Message = "You cannot change what you are, only what you do.",
            Author = "Philip Pullman"
        }];

    public Quote? Quote { get; set; }

    public bool ShowGreeting { get; set; }

    public async void OnGet()
    {
        Quote = _quotes[new Random().Next(_quotes.Length)];

        Variant variant = await _featureManager.GetVariantAsync("Greeting", HttpContext.RequestAborted);

        ShowGreeting = variant.Configuration.Get<bool>();
    }

    public IActionResult OnPostHeartQuoteAsync()
    {
        string? userId = User.Identity?.Name;

        if (!string.IsNullOrEmpty(userId))
        {
            // Send telemetry to Application Insights
            _telemetryClient.TrackEvent("Like");

            return new JsonResult(new { success = true });
        }
        else
        {
            return new JsonResult(new { success = false, error = "User not authenticated" });
        }
    }
}

이 PageModel은 임의의 인용문을 선택하고 GetVariantAsync를 사용하여 현재 사용자에 대한 변형을 가져온 다음 "ShowGreeting"이라는 변수를 변형 값으로 설정합니다. 또한 PageModel은 Like라는 이름으로 Application Insights에 이벤트를 보내는 _telemetryClient.TrackEvent("Like");를 호출하여 게시 요청을 처리합니다. 이 이벤트는 사용자 및 변형과 자동으로 연결되며 메트릭으로 추적할 수 있습니다.

index.cshtml을 열고 견적 앱의 콘텐츠를 덮어씁니다.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
    ViewData["Username"] = User.Identity.Name;
}

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        color: #333;
    }

    .quote-container {
        background-color: #fff;
        margin: 2em auto;
        padding: 2em;
        border-radius: 8px;
        max-width: 750px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: start;
        position: relative;
    }

    .vote-container {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        gap: 0em;
    }

    .vote-container .btn {
        background-color: #ffffff; /* White background */
        border-color: #ffffff; /* Light blue border */
        color: #333
    }

    .vote-container .btn:focus {
        outline: none;
        box-shadow: none;
    }

    .vote-container .btn:hover {
        background-color: #F0F0F0; /* Light gray background */
    }

    .greeting-content {
        font-family: 'Georgia', serif; /* More artistic font */
    }

    .quote-content p.quote {
        font-size: 2em; /* Bigger font size */
        font-family: 'Georgia', serif; /* More artistic font */
        font-style: italic; /* Italic font */
        color: #4EC2F7; /* Medium-light blue color */
    }
</style>

<div class="quote-container">
    <div class="quote-content">
        @if (Model.ShowGreeting)
        {
            <h3 class="greeting-content">Hi <b>@User.Identity.Name</b>, hope this makes your day!</h3>
        }
        else
        {
            <h3 class="greeting-content">Quote of the day</h3>
        }
        <br />
        <p class="quote">“@Model.Quote.Message”</p>
        <p>- <b>@Model.Quote.Author</b></p>
    </div>

    <div class="vote-container">
        <button class="btn btn-primary" onclick="heartClicked(this)">
            <i class="far fa-heart"></i> <!-- Heart icon -->
        </button>
    </div>

    <form action="/" method="post">
        @Html.AntiForgeryToken()
    </form>
</div>

<script>
    function heartClicked(button) {
        var icon = button.querySelector('i');
        icon.classList.toggle('far');
        icon.classList.toggle('fas');

        // If the quote is hearted
        if (icon.classList.contains('fas')) {
            // Send a request to the server to save the vote
            fetch('/Index?handler=HeartQuote', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                }
            });
        }
    }
</script>

이 코드는 QuoteOfTheDay를 표시하고 견적에 대한 하트 작업을 사용하여 처리하는 UI에 해당합니다. 이전에 언급한 Model.ShowGreeting 값을 사용하여 변형에 따라 다양한 사용자에게 다양한 내용을 표시합니다.

앱 빌드 및 실행

명령 프롬프트의 QuoteOfTheDay 폴더에서 dotnet build를 실행합니다.
dotnet run --launch-profile https을 실행합니다.
애플리케이션 출력에서 Now listening on: https://localhost:{port} 형식의 메시지를 찾습니다. 브라우저에 포함된 링크로 이동합니다.
실행 중인 애플리케이션을 확인한 후 오른쪽 상단의 등록을 선택하여 새 사용자를 등록합니다.
user@contoso.com이라는 새 사용자를 등록합니다. 암호는 6자 이상이어야 하며 숫자와 특수 문자를 포함해야 합니다.
사용자 정보를 입력한 후 이메일의 유효성을 검사하려면 여기를 클릭합니다 링크를 선택합니다.
userb@contoso.com이라는 두 번째 사용자를 등록하고 다른 암호를 입력한 후 이 두 번째 이메일의 유효성을 검사합니다.

참고 항목

이 자습서에서는 이러한 이름을 정확하게 사용해야 합니다. 기능이 예상대로 구성되었으면 두 사용자에게 서로 다른 변형이 표시되어야 합니다.
userb(userb@contoso.com)로 로그인하려면 오른쪽 상단의 로그인을 선택합니다.
로그인하면 앱을 볼 때 userb@contoso.com이 특수 메시지를 보는 것을 확인할 수 있습니다.

userb@contoso.com은 특수 메시지를 보는 유일한 사용자입니다.

변형 기능 플래그에서 원격 분석 사용 및 실험 만들기

아래 단계에 따라 원격 분석을 사용하도록 설정하고 변형 기능 플래그에서 실험을 만듭니다.

App Configuration 저장소에서 작업>기능 관리자로 이동합니다.
변형 기능 플래그 "인사말" 오른쪽에 있는 ... 바로 가기 메뉴를 선택하고 편집을 선택합니다.
원격 분석 탭으로 이동하여 원격 분석 사용 확인란을 선택합니다.
실험 탭으로 이동하여 실험 만들기 확인란을 선택한 다음 실험 이름을 지정합니다.
검토 + 업데이트를 선택한 다음 업데이트를 선택합니다.
알림은 작업이 성공했음을 나타냅니다. 기능 관리자에서 변형 기능 플래그의 실험 아래에 Active라는 단어가 있어야 합니다.

실험에 대한 메트릭 만들기

분할 실험 작업 영역의 메트릭은 Application Insights로 전송된 이벤트를 정량적으로 측정한 것입니다. 이 메트릭은 기능 플래그가 사용자 동작 및 결과에 미치는 영향을 평가하는 데 도움이 됩니다.

이전에 앱을 업데이트할 때 애플리케이션 코드에 _telemetryClient.TrackEvent("Like")를 추가했습니다. Like는 사용자 작업(이 경우 하트 단추 선택)을 나타내는 원격 분석 이벤트입니다. 이 이벤트는 만들려는 메트릭에 연결되는 Application Insights 리소스로 전송됩니다. 만들어진 앱은 하나의 이벤트만 지정하지만 여러 이벤트와 그에 따른 여러 메트릭을 가질 수 있습니다. 여러 메트릭은 단일 Application Insight 이벤트를 기반으로 할 수도 있습니다.

분할 실험 작업 영역 리소스로 이동합니다. 구성>실험 메트릭에서 만들기를 선택합니다.

실험 메트릭 만들기에서 다음 정보를 선택하거나 입력하고 만들기를 사용하여 저장합니다.

새로운 실험 메트릭을 만드는 Azure Portal의 스크린샷.

설정	예제 값	설명
이름	하트 응답	실험 메트릭의 이름입니다.
설명	특수 메시지를 봤을 때 하트 단추를 선택한 사용자와 그렇지 않았을 때 하트 단추를 선택한 사용자의 수를 계산합니다.	메트릭에 대한 선택적 설명입니다.
Application Insights 이벤트 이름	Like	Application Insights 이벤트의 이름입니다. 이 이름은 대/소문자를 구분하며 코드에 `_telemetryClient.TrackEvent("<Event-Name>")`으로 지정된 이름입니다.
다음으로 측정	Count	다음 옵션을 사용할 수 있습니다. 횟수: 사용자가 이벤트를 실행한 횟수를 계산합니다. 평균: 사용자에 대한 이벤트 가치의 평균을 계산합니다. 합계: 사용자에 대한 이벤트 값을 합산합니다. 평균 합산값을 표시합니다. 비율: 이벤트를 실행한 사용자의 비율을 계산합니다.
원하는 영향	증가	이 설정은 만들어진 메트릭을 측정하는 궁극적인 목표 또는 목적을 나타냅니다.

이 자습서에서 가설은 Quote of the Day 옆에 특수 메시지가 있을 때 하트 모양의 좋아요 단추를 클릭하는 사용자가 더 많다는 것입니다. 애플리케이션 코드는 이 클릭을 좋아요라는 이벤트로 추적합니다. 애플리케이션은 좋아요 이벤트를 Application Insights에 원격 분석으로 전송하며, 하트 응답에서 사용자 클릭 수(횟수로 측정)의 증가를 확인하여 지정된 가설의 유효성을 검사할 수 있도록 하는 것이 이 실험의 원하는 영향입니다. 할당된 대상 그룹에게 특수 메시지가 표시됨에도 불구하고 단추 클릭 수가 감소하면 이 실험에 대한 가설이 무효화됩니다.

만들어지면 새 메트릭이 포털에 표시됩니다. 화면 오른쪽에 있는(...) 바로 가기 메뉴를 선택하여 편집하거나 삭제할 수 있습니다.

실험 결과 가져오기

새로 설정한 실험을 테스트하고 분석할 결과를 생성하려면 애플리케이션에 대한 일부 트래픽을 시뮬레이션하고 10~15분 정도 기다립니다.

실험 결과를 보려면 기능 관리자로 이동하여 변형 기능 플래그 목록에서 ...>실험을 클릭하거나 실험 열에서 활성 링크를 선택합니다. 이 열은 기본적으로 표시되지 않습니다. 이를 표시하려면 기능 관리자에서 보기 관리>열 편집>열 추가>실험 및 적용을 선택합니다.

결과 페이지에는 실험의 버전, 결과를 비교할 기준 및 비교 변형이 기본적으로 선택됩니다. 필요한 경우 원하는 대로 기본값을 변경한 다음 적용을 선택하여 실험 결과를 확인합니다.

위의 스크린샷은 실험이 원하는 결과를 얻었음을 보여 줍니다. 하트 응답에 대한 켜기 변형은 끄기 변형보다 560.62% 더 많은 하트 응답 결과를 얻었습니다.

변형 기능 플래그를 편집하면 새 버전의 실험이 생성되며 이를 선택하여 결과를 볼 수 있습니다.

참고 항목

실험 결과를 가져오려면 변형당 최소 30개의 이벤트가 필요하지만, 실험이 신뢰할 수 있는 결과를 생성할 수 있도록 최소 샘플링 크기보다 더 많은 이벤트를 확보하는 것이 좋습니다.

참고 항목

Application Insights 샘플링은 기본적으로 사용하도록 설정되며 실험 결과에 영향을 미칠 수 있습니다. 이 자습서에서는 Application Insights에서 샘플링을 끄는 것이 좋습니다. Application Insights의 샘플링에 대해 자세히 알아봅니다.

다음 단계

실험

다음을 통해 공유

자습서: 변형 기능 플래그를 사용하여 실험 실행(미리 보기)

필수 구성 요소

변형 기능 플래그 만들기(미리 보기)

Application Insights(미리 보기) 리소스를 구성 저장소에 연결

분할 실험 작업 영역(미리 보기)을 저장소에 연결

실험을 실행하기 위한 앱 설정

앱 만들기 및 사용자 비밀 추가

애플리케이션 코드 업데이트

앱 빌드 및 실행

변형 기능 플래그에서 원격 분석 사용 및 실험 만들기

실험에 대한 메트릭 만들기

실험 결과 가져오기

다음 단계

피드백

피드백

추가 리소스