자습서: Windows 앱에서 잉크 지원

Surface 펜 ( Microsoft Store에서 구매할 수 있음).

이 자습서에서는 Windows Ink를 사용하여 작성 및 그리기를 지원하는 기본 Windows 앱을 만드는 방법을 단계씩 설명합니다. GitHub( 샘플 코드 참조)에서 다운로드할 수 있는 샘플 앱의 코드 조각을 사용하여 각 단계에서 설명하는 다양한 기능 및 관련 Windows Ink API( Windows Ink 플랫폼의 구성 요소 참조)를 보여 줍니다.

다음 사항에 집중합니다.

• 기본 잉크 지원 추가
• 잉크 도구 모음 추가
• 필기 인식 지원
• 기본 도형 인식 지원
• 잉크 저장 및 로드

이러한 기능을 구현하는 방법에 대한 자세한 내용은 Windows 앱에서 펜 상호 작용 및 Windows Ink를 참조하세요.

소개

Windows Ink를 사용하면 빠른 필기 노트 및 주석에서 화이트보드 데모, 건축 및 엔지니어링 드로잉에서 개인 걸작에 이르기까지 상상할 수 있는 거의 모든 펜과 종이 환경에 해당하는 디지털 환경을 고객에게 제공할 수 있습니다.

필수 조건

• 현재 버전의 Windows 10 또는 Windows 11을 실행하는 컴퓨터(또는 가상 머신)
• Visual Studio 2019 및 RS2 SDK 이상
• Windows 10 SDK(10.0.15063.0)
• 구성에 따라 Microsoft.NETCore.UniversalWindowsPlatform NuGet 패키지를 설치하고 시스템 설정에서 개발자 모드를 사용하도록 설정해야 할 수 있습니다(설정 -> 업데이트 및 보안 - 개발자용 ->> 개발자 기능 사용).
• Visual Studio를 사용하여 Windows 앱을 개발하는 경우 이 자습서를 시작하기 전에 다음 항목을 살펴보세요.
  • Windows 앱 SDK를 위한 도구 설치
  • "Hello, world" 앱 만들기(XAML)
• [선택 사항] 디지털 펜과 해당 디지털 펜의 입력을 지원하는 디스플레이가 있는 컴퓨터.

샘플 코드

이 자습서 전체에서 샘플 잉크 앱을 사용하여 설명된 개념과 기능을 보여 줍니다.

GitHub의 windows-appsample-get-started-ink 샘플에서 이 Visual Studio 샘플 및 소스 코드를 다운로드합니다.

1. 녹색 클론 또는 다운로드 단추, 선택
   
2. GitHub 계정이 있는 경우 Visual Studio에서 열기를 선택하여 리포지토리를 로컬 컴퓨터에 복제할 수 있습니다.
3. GitHub 계정이 없거나 프로젝트의 로컬 복사본만 원하는 경우 ZIP 다운로드 를 선택합니다(최신 업데이트를 다운로드하려면 정기적으로 다시 확인해야 함).

Windows Ink 플랫폼의 구성 요소

이러한 개체는 Windows 앱에 대한 디지털 잉킹 경험의 대부분을 제공합니다.

1단계: 샘플 실행

RadialController 샘플 앱을 다운로드한 후 다음이 실행되는지 확인합니다.

1. Visual Studio에서 샘플 프로젝트를 엽니다.

2. 솔루션 플랫폼 드롭다운을 Arm이 아닌 선택 영역으로 설정합니다.

3. F5 키를 눌러 컴파일, 배포 및 실행합니다.

   비고

   또는 디버그>시작 디버깅 메뉴 항목을 선택하거나 여기에 표시된 로컬 컴퓨터 실행 단추를 선택할 수 있습니다.

앱 창이 열리고 몇 초 동안 시작 화면이 나타나면 이 초기 화면이 표시됩니다.

이제 이 자습서의 나머지 부분 전체에서 사용할 기본 Windows 앱이 있습니다. 다음 단계에서는 잉크 기능을 추가합니다.

2단계: InkCanvas를 사용하여 기본 잉킹 지원하기

아마 이미 앱을 발견하셨겠지만, 초기 버전에서는 펜으로 아무것도 그릴 수 없습니다. 하지만 펜을 표준 포인터 장치로 사용하여 앱과 상호 작용할 수 있습니다.

이 단계에서 그 작은 단점을 해결해 봅시다.

기본 수동 입력 기능을 추가하려면 앱의 적절한 페이지에 InkCanvas 컨트롤을 배치하기만 하면 됩니다.

샘플에서 다음을 수행합니다.

1. MainPage.xaml.cs 파일을 엽니다.
2. 이 단계의 제목("// 2단계: InkCanvas를 사용하여 기본 잉킹 지원")로 표시된 코드를 찾습니다.
3. 다음 줄의 주석을 해제하세요. (이러한 참조는 후속 단계에서 사용되는 기능에 필요합니다).

    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;

4. MainPage.xaml 파일을 엽니다.
5. 이 단계의 제목으로 "<-- 2단계: InkCanvas를 사용한 기본 잉킹 -->" 표시된 코드를 찾습니다.
6. 다음 줄의 주석을 해제하세요.

    <InkCanvas x:Name="inkCanvas" />

이것으로 끝입니다.

이제 앱을 다시 실행합니다. 계속해서 낙서하고, 이름을 쓰거나, (거울을 들고 있거나 아주 좋은 기억이 있는 경우) 자화상을 그립니다.

3단계: 터치 및 마우스로 잉킹 지원

기본적으로 잉크는 펜 입력에 대해서만 지원됩니다. 손가락, 마우스 또는 터치 패드로 쓰거나 그리려고 하면 실망할 것입니다.

우울함을 없애려면 두 번째 코드 줄을 추가해야 합니다. 이번에는 InkCanvas를 선언한 XAML 파일의 코드 뒤에 있습니다.

이 단계에서는 InkCanvas에서 잉크 입력(표준 및 수정됨)의 입력, 처리 및 렌더링을 세밀하게 관리하는 InkPresenter 개체를 소개합니다.

마우스 및 터치 수동 입력을 사용하도록 설정하려면 InkPresenter의 InputDeviceTypes 속성을 원하는 CoreInputDeviceTypes 값의 조합으로 설정합니다.

샘플에서 다음을 수행합니다.

1. MainPage.xaml.cs 파일을 엽니다.
2. 이 단계의 제목으로 표시된 코드를 찾습니다("// 3단계: 터치 및 마우스로 수동 입력 지원").
3. 다음 줄의 주석을 해제합니다.

    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

앱을 다시 실행하면 컴퓨터 화면의 모든 손가락 그리기 꿈이 실현된 것을 알 수 있습니다!

4단계: 잉크 도구 모음 추가

InkToolbar는 잉크 관련 기능을 활성화하기 위한 사용자 지정 가능하고 확장 가능한 단추 컬렉션을 제공하는 UWP 플랫폼 컨트롤입니다.

기본적으로 InkToolbar에는 스텐실(눈금자 또는 프로트랙터)과 함께 사용할 수 있는 펜, 연필, 형광펜 또는 지우개를 빠르게 선택할 수 있는 기본 버튼 세트가 포함되어 있습니다. 펜, 연필 및 형광펜 버튼은 잉크 색과 스트로크 크기를 선택하기 위한 플라이아웃도 제공합니다.

수동 입력 앱에 기본 InkToolbar 를 추가하려면 InkCanvas 와 동일한 페이지에 배치하고 두 컨트롤을 연결하기만 하면 됩니다.

샘플에서

1. MainPage.xaml 파일을 엽니다.
2. 이 단계의 제목으로 표시된 코드를 찾습니다("<-- 4단계: 잉크 도구 모음 추가 -->").
3. "다음 라인의 주석을 해제하십시오."

    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

이제 앱을 다시 실행하여 InkToolbar 를 확인하고 일부 도구를 사용해 보세요.

과제: 사용자 지정 단추 추가

다음은 Windows Ink 작업 영역의 스케치패드에서 사용자 지정 InkToolbar 의 예입니다.

InkToolbar 사용자 지정에 대한 자세한 내용은 Windows 앱 수동 입력 앱에 InkToolbar 추가를 참조하세요.

5단계: 필기 인식 지원

이제 앱에서 작성하고 그릴 수 있으므로 해당 낙서에 유용한 작업을 수행해 보겠습니다.

이 단계에서는 Windows Ink의 필기 인식 기능을 사용하여 작성한 내용을 해독합니다.

샘플에서 다음을 수행합니다.

1. MainPage.xaml 파일을 엽니다.
2. 이 단계의 제목으로 표시된 코드를 찾습니다("<-- 5단계: 필기 인식 지원 -->").
3. "다음 라인의 주석을 해제하십시오."

    <Button x:Name="recognizeText" 
            Content="Recognize text"  
            Grid.Row="0" Grid.Column="0"
            Margin="10,10,10,10"
            Click="recognizeText_ClickAsync"/>
    <TextBlock x:Name="recognitionResult" 
                Text="Recognition results: "
                VerticalAlignment="Center" 
                Grid.Row="0" Grid.Column="1"
                Margin="50,0,0,0" />

4. MainPage.xaml.cs 파일을 엽니다.
5. 이 단계의 제목으로 표시된 코드를 찾습니다("5단계: 필기 인식 지원").
6. "다음 라인의 주석을 해제하십시오."

• 이러한 변수는 이 단계에 필요한 전역 변수입니다.

    InkAnalyzer analyzerText = new InkAnalyzer();
    IReadOnlyList<InkStroke> strokesText = null;
    InkAnalysisResult resultText = null;
    IReadOnlyList<IInkAnalysisNode> words = null;

• 이것은 텍스트 인식 버튼의 처리기로, 여기에서 인식 처리를 수행합니다.

    private async void recognizeText_ClickAsync(object sender, RoutedEventArgs e)
    {
        strokesText = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        // Ensure an ink stroke is present.
        if (strokesText.Count > 0)
        {
            analyzerText.AddDataForStrokes(strokesText);

            resultText = await analyzerText.AnalyzeAsync();

            if (resultText.Status == InkAnalysisStatus.Updated)
            {
                words = analyzerText.AnalysisRoot.FindNodes(InkAnalysisNodeKind.InkWord);
                foreach (var word in words)
                {
                    InkAnalysisInkWord concreteWord = (InkAnalysisInkWord)word;
                    foreach (string s in concreteWord.TextAlternates)
                    {
                        recognitionResult.Text += s;
                    }
                }
            }
            analyzerText.ClearDataForAllStrokes();
        }
    }

7. 앱을 다시 실행하고 항목을 작성한 다음 텍스트 인식 단추를 클릭합니다.
8. 인식 결과가 단추 옆에 표시됩니다.

챌린지 1: 국제 인식

Windows Ink는 Windows에서 지원하는 많은 언어에 대한 텍스트 인식을 지원합니다. 각 언어 팩에는 언어 팩과 함께 설치할 수 있는 필기 인식 엔진이 포함되어 있습니다.

설치된 필기 인식 엔진을 쿼리하여 특정 언어를 대상으로 지정합니다.

국제 필기 인식에 대한 자세한 내용은 Windows 잉크 스트로크를 텍스트로 인식하세요.

챌린지 2: 동적 인식

이 자습서에서는 인식을 시작하기 위해 단추를 눌러야 합니다. 기본 타이밍 함수를 사용하여 동적 인식을 수행할 수도 있습니다.

동적 인식에 대한 자세한 내용은 Windows Ink 스트로크를 텍스트로 인식하세요.

6단계: 셰이프 인식

이제 필기 노트를 좀 더 읽기 쉬운 것으로 변환할 수 있습니다. 하지만 아침의 플로우차터 익명 모임에서 그 흔들리며 카페인이 들끓는 낙서들은 어떻게 할까요?

잉크 분석을 사용하여 앱은 다음을 비롯한 핵심 셰이프 집합을 인식할 수도 있습니다.

• Circle
• 다이아몬드
• 그리기
• 타원
• 정삼각형
• 육각형
• IsoscelesTriangle
• 평행사변형
• 펜타곤
• 사각형
• 사각형
• RightTriangle
• 정사각형
• 사다리꼴
• Triangle

이 단계에서는 Windows Ink의 셰이프 인식 기능을 사용하여 낙서를 정리합니다.

이 예제에서는 잉크 스트로크를 다시 그리려고 시도하지 않습니다(가능하지만). 대신 원래 잉크에서 파생된 동일한 타원 또는 다각형 개체를 그리는 InkCanvas 아래에 표준 캔버스를 추가합니다. 그런 다음 해당 잉크 스트로크를 삭제합니다.

샘플에서 다음을 수행합니다.

1. MainPage.xaml 파일 열기
2. 이 단계의 제목으로 표시된 코드 찾기("<-- 6단계: 셰이프 인식 -->")
3. 이 줄의 주석을 해제하십시오.

   <Canvas x:Name="canvas" />

   And these lines.

    <Button Grid.Row="1" x:Name="recognizeShape" Click="recognizeShape_ClickAsync"
        Content="Recognize shape" 
        Margin="10,10,10,10" />

4. MainPage.xaml.cs 파일 열기
5. 이 단계의 제목으로 표시된 코드 찾기("// 6단계: 셰이프 인식")
6. 주석을 해제하십시오.

    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private void DrawEllipse(InkAnalysisInkDrawing shape)
    {
        ...
    }

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }

7. 앱을 실행하고 일부 셰이프를 그리고 도형 인식 단추를 클릭합니다.

다음은 디지털 냅킨의 기본적인 순서도의 예입니다.

다음은 셰이프 인식 후 동일한 순서도입니다.

7단계: 잉크 저장 및 로드

그래서 그림을 그리다가 결과물이 마음에 들지만, 나중에 몇 가지를 더 수정하고 싶다고 생각하시나요? 잉크 스트로크를 ISF(Ink Serialized Format) 파일에 저장하고 영감이 발생할 때마다 편집할 수 있도록 로드할 수 있습니다.

ISF 파일은 잉크 스트로크 속성 및 동작을 설명하는 추가 메타데이터를 포함하는 기본 GIF 이미지입니다. 잉크를 사용하지 않는 앱은 추가 메타데이터를 무시하고 기본 GIF 이미지(알파 채널 배경 투명도 포함)를 로드할 수 있습니다.

이 단계에서는 잉크 도구 모음 옆에 있는 저장 및 로드 단추를 연결합니다.

샘플에서 다음을 수행합니다.

1. MainPage.xaml 파일을 엽니다.
2. 이 단계의 제목으로 표시된 코드를 찾습니다("<-- 7단계: 잉크 저장 및 로드 -->").
3. "다음 라인의 주석을 해제하십시오."

    <Button x:Name="buttonSave" 
            Content="Save" 
            Click="buttonSave_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>
    <Button x:Name="buttonLoad" 
            Content="Load"  
            Click="buttonLoad_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>

4. MainPage.xaml.cs 파일을 엽니다.
5. 이 단계의 제목으로 표시된 코드를 찾습니다("// 7단계: 잉크 저장 및 로드").
6. "다음 라인의 주석을 해제하십시오."

    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

7. 앱을 실행하고 무언가를 그립니다.
8. 저장 단추를 선택하고 드로잉을 저장합니다.
9. 잉크를 지우거나 앱을 다시 시작합니다.
10. 로드 단추를 선택하고 방금 저장한 잉크 파일을 엽니다.

과제: 클립보드를 사용하여 잉크 스트로크 복사 및 붙여넣기

Windows 잉크는 클립보드에서 잉크 스트로크 복사 및 붙여넣기를 지원합니다.

잉크와 함께 클립보드를 사용하는 방법에 대한 자세한 내용은 Windows Ink 스트로크 데이터 저장 및 검색을 참조하세요.

요약

축하합니다, Windows 앱에서 잉크 지원 입력 자습서를 완료했습니다! Windows 앱에서 잉크를 지원하는 데 필요한 기본 코드와 Windows Ink 플랫폼에서 지원하는 보다 풍부한 사용자 환경을 제공하는 방법을 보여 줍니다.

관련 문서

• Windows 앱의 펜 조작 및 Windows Ink

Samples

• 잉크 분석 샘플(기본)(C#)
• 잉크 필기 인식 샘플(C#)
• Ink Serialized Format (ISF) 파일에서 잉크 획을 저장하고 불러오기
• 클립보드에서 잉크 스트로크 저장 및 로드
• 잉크 도구 모음 위치 및 방향 샘플(기본)
• 잉크 도구 모음 위치 및 방향 샘플(동적)
• 간단한 잉크 샘플(C#/C++)
• 복합 잉크 샘플(C++)
• 잉크 샘플(JavaScript)
• 시작 자습서: Windows 앱에서 잉크 지원
• 색칠하기 책 샘플
• 가족 노트 샘플