텍스트 및 텍스트 상호작용의 새로운 기능

♪ ♪

안녕하세요 UIKit의 제임스 매개헌입니다 텍스트와 텍스트 상호 작용의 새 기능에 대해 말씀드리겠습니다 텍스트는 모든 응용 프로그램에서 중요한 역할을 합니다 정보를 소비하고 의사소통하는 주된 수단이죠 이제 저희가 준비한 더 많은 도구를 활용해 앱에서 강력한 텍스트 경험을 만드실 수 있을 겁니다 완전 기초부터 시작하든 고도의 추상화에서 시작하든지요 텍스트 경험을 만드는 멋진 개선 사항들을 살펴보고 그것을 앱에 이용하는 방법을 알려드립니다 시스템 선택 UI의 몇 가지 변경 사항 UITextViews에 텍스트 항목 동작과 메뉴 추가 TextKit 2의 목록과 글머리 기호 macOS의 dictation UI 그리고 국제화를 위한 몇 가지 중요한 업데이트 등입니다 먼저 선택 UI의 변경 사항부터 살펴보겠습니다 모든 플랫폼에서 텍스트 커서의 디자인이 바뀌었습니다

이제 한 줄로 된 상호작용형 전환기가 표시됩니다 입력 언어를 바꿀 때요 영역을 선택할 때 더 인체공학적인 선택 핸들과 완전히 새로운 확대경이 생겨서 긴 글에서도 더 쉽게 커서를 위치할 수 있습니다 UITextViews나 UITextFields를 사용하는 앱이라면 이 모든 새 UI가 자동으로 생기게 됩니다 게다가 UITextInteraction 역시 새로운 선택 UI를 갖게 됩니다 하지만 사용자화가 많이 된 텍스트 표시용 UI를 쓰고 있다면 구현 시에 이런 변경 사항이 제대로 적용되지 않을 수 있습니다 특히 UITextInteraction을 채택할 수 없다면요 그래서 iOS 17에서는 UITextSelectionDisplay Interaction을 추가했습니다 이것은 선택 UI만을 제공하며 UITextInteraction에 포함된 제스처는 여기서 제외되죠 UITextSelectionDisplay Interaction은 UIInteraction의 새로운 유형으로 어떤 UIView에도 설치할 수 있습니다 또한 UITextInput 프로토콜을 구현하는 객체도 있어야 하는데 이 프로토콜은 상호 작용을 위한 다양한 메서드를 정의하여 뷰의 선택 상태를 가져오죠 UITextSelectionDisplay Interaction은 모든 어려운 짐을 덜어줄 것입니다 커서 뷰와 커서 액세서리 및 영역 강조, 선택 핸들 등을 제공하니까요 또한 이 모든 뷰는 대체 가능해서 필요하다면 동작을 사용자화할 수 있습니다 이를 코드로 구현하는 예제를 간단히 살펴보죠 먼저, selectionDisplay Interaction을 생성하고 UITextInput 프로토콜을 구현하는 문서 객체를 넣습니다 이 객체는 뷰와 동일하겠죠 그런 다음 .addInteraction을 선택 UI를 표시하고 싶은 뷰에 추가합니다 컨테이너 뷰도 되고 문서를 렌더링하는 뷰도 됩니다 선택 상태가 바뀔 때마다 반드시 setNeedsSelectionUpdate를 호출하세요 그러면 해당 interaction이 모든 뷰를 업데이트할 것입니다 새로운 선택 상태를 반영해서요 UITextSelectionDisplay Interaction 외에도 확대경을 표시하는 새 API도 추가하였습니다 어떤 뷰에서도 사용할 수 있으며 UITextSelectionDisplay Interaction이나 UITextInput을 사용할 필요가 없죠 UIPanGestureRecognizer 같은 제스처 인식자를 사용하여 확대경을 업데이트하세요 확대경 세션을 관리하는 코드인데요 didRecognizePanGesture를 사용하면 콜백에서 제스처의 위치와 선택 위젯을 얻게 되죠 이 경우에는 커서 뷰죠 다음으로 제스처가 시작되면 새로운 UITextLoupeSession에 begin(at:)을 호출해서 확대경의 시작 위치, 선택 위젯, 좌표 공간을 제공합니다 그런 다음 제스처가 움직이면 기존 확대경 세션에 move(to:)를 호출해서 위치를 업데이트합니다 마지막으로 제스처 인식이 끝나면 확대경 세션에 invalidate()를 호출하여 종료합니다 다음으로 텍스트 항목 동작을 살펴보고 이것을 사용해서 텍스트 뷰 안에 메뉴를 표시하는 방법을 알아보죠 이제 UITextView에서 텍스트 항목 상호 작용을 훨씬 더 많이 사용자화할 수 있게 됐습니다 UITextViewDelegate의 새로운 API를 사용해서요

이번 추가로 텍스트 항목의 1차 동작을 변경할 수 있고 여기 번역 앱에서 나오는 것 같은 후보 메뉴를 나타나게 할 수 있죠 이전에는 개발자가 UITextView에서 항목 상호 작용을 비활성화할 수 있었습니다 UITextViewDelegate의 shouldInteractWith API를 써서요 링크와 첨부 파일이 대상이었죠 iOS 17에서는 항목 상호 작용을 사용자화할 수 있게 됐습니다 텍스트 뷰 내부의 텍스트 항목에 관해서요 UITextViewDelegate의 새 메서드는 1차 동작을 사용자화하거나 특정 텍스트 항목에 대한 메뉴를 제공합니다 어떤 텍스트 항목들이 있으며 앱에 어떻게 통합하는지 간단히 살펴보죠

텍스트 항목은 항목 상호 작용을 지원하는 콘텐츠를 대표합니다 여기에는 NSTextAttachment로 표시되는 텍스트 첨부 파일 NSLinkAttributeName로 표시되는 링크가 포함됩니다 UITextItem은 이제 상호 작용을 위해 사용자가 텍스트 영역에 태그를 지정하는 기능도 지원합니다 상호 작용 영역에 태그를 지정하려면 상호 작용하고 싶은 텍스트 영역을 표시하는 속성 문자열에 UITextItemTagAttributeName을 쓰세요 이런 새로운 API를 쓰면 텍스트 항목이 상호 작용할 때 기본 탭이나 메뉴 동작을 바꿀 수 있습니다 예를 들면 알려진 링크를 앱 내의 기존 뷰에 리디렉션하고 싶거나 텍스트 일부에 맞춤형 메뉴를 추가하고 싶을 수 있죠 기본 동작 또는 메뉴를 계속 표시하지 않거나 비활성화하려면 그냥 nil을 반환하면 됩니다 menuConfiguration이나 primaryActionDelegate 메서드에요 이 간단한 코드 예제는 사용자가 UITextView 내부의 링크를 탭하는 것에 따라 메뉴를 표시하는 법을 보여줍니다 MenuConfigurationFor:defaultMenu: 메서드를 구현하면 됩니다 UITextViewDelegate에서요 그러면 표시하려는 메뉴가 포함된 MenuConfiguration을 반환하죠 메뉴 구성의 일부로 미리 보기를 제공하여 나머지 콘텍스트 메뉴와 함께 일렬로 보여줄 수도 있습니다 목록 및 글머리 기호 지원 역시 TextKit 2에 추가되었습니다 여러분의 응용 프로그램에서 어떻게 활용할지 살펴보죠 다양한 종류의 글머리 기호는 물론 로마 숫자, 알파벳 및 소수점 순서도 지원됩니다 기기나 앱에 설정된 로케일에 기반해 각각 자동으로 현지화되죠 이처럼 전 세계적으로 현지화하는 기능이 내장돼 있는 겁니다 다음은 텍스트 목록을 시작하는 방법에 대한 간단한 예제입니다 속성 문자열을 사용할 겁니다 NSParagraphStyle에 textLists 프로퍼티를 사용하여 정렬된 목록이 적용되는 단락을 정의합니다 시스템은 자동으로 항목에 번호를 매기게 됩니다 줄 바꿈과 같은 줄 끝 문자를 기준으로요 UITextView는 단락 스타일을 자동으로 전파하게 되죠 typingAttributes에 기반해서요 macOS Sonoma의 받아쓰기 작업에 큰 변경 사항이 생겼습니다 새 API 중 하나는 맞춤형 텍스트 요소가 새로운 설계에서 잘 작동하는지 확인하는 것을 도와줍니다 macOS 14의 새 받아쓰기 표시기가 하는 일이 바로 그거죠 iOS에서처럼 받아쓰기를 할 때는 사람이 말할 때 발광 효과가 나고 그렇지 않을 때는 마이크 표시가 뜹니다

스크롤 후 커서 옆 표시기는 스크롤 뷰 가장자리에 고정됩니다, 그러고 나면 문서의 현재 위치로 돌아가는 버튼이 제공되죠 NSTextView 같은, AppKit의 표준 텍스트 컨트롤을 사용한다면 이 동작을 즉시 사용할 수 있습니다 여러분의 앱이 사용자화한 구현으로 삽입 포인트를 보여주게 돼 있다면 이 새 동작을 구현하는 데 작업이 좀 더 필요할 수 있습니다 iOS용 UITextSelection DisplayInteraction처럼 이제 macOS용 새 API로 시스템의 선택 UI와 일관성을 유지할 수 있습니다 커서를 직접 그리는 대신 NSTextInsertionIndicator를 채택하세요 사용자화할 수 있는 NSView 하위 클래스로서 문서 뷰 내부에 배치해 커서 위치를 표시할 수 있죠 모양도 사용자화할 수 있습니다 색상과 크기를 바꿀 수 있죠 기본 설정은 현재 강조색을 따르게 돼 있습니다 덕분에 받아쓰기 효과 지원이 아주 쉬워집니다 약간의 설정만 해 주면 시스템이 계층 구조에 적합한 뷰를 삽입할 수 있습니다 macOS에서 NSTextInsertionIndicator를 사용하는 방법은 다음과 같습니다 NSTextInsertionIndicator 뷰를 만들고 서브뷰로 추가해 줍니다 문서 내용을 표시하는 모든 뷰에요 이 작업을 완료하면 effectsViewInserter를 블록으로 설정하여 시스템에서 제공한 뷰를 문서의 뷰 계층 구조에 삽입합니다 시스템은 효과 뷰의 위치를 자동으로 처리하게 하고 삽입 표시기가 이동함에 따라 업데이트되도록 합니다 맞춤형 텍스트 뷰가 응답자 지위를 사임하면 displayMode를 숨김으로 설정하여 커서를 감추세요

텍스트가 삽입되면 프레임 업데이트가 자동으로 발광 효과 애니메이션이 되죠 받아쓰기를 입력 소스로 쓴다면요 발광 효과를 비활성화하고 싶다면 automaticModeOptions에서 showEffectsView 옵션을 없앱니다 사용자가 입력 모드를 바꾸면 효과 뷰는 가로 텍스트의 커서 밑에 표시되어 언어 선택 UI를 표시합니다 이 UI의 위치를 재정의하고 싶다면 preferredTextAccessory Placement를 구체화할 수 있죠 NSTextInputClient을 구현할 때요 시스템은 이 프로퍼티의 값을 확인하여 어디로 액세서리를 가져올지 결정합니다 커서가 받아쓰기 중에 화면 밖으로 스크롤되면 시스템은 스크롤되어 사라졌다는 표시도 해 줍니다 커서의 상대적 위치를 표시하고 받아쓰기 지점으로 돌아갈 수 있는 어포던스를 제공하죠

맟춤형 텍스트 보기에서 이 동작이 지원되도록 하려면 NSTextInputClient를 채택하고 selectionRect 및 documentVisibleRect 프로퍼티를 구현해야 합니다 스크롤 시작 및 종료를 시스템에 알리려면 textInputClientWillStart ScrollingOrZooming과 willEndScrollingOrZooming을 호출합니다 앱이 모든 언어에서 제대로 작동하는지 확인하는 것은 뛰어난 텍스트 경험을 제공하는 데 매우 중요합니다 저희는 표준 텍스트 컨트롤에서 중요한 몇 가지를 변경해 광범위한 언어에서 가독성과 인체공학성을 향상했습니다 앱에서 동적 유형을 지원하면 큰 도움이 됩니다 모든 언어에서 UI 레이아웃을 개선하는 데 있어서요 앱에서 텍스트 요소를 배치할 때 고려해야 할 중요한 사항은 언어마다 줄 높이가 가변적일 수 있다는 사실입니다 레이아웃 방향과 서체 스타일도 마찬가지고요 언어별 줄 높이가 가변적이라 발생하는 흔한 문제는 텍스트가 잘리는 문제입니다 이는 보기에 좋지 않으며 가독성에 큰 영향을 미치고 앱의 전반적인 사용자 경험을 크게 저해할 수 있습니다 이러한 문제는 알아차리기 어려울 수 있습니다 특히 모든 언어로 앱을 테스트할 수 없는 경우라면요 그래서 표준 텍스트 요소를 몇 가지 개선했습니다 UITextField와 UILabel 같은 것들을요 대부분의 경우 이 문제를 자동으로 해결하기 위해서죠 그러나 여전히 따라야 하는 몇 가지 모범 사례가 있습니다 시스템에서 이런 요소들을 잘라내는 걸 방지하기 위해서요 이러한 일반적인 잘림 문제를 방지하기 위해 이제 모든 플랫폼에서 라인 높이를 자동으로 조정합니다 UILabel이나 UITextField에서요 줄 높이가 매우 동적인 언어도 수용할 수 있게요 이 새 동작은 특정 경우에만 수행됩니다 첫째, 줄 높이는 이제 기기에 설정된 선호 언어에 따라 달라집니다 둘째, 전체 사용자 인터페이스에 영향을 미칩니다 모든 텍스트 요소의 줄 높이를 높이고 고정된 줄 높이의 글씨를 표시하는 요소도 포함합니다 영어와 같이 일반적으로 추가 공간이 필요하지 않더라도요 이는 모든 텍스트 요소에 대한 시각적 일관성을 보장하기 위한 것입니다 마지막으로, 이 자동 조정이 적용되는 것은 텍스트 스타일을 사용하는 텍스트 요소뿐입니다 사용자 지정 서체는 계속해서 고정 줄 높이를 사용합니다 이 동작은 완전히 새로운 것은 아닙니다 여러 번의 릴리즈에서 적용된 것이니까요 하지만 iOS 17에서는 훨씬 더 동적이죠 정확한 조정은 텍스트 스타일과 사용 언어에 따라 달라집니다

이 동작을 활용하려면 텍스트 스타일을 채택하세요 preferredFont(forTextStyle:) 메서드로 UIFont를 명시적으로 생성해서 UILabel 같은 텍스트 요소에 할당하면 됩니다 다음으로 텍스트 요소에 clipsToBounds를 설정하지 마세요 태국어나 힌디어 같은 언어의 어센더와 디센더는 종종 줄 높이 경계를 넘어서죠 보통 대부분의 레이아웃에서는 허용 가능합니다 주변 요소에 남는 공간이 있거든요 하지만 그렇기에 clipsToBounds를 설정하면 그런 텍스트 요소들은 잘려 나가게 됩니다 UIKit 역시 이 설정을 불필요하게 사용하지 않도록 업데이트되었죠 이전까지는 clipsToBounds가 기본 설정이었습니다 마지막으로 UI가 높이 변화에 반응하는지 다른 모든 컨트롤이 정렬 상태를 유지하는지 확인하세요 텍스트 요소가 세로로 커질 수 있으니까요 또한 줄 바꿈 동작도 크게 개선했습니다 중국어, 독일어, 일본어 및 한국어와 같은 언어에서요 이 개선 사항은 다른 규칙을 적용합니다 UI에서 사용하는 텍스트 스타일과 표시되는 언어에 따라 달라지죠 예를 들어, 이전에는 한국어 텍스트에서 한 단어가 여러 줄로 나뉘었을 수 있습니다 이제 UIKit가 제목 텍스트 스타일이 이렇게 분할되는 것을 방지해 더욱 매끄러운 읽기 환경을 보장합니다 앱에서 이 새로운 동작을 잘 활용하려면 마찬가지로 텍스트 스타일을 채택하세요 iOS 17에서 여러분의 앱이 강력한 텍스트 경험을 만들기 위해 알아야 할 모든 것을 살펴봤습니다

앱에서 맞춤형 텍스트 뷰를 사용하는 경우 시스템 선택 UI를 사용하여 OS의 모든 새로운 기능을 활용하세요 텍스트 항목을 사용하여 텍스트 뷰에서 링크와 함께 더 나은 상호 작용을 만들고 TextKit 2의 강력한 새 기능을 활용하여 더욱 풍부한 텍스트 편집 경험을 제공해 보세요 일반 텍스트 요소에 텍스트 스타일을 채택하여 언어나 선호하는 텍스트 크기에는 상관없이 모두에게 훌륭한 사용자 경험을 선사하시길 바랍니다 이것으로 마치겠습니다 시청해 주셔서 감사합니다 평점 별 다섯 개 주시고 아래에 댓글도 남겨 주세요 ♪ ♪