Archives of Design Research

투명 디스플레이상의 정보를 후방의 정보와 중첩하는 방식은 투명 디스플레이 인터랙션 연구에서 빈번하게 제안되며, 크게 접촉식 AR(Augmented reality)과 공간적 AR로 구분된다. 종이 위에 메타 정보를 표시하는 인터랙티브 자 콘셉트 Glassified(Sharma et al., 2013)와 디지털 정보를 중첩 제공하는 cAR(Hincapié-Ramos et al., 2014)은 접촉식 AR 사례이다. HoloDesk(Hilliges et al., 2012)나 SpaceTop(Lee et al., 2013)등의 공간적 사례에서는 투명 디스플레이 너머의 손이 가상 오브젝트를 직접 조작하는 듯한 경험을 제공한다. 한편 이와 같은 공간적 중첩 시 투명 디스플레이 상의 정보와 배경 간 시차가 발생하며, 사용자의 방향과 시선, 정보간 거리 차이 등에 따라 사용자에게 상이한 정보가 제공된다. 특히 이준협(Lee & Bae, 2013)은 양안 시차가 후방 정보와 투명 디스플레이상의 정보를 포인팅을 저해함을 지적하였다.

투명 디스플레이는 양면 활용이 가능하므로 다수가 마주보고 사용할 수 있다. 그러나 각 면의 시각 정보는 상호 좌우 반전되며, 이는 인지 과정에서의 오류를 야기한다. 많은 양면 인터랙션 사례들이 사용자가 탭하면 정보가 좌우 반전되는 인터랙션을 공통으로 제안하나(Heo et al., 2014; Corning Inc., 2012; Hardy, 2013) 이는 최초의 정보 지각 단계에서 발생하는 오류까지 해결하지 못한다. 한편 모바일 기기의 경우 기기 자체를 뒤집는(flipping) 조작을 페이지를 넘기는 인터랙션으로 치환하여 자연스러운 양면 활용 솔루션을 제공할 수 있다(Northway & Cardozo, 2006; Hincapié-Ramos et al., 2014).

Table-Top 디스플레이 환경에서 투명한 Tangible UI 요소를 활용한 사례에서는 투명성의 기능을 발견할 수 있다. 기존 디스플레이 위에 놓인 투명 소재의 물리적인 인터페이스는 맥락에 따라 동적인 정보를 투과하여 풍부하고 직접적인 입력 방식을 지원한다(Weiss et al., 2009; Rekimoto et al., 2001; Möllers & Borchers, 2011). FlexSense(Rendl et al., 2014)는 태블릿 디스플레이 위에 얹을 수 있는 투명한 필름 형태의 센서로, 말아올리거나 살짝 들추어 디스플레이 정보를 제어한다. 투명성이 결합된 TUI는 조작에 대한 직접적, 즉각적인 조작을 통해 자연스럽고 직관적이며 독특한 인터랙션 경험을 제공한다.

투명성의 인지적 장점만을 적용한 사례들도 있다. LucidTouch(Wigdor et al., 2007)는 후면 터치에 용이하도록 가짜 투명성을 적용하여 불필요한 배경 노이즈 정보는 필터링하되 후방의 손가락만 투과되어 보이도록 하였다. 불투명 디스플레이 상의 AR 화면이 사용자의 실제 시야각과 매끄럽게 이어지도록 조정한 연구(Pucihar et al., 2014)는 투명 디스플레이의 직접적이고 자연스러운 AR을 모방한 사례이다.

구체적인 경험 개발에 앞서 Low-Fidelity 프로토타입을 기반으로 투명 디스플레이의 모바일 UX 확장 가능성을 자유롭게 탐색하며 TMD 콘셉트의 가능성과 한계를 예측하고 향후 연구 방향성을 수립하였다.

3년 이상의 모바일 기기 사용 경험을 보유한 20대 7명(M:4, F:3).

투명 디스플레이 패널 역할의 투명한 0.5mm 두께 PVC 레이어와 4“ 디스플레이 스마트폰으로 구성된 프로토타입. 스마트폰에 중첩된 투명 레이어 위로 터치 인터랙션이 가능하여 디스플레이간 중첩과 병치 상황을 자유롭게 연출할 수 있다.

Figure 3 Low-Fidelity Prototype

프로토타입을 자유롭게 사용하며 보이는 피험자의 특이 행태를 관찰하였고, 다양한 아이디어와 정성적인 데이터의 빠르고 효과적인 수집을 통해 사용자 참여적 디자인 방법론으로 활용되는 Think aloud 기법을 적용하여 세션 내내 피험자가 자신의 의견과 떠오르는 생각을 소리내어 말할 수 있도록 하였다. 흥미로운 발견점에 대해서는 즉각적인 질의 응답이 추가되었다. 관찰과 인터뷰는 다음을 중점으로 수행되었다. 첫째, 제공된 프로토타입의 다양한 활용 가능성과 선호되는 방식 파악. 둘째, 기존 스마트폰에서 불가능했으나 TMD 콘셉트를 통해 가능해졌거나 크게 개선된 경험. 셋째, 투명 디스플레이 레이어가 추가되어 오히려 불편해진 점. 넷째, 본인이 평소 사용하던 기능 중 본 프로토타입을 통해 활용도가 더 높아진 것.

수집한 데이터는 사용자 니즈를 기준으로 크게 6가지 아이디어로 분류하였다. 첫째, 전개된 두 화면에서 멀티 태스킹을 제공한다. 기존 스마트폰의 화면 분할 방식 대비 콘텐츠 영역의 손실 없이 동시에 두 가지 앱을 전체 화면 크기로 표시할 수 있다. 둘째, 두 화면을 기능별로 구분한다. 드로잉 앱에서 캔버스와 팔레트를 구분하는 경우가 대표적이며, 문서 편집, 게임, 웹브라우저 등 다양한 앱에 적용하여 메인 디스플레이 영역을 확보하고 세부 인터랙션의 depth를 줄일 수 있다. 셋째, AR(Augmented Reality)을 통한 메타 정보를 제공한다. 사물이나 타 기기에 중첩한 투명한 화면에 정보를 공유하는 인터랙션으로 카메라를 통한 AR 대비 직관성, 기동성을 개선한다. 넷째, 디스플레이 투명도를 조절하여 정보 노출 또는 보호 여부를 제어한다. 다섯째, 양면 인터랙션을 통해 후면 터치 또는 다수 사용자의 양면 동시 접근을 지원한다. 여섯째, 콘텐츠를 더 크고 넓은 화면에서 제공한다.

Figure 4 Participatory Design Methods with the Low-Fidelity Prototype

1차 실험을 통해 발견한 총 여섯 가지 경험 그룹은 각각 멀티태스킹, UI 요소 배치, AR, 보안과 공유, 양면 인터랙션, 콘텐츠 영역 확장 등이다. 이 중 유의미하다고 판단된 부분과 니즈들을 걸러 이후 High-Fidelity 실험을 통해 구체화하고자 하는 개발 방향성을 모색하였다.

멀티태스킹과 UI 요소 배치, AR은 향후 콘셉트 개발 시 우선적으로 고려하기로 하였다. 세 그룹은 가장 많이 언급되었을 뿐만 아니라 다양한 인터랙션 방식으로의 확장 가능성이 클 것으로 예상되었기 때문이다. 기술적 실현 가능성뿐만 아니라 효용성 또한 높을 것으로 예상하였는데, 특히 멀티태스킹의 경우 캘린더와 메시지, 문서 뷰어와 사전 등 개연성 높은 정보를 동시에 병치할 경우 정보의 근접부합성(proximity compatibility)을 높여 각각의 정보를 종합적으로 판단해야 하는 task 수행을 향상할 수 있을 것으로 예상하여(Wickens et al., 2013) 향후 개발 및 검증에 우위를 두었다.

반면 전개된 두 화면에 단일 콘텐츠를 디스플레이하고자 하는 니즈에 대해서는 기술 향상으로도 해결하기 어려운 투명 디스플레이의 본질적 특성에서 기인하는 문제점이 존재할 것으로 보고, 본 연구의 고려 대상에서 제외하였다. 기존 불투명 디스플레이와 투명 디스플레이의 해상도, 밝기, 색상 등의 사양 차이 및 전개된 두 디스플레이 사이에 반드시 발생할 수밖에 없는 공차 등으로 인해 긍정적인 사용자 경험을 제공하기 어려울 것으로 판단하였기 때문이다.

TMD 콘셉트와 관련하여 앞서 1차 실험에서 수립한 방향을 기반으로 더욱 구체적인 경험을 개발하고 검토하기 위한 2차 실험을 수행하였다. 이에 실험 참여자가 직접 조작하며 경험할 수 있는 충실도 높은 인터랙티브 프로토타입을 제작하여 제공하고, 프로토타입의 활용 행태 및 인지 과정을 관찰하며, 사용상의 의견과 느낌을 수렴하는 과정에서 얻은 발견점과 수정, 보완점 등을 다시 프로토타입에 즉각 반영하는 반복적인 프로세스를 거쳤다. 기본적 구조만을 갖춘 최초의 프로토타입에서 출발하여 다양한 인터랙션 세트를 개발하고, 최종적으로는 TMD 콘셉트에서 추가된 투명 디스플레이 레이어가 모바일 사용 경험을 어떻게 확장하는지 체계화, 구조화하고자 하였다.

20대 남녀 11명(M:6, F:5)으로 3년 이상의 모바일 사용 경험을 보유하고 인터랙션 디자인 또는 인접 분야의 전공 경험을 지녀 제공된 프로토타입에 관한 본인의 해석과 의견의 능동적 제시가 가능한 자로 설정하였다.

5.3“ WXGA급(800*1280) 해상도의 디스플레이가 탑재된 스마트폰 전면 모서리에 힌지 구조로 연결된 투명 디스플레이(Transparent Display, 이하 TD) 레이어가 기존 모바일 디스플레이(Mobile Display, 이하 MD)에 중첩(Transparent Display-Folded, 이하 TD-F)되거나 병치(Transparent Display-Opened, 이하 TD-O)되며 각각의 상황에서 두 디스플레이 레이어가 독립적이거나 종속적으로 터치 인터랙션을 지원하도록 하였다. (Figure 7)

High-Fidelity 프로토타입은 Figure 5와 같이 TD 상에 콘텐츠가 표시되지 않아 기존 모바일의 단일 디스플레이 사용 경험과 유사한 (a), TD상에 이벤트가 발생한 (b), TD를 들춰보거나 전개하는 도중의 (c), TD를 전개하여 MD와 병치, 멀티태스킹하는 (d) 등 네 가지 상황을 기본으로 고려하였으며, 여기에서 변주된 인터랙션 방식을 반복적이고 즉각적으로 테스트하는 과정에서 새로운 사용자 경험을 발견하고자 하였다.

Figure 5 Step-by-step Switching between the TD-F(Transparent Display, Folded) Status and the TD-O(Transparent Display, Opened) Status

Figure 6 Test Environment and the Structure of the High-Fidelity Prototype

프로토타입은 Figure 6에 표시된 UI 요소를 기본으로 제작되었다. ①투명 디스플레이는 빔프로젝터와 투명한 프로젝션 필름을 활용한 투사식이며, ②TD의 터치 인터랙션은 4.8“ 4핀 감압식 터치패널 두 장을 맞붙여 TD-F, TD-O 상황에서 양면이 모두 터치 입력을 인식할 수 있도록 하였으며 각 패널의 신호를 터치 콘트롤러를 통해 PC로 전달, 처리하도록 하였다. ③TD를 여닫는 물리적 조작 감지에는 힌지에 부착된 스위치와 아두이노가 사용되었다. 이상의 H/W 상에서 구체적 인터랙션을 제공하는 ④어플리케이션이 함께 개발되었으며, 모든 인터랙션 세트는 MD와 TD가 유기적인 한 쌍으로 제작되었다.

참여자의 모바일 및 투명 디스플레이 사용 경험을 묻는 사전 설문과 실험에 관한 설명 후 Figure 6의 인터랙티브 프로토타입과 인터랙션 세트를 제공하여 TMD 콘셉트를 자유롭게 경험할 수 있도록 하였다. 관찰은 Think aloud 기법을 기반으로 하되 특이 행태에 관한 질의 응답이 즉각적으로 추가되었으며 다음 사항에 중점을 두었다. 첫째, 프로토타입 콘셉트와 세부 UI 인지 과정, 특이 행태 관찰. 둘째, 기존 모바일 사용 경험과 구별되는 장점과 한계점 파악. 셋째, 제공된 프로토타입에서 발전된 새로운 인터랙션 제안 및 전반적 사용 소감과 기타 의견 수집.

Figure 7 Basic Functions of the TMD Prototype

2차 실험은 총 11명을 대상으로 하는 사용자 테스트와 10개 인터랙션 세트에 대한 프로토타입 개발, 검증 및 수정을 즉각적이고 반복적으로 하기 위해 총 4군으로 나뉘어 실시되었다. 1군에서는 1명을 대상으로 ⓞ TMD 기본 환경에 대한 파일럿 테스트를 실시하였으며, 각 1명씩 참여한 2군과 3군에서는 ⓞ-②의 3개 세트와 ⓞ-⑥의 7개 세트에 대한 테스트가 실시되었다. 4군에서는 ⓞ-⑨의 10개 세트 전체에 대해 8명이 참여하였다.

Figure 8 Agile and Repetitive Process of the Second Experiment

2차 실험을 통해 다음의 인터랙션 세트들이 개발되었다.

① 정보의 종적 이동

TD-F 상황에서 특정 아이콘을 탭하면 선택된 아이콘이 MD에서 TD로 이동하고, 한 번 더 탭하면 다시 MD로 돌아간다. 즉 정보가 MD와 TD 사이에서 종적으로 이동한다. 이는 x, y축만 존재하던 2차원 디스플레이에 z축의 미묘한 깊이감을 자아내고 TD와 MD 사이의 연속성 및 생동감을 부여하며, 두 레이어간 이동이 toggle switch의 역할, 즉 다수의 중복 선택에 유리하다는 응답이 수집되었다. 두 레이어에 산재한 정보들의 소속 레이어가 한눈에 파악되며, 디스플레이 깊이감은 흥미 요소로 작용, 시각 효과에 활용할 수 있다.

Figure 9 Vertically Shifting Information through the Superimposed Transparent Display Layer

② 레이어별 멀티태스킹

TD-F 상황에서 중첩되어 뒤에 가려진 앱은 MD에, 앞의 앱은 TD에 각각 표시되고 뒤쪽 앱 영역을 탭하면 두 앱의 위치가 전환된다. TD-F 상황에서 앞쪽, 즉 TD에 놓인 앱은 TD 전개 시 좌측으로 전개되며, 두 앱은 각 레이어에서 전체 화면 멀티태스킹을 지원한다. 따라서 투명 디스플레이를 통해 정보가 종적, 횡적으로 이동할 수 있다. 이는 특히 ongoing task 영역을 유지, 보존하면서 interrupting task를 빠르게 수행하고 돌아올 수 있도록 하여 선호도가 높게 평가되었다. TD를 살짝 들춰보는 물리적 조작 방식은 터치 인터랙션을 통한 멀티태스킹보다 더 빠르고 직관적이라는 응답이 수집되었다. 사용자들은 캘린더와 메시지, 문서 뷰어와 사전처럼 상호 개연성 높은 앱을 사용하는데 유리할 것이라고 응답하였다.

Figure 10 “Full Screen Multi-Tasking” Interaction Set

③ 떠 있는 아이콘

TD-F 상황에서 상단의 아이콘을 탭하면 해당 영역이 TD 상으로 종방향 이동하며, MD 상의 문서를 스크롤하는 동안에도 동일한 위치에 떠(floating) 있다. 떠 있는 아이콘은 즉각적인 알림을 표시할 수 있으며, 한 번 더 탭하면 TD에서 MD로 돌아간다. TD에 위젯 아이콘을 띄운 채 TD를 전개하면 TD-O 면에 해당 위젯의 자세한 정보가 표시된다.

②세트를 경험한 참여자들은 TD-O 시 상세한 정보가 전개될 것을 기대하였다. 또한 TD 상의 정보는 심리적으로도, 물리적으로도 MD와 분리되므로 MD 영역 정보를 차단하는데 대한 거부감이 적은 것으로 드러났다.

Figure 11 “Floating Icons” Interaction Set

④ 스크래치

TD-F에서 MD 상에 정보 화면이, TD 상에 불투명한 마스크 화면이 제공된다. TD를 드래그하여 마스크를 지우면 가려져있던 MD 화면이 드러난다. 단일 디스플레이에서 가능한 인터랙션이나 TD를 여닫는 인터랙션을 함께 고려할 경우 독특한 경험으로 발전시킬 수 있을 것이라는 응답이 수집되었다.

Figure 12 “Masking and Unmasking” Interaction Set

⑤ 복권 긁기

TD-F 상황에서 퀴즈 앱이 제공되며, 정답 부분은 TD 상의 백색 마스크에 의해 가려져 있다. ④세트에서와 같이 불투명 마스크 영역을 드래그하여 복권을 긁듯이 지우면 MD 상의 정답 영역이 드러난다. 참여자들은 이처럼 투명도를 조절하여 정보를 차단하거나 드러내는 방식으로 화면 복잡도를 조절하고자 하였다. 예컨대 게임 상황에서 상자 모양에 가려져있던 인벤토리를 열어 내 캐릭터가 가진 장비를 확인하는 등의 인터랙션이 제안되었다. 한편 앞서 다른 세트에서 경험한 바와 같이 TD는 특정 정보를 열어 더 자세히 들여다보겠다는 은유로 여겨 정답을 들춰보거나, 정답 풀이를 확인하겠다는 응답도 수집되었다. 금융 앱, 암호 입력 등 보안이 필요한 상황에서 투명도를 낮춰 개인적 인터랙션을 숨기고자 하는 응답도 있었다.

Figure 13 “Scratch Cards” Interaction Set

⑥ Region of Interest

잠금 화면에서 TD 상의 단순화된 시계, 날씨 아이콘, 메시지 알림 아이콘을 각각 스와이프하여 잠금 화면이 부분적으로 열리면서 해당 영역 후면의 MD에 자세한 정보가 나타난다. 이러한 방식은 task 과정만을 늘릴 수도 있다는 지적이 있었으며 참여자들은 TD를 오히려 Quick Access의 수단으로 활용하고 싶어한다는 것을 알 수 있었다. 이에 대안적으로, 잠금 화면에서 TD 전개 시 미리 설정해둔 위젯 화면을 즉각 표시하는 방식이 제안되었다. 사용자들은 TD가 전개된 화면을 가상 영역으로 상정하고, 그 영역에 특정 정보들이 항상 존재할 것을 기대하였다.

Figure 14 “Region of Interest and Its Detailed Information” Interaction Set

⑦ 드로잉 레이어

MD와 TD에 그린 그림이 각각 구분된 레이어에 디스플레이된다. 이는 2차원 드로잉에 깊이감을 부여한다. 두 레이어간 구별이 명확한 점을 살려 원본 문서를 유지하면서 주석을 다는 등의 아이디어가 함께 제안되었다.

Figure 15 “Drawing on Layers“ Interaction Set

⑧ AR 사전

TD-O 상황에서 TD 후면에 종이 문서를 중첩한다. 종이 문서의 내용 중 사전 정의를 검색하고자 하는 단어를 TD와 중첩하여 TD 상에 밑줄을 긋는다. 우측의 MD 화면에 해당 단어의 사전적 정의가 표시된다. 아날로그 정보가 증강되는 점에 흥미와 선호도가 높았으며, 사전 검색 task를 크게 단축하여 효용성이 높게 평가되었다. ①에서와 같이 TD 상에서 단어를 다중 선택하여 동시에 많은 정보를 얻고자 하였으며, ②에서와 같이 ongoing task를 가리지 않고 전체 화면을 유지, 보존한다는 점에서 선호되었다. 단어가 아닌 단락과 문장, 그림이나 사진을 스캔하고자 하는 니즈가 있었는데, 후면 문서의 정보 센싱에 대한 기술적 문제가 해결되어야 한다는 점이 지적되었다.

Figure 16 “AR Dictionary” Interaction Set

⑨ 책날개

기존의 YouTube 앱의 UI에서는 좌측의 Navigation drawer를 열 경우 메뉴 목록이 펼쳐지면서 이전에 보던 화면이 우측으로 밀려나지만, 제공된 세트에서는 이전에 보던 화면이 그대로 유지되며 TD-O에 메뉴 목록이 표시된다. 디스플레이가 기능적으로 구분되어 정보 영역이 유지된다는 점에서 선호되었다. 앞서 다른 세트들에서와 같이 참여자들은 TD-O를 가상 영역으로 상정하여 항상 특정 정보가 위치할 것이라고 기대하였으며, 의미적으로도 TD를 열어보는 행동이 항목을 펼쳐본다는 메타포를 지녀 자연스럽게 받아들여짐을 알 수 있었다.

Figure 17 “Flap” Interaction Set

2차 실험에서는 ⓞ TMD 기본 환경에서 비롯된 총 9개의 인터랙션 세트가 개발·검토되었다. 이를 경험의 유사성을 기준으로 다섯 가지 그룹으로 분류하여 그룹별 특성과 확장된 경험을 정의하였다. (Figure 18)

Figure 18 Interaction Set Groups Classified by Experience's Similarity

A 정보 이동 그룹에서 TD와 MD 간을 정보의 자유로운 이동은 모바일 경험을 확장한다. TD-O 상황은 두 디스플레이를 병치하여 동시에 활용하도록 하며, TD-F 상황은 TD와 MD 각 레이어의 시각 정보 간 미묘한 깊이감과 공간감을 자아내어 새로운 감성을 환기한다. TD-F 상황은 단일 디스플레이에서도 유사한 구현이 가능하나, TD-O와의 유기적인 연결 시나리오에서 기능적으로도 새로운 가치를 제공한다. 이 과정에서 TD를 직접 여닫으며 TD-F와 TD-O 상황을 빠르게 전환하는 투명 디스플레이의 TUI적 요소는 신속하고 직접적인 조작 경험을 제공한다. TD 상에 정보가 표시되지 않을 때에는 투명한 패널이 시각적으로 소거되어 기존 모바일 사용 경험이 유지된다.

B 정보 마스크 그룹은 TD의 투명도 조절을 통해 정보를 선택적으로 표시 및 차단할 수 있으며, MD와 연동하여 정보 위치, 양, 형식 등을 조정한다. 단일 디스플레이 상황과 더욱 차별되는 경험과 가치를 제공하고자 한다면 TD-F와 TD-O 상황을 동적으로 연결하는 물리적 조작 방식을 적극 활용하고 고려하여야 한다.

C 정보 레이어 그룹은 TD를 물리적, 심리적, 기능적으로 구분된 레이어로 상정하여 MD와 따로 또 같이 활용한다. 단일 디스플레이 환경에서 개념적으로 제공되어온 레이어의 정의를 실제로 구분된 레이어 상황을 통해 물리적으로 경험할 수 있으며 특히 두 레이어 간의 사양 차이는 그 이질감을 더욱 크게 인지하도록 한다. 따라서 원본 문서를 그대로 두고 그 위에 주석을 다는 등 두 레이어의 구분을 계속적으로 유지하기 위한 task에는 적합하나, 단순히 레이어를 나누는 드로잉 task 등 단일 디스플레이 환경에서와 같이 레이어 개념에 접근하면 오히려 콘텐츠 생산에 혼란을 야기할 수도 있다.

D 정보 중첩 그룹은 증강 현실을 통한 메타 정보 확인을 목표로 하므로 TD는 후방 배경 중첩에, MD는 확장된 정보 표시에 적합하다. 특히 TD의 경우 카메라를 통한 AR에서 불가능한 평면 접촉식 AR이 가능하나, 인접한 정보를 인식할 수 있는 기술이 고려되어야 한다. 이 그룹에서는 아날로그 정보와 디지털 정보 간의 연속성 역시 증가하며 대상 정보에 접근하는 task 단계가 경감될 수 있다. 특히 사용자들은 TD를 Quick access의 수단으로 여김을 발견하였다.

E 정보 양면 그룹은 TD가 놓인 상황에 따라 TD-F면과 TD-O 면에 상이한 시각 정보를 표시한다. 이는 TD가 전개된 면을 가상 영역으로 상정하고 TD-O 면에 특정한 정보가 항상 위치할 것으로 기대하는 사용자의 멘탈 모델에 부합하며 TD-F 상황에서의 시각적 어포던스와 자연스럽게 연결되는 정보를 제공하기 위함이다. 따라서 TD가 전개되기 이전에 시각적인 어포던스를 충분히 제공하여 직관적인 사용을 유도할 수 있다.