아이폰의 감성 인터페이스 원리(42)
손잡이를꼭잡으세요. 2020-10-09
https://developer.apple.com/videos/play/wwdc2018/803/

위 링크의 영상은 2018년 개발자 컨퍼런스임.
iOS 개발자들이 어떤 생각으로 UI를 개발했는지 알 수 있음.

UI가 뭐냐,
user interface로 기계와 사용자가 상호작용하는 매개다.
조작을 하겠다고 입력하면 기계가 조작 수행을 출력하는 과정.
손으로 만지고, 작동하는 걸 확인하고, 결과를 보는 거라고 생각하면 된다.

애플은 이 인터페이스를 개발할 때 많은 연구를 한 것 같다.
그 결과를 위 링크의 영상에서 간략히 설명해준다.

-

애플이 생각하는 아이폰은 우리 자신의 연장선이다.
구석기시대에 돌을 날카롭게 갈아서 손톱의 확장 툴로 썼듯이
스마트폰은 인간 mind의 확장이라고 본 것이다.

그래서 목표를 설정하기를 fluid interface라고 했다.

기존의 인터페이스에서는 마우스, 키보드를 거쳐 컴퓨터에 접근해야 했다.
이 과정에서는 딜레이가 발생하고, 한 번 걸림이 발생한다.
손을 통해서 기계와 인간 내면을 잇는 것이 목표다.

아주 뜬구름 잡는, 무슨 철학자, 심리학자들이 기술 이해도 없이 하는 소리 같지만
애플 개발자들은 이 방법을 찾아 꽤 훌륭하게 실현했다.
그걸 알 수 있는 게 수많은 사람들이
아이폰은 감성이 있다고 하고, 거기에 공감하기도 하는 것.
하지만 왜 뭐가 감성인지 명확히 설명하는 사람은 잘 없다.
아무튼 감성적임. 근데 저 영상을 보면 조금이나마 알 수 있다.

기억나는 대로 몇 가지 내맘대로 정리해서 적어보겠다.

-

먼저 직관성.
갤럭시도 그렇고 모든 스마트폰 회사들이 직관적이라는 말을 쓴다.
그런데 이 직관적인 게 뭐냐.

아이폰에서 직관적이라는 것은 자연, 실제 세계의 원리를 적용한 것이다.
몇 가지 예시가 있다.

달리는 자동차를 생각해 보자.
자동차가 100km/h로 달리다가 갑자기 70, 30, 10, 5 이렇게 줄어든다.
이걸 보고 있는 사람은 그 다음이 어떻게 된다고 생각할까?
당연히 ‘아 차가 곧 서겠구나’ 한다.
그래서 이걸 그래프로 분석해서
어떤 곡선일 때 사람이 ‘자연스럽게 멈추겠구나’ 생각하는지 알고
적용했다.
가장 대표적으로 쉽게 볼 수 있는 게 스크롤이다.
당장 지금 이 화면을 스크롤 위나 아래로 한 번 샥 해보면
자연스럽게 멈춘다는 느낌을 받을 수 있다.

이게 감성이다.
모든 사람이 동일하게 공유하고 있는 직관적인 경험이기 때문에
누가 만지더라도 자연스럽고 직관적임을 느낀다.

비슷하게 적용한 다른 원리는 스프링, 용수철이다.
용수철을 잡아 당겼다가 탁 놓으면 띠요옹 한다.
이걸 적용한 거다.

가장 쉽게 알 수 있는 예시.
뭔가를 스크롤 해서 보다가 끝에 도달했을 때
갑자기 탁 멈춰 버리면 벽에 부딪힌 기분을 받는다. (그런다고 한다.)
이 글을 읽다가 페이지 아래로 휙휙 내려서 끝까지 갔을 때,
그런 상황을 생각해보자.
애플에서는 스크롤을 끝까지 했을 때 튕기게 되어 있다.
그래야 연속적인, fluid한 작업 느낌이다.
이게 그냥 튕기는 게 아니라
스크롤 하는 속도, 튕겨 나와서 멈춰야 하는 위치에 맞춰서 동작하는 거다.
더 빨리 아래로 부딪히면 더 빨리 튕겨져서 더 많이 튕기고
천천히 아래로 부딪히면 천천히 튕기고 약간의 거리만 움직인다.

이건 튕긴다는 느낌이 있는 모든 것에 적용되어 있다.
아이폰 X, Xs, 11 시리즈에서는 홈으로 나가는 동작.
사진 앱에 들어가서 아무 사진이나 누르고 위로 올려보자.
끝에 스프링이 있는 것처럼 멈추는 느낌이 있다.
스무스하게 멈춘다. 무슨 ufo가 착륙하는 것 같다.
좀 더 올리면 탁 튕기게 된다.
제어센터를 내릴 때, 알림을 확인할 때,
뭐 아무데서나 찾아볼 수 있다.

갤럭시에서는 느낄 수 없는 거다.
그렇다고 보통 이런 것까지 신경 쓰지 않는다.
그래서 아이폰이 감성이 있는데 그게 뭔지는 설명을 못한다.

이런 느낌들이 전부 사람이라면 누구나 느껴본 것이고,
예상할 수 있는 물리적인 현상을 따왔다.
이게 감성을 만든다.

이런 움직임과 함께 애니메이션의 중간과정 비주얼에도 신경을 썼다.
공이 위아래로 튕기는 애니메이션을 생각해 보자.
단순히 공을 위아래로 움직이는 것으로 퉁칠 수 있다.
그러나 애플 개발자들은 중간 과정, 튕기는 도중의 공 이미지에
블러처리를 하느냐, 위아래로 늘려 놓은 이미지를 넣느냐에 따라
다른 느낌이라는 것을 알았다.
그래서 이걸 상황에 따라 적용했다.

홈화면에서 앱을 열 때는 늘어나는 이미지를 넣었다.
그래서 더 자연스럽게 열리는구나 하는 느낌을 받는다.
제어센터를 내린 다음 위아래로 살짝살짝 움직여 보자.
아이콘들이 유령처럼 나타났다가 사라졌다가 한다.

이 중간 과정이 왜 중요한가, 힌트가 된다.
손으로 작동시키겠다는 생각과 띡 등장하는 결과,
그 중간 과정이 들어가면서 조금 더 예측 가능하고
내 제스처가 기대한 대로 동작한다는 찰떡 같은 느낌을 준다.

길게 누르는 동작을 하면 쑥 들어갔다가 뾱 하고 나온다.

윈도우에는 이게 없다. 안드로이드에도 없었다.
그래서 손과 폰이 일체감 있다는 느낌이 없었다.

이런 데에서 감성이 나온다.

-

이런 비주얼적인 직관성 뿐만 아니다.
조금 더 빠르고 부드러운 제스처에도 집중했다.

가장 대표적으로 홈화면으로 돌아가는 동작에서 몇 가지를 알 수 있다.
홈버튼 없는 아이폰 아래쪽에 있는 바 모양을 홈 바라고 부른다.
이 홈바를 굳이 위까지 끌어올릴 필요 없이
살짝만 휙 움직이면 홈으로 휙 하고 간다.
이렇게 작은 움직임을 증폭시켜서 큰 움직임으로 만들어 버린다.
긴 줄에 가벼운 추를 달고 살짝 휘두르면
추가 후우웅 하고 움직이는 것과 같다.
이렇게 가벼운 제스처를 증폭시키는 과정이 들어가면
사용자는 뜬금없는 만족감을 느낀다.
무슨 장난감 가지고 노는 것처럼 말이다.
이게 감성이다.

공돌이들은 이걸 이해하지 못한다. 생각해내지도 못한다.
움직이면 움직이는 것. 끝이다.
가벼운 제스쳐를 크게 부풀릴 때 만족한다는 생각을 못한다.
알려줘도 뭐가 다르냐고 못 느낀다.
갤럭시에서도 비슷하게 적용했다. 상단바 내릴 때.
근데 그건 증폭 같은 게 아니라 특정 범위를 넘으면 내려오는 방식일 뿐이다.
알아도 못 느끼고, 봐도 이해를 못하니
최선을 다해 공돌이방식으로 따라갈 뿐이다.
안드로이드에도 홈바가 생겼고, ui 모습들이 아이폰을 많이 따라간다.
삼성이 마이마이 만들 때는 소니 워크맨을 잘 따라갔지만
지금은 에펠탑이 멋지니 한국에도 에펠탑 짓자는 것과 똑같다.
에펠탑이 지어진 배경, 가진 가치, 문화적 맥락은 모른다.

꼭 홈바 만이 아니라 여러 제스처에서 이런 증폭을 느낄 수 있다.
제어센터, 알림센터를 열 때도 그렇고 뒤로가기 동작 같은 데에서도.

이게 왜 나왔는가.
제스처를 1cm 하는데 화면이 0.5cm만 움직이면 갑갑하다.
그렇다고 1cm만큼만 딱 움직여 버리면 그것도 너무 딱 맞는다.
갤럭시는 1센티 움직이면 1센티 움직인다.
그러고 딱 멈춘다. 이게 공돌이 감성이다.
정확하고, 리니어하게, 딱 딱 맞춰서 빠릿빠릿하면 되지! 한다.
방을 꾸며도 동선이 최고고, 불필요한 거 없애는 게 공돌이고
채광, 조명 색온도, 가구 색감 고려하는 건 잘 없다.

-

홈바에서 알 수 있는 또다른 감성의 원리가 있다.

애플 개발자들은 연속적인 작업성에 중점을 뒀다.
여기에서도 직관적인 경험을 넣었는데 실제 공간의 움직임을 적용한 거다.
오른쪽으로 가면 문으로 들어가는 것, 왼쪽으로 가면 문에서 나오는 것.
이렇게 공간성을 적용해서
왼쪽에서 스와이프 하면 뒤로가기, 오른쪽에서 하면 나오기.
갤럭시나 윈도우에서는 버튼으로 수행한다.
직관적이지가 못하다. 아이폰에서는 그게 있다.
홈바를 올려 멀티태스킹을 할 때 이전 앱은 왼쪽에 차례대로 줄 서있다.
동일한 개념이 유사한 모든 동작에 적용된 것이다.
이건 안드로이드에서도 최근 적용되었다.
윈도우는 아직이다.

또 홈바에서 알 수 있는 공간성은 위로 올리는 동작이다.
좌우만 아니라 상하도 들어갔다.
위로 올리면 홈으로 가는 것이다.
아이폰 애플 앱들을 사용하다 보면 추가 화면은 아래에서 위로 올라온다.
메일 앱에서 답장을 누르면 아래에서 위로 올라오고
없애려면 다시 아래로 내리면 된다.
좌우로 방을 이동하는데 위아래로 추가 방이 띡띡 등장했다가 사라졌다가 한다.

이게 직관적인 감성이다.

-

이런 비주얼적인 요소만 아니다.

애플이 발견한 사실이 있다.
흔히 생각하기로, 보통의 인터페이스는
‘생각-결정-제스처-결과’의 4단계 방식이다.
그러나 애플은 fluid함을 위해 이 과정을 통합시켰다.
‘생각/제스처-결정/결과’로 2단계로 줄였다.

생각과 동시에 손이 움직이고, 결정과 동시에 결과가 나온다.
홈바를 생각하면 알 수 있다.
홈으로 가겠다 생각하면 동시에 홈 바를 올린다.
그리고 결정함과 동시에 손을 놓으면 홈으로 가있다.

이 과정에서 아주 중요한 사실을 하나 발견했는데
취소의 필요성이다.
생각-결정 과정에서
홈으로 가겠다 생각했지만 가지 않겠다 결정을 내릴 수 있다.
실제로 쓰다 보면 그런 상황이 생각보다 많다.
그래서 중간에 되돌아갈 수 있게 했다.

홈바를 올리다가 다시 내리면 홈으로 가지 않는다.
생각-결정과 동시에 제스처와 결과가 만들어진다.
앱을 열 때도 마찬가지다.
카톡을 눌렀다가 ‘아니다 문자 열어야지’ 할 때
홈바를 올리면 취소가 된다.
이게 감성이다.

기존의 사용성은 아래와 같다.
‘작동-결과-작동-결과-작동-결과’
그러나 아이폰에서는
결과가 쭉 이어지는 하나의 과정이고
그 중간중간 작동, 상호작용을 넣을 수 있다.

가장 대표적으로 알 수 있는 게 위에서 말한 앱 실행이다.
갤럭시 사용자들은 누구나 공감할 수 있다.
카톡을 잘못 열었다가 인터넷을 열려고 할 때
뒤로가기 버튼을 연타한다. 앱을 재빨리 닫고 싶기 때문이다.
앱이 닫히고 난 다음에야 인터넷을 열 수 있다.
이게 기존의 상식이고, 당연한 과정이다.
그러나 아이폰에서는 카톡이 열리는 것과 관계 없이
Fluid하게 홈바를 올리고 인터넷을 열 수 있다.

중간중간의 끊어짐이 없다.
상호작용-결과-(끊김)-상호작용-결과
여기에서의 끊김이 없어지는 거다.
상호작용-상호작용-상호작용
이렇게 쭉 이어지고 그 바탕에 결과들이 쭉 이어진다.

이게 감성이다.

-

이외에도 여러 가지를 맨 위 링크 영상에서 볼 수 있다.
동작 예측이라거나 요소의 움직임이라거나.

아무튼 이게 애플의 감성이다.
여기까지는 사용자 인터페이스에 대한 이야기였고
디자인 같은 다른 설명도 저 링크 아래쪽에서 메뉴 들어가면 들을 수 있다.

명확히 설명이 안 되는 ‘고작 핸드폰의 감성’의 바탕에
애플 개발자들의 저런 논리적인 생각이 있다.
그래서 처음 목표한 fluid interface를 잘 실현했나,
Extension of yourself를 달성했나 따져 보면

뭐 나한테는 그런 것 같고
감성이니 타령하는 게 엄청 널리 퍼진 걸 보면
확실히 효과를 보긴 한 것 같다.
전세계에서 제일 많이 팔리는 폰이 아이폰이기도 하고.
물론 이런 거 다 필요 없다, 난 그냥 충분하다 싶으면
굳이 여기까지 다 읽지도 않았겠지.

이글 보고 투폰 가지고 페이지 아래로 휙 내려봤는데
진짜 아이폰은 살짝 틩기는데 갤노트는 그런게 없네
신기하다
kh****** 2020-10-09
답글쓴이 돈주기   
크으
est 2020-10-09
답글쓴이 돈주기   
예전에 아이폰4 나왔을때 할머니 잠깐 보여드린 적 있는데 가르쳐드리지도 않았고 태어나서 처음 만져보셨는데도 옆으로 밀기 확대하기 스크롤 하시는거보고 무릎을 탁 쳤음....
햄찌 2020-10-09
답글쓴이 돈주기   
그냥 뭐 모든게 이유가 있다. 아이폰 유아이도 그렇고 다 넘 아름다움. 앱등이고 뭐고 디자인적으로 너무 너무 훌륭하고 철저함. 난 원래 아이맥같은 폰 외에 컴들은 혐오했는데 아이폰만큼은 반박불가.
oh******* 2020-10-09
답글쓴이 돈주기   
이 글 중간에 스크롤 끝까지 내린다면 튕긴다길래 튕겨봄
le******* 2020-10-09
답글쓴이 돈주기   
Good Job
po********** 2020-10-09
답글쓴이 돈주기   
ㄹㅇ그래서 실제로 좀 옛날 아이폰이나 맥 쓰면 어쩔수없이 속도 느려질수밖에 없는데 그런 ui애니메이션 덕분에 버벅이거나 기다린다는 느낌이 전혀 안들고 쾌적하고 자연스럽게 느껴짐
ge***** 2020-10-09
답글쓴이 돈주기   
모야모야 길어서 다 안 읽었는데
아이폰 사고싶어져
추천요뎡 2020-10-09
답글쓴이 돈주기   
언니고마엉 딱 이거하니로 내 모든게 애플이야 ㅠㅠ
je*** 2020-10-09
답글쓴이 돈주기   
존멋
이글 쓴사람도 그걸 그렇게 정리를하다니 개똑똑
ir******* 2020-10-09
답글쓴이 돈주기   
오 재미따 ㅋㅋㅋ 글 또써줘
나 글 다 읽어써
gg******* 2020-10-09
답글쓴이 돈주기   
UI UX 가 뭔지 항상 궁굼했는데 이제야 알겠다
언니 설명 짱
너구리 2020-10-09
답글쓴이 돈주기   
이걸 이렇게 정리를 하다닠ㅋㅋㅋㅋㅋ이거였구나
ha*** 2020-10-09
답글쓴이 돈주기   
맞아 아이폰 쓸때 내 손과 하나된듯한 플로우.. 이럴려면 기계스펙도 더 좋고 섬세하겠구나 막연히 생각했었지...
ee 2020-10-09
답글쓴이 돈주기   
이거야 이거
내가 말로 설명하기 힘들었던 이거이거
lu***** 2020-10-10
답글쓴이 돈주기   

감덩먹음...따흡..
앱등이는 그렇게 ios개발까지 하게되었다고합니다..
dm******* 2020-10-10
답글쓴이 돈주기   
이런건 모르지만 그냥 쓰면서 별로 거슬리는게 없어
안드로이드폰은 쓰다보면 자꾸 거슬리는 부분이 생겨
근데 요즘폰 만져보니 예전보다는 진짜 마니 발전했더라
예전에는 최신으로 나온 갤럭시s7이런폰들 키보드 치다보면 아- 탄식이 나옴 물론 좃같애서......
글 재밌다 근데 ㅎㅎㅎ
미미미 2020-10-10
답글쓴이 돈주기   

진짜 왜 갤럭시 만지면 왜 불편한가 했던걸 다 설명해줌
난 직관적인게 넘 좋은데
갤럭시는 버튼을 넘 많이 써야해
연결이 부드럽지않고.
익숙해지면 괜찮아지는거겠지만
하여튼 불편함
te***** 2020-10-10
답글쓴이 돈주기   
너무 좋은 글. 돈 드렸음
kt*** 2020-10-10
답글쓴이 돈주기   
최고의 글이네
카라멜라떼 2020-10-10
답글쓴이 돈주기   
무릎을 탁 친다
나가 점점 모든 기기가 애플류 넘어가는 이유를 이제야 이해하엿다
lw**** 2020-10-10
답글쓴이 돈주기   
돈 줬다
Toffl 2020-10-10
답글쓴이 돈주기   
정말정말 재밋다 고마워
이드페퍼 2020-10-10
답글쓴이 돈주기   
ㅇㅇ 맞음 내가 아이폰만 써온 이유임
ha***** 2020-10-10
답글쓴이 돈주기   
글 고마워 너무 재밌게 다 읽음 돈 드림
ce****** 2020-11-07
답글쓴이 돈주기   
돈줌
of******** 2020-11-07
답글쓴이 돈주기   
오오 애플 철학 알고팠어
고마워
or******** 2020-11-07
답글쓴이 돈주기   
너무너무 좋은 글이라서 10딸러줌.
연욱 2020-11-07
답글쓴이 돈주기   
잡스가 휴지통을 만든 이유
(빌이 뺏김)
아마 인간들이 파일클릭해서 꼭 하는게 이름바꾸기일텐데 맥은 엔터치면 바로 이름바꾸기됨

이것이 애플이다 크하하하하
정말 ui만 생각한
ag* 2021-05-05
답글쓴이 돈주기   
오 내가 수년동안 이드에서 읽은 글 중에 제일 흥미로운 글이었어 소개해줘서 고마워
ya**** 2021-05-05
답글쓴이 돈주기   
근데 왜 이새키들은 이걸 맥에는 적용 안한걸까 맥북 쓸 때 줜나게 불편했었는데
ya**** 2021-05-05
답글쓴이 돈주기   
굿
과메기 2021-05-05
답글쓴이 돈주기   
리스펙트!!!
ma***** 2021-05-05
답글쓴이 돈주기   
아이폰 처음 나왔을때 할머니한테 한번 쥐어드린적이 있거든
나 하나도 안알려들었는데 알아서 왼쪽 오른똑 스와이프 하고 버튼 누르시는거 보고 기절함
햄찌 2021-05-05
답글쓴이 돈주기   
와우
03** 2021-05-05
답글쓴이 돈주기   
감성이 우덜식갬성이 아니고 인간공학이었구나
o2*** 2021-05-05
답글쓴이 돈주기   
와 십년 넘게 쓰면서도 몰랐 ㅋㅋ
do**** 2021-05-05
답글쓴이 돈주기   
오.....
tl********* 2021-05-05
답글쓴이 돈주기   
맥북 개편한데? 프로그램 삭제만 해도
윈도우 시작표시줄 또는 윈도우 폴더 들어가서 제어판에 프로그램 추가 삭제 아님?
맥은 휴지통에 넣으면 걍 삭젠디
ag* 2021-05-05
답글쓴이 돈주기   
맥북 존나싫은데 진짜 존나싫어 단축키 멀어서
pl**** 2021-05-05
답글쓴이 돈주기   
내돈을 받으시오
Da*** 2021-05-05
답글쓴이 돈주기   
언니 뭐하는 사람이야? 방금 언니가 쓴 양자세계 글 보고 왔는데 이 글이 언니꺼였다니 ㅋㅋㅋ존멋
la****** 2021-05-07
답글쓴이 돈주기   

사업자번호: 783-81-00031

통신판매업신고번호: 2023-서울서초-0851

서울 서초구 청계산로 193 메트하임 512호

문의: idpaper.kr@gmail.com

도움말 페이지 | 개인정보취급방침 및 이용약관

(주) 이드페이퍼 | 대표자: 이종운 | 070-8648-1433