안녕하세요 🌱 Lawn입니다 코더스하이 윤성관 대표님과 함께하는 HIG 독서모임을 함께하면서 배우게된 내용을 정리해보도록 하겠습니다

HIG Story 애플 펜슬을 위한 펜슬 킷이라는 개발자 프레임 워크도 있다. 아이폰은 펜슬이 필요 없기에 연동이 되지 않는다. 애플은 확실히 기술보다는 UX에 의해 드라이브 되는 회사인것 같다. 펜슬 덕분에 아이패드 활용도가 많아져서 판매량도 증가했다.

🌱 Apple Pencil and Scribble

Apple Pencil은 노트 필기, 스케치, 그림 그리기, 문서 표시 등을 할 때 픽셀 수준의 정밀도를 제공하는 iPad 앱을 위한 다재다능하며 직관적인 도구다. iPadOS 14 이상에서 Scribble은 Apple Pencil을 사용하여 빠르고 개인적인 필기 인식을 통해 텍스트 필드에 텍스트를 입력할 수 있도록 한다. 밑에 있는 Supporting Scribble을 참고하자.

Support expected behaviors.

예상되는 행동을 지원하자. Apple Pencil은 그리기, 필기, 마킹 등을 쉽고 자연스럽게 할 수 있도록 디자인 되었으며, 포인터나 UI 상호작용 도구로도 사용된다. 사용자들이 기대하는 Apple Pencil 기능을 지원하는 것 외에도 다른 기능을 지원하는것도 고려하자. 예를 들어, 사용자들이 앱에서 문서의 여백에 메모를 할 수 있도록 할 수 있다.

Let people choose when to switch between Apple Pencil and finger input - don't force them.

사용자가 Apple Pencil과 터치 간에 원하는 것을 선택할 수 있도록 해야한다. 예를 들어, 사용자들은 기기를 조작하기 위해 Apple Pencil대신 손가락으로 터치를 할 수도 있다. 만약 앱이 Apple Pencil로 조작이 가능하다면, 사용자의 손으로도 동일하게 가능해야 한다. 만약 Apple Pencil로 앱을 조작할 수없으면 사용자는 Apple Pencil이 오작동이나 배터리 부족인지 혼동스러울 것이다. 이처럼 Apple Pencil로 가능한 그림이나 표시를 손가락으로도 할 수 있도록 지원하자. (Scribble은 Apple Pencil 입력만 지원가능하다.)

Let people make a mark the moment Apple Pencil touches the screen.

Apple Pencil이 화면을 터치하는 순간 사용자들이 흔적을 남길 수 있도록 하자. Apple Pencil을 사용하는 것은 기존에 사용자들이 연필로 종이에 필기하는 것과 같은 경험을 줄 수 있어야 한다. Apple Pencil을 사용하기 전에 사용자에게 어떤 버튼이나 특수한 모드로 바꾸도록 요구하지 말자.

HIG Story 예전에 선생님들에게 애플에 관한 강의를 하다보니 알게된건데, 선생님들 중에 미술 선생님이 있었다. 이때 처음 애플 펜슬을 사용해 보신 분이셨고, 혼자 필을 받으셔서 사람 얼굴을 그리셨다. 툴도 잘 못쓰시는데 한두가지 기능으로 정말 잘 그리셨다. 이처럼 애플펜슬로도 엄청난 그림을 그릴수 있다. 미술을 하시는 분들은 애플 펜슬을 연필과 같이 본다.

Help people express themselves by responding to the way they use Apple Pencil.

사람들이 Apple Pencil을 사용하여 본인의 스타일을 표현할 수 있도록 도와주자. Apple Pencil은 기울기(고도), 힘(압력), 방향(방위각)을 감지할 수 있다. 앱은 이 정보를 사용하여 Apple Pencil의 다양한 글씨의 두께와 거칠기 등을 표현할 수 있어야 한다. 예를 들어, 압력을 변화시킴으로써 잉크 불투명도 또는 브러시 크기와 같은 연속적인 특성에 영향을 주면 자연스러울 것이다.

Use visual feedback to indicate a direct connection with content.

시각적 피드백을 사용하여 콘텐츠와의 직접적인 연관성을 나타내자. Apple Pencil은 사용자가 화면을 터치하는 즉시 조작하는 것처럼 보여야 한다. Apple Pencil을 사용할때 부드럽지 않거나 화면의 다른 콘텐츠에 영향을 끼치면 안된다. 예를들면, 서명란이 있는 곳에 바로 서명할 수 있게하자 따로 스크린을 띄워서 서명하게 하지 말고.

Design a great left- and right-handed experience.

왼손잡이와 오른손잡이 모두를 고려해 설계하자. 어느 손으로도 가려질 수 있는 위치에 컨트롤을 배치하면 안된다. 컨트롤이 잘 안보일 가능성이 있는 경우 사람들이 컨트롤을 재배치하도록 하는 것이 좋다.

HIG Story don't expect them to learn new gestures for tje same behaviors. :중요하다. 앞으로도 자주 나올 것이다. UI에서 제스쳐를 학습시키는 것은 앱 단위에서는 불가능 하다. 플랫폼 단위에서나 가능하다. 이왕이면 이미 정해져있는 제스쳐를 사용하도록 하자.

Whenever possible, respect the user’s settings for the double-tap gesture.

가능하다면 더블 탭 제스처에 대한 사용자의 설정을 준수하자. Apple Pencil 2는 직접(도구 변경) 또는 간접적(색상 옵션 표시)으로 더블 탭 제스처를 사용할 수 있다. 기본적으로 현재 사용하는 도구와 지우개를 더블 탭으로 전환할 수 있지만, 설정으로 이동해서 현재 도구와 이전 도구의 전환이나, 색 선택기를 표시하거나 숨기거나, 또는 아무것도 하지 않도록 사용자가 원하는 방식으로 지정할 수 있도록 해야한다. 앱이 이러한 동작을 지원하는 경우 더블탭에 대한 시스템 전체 설정을 존중하고, 사용자들이 동일한 동작에 대해 새로운 제스처를 학습할 것이라고 생각하면 안된다.

• Doble-tap gesture : 펜을 두번 톡톡 건드리면 나오는 기능

Give people a way to enable custom double-tap behavior if necessary.

필요한 경우 커스텀 더블 탭을 사용자가 커스텀 할수 있도록 하자. 앱이 따로 커스텀 더블 탭 기능을 지원하는 경우 사용자가 커스텀 동작을 사용할 수 있도록 하는 컨트롤을 제공해야 한다. 그렇지 않으면 사용자는 앱을 사용하면서 설정해둔 이중 탭 설정이 실행되지 않아 혼란스러울 수있다.

Never use the double-tap gesture to perform an action that modifies content.

콘텐츠 수정을 위해 더블 탭 제스처를 사용하면 안된다. 사용자는 실수로 더블 탭을 할 수 있다. 따라서 더블 탭으로 인해 콘텐츠가 수정이 됬다는 것을 모를 수도 있다. 더블 탭으로 툴이 전환될 때 사용자는 다시 더블 탭하여 이전으로 돌아갈 수있다. 그러나 더블 탭을 했을때 어떠한 동작이 수행되는 앱은 사용자들이 동작을 취소하기 위해 어려움을 느낄 수있다. 그 중 제일 안좋은 것은 더블 탭으로 파괴적인 과정(삭제)을 하는 앱은 정말 좋지 않다. 사용자가 파괴적인 작업이 발생했다는 것을 모를 경우 데이터가 손실될 수 있기 때문이다.

• 개발자 가이드라인은 Pencil Interactions을 참고하자.

☘️ Supporting Scribble

Scrible과 Apple Pencil을 사용하면 앱에서 텍스트가 허용되는 곳이면 어디든지 간단히 쓸 수 있다. 먼저 모드를 누르거나 전환할 필요가 없다. Scrible은 iPadOS 14 이상에 완전히 통합되어 있기 때문에 키보드와 마찬가지로 기본적으로 모든 앱에서 사용할 수 있다.

Always make entering text feel fluid and effortless.

항상 텍스트 입력이 쉽고 유동적으로 느껴지도록 하자. 기본적으로 Scribble은 암호 필드를 제외한 모든 표준 텍스트 컨트롤(예: 텍스트 필드, 텍스트 보기, 검색 필드 및 웹 콘텐츠의 편집 가능한 필드)에서 작동한다. 앱 에서 커스텀 텍스트 필드를 사용하는 경우, 사용자가 쓰기 시작하기 전에 해당 필드를 탭하거나 선택하도록 하지 말자.

Make Scribble available everywhere people might want to enter text.

사용자가 텍스트를 입력할 수 있는 모든 곳에서 Scrible을 사용할 수 있도록 하자. 키보드를 사용하는 것과 달리, 애플 펜슬을 사용하는 것은 사람들이 화면을 종이 한 장을 다루는 것처럼 처리하자. 텍스트 입력이 자연스럽게 보이는 장소에서 Scrible을 지속적으로 사용할 수 있도록 함으로써 앱에서 이러한 사용자 경험을 줄 수있다. 예를 들어 미리 알림에서는 해당 영역에 텍스트 필드가 없더라도 사람들이 마지막 항목 아래의 빈 공간에 새 알림을 작성하여 새 알림을 만드는 것은 자연스러운 일일 것이다.

• 개발자 가이드 라인은UIIndirectScribbleInteraction 을 참고하자.

Avoid distracting people while they write.

사람들이 글을 쓰는 동안 주의를 산만하게 하지 말자. 일부 텍스트 필드 동작은 키보드 입력에 적합하지만 Apple Pencil이 지원하는 자연스러운 쓰기 경험을 방해할 수 있다. 예를 들어, 제안사항이 글을 시각적으로 방해할 수 있기 때문에 사용자가 텍스트 필드에 글을 쓸 때 자동 완성 텍스트를 표시하지 않는 것이 좋다. 입력 내용이 겹치지 않도록 사용자가 쓰기 시작하는 즉시 필드의 placeholder 텍스트를 숨기는 것도 좋을 것이다.

While people are writing in a text field, make sure it remains stationary and its contents don’t scroll.

사용자가 텍스트 필드에 글을 쓰는 동안 텍스트 필드가 고정되어 있고 내용이 스크롤되지 않는지 확인하자. 어떤 경우에는 텍스트 필드에 포커스가 있을 때 이동하는 것이 좋을 수 있다. 예를 들어, 검색 필드가 결과를 표시할 수 있는 공간을 늘리기 위해 이동할 수 있고, 이러한 움직임은 사용자가 키보드를 사용할 때는 괜찮지만, 글을 쓸 때는 입력이 어디로 가는지 통제력을 잃은 것처럼 느낄 수 있다. 텍스트 필드가 이동하지 않도록 방지할 수 없는 경우 사용자가 쓰기를 일시 중지할 때까지 이동을 지연하자.

• 개발자 가이드 라인은scribbleInteractionShouldDelayFocus(_:)를 참고하자.

또한 사용자가 텍스트 필드에 글을 쓰고 편집하는 동안 자동 스크롤을 방지하는 것이 중요하다. 텍스트 자동 스크롤을 필사할 때, 사람들은 그 위에 글을 쓰지 않으려고 할 수 있다. 설상가상으로, 사람들이 Apple Pencil을 사용하는 동안 텍스트가 스크롤된다면, 원하는 것과 다른 범위의 텍스트를 선택할 수 있다.

Give people enough space to write.

사람들이 글을 쓸 수 있는 충분한 공간을 제공하자. 작은 텍스트 필드는 키보드를 사용하여 텍스트를 입력할 때는 괜찮지만, 쓰기에는 사용자들이 불편함을 느낄 수 있다. Apple Pencil 입력이 가능한 경우 사용자가 글을 쓰기 시작하거나 글쓰기를 일시 중지하기 전에 텍스트 필드의 크기를 늘려 사용성을 보장하자. 사용자가 글을 쓰는 동안에는 텍스트 필드 크기가 바뀌면 안된다.

• 개발자 가이드 라인은 UIScribbleInteraction을 참고하자.

☘️ Providing a Custom Drawing Experience

PencilKit을 사용하면 사용자들은 iOS가 제공하는 것과 동일하게 메모를 하고, 문서와 이미지에 주석을 달고, 그림을 그리도록 할 수 있다. 또한 PencilKit을 사용하면 앱에서 custom drawing canvas를 쉽게 만들 수 있으며 최신의 도구 선택과 잉크 팔레트를 제공할 수 있다.

• 개발자 가이드 라인은 PencilKit을 참고하자.

Help people draw on top of existing content.

사용자들이 기존 콘텐츠 위에 그림을 그릴 수 있도록 도와주자. 기본적으로 PencilKit 캔버스의 색상은 다크 모드가 되면 자동으로 조정되므로 사용자는 어느 모드에서든 콘텐츠를 만들 수 있다. 그러나 사용자들이 PDF나 사진과 같은 기존 콘텐츠 위에 그림을 그릴 때, 마크업이 선명하고 가시적으로 유지되도록 색상의 동적 조정을 방지하고 싶을 것이다.

Make sure the tool picker doesn’t obscure content when your app runs in a compact environment.

앱이 아이폰과 같은 환경에서 실행될 때 도구 선택기가 콘텐츠를 가리지 않는지 확인하자. 일반 환경에서는 도구 선택기가 콘텐츠 위에 떠 있어 사용자가 방해가 되지 않도록 이동시킬 수 있지만, 아이폰과 같은 환경에서는 도구 선택기가 화면 아래쪽 가장자리에 고정된 상태로 유지가 된다. 이때 사용자의 콘텐츠를 가리지 않도록 도구 선택기의 높이를 고려하여 콘텐츠 뷰의 프레임 또는 스크롤 뷰의 insets을 조정해야 한다.

Consider providing custom undo and redo buttons to display when your app runs in a compact environment.

앱이 아이폰과 같은 환경에서 실행될 때 취소 및 재 실행 버튼을 표시할 커스텀 버튼을 제공하는 것을 고려하자. 일반 환경(아이패드)에서는 도구 선택기에 실행 취소 및 다시 실행 버튼이 있지만, 아이폰과 같은 환경에서는 그렇지 않다. 아이폰과 같은 환경에서는 탐색 모음에 커스텀 버튼을 표시하도록 하자. 사용자가 모든 환경에서 사용할 수 있도록 표준 세 손가락 실행 취소/재실행 제스처를 지원하는 것 또한 고려하자.

• 더 자세한 내용은 Undo and Redo을 참고하자.

📺 스위프트 하이 HIG 독서모임