UWP 개발, 본문의 반복되어 나타나는 버튼에 숫자 출력하기

현대의 소프트웨어 개발 환경에서는 사용자의 직관적인 경험을 더욱더 중요하게 생각하고 있습니다. 특히 UWP(유니버설 윈도우 플랫폼)는 다양한 디바이스에서 일관된 사용자 경험을 제공하는 데에 중점을 두고 있습니다. 이번 강좌에서는 UWP 애플리케이션을 개발하면서 ‘반복되는 버튼에 숫자를 출력하는’ 기능을 구현하는 방법에 대해 다루어 보겠습니다.

목표

이 강좌를 통해 사용자는 다음과 같은 기능을 구현할 것입니다.

사용자가 버튼을 클릭할 때마다 숫자가 증가하는 기능
UI 요소를 동적으로 생성하여 여러 개의 버튼과 출력된 숫자를 관리하는 방법
XAML 및 C#을 사용하여 UWP 애플리케이션을 구성하는 방법

개발 환경 설정

UWP 애플리케이션 개발을 시작하기 전에 다음의 개발 환경이 준비되어 있어야 합니다:

Windows 10 또는 더 최신 버전
Visual Studio 2019 이상
UWP 개발을 지원하는 Visual Studio 구성 요소 설치

프로젝트 생성

Visual Studio를 열고 다음 단계를 따라 새로운 UWP 프로젝트를 생성합니다:

‘파일’ 메뉴에서 ‘새로 만들기’를 선택하고 ‘프로젝트’를 클릭합니다.
‘빈 프로젝트’를 선택한 후, UWP 앱 템플릿을 선택합니다.
프로젝트의 이름과 저장 위치를 설정하고 ‘생성’ 버튼을 클릭합니다.

XAML 레이아웃 구성

이제 XAML 파일을 수정하여 버튼과 숫자를 표시할 공간을 설정해 보겠습니다. MainPage.xaml 파일을 열고 다음과 같이 변경합니다:

<Page
    x:Class="YourAppNamespace.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourAppNamespace"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel x:Name="ButtonContainer">
            <TextBlock x:Name="CounterText" FontSize="30" Text="숫자: 0" />
        </StackPanel>
    </Grid>
</Page>

위 코드에서 우리는 StackPanel을 사용하여 버튼과 숫자를 쌓아 놓을 수 있도록 구성했습니다. 또한, TextBlock 요소를 통해 현재 숫자를 표시하도록 했습니다.

C# 코드 작성

XAML 파일을 수정한 후, 이제 C# 코드를 작성하여 버튼 클릭 이벤트 및 숫자 증가 로직을 구현합니다. MainPage.xaml.cs 파일을 열고 아래 코드를 추가합니다:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace YourAppNamespace
{
    public sealed partial class MainPage : Page
    {
        private int buttonCount = 0;

        public MainPage()
        {
            this.InitializeComponent();
            SetupButtons();
        }

        private void SetupButtons()
        {
            for (int i = 0; i < 5; i++)
            {
                Button btn = new Button();
                btn.Content = $"버튼 {i + 1}";
                btn.Width = 200;
                btn.Click += Button_Click;
                ButtonContainer.Children.Add(btn);
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            buttonCount++;
            CounterText.Text = $"숫자: {buttonCount}";
        }
    }
}

위의 코드에서 우리는:

생성자에서 SetupButtons 메서드를 호출하여 버튼을 동적으로 생성합니다.
각 버튼에 클릭 이벤트를 연결하여 사용자가 버튼을 눌렀을 때 Button_Click 메서드가 호출되도록 설정합니다.
버튼 클릭 시 buttonCount 변수를 증가시키고, TextBlock의 텍스트를 업데이트하여 현재 값을 표시합니다.

결과 확인

이제 프로젝트를 빌드하고 실행하여 결과를 확인해 보세요. 앱이 실행되면 생성된 버튼이 화면에 표시됩니다. 각 버튼을 클릭할 때마다 숫자가 증가하는 것을 볼 수 있습니다. 이 과정을 통해 우리는 몇 가지 중요한 UWP의 개념을 배웠습니다:

동적 UI 구성
이벤트 처리
데이터 바인딩과 업데이트

추가 연습 문제

이제 기본 구현을 마친 후, 다음과 같은 추가 연습 문제를 통해 더 깊은 이해를 도모해보십시오:

버튼의 총 개수를 사용자에게 입력받아 그 개수만큼 버튼을 생성하도록 기능을 수정해보세요.
숫자를 감소시키는 버튼과 리셋 버튼을 추가해서 다양한 상태를 연출해보세요.
버튼 클릭 시 애니메이션 효과를 추가하여 사용자에게 시각적 피드백을 제공하는 방법을 연구해보세요.

마무리

이번 강좌에서는 UWP 개발을 통해 숫자를 출력하는 반복 버튼을 구현하는 방법에 대해 알아보았습니다. 기본적인 XAML 레이아웃 구성과 C# 코드 작성을 통해 이벤트 처리와 동적 UI를 만드는 방법을 배웠습니다. UWP는 다양한 디바이스에서 사용할 수 있는 애플리케이션을 만들 수 있는 훌륭한 플랫폼이며, 이를 통해 사용자는 더 나은 사용자 경험을 제공받게 됩니다.

이제 여러분은 UWP를 사용하여 다양한 앱을 개발하는 데에 필요한 기본 지식을 갖추게 되었습니다. 더욱 깊이 있는 기능을 구현하고 싶다면 UWP의 다양한 API 및 패턴을 학습해보시기 바랍니다.

다음 강좌에서는 UWP의 다른 고급 기능 및 모범 사례에 대해 다룰 예정이니 계속해서 관심을 가져 주시기 바랍니다.

감사합니다.

목표