자습서: 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)
• [선택 사항] 디지털 펜과 해당 디지털 펜의 입력을 지원하는 디스플레이가 있는 컴퓨터.

샘플 코드

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

다운로드 이 Visual Studio 샘플 및 소스 코드를 GitHub 에서 windows-appsample-get-started-ink 샘플으로부터 받으세요.

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

Windows Ink 플랫폼의 구성 요소

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

1단계: 샘플 실행

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

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

2. 솔루션 플랫폼 드롭다운을 Arm 외의 항목으로 설정합니다.

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

   비고

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

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

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

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

아마도 이미 발견했겠지만, 초기 형태의 앱에서는 펜으로 그릴 수 없습니다(펜을 표준 포인터 장치로 사용하여 앱과 상호 작용할 수 있긴 합니다).

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

기본 잉킹 기능을 추가하려면 앱의 적절한 페이지에 InkCanvas 컨트롤을 배치하세요.

샘플에서:

1. MainPage.xaml.cs 파일을 엽니다.
2. 이 단계의 제목으로 표시된 코드를 찾습니다("// Step 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 파일의 코드 비하인드에 있습니다.

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

마우스 및 터치 잉킹을 활성화하려면, 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 확인하고 일부 도구를 사용해 보세요.

이 주제에서 강조 표시된 기본 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단계: 셰이프 인식

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

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

• 원
• 다이아몬드
• 그림
• 타원
• 정삼각형
• 육각형
• IsoscelesTriangle
• 평행사변형
• 펜타곤
• 사각형
• 사각형
• RightTriangle
• 정사각형
• 사다리꼴
• 트라이앵글

이 단계에서는 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 기능

샘플

• 잉크 분석 샘플(기본)(C#)
• 잉크 필기 인식 샘플(C#)
• 잉크 직렬화 형식(ISF) 파일에서 잉크 스트로크 저장 및 불러오기
• 클립보드에서 잉크 스트로크 저장 및 불러오기
• 잉크 도구 모음 위치 및 방향 (기본 샘플)
• 잉크 도구 모음 위치 및 방향 샘플(동적)
• 간단한 잉크 샘플(C#/C++)
• 복합 잉크 샘플(C++)
• 잉크 견본(JavaScript)
• 시작 자습서: Windows 앱에서 잉크 기능 지원하기
• 색칠 공부용 책 샘플
• 가족 메모 샘플