인터페이스에 큰 변화가 생겼지만 그럼에도 불구하고 0.1 단위의 마이너 업데이트인 이유는 원래 이것이 3.0 버전의 개발 계획에 포함되어 있었기 때문이다. 거의 모든 소스 코드를 재검토하고, 중요 컴포넌트들을 새로 작성하는 과정에서 새로운 인터페이스를 도입하는 건 위험이 너무 컸다. 따라서 3.0 버전은 인터페이스를 그대로 유지하기로 결정했고, 업데이트가 문제 없이 이루어지는걸 확인하고 나서 이번 업데이트를 진행했다.





터치휠(Touch Wheel) - 새로운 비디오 제어 인터페이스


오래 전부터 나는 슬라이더 방식의 비디오 탐색 인터페이스를 좀 더 개선할 수 있으리라 생각했다. 기본 앱에 탑재된 이 상호작용 방식은 비디오 탐색을 위해 기기를 잡고 있는 손을 떼야 하는 불편함이 따른다. 워낙 오랫동안 적용된 인터페이스라 그 불편함을 느끼는 사람이 별로 없을 것 같지만, 그래도 더 나은 인터페이스가 있다면 시험해 볼 가치는 있지 않을까?


기기를 쥐고 있는 손을 떼지 않고 긴 재생 시간을 탐색하는 방법, 그것은 재생 시간을 선형으로 표현하는 대신 원형으로 표현하면 가능할 것 같았다. 둥글게 말아 놓으면 상호작용 영역의 긴 축을 획기적으로 줄일 수 있을 것이다. 이렇게 만든 인터페이스를 쥐고 있는 손 가까이 배치하면 손을 기기에서 떼는 불편함을 해소할 수 있으리라.


그런 생각으로 만든 것이 바로 터치휠(Touch Wheel)이다. 이 인터페이스는 곧바로 TEDiSUB에 적용하기 어려웠는데 그 이유는 지난 TEDiSUB 3.0 개발 과정에서 언급한 바와 같다. TEDiSUB의 낡은 코드와 복잡하게 엉킨 구조로 인해 새로운 인터페이스를 적용하기 어려웠던 것이다. 그래서 나는 이 인터페이스를 시험하기 위해 동영상 플레이어 앱을 개발했고 그것이 yaPlayer다. (처음 yaPlayer는 mp4, mov, m4v 파일만 재생하는 앱이었다. 후에 무인코딩 비디오 재생 앱으로 업데이트 했는데 돌비 라이센스 문제로 지금은 반쪽이 되어버렸다. 현금 1억 정도만 있으면 라이센스할 수 있는데... 도와주세요; )


... 맙소사! 터치휠에 대한 글을 이미 블로그에 포스팅한 줄 알았는데 한참 쓰다 말았었구나; 간단하게 링크 걸고 마무리하려 했는데 실패!


터치휠의 상호작용 방식은 아이팟의 클릭휠과 유사하다. 그리고 그 이전, 비디오 테이프가 한창 유행하던 시절의 조그 셔틀(혹은 조그 다이얼)과도 유사하다. 원형 인터페이스 위에 손가락을 얹고 빙글빙글 돌려서 탐색, 그리고 중앙에 재생/일시정지 버튼이 배치되어 있다.


차이라면, 얼마나 비디오가 진행되었는지를 표시하는 방법이다. 진행 정도를 표시하는 별도의 프로그래스바가 필요할까? 아이팟은 그랬다. 조그 셔틀도 그랬다. 왜냐하면 이것들은 모두 디스플레이 기능이 없는 물리적인 버튼이었으니까! 하지만 터치휠은 디스플레이 위에서 구현되기 때문에 모양을 마음대로 바꿀 수 있다. 그래서 나는 진행 정도를 터치휠 내에 원형으로 표시하게끔 만들었다. (초기 구상과 관련된 애피소드는 yaPlayer 개발 이야기 시작편에서 볼 수 있다)



터치휠을 돌려서 비디오 탐색, 중앙에는 재생/일시정지 버튼, 그리고 양 끝에는 빠른 탐색 버튼이 놓여 있다. 진행률은 휠 전체를 이용해서 표현.




2세대 터치휠 - 빠르게 돌리면 빠르게 탐색, 말은 쉽지!


yaPlayer 초기 버전에서 구현된 1세대 터치휠은 그것의 맞은 편에 스크롤 감도를 조절하는 세로방향의 슬라이더를 배치했었다. 이 슬라이더가 최대값일 땐 휠 한 바퀴가 정확히 재생 시간과 일치했다. 다시 말해 터치휠을 한 바퀴 돌리면 비디오가 끝까지 간다. 반대로 슬라이더가 최소값일 땐 휠을 한 바퀴 돌리면 몇 초 정도만 이동했다. 이렇게 슬라이더를 이용해서 탐색의 미세한 정도를 조절할 수 있었다.


하지만 이 슬라이더가 어떤 동작을 하는지 사용자가 바로 알지 못하는 문제가 있었다. 슬라이더를 조절하면 그 결과가 터치휠을 돌렸을 때 비로소 나타나기 때문에 이 간격이 클수록 슬라이더의 동작을 이해할 수 없게 된다. 슬라이더의 의미를 모르는 상태에서 사용자는 터치휠의 감도에 항상 불만일 수밖에 없다. 그리고 인터페이스가 하나라도 많은게 싫었다. 최대한 간결하게, 줄일 수 있으면 줄여라! 줄일 수 없는 것 같아 보여도 줄여라!


그래서 2세대 터치휠에서는 감도 조절을 위한 슬라이더를 없애는 대신, 휠의 회전 속도를 측정해서 빠르게 돌리면 빠르게 탐색하고 천천히 돌리면 천천히 탐색할 수 있게 했다. 말은 쉽지만 실제로는 어려웠다. 회전 속도에 탐색 속도를 매치하는 알고리즘이 생각만큼 부드럽게 동작하지 않았기 때문이다.


수 차례의 실험을 통해 알게된 사실 - 엄지 손가락을 빙글빙글 돌리는 행위는 의외로 그 속도가 고르지 않다. 내 딴엔 같은 속도로 돌리고 있다고 생각하지만 실제로는 올라갈 때, 오른쪽으로 돌 때, 내려갈 때, 왼쪽으로 돌 때의 평균 속도가 다 달랐다. 겉보기엔 일정하게 돌리는 것 같아 보여도 수치로 보면 전혀 그렇지 않았다. 


그래서 우선 로우패스 필터를 이용해 불규칙하게 튀는 회전 속도를 보정했다.


보정된 현재 속도 = K * 이전 속도 + ( 1 - K ) * 현재 속도 


K 값을 크게 할 수록 들쑥날쑥한 변동폭을 줄일 수 있는 대신 현재의 회전 속도에 민감하게 반응할 수 없다. 반대로 K 값이 작으면 엄지 손가락의 움직임에 민감하게 반응할 수 있지만 그게 지나치면 통통 튄다. 


둘쑥날쑥한 회전 속도를 매끄럽게 깎는 데엔 성공했지만, 아직 해결해야 할, 아주 중요한 문제가 남아있다. 빠르게 회전하면 빠르게 탐색한다 - 이 비례 관계에서 배율은 얼마로 정해야 하는가? 이 문제는 '빠르게 한 바퀴 돌렸을 때 비디오를 몇 초 이동시켜야 하는가?' 라는 질문과 동일하다. 그리고 '천천히 한 바퀴 돌렸을 때 비디오를 몇 초 이동시켜야 하는가?' 에 대한 질문으로 이어진다.


처음 터치휠을 적용한 것이 yaPlayer여서 다행이라 생각한다. TED 강연의 경우 대체로 15 분, 10 분, 짧으면 3 분 정도의 재생 시간을 갖는다. 반면 yaPlayer는 임의의 영상을 재생하기 때문에 경우에 따라서는 3 시간 짜리 영상을 재생할 수도 있다. 


3 시간짜리 영상을 끝까지 탐색하려면 빠르게 몇 바퀴나 돌려야 하는가? 그리고 이때 적용된 배율을 3 분짜리 영상에도 그대로 적용할 수 있는가? ... 적용할 수 없다! 3 시간 짜리 영상을 끝까지 탐색하는데 빠르게 3 회전으로 맞춰 놨다면 3 분짜리 영상 틀고 터치휠을 빠르게 회전하면 돌리기 시작한 직후 바로 영상의 끝까지 가 버린다. 


여기서 얻은 결론 - 상수(constant) 배율은 안된다. 전체 재생 시간으로부터 배율을 만들어 내야 한다.


이 과정을 통해 터치휠의 동작이 전보다 훨씬 나아졌지만 이번엔 새로운 문제가 발생했다. 천천히 돌렸을 때의 느낌이 3 시간짜리 영상과 3 분짜리 영상에서 판이하게 달랐던 것이다. 터치휠을 천천히 돌릴 때는 영상의 길이에 관계 없이 미세한 제어가 가능해야 한다. 내가 그렇게 정했다.


그래서 회전 속도가 최대 속도의 20% 미만일 땐 상수 배율을 적용하도록, 그 이상일 땐 영상의 전체 길이로부터 만들어진 배율을 적용하게 했다.


다 된 것 같지요? 아니지롱- 흥!


저 20%의 경계가 참으로 밉다. 이 알고리즘에서는 터치휠을 조작할 때 20%의 회전 속도 전후로 퉁- 하고 튀는 현상을 너무나 쉽게 겪는다. 긴 영상일 수록 심하다. 즉 상수 배율과 영상의 전체 길이로부터 만들어진 배율간의 차이가 클수록 경계에서 심하게 튄다.


수 차례 이런 저런 방법을 실험한 끝에 그 중 가장 결과가 좋고 비교적 간단한 방법을 선택했다. (언제나 간단한 방법일 수록 좋다) 회전 속도가 빨라질 때와 느려질 때를 나누어 각각의 경계를 따로 정했다. 다시 말해 빨라질 때는 배율 경계를 20%, 느려질 때는 40% 이런 식이다. 이 방법을 통해 경계에서 그 전후를 넘나들 때 발생하는 튐 현상 - 오실레이션을 해결할 수 있었다.




아이패드는 화면이 크구나!


처음 터치휠을 화면에 배치할 때 그 위치를 고정시켰었는데 이렇게 하니 아이패드에서 문제가 생겼다. 아이패드는 아이폰에 비해 기기가 훨씬 크고, 그래서 기기를 잡는 방법이 다양하다. 사람마다 다르고, 환경에 따라 다르다. 내 경우 책상 위에 올려 놓고 볼 땐 기기 아래 쪽을 쥐고 있지만 쇼파어 널부러져 있을 땐 기기를 배 위에 얹어 놓고 기기 위쪽을 쥔다. 따라서 터치휠의 위치를 고정시키면 자세에 따라 그것과 상호작용하기 불편해지는 문제가 발생한다. 


이 문제는 터치휠의 세로 위치를 변경할 수 있게 함으로써 해결했다. (이렇게 깔끔한 해결 방법이 나올 땐 언제나 기분이 좋다) 아이패드에 한해서 터치휠 옆에 [위/아래 이동] 버튼을 추가했고, 이 버튼을 위/아래로 끌어서 터치휠을 최적의 위치로 놓을 수 있다.



아이패드에서는 터치휠 옆의 컨트롤을 이용해서 터치휠의 세로 위치를 변경할 수 있다.




왼손잡이를 무시하지 마라


터치휠을 처음 yaPlayer에 적용했을 때 나는 이것을 기기 우측에 배치했다. 그리고 얼마 후 피드백 메일 한 통 - 왼손잡이를 고려해 주세요!


나를 포함해 내 주변엔 오른손잡이가 대부분이다. (아차차 그러고보니 아내가 왼손잡이!) 하지만 좀 더 멀리 내다보면 왼손잡이가 주를 이루는 세상이 있다. 잘못된 정보일지 모르겠는데, 미국에는 왼손잡이가 더 많다는 이야기를 들었던 것 같다. 뭐, 어쨌든. 인터페이스를 설계할 땐 다양한 사람과 사용 환경을 고려해야 한다. 잘 알고 있는 사실인데, 늘 잊지 않고 있는데도 여전히 놓치는 부분이 생긴다. 꾸준히 개선하는 수 밖에; 


따라서 터치휠을 왼쪽으로 배치할 수 있는 옵션을 추가했다. TEDiSUB에서 이 옵션은 비디오 플레이어의 메뉴 우측 상단에서 찾을 수 있다. 그리고 하는 김에 좀 더 신경을 써서, AirPlay나 AirPlay Mirroring 도중 나타나는 문구가 터치휠에 가려지지 않도록 터치휠 방향에 따라 반응하도록 개선했다. 


하나 더, 아이패드에서 기기가 가로 방향이고 강연을 전체화면으로 보고 있지 않을 때는 설정에 관계없이 터치휠이 우측에 배치되게 했다. 이는 화면 좌측에 강연 목록이 위치하기 때문에 터치휠을 좌측에 배치하는게 의미가 없기 때문이다. (왼손/오른손 모두 조작하기 어렵다)



메뉴 우측 상단의 설정 버튼을 눌러 나오는 옵션에서 터치휠의 가로 위치를 변경할 수 있다.




새로운 제스처 - 피드백은 언제나 맑음!


TEDiSUB 3.0 버전에는 시청 편의를 위해 몇가지 제스처가 추가되었다. 새 버전을 이용한 국내 사용자 한 분이 피드백 메일을 보내왔는데 내용은 '두 손가락 터치로 일시 정지할 수 있게 해 주세요-' 였다. 또 다른 외국인 한 분은 '더블클릭처럼 두 번 탭해서 일시정지할 수 있게 해주세요-'


몇 번이나 다시 본 '블레즈 아게라 이 아카스의 포토신스 데모' 발표. 이 영상에서 화자는 엄청 빠르게 말을 쏟아낸다. 덕분에 몇 번이고 멈췄더가 되감기를 반복했는데 그 때마다 화면을 탭해서 컨트롤을 띄우고, 컨트롤의 일시정지 버튼을 터치해야 했다. 이 복잡한 과정으로 인해 몇 초간 비디오가 훌쩍 지나가 버렸다.


이러한 경험 덕분에 위의 피드백은 크게 와닿았다. 제스처를 지원하기 시작한 지금이 절호의 기회다. 두 번 탭하는 동작은 이미 사용 중인 제스처 중 하나로 비디오가 표시되는 크기(gravity)를 변경한다. 아이폰 5의 경우 스크린과 비디오의 비율이 동일해서 차이가 없지만 그 이전의 아이폰이나 아이패드에서는 상하단에 레터박스가 생긴다. 표시되는 크기를 변경하면 레터박스를 꽉 채우도록 비디오가 확장된다. 그래서 두 손가락으로 터치하는 제스처를 이용하기로 했다.


두 손가락으로 화면을 터치하고 있는 동안만 비디오를 일시정지시키자. 그리고 손을 떼면 다시 재생! 그러면 잠깐씩 멈추었다가 이어보는 방법이 훨씬 간편해진다. 이 때 두 엄지 손가락을 이용하면 기기에서 손을 떼지 않고 제스처를 사용할 수 있으므로 터치휠을 적용한 이유와도 잘 어울린다.


이미 사용 중인 제스처와 엉키지 않도록 주의할 필요가 있었고, 제스처 판단을 위한 딜레이를 최소화하려 노력했는데 3.0 버전을 만들 때 나름 잘해놔서 구현에 큰 어려움은 없었다.


두 손가락으로 터치하는 동안 비디오가 일시정지되고, 손을 떼면 재생된다. 이 밖에도 다양한 제스처를 지원한다.





터치휠의 단점을 보완하는 제스처


스스로 평가하기에 (뻔뻔하지만) 터치휠은 굉장히 잘 만들어진 인터페이스다. 기기를 쥐고 있는 자세 그대로 비디오를 제어할 수 있다는 점에서 기존의 방법에 비해 보다 나은 사용자 경험을 제공하기 때문이다. 하지만 이 업데이트가 승인된 직후 한 일본인으로부터 피드백 메일을 받았다 - 인터페이스가 너무 커요!


아이패드에서 작게 느껴지는 터치휠, 하지만 확실히 아이폰에서는 너무 크다. 거의 화면의 반을 차지한다. 때문에 비디오와 자막의 상당 부분이 가려지는 문제가 발생한다. 피드백을 보내준 사용자를 포함한 많은 사람들이 TEDiSUB을 통해 영어 공부를 한다. 그러다보니 정주행 보다는 재생과 일시정지, 탐색을 반복하는데 그럴 때마다 터치휠이 비디오와 자막을 가리는게 큰 문제가 된다. 


나는 이 문제를 (현재로서는) 제스처를 통해 극복, 아니, 보완하고자 한다. 잠깐씩 멈추었다가 재생하는건 위에 언급한 두 손가락 터치 제스처를 이용하면 된다. 방금 전 장면으로 돌아가거나 다음 장면으로 빠르게 넘기기 위해 화면 중앙을 쓸어넘길 수 있고 (기본 설정은 5초, 하지만 이번 업데이트를 통해 3/5/10/15초로 변경할 수 있다) 음량 조절을 위해 화면 우측을 위아래로 문지를 수 있다. 화면 좌측을 위아래로 문지르면 밝기가 조정된다. 


제스처가 이 문제에 대한 완벽한 해답은 아니지만 보완 수단으로는 적합하다고 생각한다. TEDiSUB에 이어 yaPlayer의 첫 버전을 개발하던 때는 제스처에 대해 큰 감흥이 없었는데 막상 구현해서 사용해보니 꽤 편하더라. 그래, 마치 단축키 같은 느낌이었다. 단축키가 없어도 메뉴를 클릭해서 원하는 기능을 호출할 수 있다. 하지만 반복해서 사용하는 주요 기능에 대해 Ctrl-C/V 처럼 단축키를 지정하면 훨씬 빠르게 해당 기능을 호출할 수 있다. 기능의 호출 방법을 다양하게 함으로써 UI를 항상 띄울 필요가 없어지고, 이를 통해 UI가 보여지기 때문에 발생하는 부작용을 방지할 수 있다.


아내는 '기존의 컨트롤 UI를 선택할 수 있게 해라' 고 말한다. 나는 터치휠을 강하게 밀어붙이고 싶지만, 무료로 제공하는 앱이 아닌 이상 소비자의 의견에 귀를 귀울일 필요가 있고 본다. 제스처는 터치휠의 부작용을 보완할 뿐 완전히 극복하지는 못한다. 그런고로... 다음 업데이트 때는 이전의 컨트롤 UI로 복귀하는 옵션을 추가할 예정이다.




여담


가급적이면 새로운 앱, 새로운 업데이트가 있을 때마다 그것과 관련된 개발 이야기를 적으려 한다. 그리고 최대한 알기 쉽게 적으려고 노력한다. 그런 의미에서 오늘의 블로깅은 꽝; 신나서 장황하게 설명하다보니 말도 너무 많았고, 그리 쉬운 내용도 아니게 되어버렸다.


2세대 터치휠과 관련해서 이야기할게 참 많았다. 너무 많은 실패를 경험했고, 너무 많은 가능성을 실험했다. 그 결과가 최고는 아닐지언정 최선이라고 (아직까지는 그렇게) 평가한다. 이 글에서는 수 많은 실험 중에서 성공한 케이스를 다루었는데 사실 다른 사람들에게 도움이 되는건 성공담보다 실패담이 아닐까 하는 생각도 든다. 하지만 실패담을 나열하자니... 체력이 후달달달.


어쨌든, 현재의 터치휠에 대해 제법 자세하게 다뤘다. 프로그래밍이 가능한 사람들은 이 정도 글만으로도 충분히 동일한 UI를 만들어 낼 수 있으리라 생각한다. 만약 만들어냈다면 그것에 머물지 말고 더 나은 방향을 추구하길 바란다. 그리고 더 나은 인터페이스가 만들어졌을 때 그 방법을 함께 공유했으면 하는 바램이다. (트랙백 환영이요-)


강연의 활용에 집중하다고 해 놓고는 결국 또 강연의 시청에 중점을 둔 건.. 뭐, 둘 다 노리고 있기 때문에 충분히 용서가 되리라.. 고.. 그렇게 생각하면 마음이 참 편하다. 아하하-




신고

CATEGORIES