비트와 자장가

애플, 유려한 UI 디자인 본문

개발/자료

애플, 유려한 UI 디자인

eastriver 2022. 6. 11. 15:44
728x90

UX, 사용자 경험은 중요하다.

애플은 인터페이스의 유려함을 이렇게 정의한다:

의식의 연장 extension of mind

 

도구와 인간의 의식은 함께 발달해 왔고, 이는 떼어놓을 수 없는 관계를 형성하고 있다.

화면을 손으로 직접 조작하는 시대에 들어 이 명제는 그 어느 때보다 중요해졌다.

 

생각하는대로 동작하는 것.

이는 사용자의 의도를 파악하고 그에 대응하는, 또, 대응을 준비하는 설계가 전제되어야 한다.

 

UI, 사용자 인터페이스란 무척 복잡한 것을 사용자에게 간단하게 느껴지도록 포장하는 것이다.

애플은 이걸 잘 한다.

 

사용자는 "탭"이란 제스처를 떠올릴 때 특정 영역에 손가락을 대는 것 이상으로 생각하지 않는다.

개발자에게는 탭도 디자인해야 하는 영역이다.

탭 활성화가 되는 추가 마진은 어디까지 줘야하며, 탭을 취소하는 방법과, 작은 움직임을 스크롤로 오해하지 않을 기준 거리 설정, 홀드(롱 프레스)로 오인하지 않을 기준 시간 범위 설정 등.

 

평평한 유리에 손가락을 문지르는 것으로는 촉각적 피드백이 부족하기 때문에 (그래서 개발자는 적극적으로 햅틱 피드백을 써야 한다)

사용자에게 만족스러운 UX를 제공하기 위해 시각적 단서 visual cue가 많이 필요하다.

 

이제는 우리에게 익숙해져 당연하게 느껴지는 관성 스크롤은 애플 인터페이스 디자이너 바스 오딩 Bas Ording이 2005년 개발해 전세계에 그 변형들이 널리 차용된 것이다. 그전까지는 휠이든 터치든 손가락을 움직이는 동안만 화면이 움직이는 것이 당연했다.

개발 비화는 아래 링크 참조.

 

The inside story of the iconic 'rubber band' effect that launched the iPhone

One day in early 2005, interface designer Bas Ording was sitting in a secret, windowless lab at Apple HQ when the phone rang. It was Steve Jobs. The first

www.cultofmac.com

 

WWDC18 아이폰X 제스처 인터페이스를 정리하는 영상에 이 모든 내용이 훨씬 자세하게 설명되어 있다.

관성과 같이 물리세계의 법칙을 흉내내는 것.

사용자의 만족감을 위한 피드백 보상을 탭과 스와이프 등 조작의 방향에 따라 종류를 선택하는 방법.

애니메이션 도중이라도 사용자의 인풋에 따라 반응해야 하는 이유.

사용자의 제스처가 도중에 변경된 경우 대응 방법 등등.

 

iOS와 담을 쌓은 이라도 UI와 조금이라도 연관이 있는 개발자라면 모두 봤으면 하는 영상이다.

 

Designing Fluid Interfaces - WWDC18 - Videos - Apple Developer

Discover the techniques used to create the fluid gestural interface of iPhone X. Learn how to design with gestures and motion that feel...

developer.apple.com

 

영상의 마지막에 가서 애플의 UI 디자인 특징을 이렇게 정리한다:

  • 반사적인 responsive
  • 바꿀 수 있는 redirectable
  • 낚아챌 수 있는 interruptible
  • 동적인 dynamic
  • 우아한 elegant

난 이 부분이 가장 마음에 들었다.

전부는 아닐지라도 내 앱 todoom을 만들 때 많이 적용했다.

 

[todoom] 할 일 목록

투두리스트 앱은 무척 많은데, 잡다한 기능들이 너무 많아 다들 쓰기가 불편하다. 그래서 내가 사용하기 위해 본질에 충실한 투두 앱을 만들었다. '쉬운 거 만들자'로 시작했는데 어쩌다보니 하

eastriver-today.tistory.com

 

‎todoom

‎TYPE, DRAG, TAP—minimal, but rich. todoom helps you get things done. [features] * todo * dark mode * iCloud sync * widget * theme selection in settings * haptic feedback (iPhone only) ## If you don't like the default look that corresponds with the sys

apps.apple.com

영상을 오늘 처음 본 건데, 앱에서 더 개선할 수 있을 것 같은 지점들을 발견했다.

728x90
반응형
Comments