멀티 스크린 디바이스 개발기

최근 LeanUXLab에서는 다수의 디바이스를 네트워크로 연결하여 하나의 컨텐츠를 공유 할 수 있는 멀티디바이스 스크린을 만들어보고 있었습니다. 랩의 한 멤버가 도저히 한 페이지씩 pdf 책을 보는건 답답해서 못하겠다! 종이책처럼 두페이지씩 볼 수 있는 전자책이 필요하다는 강력한 요청에서 시작했습니다. 듀얼스크린 태블릿이나 전자책의 컨셉은 많이 나와있지만 상업적으로 성공했다고 할 만한 제품은 없는 것 같습니다. 책이라는 형태가 오랫동안 살아 남았던건 작게 접어서 휴대하기 편하게 하고 사용할때는 쉽게 펼쳐서 넓은 정보 공간을 사용하는 효과적인 디자인 패턴이었기 때문이라고 생각합니다. 디지탈 디바이스에서도 속도나 비용에 대한 경쟁이 어느정도 수준에 도달하면 이런 foldable 형태가 자연스럽게 나올수 밖에 없을거라고 예상이 되었고요. 요즘은 개인이 TV,PC,휴대폰,테블릿등 다수의 스크린을 소유하게 되면서 멀티 스크린에 대한 관심이나 논의는 많이 일어나고 있는데 머리속으로만이 아니라 구체적인 무언가를 우선 뚝딱 만들어서 직접 사용해보면서 미래의 멀티 스크린 디바이스의 인터랙션을 연구해 볼 계획이었습니다. 이 글에서는 개발의 관점에서 LAB에서 실제로 어떻게 아이디어를 발전시키고 개발을 진행하는지 간략하게나마 공유하고자 합니다.

듀얼스크린 PDF 뷰어
저희 LAB 에서는 프로젝트를 진행 할 때 제품의 최종형태를 디테일하게 디자인 하지 않습니다. 큰 방향 잡은 다음 단계별로 MVP 모델을 개발하고, 피드백을 받아 수정하는 과정을 반복하여 제품을 조금씩 발전시키는 방향으로 진행을 하죠. 이 프로젝트 또한 동일한 프로세스로 진행을 하였는데, 그 첫번째 단계가 듀얼스크린 PDF 뷰어입니다. 네트워로 연결되어 있는 두대의 디바이스에서 하나의 PDF 컨텐츠를 볼 수 있는 형태인데요. 이 프로젝트가 시작하게 된 계기이면서, 비교적 짧은 시간 안에 제작 할 수 있어 시작단계로 진행하게 되었습니다.

우리는 이렇게 합니다!
LAB에서 프로젝트를 진행 할 때 프로그래밍은 가장 기본적이고 중심이 되는 기능부터 단계별로 구현하기 시작합니다. PDF 뷰어에서 가장 기본이 되는 기능은 무엇일까요? 화면에 PDF 컨텐츠를 보여주는 것이 우선과제 일겁니다. 다음은 디바이스간 통신이 될 것이고, 또 그 다음은 주고 받은 데이터를 가지고 화면을 실시간으로 보여 주는 것이겠죠. 첫 단계에서 독립적으로 동작 할 수 있는 PDF뷰어를 만들고 테스트와 수정을 거쳐 만족할 만큼의 성과가 나온다면 다음 단계로 넘어가게 됩니다. 그 전에 이 단계를 조금 더 구체적으로 나누어 보도록 하겠습니다.

* 기능 구현을 목표로 두고 개발할 때에는 관대해져야 합니다. Lean 프로세스에서 중요시 되는 것은 속도이기 때문에 어느정도 수준만 나오면 바로 넘어 가는 것을 추천합니다.

1. 디바이스에 저장 된 PDF 파일 불러오기
2. PDF 페이지 화면에 표현
3. PDF 페이지 리스트 구성
4. 터치 인터랙션 구현
5. 터치 인터랙션에 의한 페이지 전환

그리고 또 각 항목마다 단계를 나눕니다. 5번 터치 인터랙션에 의한 페이지 전환을 예로 들어 볼까요?

1. 터치 이벤트 확인
2. 터치 인터랙션의 시작점과 끝점 구하기
3. 시작점과 끝점을 기준으로 좌우 방향 확인
4. 확인한 방향으로 페이지 이동
5. 인터랙션에 다른 페이지 이동 속도 구하기
6. 일정 기준을 잡아 다음 페이지로 이동 할 것인지 판단
7. 페이지 방향에 따른 애니메이션 구현

위의 사항들을 개발하기 위해서 가장 먼저 확인해야 하는 부분이 디바이스에서 터치 이벤트가 제대로 동작하는지 입니다. 일반적으로 터치이벤트는 Touch Start, Touch End, Touch Move, Touch Cancel 네 단계로 나누어 집니다. 기회가 된다면 터치 이벤트의 관한 내용을 다뤄 보는것도 좋겠네요. :) 이 네가지의 이벤트가 정상적으로 동작하는지를 확인하면, 터치 인터랙션의 시작점과 끝 점을 구하는 프로그램을 개발합니다. 그리고 정확히 값이 출력 되는지 확인을 하고 다음 단계인 좌우 방향을 확인 할 수 있는 프로그램을 만들죠. 또 테스트를 거쳐 다음단계로 넘어가게 되고, 최종적으로는 터치 인터랙션에 의한 좌표데이터를 가지고 와서 페이지가 움직이게 하는 프로그램이 만들어 집니다. 이제 다음의 목표는 다른 디바이스와 데이터를 주고 받을 수 있는 PDF뷰어를 만드는 것입니다. 또 그 다음은 연결 된 디바이스에서 터치 이벤트가 있을때 같이 동작을 하는 PDF뷰어를 만드는 것이고요. 그렇게 아래와 같은 제품이 완성됩니다.



멀티 디바이스 스크린? 멀티스크린 디바이스?
듀얼스크린 뷰어는 1차적인 결과물이고 좀 더 확장된 형태의 서비스를 제공하려고 하였습니다. 모바일 디바이스의 종류가 다양해지면서 몇대의 디바이스를 보유하고 있는 사용자가 늘었고, 다수의 사용자들이 모여 하나의 컨텐츠를 만드는 모습도 재미있었을 것 같았습니다. 경기장 관중들의 작은 카드들을 모아 거대한 카드섹션을 만들 듯 작은 디바이스를 모아 어마어마한 컨텐츠를 만드는 것을 상상했습니다. 여기서 잠깐 무의미 할 수 도 있는 고민을 했었는데 멀티 "스크린 디바이스"와 멀티"디바이스 스크린" 중 어떤 표현이 맞을까 였는데요. 검색을 하다보니 멀티스크린 디바이스라는 표현을 더 많이 사용하기에 저도 멀티스크린 디바이스로 단어 선택을 하였습니다. 


스크린 확장 + 싱크 인터랙션
멀티 스크린 디바이스를 개발하기에 앞서 먼저 연구한 내용은 어떠한 제스처, 인터랙션을 통하여 화면을 연결 해줄 것인가 였습니다. 회의중 가장 이상적이었던 아이디어는 디바이스들을 가까이 붙였을때 디바이스간 자력을 읽어드려 서로간의 위치와 방향을 계산하여 싱크를 맞추는 것이었습니다. 나침반앱에 사용되는 기술을 응용하려고 하였죠. 그러나 기술적인 문제로 구현이 어려워 불가피하게 다른 방법을 적용 할 수 밖에 없었습니다. 그리고 차선책으로 개발한 것은 탭을 이용한 연결입니다. 두 손가락으로 디바이스를 각각 터치를 하면 포인트 확인하여 방향과 좌표를 디바이스간 커뮤니케이션을 통해 화면을 맞추는 겁니다.그리고 스마트폰의 기본 제스처인 스와이프를 이용한 방식을 가지고도 구현을 하였는데요. 연결하고자 하는 디바이스 두대의 화면에 선을 긋는 제스처를 통하여 두대를 연결하는 방식입니다. 스와이프를 사용했을때 두가지 문제점이 있었는데, 하나는 사용자가 자연스레 선을 이을때 디바이스간 Y좌표가 동일 하지 않다는 겁니다. 또 하나는 iOS의 경우 알림센터와 제어센터로 인해 상하 스와이프가 자유롭지가 않죠.
Y좌표의 차이로 인해 발생하는 오차는 포인트와 포인트의 기울기를 계산하여 가운데 값으로 맞춰 오차를 최소화 할 수 있도록 구현하였고, 상하 스와이프의 문제는 달리 해결 할 방법이 없어 가로 스와이프만 가능하도록 개발 할 수 밖에 없었습니다.


멀티 스크린 디바이스
싱크방식을 해결 했으니 실제로 구현하는 것이 남았습니다. 듀얼스크린 PDF뷰어와는 달리 다중통신을 해야하기 때문에 데이터 교환을 도와줄 서버가 필요합니다. 사실 디바이스간 다중통신 방식을 찾아보았으나 정확한 레퍼런스를 찾지 못해 서버를 통한 데이터통신으로 우회적인 방법을 선택했는데, 이 부분을 자세히 아시는분은 연락주시면 감사하겠습니다. 이어서 간단히 동작원리를 설명드리자면 먼저 싱크를 맞출 두대의 디바이스에서 터치 이벤트를 발생시키고, 각각의 정보를 서버에 전송합니다. 그리고 이벤트가 발생한 두대의 디바이스에게 서로의 정보를 전달하죠. 그리고 연결된 디바이스의 크기와 위치를 파악하여 전체 해상도를 구합니다. 추가적으로 확장할 디바이스의 이벤트가 발생하면 위와 똑같이 동작하고 남은 한대는 서버에 저장되어 있는 정보를 가져와 그에 맞는 해상도와 컨텐츠를 제공합니다.




리서치의 소중함. 
사실 개발 도중 저희가 하려던 것과 거의 유사한 형태의 앱이 이미 출시가 되어 있던 것 을 알게 되었습니다. 그리고 블로그를 작성하며, 괜찮은 서비스를 또 하나 찾았네요. 이후 진행 여부에 대해 고민하다가 개발시간이 얼마 걸리지 않을거라 생각하고 마무리는 하기로 결정 하였습니다. 제가 생각하는 Lean 프로세스의 최대 강점은 빠른 학습인데요. 아쉽게도 제대로 서비스를 하는 것 까지는 도달하지 못했지만, 작은 부분까지 공을 들여 고민을 하였고, 기술적으로는 다양한 형태로 구현을 해봄으로써 배운것이 많았던 과정이었습니다. 저희 랩 외에도 다양한 곳에서 이 분야에 대한 연구들를 진행하고 있는 것 같은데요. 이 후에 그 결과들이 나왔을때 저희가 하려고 했던 것들과 비교해보고, 리디자인 해보는 것도 재미있는 일이 될 것 같네요. :) 아래는 리서리 중에 찾은 유사서비스 링크입니다. 특히 두번째 링크의 제품은 저희가 고민했던 알림센터와 제어센터의 제스처 방해를 잘 해결한 케이스라 인상깊네요.
 
모자익 및 유사 컨텐츠
1. Mosaic
2. Pinch interface can link displays of multiple screens
3. Junkyard Jumbotron makes instant multi-screen displays

[참고##아이패드##]