석사학위 논문

Transcription

1 석사학위 논문 씨스루 글래스 타입 디바이스의 GUI 최적화에 관한 연구 A Study on GUI Optimization of See-Through Glass Device 국민대학교 테크노디자인전문대학원 인터랙션디자인 전공 박 효 진 2013

2 씨스루 글래스 타입 디바이스의 GUI 최적화에 관한 연구 A Study on GUI Optimization of See-Through Glass Device 지도교수 반영환 이 논문을 석사학위 청구 논문으로 제출함 2013년 10월 국민대학교 테크노디자인전문대학원 인터랙션디자인 전공 박 효 진

3 박 효 진의 석사학위 청구 논문을 인준함 2013년 5월 심사위원장 심사위원 심사위원 김양수(인) 반영환(인) 김성우(인) 국민대학교 테크노디자인전문대학원

4 국문 초록 씨스루 글래스 타입 디바이스의 GUI 최적화에 관한 연구 최근 최근 세계 모바일 시장은 미래의 혁신 분야로 몸에 착용하는 형태의 웨어러블 디바이스의 시장 진출을 확대하고 있는 추세이다. 이 중 씨스루 글래스 타입 디바이스는 2012 년 구글 글래스의 출현 이후로 급격한 성장세를 보이고 있다. 이에 BI Intelligence 는 구글 글래스의 판매량을 2014 년에는 83 만대, 2017 년 천만대, 2018 년 2 천만대 정도로 예측하고 있다. 이렇듯 시장 내 수요는 높아지고 있지만 단순 멀티미디어 재생기에서 일상생활에 녹아드는 스마트 기기로서 새로운 패러다임에 알맞은 연구는 많이 진행되지 않은 것이 사실이다. 사용자는 다양한 장소에서 씨스루 글래스 타입 디바이스를 사용할 수 있고, 휴대폰 보다 높은 접근성을 지닌다. 동시에 작고 투명한 디스플레이를 통해 다른 모바일 디바이스와는 확연히 다른 환경적, 정황적 특성을 지니게 된다. 뿐만 아니라 빛을 반사하여 인터페이스를 표기하는 디스플레이의 독특한 특성에 따라, 이에 적절한 인터페이스 디자인이 선행되어야 함을 알 수 있다. 이런 씨스루 글래스의 기기적 특성과, 정황적 배경은 다른 디바이스보다 GUI 의 근간이 되는 여러 요소 중 가시성이 매우 중요한 역할을 한다는 것을 역설한다. 이에 따라 본 연구에서는 씨스루 글래스 타입 디바이스에서 가시성에 영향을 미치는 요소를 크게 환경적 요인(밝기, 배경)과 기기 내부적 요인(디스플레이 특성)으로 정의하였다. 정의된 연구 프레임웍을 바탕으로 외부적 자극과 내부적 가시성 영향요인이 적용된 조도/이동실험 환경을 구축하여, GUI 의 구성요소인 레이아웃, 컬러, 아이콘, 텍스트를 대상으로 30 명의 인원이 동원된 실험과 가시성 선호도 조사를 진행하였다. 이를 통해 가시성에 영향을 미칠 수 있는 GUI 요소별 최소 원칙을 발견할 수 있었다. 위와 같은 실험결과를 바탕으로 씨스루 글래스 타입 디바이스에서 최적화된 가시성 환경을 구축하기 위해 레이아웃과 컬러, 아이콘, 텍스트에 적합한 가이드라인을 제시하였다.

5 중심어 (Keywords) See-Through Glass Device Graphic User Interface Optimization

6 목 차 제 1장 서론 연구 배경 연구 목적 연구 방법 및 체계... 8 제 2장 글래스 타입 디바이스 기술의 동향 씨스루 글래스 타입 디바이스의 등장배경 시장 환경적 요인 기술적 요인 씨스루 글래스 타입 디바이스의 시장의 동향 씨스루 글래스 타입 디바이스의 특성 이동성 및 접근성 확장성 독립성 씨스루 글래스 타입 디스플레이의 이론적 고찰 씨스루 글래스 타입 디스플레이의 기술원리 씨스루 글래스 타입 디스플레이의 장단점 제 3장 GUI 디자인의 이론적 접근 GUI 디자인의 개념과 기준 GUI 디자인의 구성요소 제 4장 씨스루 글래스 타입 디바이스에서의 GUI 디자인 씨스루 글래스 타입 디바이스의 화면 구조의 특징 씨스루 글래스 타입 디바이스에서의 인터랙션과 인터페이스 씨스루 글래스 타입 디바이스의 인터랙션 씨스루 글래스 타입 디바이스의 인터페이스 씨스루 글래스 타입 디바이스에서의 GUI 레이아웃 아이콘 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 1

7 4.3.3 텍스트 컬러 씨스루 글래스 타입 디바이스 GUI의 분석 씨스루 글래스 타입 디바이스의 레이아웃 분석 씨스루 글래스 타입 디바이스의 아이콘 분석 씨스루 글래스 타입 디바이스의 텍스트 분석 씨스루 글래스 타입 디바이스의 컬러 분석 제 5장 씨스루 글래스 타입 디바이스 GUI 요소의 최적화 연구 연구 모형과 개념적 정의 연구 실행 방법 레이아웃과 컬러에 따른 인지 성공 실험 아이콘 단순화와 크기에 따른 인지 성공 실험 텍스트의 서체와 중량에 따른 인지 성공 실험 평가 결과 레이아웃과 컬러에 따른 인지 성공 실험 결과 아이콘 단순화와 크기에 따른 인지 성공 실험 결과 텍스트의 서체와 중량, 크기에 따른 인지 성공 실험 결과 GUI 가시성 모형 요소의 활용 레이아웃 컬러 아이콘 텍스트 제 6장 연구 결론 연구 결론 연구 한계점과 향후 연구 과제 참고문헌 영문초록 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 2

8 표 목차 [표 2-1] 웨어러블 디바이스의 변천사 [표 3-1] GUI 제작 시 고려해야 할 기준사항 [표 4-1] 씨스루 글래스 디바이스의 터치패드 인터랙션 [표 4-2] 시각요소의 배열 위치에 따른 주목성의 정도와 이미지 [표 5-1] 연구 모형의 세부적 평가 항목 [표 5-2] 컬러/레이아웃 검증 [표 5-3] 아이콘 단순화 단계 [표 5-4] 아이콘 크기/단순화 단계별 자극실험 [표 5-5] 폰트의 서체 [표 5-6] 폰트의 중량에 따른 인지 성공 실험 [표 5-7] 폰트의 크기에 따른 인지 성공 실험 [표 5-8] 아이콘 단순화 단계와 크기에 따른 평균 반응 속도(초) - 실내 [표 5-9] 아이콘 단순화 단계와 크기에 따른 평균 반응 속도(초) - 야외 [표 5-10] 폰트의 서체와 중량에 따른 평균 읽기 속도(초) 실내 [표 5-11] 폰트의 서체와 중량에 따른 평균 읽기 속도(초) 야외 [표 5-12] 폰트의 크기에 따른 평균 읽기 속도(초) - Medium [표 5-12] 폰트의 크기에 따른 평균 읽기 속도(초) - Light [표 5-13] 타입에 따른 화면 레이아웃 가이드라인 [표 5-14] 아이콘 단순화 단계와 크기를 적용한 권장 이용 형태 [표 5-15] 크기에 따른 텍스트 가이드라인 (윤고딕 300 예시) 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 3

9 그림 목차 [그림 2-1] 군용/의료용 HMD [그림 2-2] 멀티미디어 재생용 HMD [그림 2-3] 씨스루 글래스 디바이스로의 발전방향 [그림 2-4] 구글 글래스 디스플레이 원리 [그림 2-5] LUMUS 디스플레이의 원리 [그림 4-1] 영상 컨텐츠의 화면 화면 비율 [그림 4-2] 씨스루 글래스 타입 디바이스의 화면구조 [그림 4-3] 트리형식 구조의 메뉴 표현 방식 [그림 4-4] 조작/목적에 따른 인터페이스 디자인 접근방법 [그림 4-5] 레이아웃에서의 위치에 따른 주목성 [그림 4-6] ios의 연락처 메타포의 적용 [그림 4-7] 단순화에 따른 아이콘의 종류 [그림 4-8] 각 기기의 메인 화면 레이아웃 [그림 4-9] 대쉬보드 타입 화면의 콘텐츠 레이아웃 [그림 4-10] AR 타입 화면의 콘텐츠 레이아웃 [그림 4-11] 각 디바이스별 아이콘 단순화 단계 [그림 4-12] Eye Phone의 서체사용 [그림 5-1] GUI 가시성에 영향을 미치는 요인의 연구모형 [그림 5-2] 프로토타입의 구조 [그림 5-3] 각 실험 실행 설계 [그림 5-4] 레이아웃에 따른 반응 속도의 변화 [그림 5-5] 컬러(H)의 가시성 순위와 각 컬러별 명/채도 순위 [그림 5-6] 아이콘 크기에 따른 반응 속도와 선호도의 차이 [그림 5-7] 환경별 서체 가시성 선호도 [그림 5-8] 텍스트 중량별 가시성 선호도 [그림 5-9] 활성/비활성 컬러 사용 가이드 예시 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 4

10 제 1장 서론 1.1 연구 배경 1.2 연구 목적 1.3 연구 방법 및 체계 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 5

11 제1장 서론 1.1 연구 배경 최근 세계 모바일 시장은 미래의 혁신 분야로 몸에 착용하는 형태의 웨어러블 디바이스의 시장 진출을 확대하고 있는 추세이다. 이 중 씨스루 글래스 타입 디바이스는 2012 년 구글 글래스의 출현으로 Telepathy One, NTT Dokomo 사의 인텔리전트 글래스, 삼성의 기어 글래스 등의 유사 디바이스와 함께 화제가 되고 있다. BI Intelligence 는 구글 글래스의 판매량을 2014 년에는 83 만대, 2017 년 천만대, 2018 년 2 천만대 정도로 예측하고 있다. 1 씨스루 글래스 타입의 디바이스는 웨어러블 디바이스라는 특성 때문에, 기존의 모바일 디바이스에 더 진일보된 이동성을 가진다. 또한 언제 어디에서나 네트워크에 접촉할 수 있는 유비쿼터스 세상의 도래에 따라서 다양한 공간과 시점에서 사용할 수 있는 확장성을 띈다. 씨스루 글래스 타입의 디바이스는 이러한 특성을 통해 다양한 컨텍스트를 가질 수 있다. 하지만 현재 디바이스의 특성에 따라(1.Small Display / Transparent Display / Contextual Device) 기존에 적용되었던 HMD GUI 디자인과는 다른 적합한 GUI 디자인의 필요성이 대두된다. 그러나 최근 웨어러블 디바이스를 대상으로 하는 총 32 건의 국내의 연구들을 돌아보면 그 중 씨스루 글래스 타입의 디바이스를 대상으로 진행된 논문은 단 2 건으로 학술적 연구가 많이 진행되지 않았음을 알 수 있다. 이렇듯 현 시점에서는 사용자의 요구를 반영한 조사가 필요하다. 따라서 본 논문에서는 새로운 씨스루 글래스 타입 디바이스의 패러다임에 알맞은 GUI 디자인의 최적화에 대해 연구하고자 한다. 1 BI Intelligence Forecast: Google Glass Will Be An $11 Billion Market By 2018, 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 6

12 1.2 연구 목적 본 연구는 씨스루 글래스 타입 디바이스의 기기 특성에 적합한 GUI 디자인을 통해 사용성을 높이기 위한 방식을 연구하는 것을 목적으로 하고 있다. 이를 위해 씨스루 글래스 타입 디바이스의 시각적 구성요소의 원칙을 세우고 구체적 사례를 조사하여 문제점을 찾아낸다. 또한 사용자에 따라 씨스루 글래스 타입 디바이스를 사용할 때 여러 사용자 층에서 따를 적합한 시각적 구성요소의 표준을 도출하여 씨스루 글래스 타입 디바이스에 적합한 디자인을 제안하고자 한다. 첫째, 씨스루 글래스 타입 디바이스의 시각적 구성요소와 원칙을 정의한다. 둘째, 프로토 타입을 이용한 사용자 조사를 통하여 현재 디바이스의 특성에 따른 시각적 구성 요소의 선호도를 조사한다. 셋째, 사용자 조사를 바탕으로 여러 사용자 층에 적합한 시각적 구성요소의 가이드를 제안한다. 이러한 과정을 통해 씨스루 글래스 타입 디바이스의 GUI 최적화의 방향을 제시한다. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 7

13 1.3 연구 방법 및 체계 본 연구의 체계는 다음과 같다. 제 1 장 연구 배경과 목적, 방법 및 체계를 알아본다. 제 2 장 씨스루 글래스 타입 디바이스의 기술과 동향 현 글래스 타입 디바이스의 기술과 동향을 파악하고, 사례를 통해 장.단점을 분석한다. 제 3 장 GUI 디자인 기준과 원칙 GUI 디자인의 기준이 되는 요소들과 씨스루 디스플레이 GUI 의 동향을 알아본다. 제 4 장 씨스루 글래스 타입 디바이스에서의 GUI 디자인 씨스루 글래스 타입 디바이스의 화면 구조와 인터랙티브/GUI 구성요소를 분석하고, 사용성 평가를 위한 기준을 정의한다. 제 5 장 연구 문제 및 실험 씨스루 글래스 타입 디바이스의 프로토타입을 통해 실험을 실시하고 다양한 연령층에 적합한 GUI 표준 가이드를 도출한다. 제 6 장 본 연구의 결과를 시각화하고 향후 연구 과제를 제시한다. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 8

14 제 2 장 씨스루 글래스 타입 디바이스의 기술과 동향 2.1 씨스루 글래스 타입 디바이스의 등장배경 시장 홖경적 요인 기술적 요인 2.2 씨스루 글래스 타입 디바이스 시장의 동향 2.3 씨스루 글래스 타입 디바이스의 특성 이동성 및 접근성 확장성 독립성 2.4 씨스루 글래스 타입 디스플레이의 이론적 고찰 씨스루 글래스 타입 디스플레이의 기술 원리 씨스루 글래스 타입 디스플레이의 장단점 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 9

15 제 2 장 씨스루 글래스 타입 디바이스의 기술과 동향 2.1 씨스루 글래스 타입 디바이스의 등장배경 시장 홖경적 요인 씨스루 글래스 타입 디바이스가 등장하게 된 배경은 시장 환경적 요인에 기인한다. 현재 스마트폰 시 장은 그 성숙도가 높아져 수요의 포화 상태에 다다르게 되었다. IDC 유럽의 스마트폰 판매 증가율은 12% 2 로 9년 사이 최악의 성장세를 보이고 있으며, 스마트폰 시장을 주도하는 삼성과 애플의 주가 또 한 각각 17% 감소/300$감소하였다. 이에 따라 기업들은 새로운 성장 동력이 필요했고, 그 방향을 입 는 컴퓨터, 즉 웨어러블 디바이스로 기대하고 있다. 앞으로 웨어러블 디바이스는 IT 기업들의 신성장 동력으로 각광 받으며, 스마트 기기 시장의 성장과 ICT 컨버전스 산업의 활성화에 기여할 것으로 예상된다. 특히, 앱 생태계 확장의 제약을 극복할 수 있는 수단으로서 이용자에게 가장 밀착 된 형태의 플랫폼으로, 기존 디바이스로는 불가능 했던 새로운 가치 창출이 가능할 것이고, 이용자의 행동을 Reactive 에서 Proactive 중심으로 변화 시켜 기존 수익 모델의 재설계를 통해 수익성이 높아질 수 있다. 또한, 기기 자체로서의 웨어러블 디바이스 시장이 성장할 것으로 예측된다. IMS Research 는 웨어러블 디바이스 산업이 12 년 현재 1,400 만대 시장에서 16 년 1 억 7 천만대, 매출 60 억달러 규모에 이를 것으로 예상하였다. 특히, 자체 컴퓨팅 및 네트워크 기능을 탑재한 스마트글래스와 스마트워치 등의 고사양 제품으로 인포테인먼트(Infotainment) 영역이 활성화되면서 16 년 전체 매출의 38%를 차지 할 정도로 높은 성장을 할 것이라 예상된다. 이러한 예상에 힘입어 지난 2012 년에는 구글이 프로젝트 글래스를 발표하였으며, 이를 기점으로 다양한 IT 업계에서 웨어러블 디바이스 개발에 합류하고 있다. 2 IDC, IDC Predictions 2013, 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 10

16 2.1.2 기술적 요인 씨스루 글래스 타입 디바이스를 포함한 다양한 웨어러블 디바이스의 컨셉은 이미 오래 전부터 회자되 어왔지만 제한적 기술력으로 상업화가 되기까지 많은 어려움을 겪었다. 하지만 최근 스마트폰의 보급 이 확산되어 함께 연계할 수 있는 기회영역이 넓어졌다. 또한 IoT, M2M으로 이어지는 트렌드가 변화 함에 따라서 앞으로는 개별 사물이 네트워크에 접속하고, 자체 연산 능력이 있는 디버전스의 방향으로 전략을 바꾸어 생태계를 넓혀 나갈 것으로 전망한다. 이 사이에서 웨어러블 디바이스는 각 사물과의 상호작용을 최소한의 노력으로 효율적으로 진행할 수 있도록 도와주는 입력 장치로의 역할을 주도할 것으로 예상한다. 다음은 KT 경제경영연구소에서 정의한 웨어러블 디바이스의 변천사이다. [표 2-1] 웨어러블 디바이스의 변천사 3 Before PC 초기 부착형 타입 (1960~70) 프로토타입 등장 (1980~90) - 전자 기기의 단순 부착 형태 - 시계나 신발에 계산기나 카메라를 부착하는 형태 - 입출력 장치와 컴퓨팅 기능의 도입 - 컴퓨터를 착용하고 손이나 발에 달린 입력장치를 이용하여 결과가 출력되는 형태로 다양한 프로토타입이 등장함 PC Era 유비쿼터스 컴퓨팅 등장 ( ) - 경량화의 성공과 산업에서의 본격 적용 - 컴퓨팅 기능이 빨라지고 실제 착용이 가능할만큼 부품들이 가벼워 군사 및 산업 분야에서 사용되기 시작함 Internet Era 통신 네트워크와의 접촉시도 (2000~09) - 본격적인 Connected Device로의 확장 시도 - 네트워크 불안정성, 기기적 성능 부족으로 저변 확대 실패 Smart Revolution IoT Era 스마트 기기와의 결합 (2009~현재) 웨어러블 디바이스의 본격적 도래 - 본격적인 상용화의 시작 - 스마트폰 액세서리 개념인 앱세서리 형태로 보급 시작 - 자체적으로 네트워크와 접속 가능 - 스마트폰 이외 디바이스와의 확장성이 강화 3 제 67차 디지에코 오픈세미나, 포스트 스마트폰 시대, 웨어러블 디바이스, 2013 < 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 11

17 2.2 씨스루 글래스 타입 디바이스 시장의 동향 씨스루 글래스 타입 디바이스가 있기 이전에도 안경 형태의 디바이스(HMD_Head Mounted Display)는 존재해왔다. 1985년 코핀사에서 전투기나 헬리콥터 조종사가 육안으로 잘 볼 수 없는 상황에서도 전투를 하기 위한 장치로 개발되면서 시작되었고, 이후 두 손이 자유롭지 않은 상태에서 정보를 받아들여야 하는 의료 분야 등 전문적인 분야에서 활용되었다. [그림 2-1] 군용/의료용 HMD 이는 21세기에 들어서면서 디지털 휴대영상기기가 확산되며 빠른 속도로 상업화되기 시작했고 게임기, 전화, 노트북, 캠코더 등과 함께 사용 가능한 디스플레이로 활용되어왔다. 4 하지만 이는 단순히 안경처럼 머리에 쓰고 대형 영상을 즐길 수 있는 영상표시장치로서 1차적 기능만을 지원해왔고, 배경이 보이는 씨스루 디스플레이보다는 배경이 보이지 않는 완전 몰입형(See-Closed)디스플레이를 사용하였다. 때문에 자유로운 이동이 불가능해 모바일 디바이스 자체로는 적합하지 않은 특성을 띠고 있다. [그림 2-2] 멀티미디어 재생용 HMD 4 전자 부품 연구원, 2008 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 12

18 반면 제조 업체에서 일상 생활에서도 사용이 가능하면서, 가시성 높은 화면을 제작하기 위한 노력도 지속적으로 이어져왔다. 씨스루 디스플레이는 아니지만 눈 앞의 아래쪽에 작은 LCD 디스플레이를 사 용하여 일상 생활에 영향을 받지 않는 Recon Instruments나 Oakely Goggle과 같은 제품들이 출시되 었다. 최근에는 반투명 디스플레이에 대한 지속적인 연구를 통해 구글 글래스와 Lumus같은 디바이스 의 소형화가 이루어졌다. 앞선 기기들은 디바이스 내부에 존재하는 작은 프로젝트에서 나오는 영상을 반사 레이어를 통해 투명 디스플레이에 투사하는 방식을 사용하고 있다. 이런 기술을 토대로 첨단 기 술을 활용한 웨어러블 디바이스 분야의 개발이 가속화 되면서 다양한 기업들 내에서 새롭게 재조명 받 기 시작했다. 이 중 몇 몇 기술들은 실제 상용화 단계에 접어들었다. 그에 대한 몇 가지 예시는 다음과 같다. 구글 글래스를 필두로 2013년 상반기 일본의 스타트업 기업인 텔레파시 가 사용자가 눈으로 보 는 광경을 영상으로 공유하는 텔레파시 원 을 개발하고 있다고 알렸다. 또한 국내 기업인 삼성전자에 서는 내년 4월 갤럭시 시리즈인 기어 글래스를 발표할 것으로 예정되었고, 일본의 통신 기업인 NTT Dokomo, Olympus, Lumus Optical에서도 차세대 글래스형 웨어러블 디바이스를 제작할 것으로 발표하 였다. 이들 기업들은 단순히 멀티미디어 서비스의 디스플레이 용도로 그치지 않고 헬스 케어, 운동, 네 비게이션, 앱세서리, AR을 활용한 다양한 서비스 등을 제공하는 서비스 플랫폼으로서의 디바이스로 발 전 방향을 바라보고 있다. 또한 구글 글래스와의 차별화를 두기 위해 글래스(1 Display)가 아닌 글래시 스(2Displays) 형태의 제품을 연구하고 있기도 하다. [그림 2-3] 씨스루 글래스 디바이스로의 발전방향 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 13

19 2.3 씨스루 글래스 타입 디바이스의 특성 이동성 및 접근성 기존의 HMD와는 다르게 일상 생활의 배경이 보이는 투명 디스플레이의 채용으로 자유로운 이동 및 활동이 가능해졌다. 또한 신체에 착용하는 웨어러블 디바이스로서 씨스루 글래스 타입 디바이스는 기 존의 모바일 폰 보다 접근성이 더 높은 특성을 가진다. 조작 방식 또한 기존의 모바일 폰이 UNLOCK 을 통해 앱을 구동하는 긴 태스크 플로우를 가지지만, 씨스루 글래스 타입 디바이스의 경우 터치나 음 성 명령을 이용하는 짧은 시간의 태스크 플로우를 가지기 때문에 더 향상된 접근성을 제공한다 확장성 네트워크 통신의 발달로 인해 컴퓨팅 기능을 가진 모든 사물이 연결되는 통신 환경(Internet of Things) 으로 진입함에 따라 서비스 플랫폼으로서 다양한 서비스를 제공받을 수 있다. 또한 글래스 디바이스 본연의 형태와 사용자 경험을 고려하여 그에 알맞은 새로운 서비스의 확장할 수 있는 가능성이 높다 독립성 앞선 씨스루 글래스 타입 디바이스의 이동성과 접근성이 보장되고 다양한 서비스 이용으로 확장성이 높아짐에 따라 단일 디바이스로서의 독립성이 갖추게 되었다. 또한 박재운에 따르면 피해 프라이버시 가 보장되는 상황에서 자유로운 정보의 습득과 멀티미디어 감상이 가능하게 된다. 또한 개인이 사용하 는 매체이기 때문에 사용과 점유에 대해 타인의 통제를 받지 않는 자유를 얻게 되는데 이 두 가지는 현대인들에게 독자적인 영역을 확장시키고 궁극적으로 자기표현과 하위문화 형성의 수단이라는 의미의 중요성을 지닌다. 5 라고 하였다. 5 박재운, 새로운 모바일 UX를 위한 웨어러블 디바이스 개발에 관한 연구 안경타입의 디바이스 중심으로, 2011 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 14

20 2.4 씨스루 글래스 타입 디스플레이의 이론적 고찰 씨스루 글래스 타입 디스플레이의 기술원리 씨스루 글래스 타입 디바이스는 기존의 HMD와 달리 대중화를 위해 무게를 경량화하기 위한 기술을 도입하였다. 시중에는 현재 구글 글래스와 LUMUS Optical의 사례가 나와있다. 두 사례는 각각 소형 프로젝터를 활용해 상을 맺히게 하는 기술(피코 프로젝션)과 빛이 따라갈 수 있는 경로를 설계한 기술(광경로)을 도입하였고, 이 중 LUMUS의 경우 사용자가 더 큰 화면을 보는 것 같은 느낌을 줄 수 있도록 방법이 변형되어 적용되었다. 아래에 설명된 두 가지 사례의 기술들은 기존의 HMD의 한계점을 극복하면서 투사면이 없어도 대화면 영상을 보는 것과 같은 효과를 낼 수 있고, 시야를 가리지 않는 투명한 렌즈를 통해 자유로운 이동 및 활동이 가능하게 되었다. 자세한 사항은 아래와 같다. 1) 피코 프로젝션형 디스플레이의 기술원리 구글 글래스는 프리즘 형태의 디스플레이는 LCOS 프로젝터에서 상을 투사하여 반대쪽에 반사 레이어 를 통해 망막으로 직접적인 상이 맺히도록 구조화 되어있다. 이를 통해 시선의 방향에 따라서 화면의 포커스가 달라지는 경향이 있다. 때문에 기능을 잠시 사용하는 용도의 기능에 적합하다. 또한 실제의 배경 위에 화면이 떠 있는 것 같은 증강 현실의 효과를 나타낸다. 자세한 사항은 아래 도식과 같다. [그림 2-4] 구글 글래스 디스플레이 원리 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 15

21 2) 광경로 가이드형 디스플레이의 기술 원리 구글 글래스와 비슷한 방법으로 이집트의 한 전자부품 개발 업체인 Lumus Optical에서는 내장된 LCD 프로젝터로 부터 LOE(Light-Guided Optical Elements) 측면에 도달된 영상이 LOE를 지나 렌즈의 가운데 부분에서 반사되어 눈에 영상을 비춰줌으로서 안경 형태의 씨스루 디스플레이 구현을 가능하게 하는 방법이다. 해당 방법은 무엇보다도 투사면이 없어도 대화면의 영상을 보는 것과 같은 효과를 낼 수 있다. 6 하지만 눈 바로 앞에 영상을 투사하는 형태로 실제 생활을 할 때는 거슬릴 수 있는 문제점이 있다. [그림 2-5] LUMUS 디스플레이의 원리 6 Lumus Optical, Disruptive LOE technology, 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 16

22 2.4.2 씨스루 글래스 타입 디스플레이의 장.단점 씨스루 글래스 타입 디스플레이는 LCOS 혹은 LCD 프로젝터를 사용함으로서 기존에 문제가 되어왔던 HMD의 부피를 줄이는데 기여해왔다. 또한 작은 화면에 비해 높은 해상도를 제공하여 선명한 화면을 전달하기 위한 시도를 보이고 있다. 그리고 사용자의 망막에 상이 직접적으로 맺히게 함으로서, 마치 증강현실과 같이 실제 사용자에게는 팔정도 길이 앞에 상이 떠 있는 것처럼 표현이 가능하다. 이를 통 해 기존에 HMD가 일상생활을 하면서 사용하지 못했다면, 씨스루 글래스 타입 디스플레이는 시야를 가 리지 않아 일상적인 생활이 함께 가능한 장점이 있다. 반면에 프로젝터의 반사 레이어부터 망막까지 초점을 맞추기 위해 정해진 거리는 조절이 되지 않아 초 점 조절이 어려운 문제가 있다. 이 문제로 근시안의 경우 별도의 안경이나 콘택트 렌즈를 이용해야 한 다. 또한 해상도는 높으나 사용자에게 보이는 화면의 크기 자체는 매우 작아 이미지나 동영상을 감상 하기에는 부적합한 부분들이 많다. 그리고 프리즘 형태의 디스플레이 구조가 아래에서 위를 바라보는 현 디자인 내에서 화면 주변에 잔상을 남기고 외곽 라인의 콘트라스트가 짙게 표현되는 부작용을 초래 했다. 뿐만 아니라 프로젝션 방식의 디스플레이를 사용하기 때문에 밝은 환경 내에서는 화면 상의 내 용을 알아보기 힘든 단점이 있다. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 17

23 제 3장 GUI디자인의 이론적 접근 3.1 GUI디자인의 개념과 기준 3.2 GUI디자인의 시각적 구성요소 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 18

24 제 3장 GUI디자인의 이론적 접근 3.1 GUI디자인의 개념과 기준 GUI디자인이란 그래픽을 통하여 사용자와 시스템 간의 인터페이스를 구현하는 것으로 사용자가 문자 중심의 운영체제를 배우는 것이 아니라, 그래픽 요소들을 사용하여 보다 직관적이고 편리하게 사용할 수 있도록 제공하는 디자인을 의미한다. 7 이렇듯 미적인 측면뿐만 아니라 실용적 측면 또한 고려해야 하는 GUI 디자인은 실제 작업을 할 때 다 음 [표3-1]과 같은 특성을 고려해야 한다. 또한 이 각각의 특성들은 GUI를 디자인하는 하나의 기준이 되며, 제품의 기능 차이에 따라 가중치를 달리 한다. 8 [표 3-1] GUI 제작 시 고려해야 할 기준사항 9 - 지각적 측면과 관계 가시성 - 물체의 크기, 밝기, 휘도, 대비, 노출시간 등을 고려 - 특히 GUI 디자인에서 유의해야 할 점은 시각과 대비이다. - 인지적 측면과 관계 이해도 - 사용자의 심성 모델을 고려하여 화면을 구성 - 정확한 정보와 최적의 용어 사용, 모호한 정보 배제 - 사고하기 위한 단서 제공 사용 편의성 - 기계와 인간의 위치, 관계, 힘 등의 신체적 적합성을 의미 심미성 - 그래픽의 여러 가지 요소들을 미적으로 통일 - 특히 간단한 레이아웃과 컬러의 배합을 주요하게 고려 7 원종욱(2006),[교육용 온라인 게임 GUI디자인에 관한 연구],동양대학교 대학원 석사학위논문,p 홍익대학교,산업자원부(2008),[디지털 제품의 GUI디자인가이드북],p.23 9 홍익대학교,산업자원부(2008),[디지털 제품의 GUI디자인가이드북],p.23~28 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 19

25 3.2 GUI디자인의 시각적 구성요소 기존의 GUI 디자인의 시각적 구성요소는 PC 환경을 기반으로 한 윔프(WIMP) 시스템으로 윈도우 (Window), 메뉴(Menu), 아이콘(Icon), 포인팅(Pointing)으로 구성 요소를 구분하였다. 하지만 컴퓨터의 형태가 소형화 혹은 터치를 기반으로 한 디바이스로 변모하면서 GUI의 시각적 구성 요소들 또한 매우 단순화 되고 있다. 정미영에 따르면 모바일 GUI 디자인의 시각적 구성요소는 의미적 요소와 기능적 요 소로 나눌 수 있다고 한다. 의미적 시각 요소는 사용자의 작업 수행에 직접적으로 연관이 있는 메뉴, 텍스트, 동화상과 사운드를 말하며 그것이 가지고 있는 의미를 전달하기 위해 각 시각요소의 아이콘 등을 필요로 한다. 반면에 기능적인 시각요소는 사용자의 수행에 직접적인 역할을 하지 않으며 간접적 으로 보조하는 역할을 한다. 마찬가지로 여기에는 레이아웃, 백그라운드 이미지, 애니메이션과 음향이 있으며 단지 화면의 형식적인 구조나 의미적 시각 요소의 의미를 보충하는 역할이므로 특별한 주목을 요구하지 않는다고 정의 하였다. 10 또한 김준남은 모바일 GUI디자인의 시각적 구성요소를 레이아웃과 아이콘, 색상, 텍스트, 버튼, 동영상으로 분류하였다. 11 각각의 요소는 아래와 같은 특성을 지닌다. 레이아웃 레이아웃은 화면의 인상을 결정짓는 가장 기본적인 요소로 인터페이스 디자인에서도 상당히 중요한 기능적 역할을 한다. 이는 전체 디자인을 진행할 때, 사용자가 서비스/제품에 대한 일관성을 느낄 수 있는 부분이기 때문에 매우 중요하다. 뿐만 아니라 씨스루 글래스 타입 디바이스나 모바일 폰과 같이 제한된 크기의 소형 디스플레이 내에서 정보의 내용을 효과적으로 구성하여 전달의 효과를 높이기 위한 가장 좋은 수단이기도 하다. 뿐만 아니라 레이아웃은 디자인의 모든 구성요소를 어떻게 사용할 것인지를 면적의 대비를 통해 정의하여 사용자의 시선을 유도하고 내용을 전달하는 중요한 역할을 한다. 10 정미영, 모바일 폰 GUI가 브랜드아이덴티티에 미치는 영향에 관한 연구, 홍익대학교 시각디자인과 석사학위논문, 2006, p48 11 김준남, 스마트폰 애플리케이션에서의 감성지향 인터랙티브를 위한 GUI디자인 연구 : 사진 어플리케이션을 중심으로, 2011 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 20

26 아이콘 아이콘은 메뉴들의 정보를 전달하는 이미지로서 상징적으로 묘사하는 특별한 부류의 버튼을 말한다. 때문에 아이콘의 경우 메뉴의 의미를 시각화하는 메타포가 매우 중요하다. 분명하게 표현할 수 있는 부분들에 대해서는 단순 아이콘만으로도 그 의미를 사용자에게 전달할 수 있어야 한다. 하지만 그렇지 못할 경우 텍스트와 혼합하여 사용하거나 텍스트 단독으로 버튼을 만드는 경우도 있다. 또한 그래픽 적으로도 다양한 뎁스의 아이콘 표현방식을 사용할 수 있다. 이러한 다양한 표현방식은 메타포의 의미를 퇴색시키지 않는 범위에서 변형이 가능하며, 심미성 이전에 사용성을 고려할 필요가 있다. 컬러 컬러는 서비스 제품의 전반적인 이미지를 형성하는 의미적 요소이자, 동시에 중요한 항목을 돋보이게 하는 기능적 역할을 한다. 의미적 요소로서의 컬러는 직접적이거나 매개된 이미지의 다른 어떤 속성보다 강하게 보는 사람의 감정적 반응을 일으킨다. 이러한 이유로 디스플레이를 사용하는 다양한 디바이스에서 널리 사용되지만, 다른 감각 연속체처럼 절대적 판단의 한계에 영향을 받는다. 때문에 색의 의미가 잘못 식별되지 않도록 하기 위해 시스템 설계자는 한 디스플레이에서 5-6색만을 사용해야 한다. 12 텍스트 텍스트는 가장 기본적인 정보 전달의 기호이다. 하지만 화면의 공간적인 제약이 있고, 사용자가 읽어나 가야 하기 때문에 쉽게 정보를 습득하여 이해하기 어려운 단점을 지니고 있다. 텍스트는 제목, 메뉴, 내용, 하이퍼 텍스트 등의 인터페이스에 있어서 매우 중요한 요소이다. 제목과 메뉴, 하이퍼 텍스트 등 의 레이블링들은 한 화면에 표현 불가능한 사항들을 함축하여 표현한다. 때문에 디자인이 매우 단순해 야 하고, 모호한 용어를 사용하지 않아야 한다. 인터페이스에서 텍스트의 표현 특징은 버튼으로서 3차 원 애니메이션 표현이 가능하다는 것과 텍스트의 속성인 크기, 색상, 레이아웃 등의 일관성 유지이다 이동수, 스마트 폰 GUI 디자인 연구, 우근도, 사용자 감성형 GUI 개발을 위한 디자인 모델 구축, 2009, p39 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 21

27 제 4 장 씨스루 글래스 타입 디바이스에서의 GUI 디자인 4.1 씨스루 글래스 타입 디바이스의 화면 구조 특징 4.2 씨스루 글래스 타입 디바이스의 인터랙션과 인터페이스 씨스루 글래스 타입 디바이스의 인터랙션 씨스루 글래스 타입 디바이스의 인터페이스 4.3 씨스루 글래스 타입 디바이스의 GUI 레이아웃 아이콘 텍스트 컬러 4.4 씨스루 글래스 타입 디바이스의 GUI의 분석 씨스루 글래스 타입 디바이스의 레이아웃 분석 씨스루 글래스 타입 디바이스의 아이콘 분석 씨스루 글래스 타입 디바이스의 텍스트 분석 씨스루 글래스 타입 디바이스의 컬러 분석 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 22

28 제 4장 씨스루 글래스 타입 디바이스에서의 GUI 디자인 4.1 씨스루 글래스 타입 디바이스의 화면 구조 특징 최근 몇 년 사이 스마트 폰의 성장세가 안정권에 접어들면서 웨어러블 디바이스가 새로운 개발 영역으 로서 각광을 받고 있다. 그 중 구글을 필두로 한 씨스루 글래스 타입 디바이스는 하이엔드급 웨어러블 디바이스로서 차세대 스마트 디바이스의 미래를 이끌어갈 주역으로 주목 받고 있다. 이러한 씨스루 글 래스 타입 디바이스 화면의 구조적 특징을 살펴보면 다음과 같다. 첫 째, 씨스루 글래스 타입 디바이스의 화면은 가로가 더 길게 설계되어 있다. 인간의 시야는 좌우로 각각 90도이고, 상하로 각각 60도로, 전체적으로 보면 수평으로는 180도이고 수직으로는 120도가 된 다(Postka, Lewis& King, 1998). 따라서 인간은 수직적인 높이보다는 수평적으로 더 넓은 경우에 편안 한 느낌을 가지게 된다. 14 이러한 이유로 현재 시판되는 기기에 따라서 가로와 세로의 비율은 조금씩 다르지만, 현재 시판되고 있는 씨스루 글래스 타입 디바이스의 화면비를 보면 4:3의 화면비로 출시되 는 경우가 많다. [그림 4-1] 영상 컨텐츠의 화면 화면 비율 14 HerbertZettl, 박덕춘 정우근 역(2002), 영상제직의 미학적 원리와 방법, 커뮤니케이션북스, p.147. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 23

29 둘 째, 씨스루 글래스 타입 디바이스의 화면 구조는 배경이 비치는 화면 영역 사이에 콘텐츠의 정보를 표시하는 것으로 한정적 공간 내에서 정보를 제시해야 하기 때문에 아래 [그림 4-2]와 같이 일상 생 활의 배경 위에 콘텐츠와 메뉴가 겹쳐지는 화면 구조를 갖게 된다. 표현하고자 하는 정보의 양과 레이 아웃에 따라서 공간의 점유율이 달라지며, 주변 환경의 밝기에 따라 콘텐츠의 가독성에 영향을 받는다. [그림 4-2] 씨스루 글래스 타입 디바이스의 화면구조 셋 째, 씨스루 글래스 타입 디바이스의 정보 구조는 수평적 정보 구조를 따르고 있다. 이 구조는 기존 의 모바일 폰에서 사용하던 메인 홈과 하위 어플리케이션의 구동 메뉴 구조의 개념과 동일하다. 구글 글래스의 경우 이 메뉴 구조를 카드 형식으로 제안하여 터치패드의 좌우/상하 Swiping 동작을 통해 표 현하고 있다. 엡손의 MOVERIO와 Optical International의 Lumus의 경우 마찬가지로 터치패드의 좌우 /상하 Swiping 동작을 통해 어플리케이션을 선택하여 자세한 사항을 확인할 수 있도록 설계되었다. 이 처럼 같은 수평형 구조일지라도 UI표현 방식에 따라 화면의 구성이 달라질 수 있다. [그림 4-3] 트리형식 구조의 메뉴 표현 방식 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 24

30 4.2 씨스루 글래스 타입 디바이스의 인터랙션과 인터페이스 씨스루 글래스 타입 디바이스의 인터랙션 HCI(Human Computer Interaction)측면에서 보는 상호작용은 사람이 컴퓨터를 사용하는 과정에서 컴 퓨터와 사람 사이에 일어나는 일련의 절차를 말한다. 15 씨스루 글래스 타입 디바이스에서 사용자와의 주된 인터랙션은 터치패드와 음성 명령을 통해 이루어지 며 명확한 스크린 또는 사운드 상의 피드백을 필요로 한다. 음성 명령의 경우 가장 직관적인 인터랙션 방법으로 꼽히지만, 문화권 별로 주변 시선에 영향을 많이 받는 경우 사용상에 불편함이 따를 수 있다. 뿐만 아니라 카메라를 이용해 무언가를 빨리 찍어야 할 상황처럼 기능을 빨리 불러오고자 할 때는 오 히려 기능을 불러 오는데 있어 딜레이를 일으키는 주범이 될 수 있다. 음성 명령 인터페이스와 함께 병행 사용되는 터치패드 인터페이스는 구글 글래스의와 엡손의 MOVERIO 예시를 통해 살펴보도록 하겠다. 구글의 경우 타임라인카드라는 컨셉을 통해, 엡손의 경우 기존 안드로이드 OS 내에서 인터랙션을 설계하였다. 인터랙션의 경우 간단하게 아래의 3가지로 분류 된다. [표 4-1] 씨스루 글래스 디바이스의 터치패드 인터랙션 Tap Horizontal Swipe(L/R) Vertical Swipe(D) 기능 선택 및 세부 내용 더보기 메뉴 선택 뒤로가기 15 김진우, Human Computer Interaction 개론, 안그라픽스, 2005, p126 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 25

31 위와 같은 인터랙션의 경우 사용자에게 과도한 학습을 요구하지 않아 손쉽게 배울 수 있고, 제공되는 정보를 한 눈에 알아보기 쉬운 장점이 있다. 하지만 새로운 서비스 생태계를 구축하기 위한 플랫폼으 로서 차후 어플리케이션이 늘어날 시에 원하는 기능을 선택하기 까지 시간 소요가 많아지는 한계점을 갖고 있기 때문에 인터페이스 차원에서 이를 해결할 수 있는 방안이 필요하다 씨스루 글래스 타입 디바이스의 인터페이스 인터랙션 사이에서 사람과 시스템 간의 접점, 또는 사용자와 각각의 시스템 사이의 정보채널을 사용자 인터페이스(User Interface)라고 정의한다. 16 씨스루 글래스 타입 디바이스의 인터페이스에서 디자인해야 할 기능의 특성이 어디에 해당하는지를 파 악하고, 실제 디바이스를 조작하는 방식에 대해 숙지한다면 실제 인터페이스에 적용했을 때의 효율이 높아질 것으로 판단한다. 이에 [그림 4-4]의 인터페이스 디자인 접근 방법을 참고하고자 한다. 이는 축이 교차하면서 형성되는 A, B, C, D의 4개의 범주 및 대표적인 접근 방법이 열거되어 있다. 이러한 관점에서 사용자 인터페이스 특성을 생각해 보면 기존의 인터페이스를 지금까지와는 다른 새로운 디자인 결과물을 고안해낼 수도 있을 것이다. [그림 4-4]는 세로축은 조작감 의 정도를 표시한다. 축의 상단은 콘텐츠에 대한 정보의 이해도를 체 계적으로 접근하는 방법에 의한 논리적인 조작감 을 나타내는 것으로 사용 단계의 경과에 따른 조작 흐름이 설계 시 중심이 된다. 축의 하단은 패널상의 버튼이나 키에 의한 직감적인 조작감 을 나타내 는 것으로 사용자가 전체 기능을 직관적으로 파악할 수 있는 정도를 나타내고 있다. 한편 좌우의 횡축 은 사고패턴 에 의한 분류를 표시하고 있다. 좌측은 조작의 진행순서가 확실히 정해져 있는 <목적 지 향 패턴>의 제품이며 반대로 우측은 사용 과정에서 상황에 따라 조작 순서를 자유롭게 선택할 수 있는 <경험 지향 패턴>의 인터페이스이다 이세영, 플렉서블 디스플레이의 구부림을 활용한 인터페이스 가능성에 관한 연구, 국민대학교 테크노디자인대학원 디지털미디어디자인학과 인터랙션 디자인 전공 석사학위 논문, 2005, p 이진호, 이남식, 일본인간공학학회 스크린 디자인 연구회 편저, GUI 디자인 가이드, 안그라픽스, p.56 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 26

32 A. 논리적 목적지향 B. 직감적 목적지향 C. 직감적 경험지향 D. 논리적 경험지향 정보처리 과정을 시간 경과 에 따라 순차적으로 화면에 표시하여 단순하고 분명한 목표를 불특정 사용자가 정 확하고 빠르게 달성할 수 있 도록 한 사용자 인터페이스 목표가 확실한 상황에서 정보처리 과정을 시간에 따라 순차적으로 따르며 잠깐 보는 것 만으로 단시간에 사용이 가능한 사용자 인터페이스 순서가 없이 매 순간마다 목표가 바뀌며 리모콘처럼 버튼과 키를 중심으로 한 사용자 인터페이스 목적에 따라 사용 방법을 달리할 수 있는 유연성이 장점이며, 다른 인터페이스 에 비해 어느 정도의 학습이 필요하다. [그림 4-4] 조작/목적에 따른 인터페이스 디자인 접근방법 현 씨스루 글래스 타입 디바이스들을 살펴보면 다양한 기능을 제공하고자 하나, 화면 크기의 제약으로 인터페이스 상에서 보여줄 수 있는 정보에 한계를 갖고 있다. 때문에 시중의 씨스루 글래스 타입 디바 이스들을 살펴보면, 디스플레이의 성향을 반영하여 정보 처리 과정을 시간 경과에 따라 순차적으로 화 면에 표시하는 논리적 목적지향 형식에 가깝게 인터페이스의 접근 방식이 적용된 모습을 볼 수 있다. 이는 모바일 폰과 비교했을 때 훨씬 더 간소화되고 단순한 형태를 띈다. 즉, 디스플레이 크기의 감소는 사용자 인터페이스 요소의 수량과 크기에 많은 제약을 주며, 이러한 정보의 양은 서비스 방식의 차이 로 드러나게 된다. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 27

33 4.3 씨스루 글래스 타입 디바이스의 GUI 앞선 씨스루 글래스 타입 디스플레이의 특성과 디바이스의 인터페이스의 특성은 실제 GUI를 제작함에 있어서 많은 영향을 끼친다. 첫째, 작고 투명한 디스플레이는 한 번에 보여줄 수 있는 정보의 양에 많은 제약사항을 야기한다. 필수 적인 정보들 마저도 너무 길다면 이를 간략하게 축약해야 할 정도로 공간이 부족할 수 있다. 때문에 씨스루 글래스 타입 디스플레이와 같은 환경 내에서는 그 무엇보다도 가독성이 매우 중요시 된다. 이 에 대한 해결책으로 내용을 아이콘화 하는 방안이 있다. 이런 이미지화 된 정보들은 텍스트에 비해 용 량이 크며, 색상이나 양감/질감이 두드러지거나 크기가 다양하게 제작될 수 있다. 하지만 작은 화면 크 기에서는 세세한 부분을 표현할 수 없으며, 배경이 비치는 상황 내에서 실제에 가까운 이미지가 어느 정도의 가시성을 확보할 수 있을지 알 수 없다. 둘째, 제어를 위한 입력장치가 매우 제한되어있다. 씨스루 글래스 타입 디바이스의 조작 방식은 터치패 드를 이용하지만, 그 면적이 작고 외부 환경에서 많이 사용되기 때문에 십자형 휴대폰 하드키와 유사 한 조작 인터랙션을 채택하고 있다. 이에 대한 대체 수단으로 음성 명령 인터페이스를 제안하지만, 구 동하는데 시간이 걸리며, 오작동을 하는 경우도 발생한다. 이런 환경 때문에 사용자가 하고자 하는 과 업을 수행하기 위해서는 더 많은 인지적 비용이 발생하게 된다. 셋째, 씨스루 글래스 타입의 디바이스를 사용하는 사용자의 정황이 고려되어야 한다. 구글 글래스나 LUMUS, 텔레파시 원 등의 컨셉 무비를 살펴보면 일상 생활 중 사용하는, 아웃도어 환경에서 사용 가 능한 모습을 확인할 수 있다. 이렇듯 외부에서 빠르게 기능/정보를 불러와야 하는 상황에서 정보의 우 선순위나, 외부 태양 빛과 디스플레이의 특성을 감안한 색상 대비 등을 고려해야 한다. 위와 같은 제약 및 고려사항들은 씨스루 글래스 타입 디바이스의 GUI를 디자인함에 있어서 심미성도 중요한 척도가 되지만, 가시성과 이해도를 바탕으로 한 직관성이 더 우선적으로 고려되어야 함을 시사 한다. 따라서 본 연구는 이후 GUI의 시각적 구성요소에서 가시성, 직관성에 영향을 줄 수 있는 배경 이론과, 사용성 평가의 기준이 될 수 있는 요소들을 도출하고자 한다. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 28

34 4.3.1 레이아웃 레이아웃은 시각 커뮤니케이션을 전달하는 중심으로서 시각적 정보를 더욱 잘 이해될 수 있도록 사용 자에게 전달할 수 있다. 때문에 화면의 레이아웃이 사용자가 기대하는 심성 모형과 다르다면 사용자에 게 혼란과 불쾌감을 유발할 수 있다. 이렇듯 좋은 레이아웃은 사용자가 손쉽게 디바이스/서비스의 정보 를 구성할 수 있도록 도와준다. 씨스루 글래스 타입 디바이스의 화면비는 16:9를 사용하고 있다. 이 비율은 황금 분할이라고 알려진 :1의 비율에 거의 근접한 형태이다. 이 비율을 이용하여 균형을 이룬 화면 구성이란 황금분할로 나누어서 얻어진 부분 안에 시각적으로 중요한 요소를 배치하는 것을 의미한다. 18 이는 레이아웃을 의 미하는 것으로 시각적 전달을 목적으로 조형미를 고려하면서 소재를 효과적으로 구성해야 함을 강조한 다. 정보를 효과적으로 전달하기 위해서는 그 중요성에 순서를 매겨야 할 필요가 있다. 이 순서에 따라 사용자가 정보를 효과적으로 인지할 수 있도록 배치해야 하여 사용자의시선 이동이 자연스럽게 이루어 져야 한다. 위와 같이 레이아웃에서 깊은 심미성을 느꼈다고 하더라도 적절하게 강약을 조절하여 사용 자의 이목을 끌 수 없다면 정보 전달로서 인터페이스의 기능을 제대로 발휘할 수 없다. 이런 시각적 주목성은 레이아웃의 구성 요소들이 어디에 중점적으로 위치하느냐에 따라 다르게 나타날 수 있다. [그림 4-5] 레이아웃에서의 위치에 따른 주목성 19 위 [그림 4-6]은 화면에서 사용자의 시선 흐름을 중심으로 위치에 따른 주목성이 큰 부분부터 낮은 18 김교완. 소비자 인식에 따른 DTV 홈쇼핑의 화면구성 연구, 2007, p.4 19 이제식(1999), 응용 컴퓨터 편집디자인, 미담북스, p.19. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 29

35 부분까지를 표시하고 있다. 이 때 관람자는 늘 디자인을 볼 때 먼저 시선을 고정할 진입점, 즉 자신이 알아보고 이해할 수 있으며, 다른 정보로 이끌어 줄 무언가를 찾는다. 20 따라서 주목성에 따라 레이아 웃과정에서 구성요소의 성격과 중요도를 정확히 파악하여 각 요소들의 구성 위치를 정해야 한다. 씨스루 글래스 타입 디바이스에서 화면을 구성하는 시각적 요소들이 배열되었을 때 각 배열 위치에 따 라 달라지는 주목성의 정도와 이미지는 아래 [표 4-2]와 같을 것으로 예상된다. 본 논문에서는 챕터 5 에서 아래와 같은 레이아웃 배열을 기준으로 실험을 통하여 씨스루 글래스 타입 디바이스에 적절한 메 인/내비게이션 레이아웃을 검증하고 결과에 따른 적절한 가이드를 제시하고자 한다. [표 4-2] 시각 요소의 배열 위치에 따른 주목성의 정도와 이미지 상단 배열 - 사용자 시선이 일반적으로 흘러가는 시작점에 위치하여 가장 주목성이 높음 - 상에서 하로 이동하는 운동감과 적극적 분위기가 느껴짐 - 사용자 시선 흐름의 중앙에 위치해 보통의 주목성을 가짐 중앙 배열 - 상단과 하단 배열이 가지는 중간의 성격을 가짐 - 균형/안정적 분위기를 전달함 - 사용자 시선 흐름의 가장 끝에 위치하여 주목성이 낮음 하단 배열 - 상단 배열이 운동감과 적극적 분위기가 느껴진다면, 하단배열은 그와는 반대로 정적이고 안정적인 분위기가 느껴짐 좌측 배열 - 좌에서 우로 이동하는 사용자 시선 흐름에 따라 상단 배열 다음으로 주목성이 높음 우측 배열 - 사용자 시선 흐름의 끄트머리에 위치하여 주목성이 가장 낮음 20 앰브로즈. 해리스, 레이아웃 북, 안그라픽스, p.81 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 30

36 4.3.2 아이콘 아이콘이라는 용어는 1980년대 매킨토시에서 명령줄 인터페이스(CLI)에서 그래픽 메타포를 활용한 그 래픽 유저 인터페이스를 사용하기 시작하면서 정착되었다. 이러한 아이콘은 시각적 이미지를 사용함으 로서 사용성을 높여줄 뿐만 아니라 대화의 시간을 줄여주고, 시각적인 즐거움을 준다. 또한 텍스트에 비해서 적은 공간을 필요로 하며 주어진 공간에서 더 많은 정보를 나타낼 수 있는 장점이 있다. 21 아이콘을 디자인하기 위해 필요한 요소들은 다양하지만 본 연구에서는 형태와 크기를 중심으로 정리하 고자 한다. 아이콘의 형태는 사용자에게 전달하고자 하는 기능의 의미를 분명하게 표현하여야 한다. 이 를 메타포라고 표현하며 메타포는 표현하고자 하는 것을 유사한 것으로 함축하여 사용자가 대상과 표 현 사이의 관계를 유추하고 그 의미를 찾아내도록 유도하는 방식을 의미한다. [그림 4-6] ios의 연락처 메타포의 적용 이를 표현하기 위한 방식을 적절하게 선택하는 것 또한 매우 중요하다. 아이콘의 그래픽적 표현 방식 은 양감과 질감을 사실적으로 표현한 스큐어모피즘부터 아웃라인이나 면만을 이용해 표현을 최소화한 플랫 형식의 아이콘까지 시각적 단순화에 따라 단계적으로 구분할 수 있다. 이주환의 논문에 따르면 아이콘의 시각적 표현방식을 4가지(포토그래프, 드로잉, 아웃라인, 실루엣)의 네 가지 수준으로 구분하 고 있다. 또한 아이콘이 대상을 단순하게 표현한 것이라는 측면에서 아이콘 단순화의 정도가 아이콘의 효과(가시성)에 유의미한 수행의 차이로 나타날 수 있음을 주장하였다 이천수, 시각언어로서 효율적인 정보 전달을 위한 아이콘 디자인에 대한 연구, 2000,p 이주환, 단순화 정도에 따른 아이콘 디스플레이의 가시성, 2003 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 31

37 [그림 4-7] 단순화에 따른 아이콘의 종류 하지만 형태를 표현하는 그래픽 방식의 차이에 따라 사용자의 인지 및 감성적 측면에서의 효과가 달라 질 수 있으며, 디스플레이의 크기가 작은 이유에 따라 아이콘의 크기 및 명도, 채도 또한 가시성/직관 성에 영향을 미친다 텍스트 씨스루 글래스 타입 디바이스에서 사용되는 텍스트는 아이콘, 이미지만으로는 설명할 수 없는 다양한 정보들을 표기하고 있다. 혹은 아이콘을 생략하고 텍스트만으로 화면을 구성하기도 한다. 특히나 음성 명령과 관련된 대화형 인터페이스의 경우 아이콘을 배제하고, 텍스트만으로 사용자와 소통하는 등 텍 스트가 씨스루 글래스 타입 디바이스의 GUI 요소로서 차지하는 비중이 매우 크다는 것을 알 수 있다. 텍스트를 사용자가 쉽게 인지할 수 있게 하기 위해서는 서체의 형태(폰트타입, 중량)와 크기, 컬러, 자 간, 행간, 굵기 등을 고려하여 디자인 해야 한다. 유하연의 연구에 따르면 인지적 측면에서 텍스트 사용 시 사용자의 인지에 큰 영향을 미치는 요인은 서체 자체의 형태 디자인보다는 주변색과의 관계에서 구별이 분명히 되는가 와 텍스트의 크기 등이 중요한 관건이 될 수 있다고 했다. 또한 데이터방송 어플리케이션 제작 지침서에 따르면 폰트 타입의 경우 세리프 계열 보다는 가독성이 더 높은 산세리프 계열 사용을 추천하고 있다. 그 이외에 폰트의 사이즈와 중량, 행간, 자간, 어간을 가독성의 주 요소로 판단하고 그에 대한 가이드라인을 제시하고 있 다 UISM(userinterfacestandard manual):각각의 양방향/데이터방송/IPTV 등 서비스사의 화면 디자인,리모컨 및 화면 네비 게이션,정보 구성 등에 대한 통일화된 기준을 제시하여 제작의 효율성을 높이고,시청자에게 시청하기 쉽고 보기 좋은 화 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 32

38 하지만 각 디바이스의 특성에 따라 텍스트의 가시성에 많은 영향을 끼칠 수 있기 때문에 각각의 요소 들을 실험을 통해 검증하고 그에 따라 적절한 가이드를 제안하고자 한다 컬러 씨스루 글래스 타입 디바이스의 경우 배경이 비치는 투명한 소재의 디스플레이를 사용하기 때문에 다 른 디스플레이보다 더 컬러의 영향을 많이 받는 디바이스라고 이야기할 수 있다. 컬러는 강력한 커뮤 니케이션의 도구로서, 적절하게 사용된다면 정보 표현의 효율을 높이는데 가장 효과적인 수단으로 사 용할 수 있는 장점이 있다. 때문에 UI디자인의 인지적 디자인 요소의 효율 측면에서 형태 다음으로 큰 효과를 갖기 때문에 씨스루 글래스 타입 디바이스에서 적절한 컬러의 사용은 반드시 짚고 넘어 가야할 시각적 요소이다. 24 컬러의 변화에 영향을 미치는 요소는 크게 채도(C)와 명도(V) 색상(H)으로 구분할 수 있다. 보통 디스플레이에 표기된 색상의 채도와 백그라운드 간의 대비가 높을수록 가시성이 높아지 는 양상을 띄는데, 씨스루 글래스 타입 디바이스의 경우 사용자의 이동에 따라 시시각각 변화하는 백 그라운드의 컬러 대비로 항상 안정적 가시성을 장담할 수 없다. 때문에 평균적으로 적절한 가시성 확 보가 가능한 색상과 채도, 명도의 가이드라인이 필요하다. 면을 제공하기 위한 그래픽 표준 제작 지침.출처: 24 장윤희, 모바일 VOD 사이트 만족도 제고를 위한 GUI 요소 구성 전략에 관한 연구, 2005 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 33

39 4.4 씨스루 글래스 타입 디바이스의 GUI 표기 분석 본 연구에서는 현재 광경로 가이드형 디스플레이를 사용하여 시중에 제품을 유통하고 있는 대표적 제 품인 Lumus 와 Optivent의 ORA, Laster Technology의 Eye Phone 3가지를 선정하여 메인 화면과 2차 뎁스의 콘텐츠 표기 화면을 중심으로 살펴보았다. 구체적인 분석 사항으로는 씨스루 글래스 타입 디바이스의 GUI 디자인에서 주된 시각적 구성요소로 사용되고 있는 레이아웃, 아이콘, 텍스트를 중심 으로 조사하였다. 레이아웃에서는 구성과 배치를 중심으로, 아이콘에서는 크기와 형태의 단순성을 중심으로 분석하였다. 또한 텍스트에서는 서체와 크기에 대해 조사하였다 씨스루 글래스 타입 디바이스의 레이아웃 분석 메인 화면에서 메뉴를 표기하는 영역은 씨스루 글래스 타입 디바이스에서 중점적으로 제공하는 기능이 표기되어 사용자와의 인터랙션이 직접적으로 이루어지는 중요한 부분이다. 때문에 사용자가 메뉴를 쉽게 인지하고 기억할 수 있도록 하는 것이 중요하다. 메인 화면의 레이아웃에서 메뉴의 화면 구성은 [그림 4-9]와 같이 크게 좌측의 와 화면 상단의 - 형태, 정 중앙 단일메뉴로 존재하는 것을 볼 수 있다. 좌측을 중심으로 하는 LUMUS 의 형 레이아웃은 좌에서 우로 이동하는 사용자의 시선 흐름에 따라 주목성이 매우 높은 위치라고 할 수 있다. 반면 상단에 위치한 ORA 의 - 레이아웃은 형 레이아웃에 비해 주목도가 더 높으며 다른 레이아웃에 비해 상에서 하로 움직이는듯한 운동감을 느낄 수 있다. 마지막으로 Eye Phone 의 레이아웃은 정 중앙에 위치하여 이론상으로 주목도가 낮은 편에 속하나 화면 상에서 차지하는 비율이 큰 편으로 다른 레이아웃과 크게 주목도가 달라지지 않는다. [그림 4-8] 각 기기의 메인 화면 레이아웃 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 34

40 기능을 선택하고 나서 2차 뎁스로 이동할 때, 화면의 전환이 일어나는 경우와 그렇지 않은 경우로 나 눌 수 있는데, LUMUS와 ORA의 경우 화면을 이동하지 않고 컨텐츠를 표기하는 형태로 화면이 구성되 었고, Eye Phone의 경우 화면 전환이 이루어진 뒤 각 컨텐츠의 성격에 맞도록 화면의 구성이 재배치 되었다. 또한 2차 뎁스의 콘텐츠 표기 화면 같은 경우 콘텐츠의 성향에 따라 표기의 방법은 조금씩 달라질 수 있다. 그 화면은 크게 메시지나 멀티 미디어 감상과 같이 콘텐츠에 집중된 Dashboard 타입의 레이아 웃과, 네비게이션과 같이 증강현실 활용이 중요해지는 Augmented Reality 타입의 두 가지로 분류된다. 먼저 Dashboard 타입의 레이아웃을 살펴보면 다음 [그림 4-10]과 같다. 화면 전환이 없이 한 화면 내에서 함께 콘텐츠를 표기하는 LUMUS와 ORA의 경우 메뉴가 위치하여 사용자의 시선이 시작되었던 왼쪽을 기점으로 오른쪽에 콘텐츠의 내용을 표기하여 시선의 흐름이 자연스럽게 흘러갈 수 있도록 디 자인한 것을 볼 수 있다. 화면 전환이 있는 Eye Phone의 경우 메뉴의 위치와 마찬가지로 화면의 정 중앙부에 콘텐츠의 세부 내용을 표기하여 사용자가 콘텐츠의 내용을 빠르게 인지할 수 있도록 구성되 었다. 이렇듯 현재 분석상에 나타난 Dashboard 타입의 레이아웃은 사용자의 정황보다 콘텐츠의 가시 성을 중시하였음을 알 수 있다. [그림 4-9] 대쉬보드 타입 화면의 콘텐츠 레이아웃 Augmented Reality 타입의 레이아웃은 다음 [그림 4-11]과 같다. 면적의 비율상으로만 본다면 오히려 Dashboard 타입의 화면 구성보다 더 많은 면적을 차지하는 것처럼 보인다. 특히나 LUMUS 의 경우 방향을 표시하는 콘텐츠의 범위가 상당히 넓게 배치되어 사용자의 시선에 방해가 될 수 있는 요인으로 작용할 수 있다. 이에 대한 방안으로 콘텐츠의 그래픽 요소에 투명도를 주었지만, 실제 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 35

41 사용시 얼마나 효과가 있을지는 불분명하다. 하지만 ORA 의 경우 장소를 이동하는 사용자의 정황을 고려하여 하드웨어 자체에 AR 모드를 분리하여 디스플레이가 시선의 바로 정면에 있던 것을 아래로 끌어내리는 방식을 사용해 시선에 방해를 받지 않도록 디자인하였다. 뿐만 아니라 Eye Phone 의 경우도 상단에 표기된 구성 요소만 고정적일 뿐 하단에 표기된 지표 안내 사항은 가변적이어서 실제 사용시 시선을 가로막지 않도록 화면을 구성하였다. [그림 4-10] AR 타입 화면의 콘텐츠 레이아웃 씨스루 글래스 타입 디바이스의 아이콘 분석 1) 크기 씨스루 글래스 타입 디바이스 아이콘 크기는 각각 다르다. 3개 디바이스의 아이콘 크기를 각각 보면 다 음과 같다. LUMUS는 공개된 데모 화상의 해상도가 640*480으로 아이콘 하나의 면적은 아이콘+텍스 트 조합으로 60*60정도의 크기를 가진다(텍스트를 제외한 아이콘 단일 크기는 60*45). 전체 면적의 약 10%를 차지하고 있는 것이다. ORA 또한 LUMUS와 같은 화면 해상도를 가지며, LUMUS에 비해 큰 80*80의 아이콘 크기를 가진다. 이는 전체 비율의 12%정도로 앞선 LUMUS와 비교했을 때 큰 차 이가 나지 않는다. 상기 두 가지 경우 모두 메인의 아이콘과 2뎁스 콘텐츠 표기 페이지 모두 아이콘의 크기는 동일하다. 또한 두 디바이스의 경우 이동상황이나 배경이 보이는 정황을 대입한다면, 배경을 최 대한 적게 가려 사용상의 편의성을 줄 것으로 예상되지만, 실제 메뉴를 찾고자 할 때 현재의 아이콘 크기가 정보 전달 효과를 높이는데 있어서 적합할 것인가는 증명되지 않았다. 반면 Eye Phone은 앞선 두 디바이스에 비해 압도적인 아이콘 크기의 차이를 보인다. Eye Phone의 전체 화면 해상도는는 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 36

42 800*600으로 매우 높으며, 350*350크기의 메인 아이콘을 적용하였다. 거의 절반 가량에 가까운 비중 을 아이콘에 할애한 것이다. 크기에 따라서 표기되는 방식도 다양하다. LUMUS는 가장 작은 크기의 아 이콘을 갖고 있는 대신에 한번에 5개의 아이콘을 메뉴바에 표기하고 있다. ORA의 경우 1개의 아이콘 을 제공하며, 부가적 텍스트를 아이콘과 동일 크기로 우측에 표기하여 사용자의 이해를 돕고 있다. 마 지막으로 Eye Phone의 경우 또한 압도적 크기의 1개 아이콘을 사용자 시선 바로 앞에 표기하고 있다. 이런 이유로 실제 사용시 사용자의 시선을 가리는 문제점이 있으나, 정보 전달 효과를 높이는데 있어 서는 앞선 두 디바이스보다 효과적일 것으로 예상된다. 반면에 콘텐츠 영역으로 넘어갔을 때는, 아이콘 의 최소 크기를 앞선 두 디바이스와 비슷한 배율로 줄임으로서 사용상의 편의성을 높이기 위해 노력한 것으로 보인다. 이렇듯 디바이스 별 다른 구조적 전략으로 각 아이콘의 크기와 배율이 매우 다르게 나타났다. 그러나 아이콘의 가시성에 영향을 미치는 요소들은 다양하다. 본 연구에서는 크기만을 고려할 것이 아니라 아 이콘 형태에 대한 고찰을 병행하였다. 씨스루 글래스 타입 디바이스의 사용 정황과 가시성에 적합한 아이콘의 크기는 아래의 형태 단순성과도 연관이 될 수 있는 사항으로, 한가지 사항만을 고려할 것이 아니라 다양한 요소를 함께 고려하여 구성할 필요가 있다. 2) 형태의 단순성 형태의 단순화 단계는 양감과 질감이 현실과 얼마나 유사하느냐에 따라 Photograph > Drawing > Outline > Silhouette의 네 가지 단계로 구분한다. 각 디바이스의 아이콘을 위 네 가지 단계에 맵핑해 본 결과는 다음 [그림 4-11]과 같다. [그림 4-11] 각 디바이스별 아이콘 단순화 단계 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 37

43 LUMUS의 경우 Photograph와 Drawing의 두 단계에 맞추어 아이콘을 실제와 유사할 정도로 현실감에 가깝게 디자인하였다. 반면 ORA와 Eye Phone은 Outline과 Silhouette 위주의 아이콘을 주로 사용하 여 최대한 심플하고 간결한 느낌의 아이콘을 디자인 하였다. 다만 ORA의 경우 메시지 기능에 대한 아 이콘을 전체 아이콘의 룩앤필과 맞지 않는 Drawing 형식의 아이콘을 사용하여 아쉬움을 남긴다. 이렇듯 각 디바이스 별 아이콘의 표현 방식은 다르게 나타날 수 있다. 실제로 모바일이나 웹의 경우 당시 그래픽 디자인의 트렌드에 따라서 아이콘의 표현 방식이 달라지기도 한다. 하지만 씨스루 글래스 타입 디바이스만의 특수한 이용 정황을 고려한다면, 표현방식의 단순화 수준에 대한 결정이 아이콘의 가시성에 영향을 미치는 고려 요인으로 작용할 수 있다 씨스루 글래스 타입 디바이스의 텍스트 분석 화면을 구성할 때, 전달되는 다양한 정보를 전달하기 위해서는 단순히 아이콘만으로 화면을 구성하기 에는 무리가 있다. Lumus처럼 아이콘과 텍스트를 혼합하여 기능을 설명하기도 하고, 메시지나 각종 콘 텐츠의 정보를 전하기 위해서 텍스트를 이용하기도 한다. 아이콘의 역할만큼이나 텍스트의 역할 또한 정보를 전달함에 있어 중요한 역할을 하고 있는 것이다. 때문에 씨스루 글래스 타입 디바이스에서 텍 스트의 가시성에 영향을 미치는 요인들을 검토해볼 필요가 있다. 1) 서체 텍스트의 서체는 3개의 디바이스 모두 산세리프 서체를 사용하고 있다. 이러한 고딕 계열의 서체는 일 반적으로 현대적이고 식별성이 뛰어나 항목 표현에 많이 사용된다. 서체에 있어서는 중량 또한 가시성 에 많은 영향을 미친다. 배경이 비치는 씨스루 타입의 디스플레이는 일반적으로 흰색 컬러를 중심으로 한 텍스트를 사용한다. 하지만 종이가 아닌 모니터 디스플레이의 경우 흰색의 글자가 발광되면서 눈을 어지럽힌다. 때문에 중량이 무거운 Bold 타입은 Light 타입 보다 가독성이 더 떨어지는 문제를 야기할 수 있다. 이에 대한 반증인지, 3개의 디바이스 모두 Bold 타입 보다는 Light 혹은 Medium 타입을 사 25 이주환, 단순화 정도에 따른 아이콘 디스플레이의 가시성, 2003 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 38

44 용하며 강조를 위해 화면에서 글자의 크기가 비중을 크게 차지할 경우에만 Bold 타입을 강조를 위해 사용하는 모습을 볼 수 있었다. [그림 4-12] Eye Phone의 서체사용 2) 크기 각 디바이스의 최소 및 최대 텍스트 크기는 다음과 같다. 먼저 LUMUS는 최소 텍스트의 크기가 15px 로 아이콘과 함께 사용되며, 일반적으로 콘텐츠의 내용 표기를 위해 사용되는 텍스트의 크기는 17px에 서 최대 20px 정도의 크기를 활용하는 것으로 나타났다. ORA의 경우는 보조적 역할로서 최소 20px의 텍스트를 활용하며 일반 콘텐츠 표기로는 LUMUS보다 훨씬 큰 40px을 사용하며 이를 최대 폰트 크기 로 사용하고 있다. 마지막으로 Eye Phone의 경우 10px을 가장 작은 텍스트 크기로 지정하여 뉴스나 메시지를 확인할 때 사용하는 것으로 보인다. 일반적인 콘텐츠 정보 표기 크기로는 작은 편이여서 실 제 사용시에 가시성에 영향을 줄 것으로 예상된다. 이위에 일반 텍스트는 15~20px, 최대 크기로는 40px을 사용하고 있다. 이렇듯 표기 방식은 다 다르나 공통적으로 일반 콘텐츠 표기를 위해 17~20px 정도의 크기를 가장 많이 사용하고, 강조를 위해 40px정도의 텍스트 크기를 이용하는 것으로 나타났다 씨스루 글래스 타입 디바이스의 컬러 분석 3사의 씨스루 글래스 타입 디바이스는 명도가 매우 높은 컬러를 중심으로 제작이 되었다. 특히나 ORA 와 EYE PHONE의 경우 명도가 높은 흰색을 중심으로 채도가 높은 컬러 계열을 키 컬러로 활용하고 있다. Lumus의 경우 이와 상관 없이 GUI에 백그라운드 컬러를 지정하여 색상별 대비를 높여 화면에 표기되는 정보의 가시성을 높이고 있다. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 39

45 제 5 장 씨스루 글래스 타입 디바이스 GUI 요소의 최적화 연구 5.1 연구 모형과 개념적 정의 5.2 연구 실행 방법 레이아웃과 컬러에 따른 인지 성공 실험 아이콘 단순화와 크기에 따른 인지 성공 실험 텍스트의 서체와 중량에 따른 인지 성공 실험 5.3 평가 결과 레이아웃과 컬러에 따른 인지 성공 실험 결과 아이콘 단순화와 크기에 따른 인지 성공 실험 결과 텍스트의 서체와 중량, 크기에 따른 인지 성공 실험 결과 5.4 GUI 가시성 모형 요소의 홗용 레이아웃 컬러 아이콘 텍스트 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 40

46 제 5장 씨스루 글래스 타입 디바이스 GUI 요소의 최적화 검증 5.1 연구 모형과 개념적 정의 본 연구에서는 씨스루 글래스 타입 디바이스의 사용자들이 실제 디바이스를 이용할 때 편안함을 느낄 수 있는 시각적 요소 환경 판별을 위해 실시되었다. 이에 씨스루 글래스 타입 디바이스의 가시성에 영 향을 미치는 환경적 변인(조도, 배경)과 내부적 변인(GUI의 시각적 요소 4가지)을 분류하여 앞으로 진 행될 연구 아래 [그림5-1]과 같이 도출하였다. [그림 5-1] GUI 가시성에 영향을 미치는 요인의 연구모형 다음 [표 5-1]은 연구 변수의 세부적 평가 항목을 기술한 것이다. [표 5-1] 연구 모형의 세부적 평가 항목 GUI 구성요소 정의 레이아웃 좌우형/상하형/카드형 시선의 흐름, 네비게이션의 처리에 따른 평가 컬러 채/명도의 높낮이 채도와 명도 처리에 따른 평가 컬러 RGBW기본 컬러에 따른 평가 아이콘 실루엣/아웃라인/드로잉/포토그래프 아이콘의 단순화 단계에 따른 평가 크기 아이콘 크기에 따른 평가 텍스트 서체 고딕/명조에 대한 평가 중량 크기 폰트의 중량별 평가 텍스트의 크기별 평가 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 41

47 5.2 연구 실행 방법 상기된 연구 변수는 씨스루 글래스 타입 디바이스의 프로토타입을 통하여 검증되며, 프로토타입은 아 래 [그림 5-2]과 같다. 사람의 시야각을 기준으로 사람이 편암함을 느끼는 적정 시야각은 HD (2k)기 준으로 4m 거리에서 75inch의 화면 크기를 요한다. 26 동류의 디바이스 중 가장 큰 화면비를 제공하는 Optivent ORA의 경우 4m거리에서 70inch화면크기로 앞선 최적 환경과 유사한 근사치를 가져오고 있 다. 최대한 실제 디바이스와 유사하게 안구와 스크린 상의 거리를 가깝게 하고 싶지만 사람 눈의 최소 초점거리가 건강한 눈의 경우 최소 5cm이기 때문에 그 이상의 적절한 거리를 설정할 필요가 있었다. 따라서 피코 프로젝터의 최소 투사거리인 20센티미터를 기준으로 하여 4inch(8*6Centimeter)정도의 화면 크기를 대상으로 반사필름을 부착한 OHP 필름을 이용해 실험을 진행하였다. [그림 5-2] 프로토타입의 구조 앞서 제시된 4가지 시각 요소와 외부적 변인 2가지를 전제로 두고 각각 관찰과 간단한 설문/인터뷰를 진행하였다. 해당 실험은 실내, 야외에서 같은 과정을 반복하였으며 각 과정은 다음과 같이 설계되었다. [그림 5-3] 각 실험 실행 설계 26 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 42

48 실험 시 해당 과제 수행과 관련하여 수행 시간을 체크하였으며, 이후 설문과 인터뷰는 각 단계별로 피 험자가 해당 내용을 기억할 동안 가시성과 관련된 선호도에 대해 구두 설문이 이루어졌다. 이에 대한 총 실험 시간은 약 1시간 정도의 시간이 소요되었다. 실험 대상자는 20대 초반부터 30대 초반까지의 연령층을 대상으로 총 30명을 진행하였다. 각 요소 별 세부적 실험 계획은 아래와 같다 레이아웃과 컬러에 따른 인지 성공 실험 버튼의 배열은 4*3으로 화면의 종횡비와 동일하게 하여 아이콘간의 간격을 동일하게 유지해 다른 외적 요소에 영향을 받지 않도록 설정하였다. 또한 버튼의 크기는 51*51(px)로 동일하게 설정하였고, RGBW 네 가지 색상을 대상으로 실험이 진행되었다. 또한 각각 컬러에 대해 명/채도 0, -20, -40의 기 준을 적용하여 프로토타입을 제작하였다 여기에 각 구획별 아이콘 레이아웃에 대한 인지 성공을 실험 하기 위해 1 크기 당 가로/세로 총 1가지의 위치자극을 설정하였다. 각 컬러별 부분 실험 이후 명/채도 의 변화에 따라 달라지는 가시성 선호도에 대한 질문을 실시하였다. 또한 전체적 실험 이후 가시성에 대한 컬러(H)/레이아웃 선호 조사를 실시하여 전체 가시성 선호도가 높은 컬러/레이아웃을 선별하였다. [표 5-2] 컬러/레이아웃 검증 Blue Green Red White 아이콘의 단순화와 크기에 따른 인지 성공 실험 버튼의 배열은 앞선 실험과 다르게 위치 변인을 제거하여 정 중앙에 아이콘을 표기한다. 아이콘의 크 기는 40%, 60%, 80%, 100%의 4단계를 적용하며, 단순화 4단계에 맞추어 실험을 설계한다. 제공되는 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 43

49 아이콘은 우리가 익숙하게 사용하는 전화, 메시지, 날씨, 인터넷, 카메라, 갤러리 아이콘으로 제공되며, 아이콘의 크기 4단계 * 아이콘 단순화 4단계 자극에 따라서 총 16회의 인지 성공 실험을 실시한다. 자 세한 실험 화면은 아래 [표 5-4]와 같다. 실험은 아이콘의 기능 인지 시 손을 들고 피험자에게 어떤 기능인지 설명하는 Think out loud 형식으로 진행된다. 각 단순화 단계별로 나오는 아이콘은 각기 다른 기능을 표현하며, 컬러는 흰색 계열의 동일 컬러를 사용하여 다른 변인의 자극을 배제하였다. 실험 이 후 크기별 가시성 확보에 적합한 아이콘 단순화 단계에 대해 간단한 설문과 인터뷰를 진행하였다. [표 5-3] 아이콘 단순화 단계 Photograph Drawing Outline Silhouette [표 5-4] 아이콘 크기/단순화 단계별 자극실험 40%(34*34) 60%(51*51) 80%(68*68) 100%(88*88) 텍스트의 서체와 중량, 크기에 따른 인지 성공 실험 1) 텍스트의 서체와 중량에 따른 인지 성공 실험 2가지의 서체(고딕, 명조)와 5단계의 폰트 중량(EL, L, M, B, EB) 자극을 적용한 문장을 읽고, 설문과 인터뷰를 통하여 씨스루 글래스타입 디바이스에 적합한 폰트 단계를 선정하도록 하였다. 제공되는 문 장은 유사 개수(15-17개)의 음절로 구성되어 있으며, 각 문장을 읽는데 걸리는 시간과 실제 피험자가 느끼는 가시성의 정도를 설문과 인터뷰를 통해 조사하였다. 각 명조와 고딕체를 표현한 폰트는 가독성 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 44

50 이 높아 국내 디자이너들이 많이 사용하는 윤명조 300, 윤고딕 300 시리즈를 기준으로 제작하였다. [표 5-5] 폰트의 서체 고딕 명조 [표 5-6] 폰트의 중량에 따른 인지 성공 실험 Extra Light Light Medium Bold Extra Bold 2) 텍스트의 크기에 따른 인지 성공 실험 앞선 실험에서 가독성 선호도가 높았던 윤고딕 320, 330을 기준으로 하여 총 4단계의 폰트 크기를 적 용하여 제시되는 문장을 읽고, 설문과 인터뷰를 통하여 씨스루 글래스 타입 디바이스에 가시성을 확보 할 수 있는 적합한 폰트 크기를 선정하도록 하였다. 제공되는 문장은 동일 개수의 음절로 구성되어 있 으며, 각 문장을 읽는데 걸리는 시간과 피험자가 느끼는 가시성의 정도를 인터뷰와 설문을 통해 조사 하였다. [표 5-7] 폰트의 크기에 따른 인지 성공 실험 10px 15px 20px 25px 30px 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 45

51 5.3 평가 결과 레이아웃과 컬러에 따른 인지 성공 실험 결과 실내(조도가 낮음)와 야외(조도가 높음)에서 사용자가 자유롭게 배경을 바꾸어 가며 실험을 진행한 결 과 두 변인 모두 외부 환경에 대해 큰 차이점은 발견되지 않았으나, 컬러의 채도/명도 사용에 있어 약 간의 차이점이 발견되었다. 1) 레이아웃 일반적으로 레이아웃은 좌상에서 우하로 이어지는 사용자의 시선 흐름에 따라 주목도가 낮아진다고 보 지만, 표기되는 화면의 크기가 작고, 눈 바로 앞에 GUI가 표현되는 씨스루 글래스 타입 디바이스의 특 성으로 좌상보다는 중앙으로 갈수록 반응 속도와 가시성에 대한 선호도가 높은 것으로 나타났다. 하지 만 2차적으로 반응속도를 놓고 봤을 때는 좌상에서 우하로 가는 시선의 흐름에 따라 좌상 부근이 우하 보다 더 빠른 반응 속도를 보이고 있다. 위치에 따른 평균 반응속도(초)를 도식화 하면 다음과 같다. 2) 컬러 [그림 5-4] 레이아웃에 따른 반응 속도의 변화 컬러 가시성에 대한 선호도는 실내, 야외라는 조도 조건에 많은 영향을 받지 않았다. 오히려 변화하는 배경에 많은 영향을 받았으나 배경이 달라졌다 하더라도 공통적으로 25명의 대상자들이 Green과 White 컬러의 가시성이 높다고 응답하였으며, 개인의 시각적 인지 능력 차이에 따라 5명의 대상자들이 Green보다 Blue 색상이 가시성이 더 높다고 응답하였다. 그러나 18명의 대다수 응답자들은 Blue와 Red 컬러의 경우 화면상에 거의 보이지 않는다고 답변하였다. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 46

52 이와는 다르게 명/채도의 경우 실내에 실험을 할 때는 1단계(명도 채도 -0)와 같이 명/채도가 높은 컬 러를 선호하였으나, 야외에서 실험을 할 때는 1단계(명도 채도 -0)와 2단계(명도 채도 -20)를 동일하 게 보아 그 순위를 가리지 못하거나, 오히려 2단계를 선호하는 대상자 층이 증가하였다.. [그림 5-5] 컬러(H)의 가시성 순위와 각 컬러별 명/채도 순위 아이콘의 단순화와 크기에 따른 인지 성공 실험 결과 [표 5-8] 아이콘 단순화 단계와 크기에 따른 평균 반응 속도(초) 실내 40%(34*34) 60%(51*51) 80%(68*68) 100%(88*88) Photograph Drawing Outline Silhouette [표 5-9] 아이콘 단순화 단계와 크기에 따른 평균 반응 속도(초) 야외 40%(34*34) 60%(51*51) 80%(68*68) 100%(88*88) Photograph 8.07(실패5명) 4.17(실패3명) Drawing 5.23(실패3명) 4.08(실패2명) Outline Silhouette 아이콘의 가시성에 대한 선호도는 실내, 야외라는 조도 조건에 앞선 실험보다 많은 영향을 받았다. 두 외부 조건 모두 실루엣 형태로 단순화 됨에 따라 가시성이 매우 높아졌고, 아웃라인과 실루엣 타입의 아이콘은 서로 비슷한 선호도와 반응 속도를 보였다. 특히나 아이콘의 크기가 작아질수록 아웃라인보 다는 실루엣 형태의 인지 속도가 평균적으로 더 높은 것으로 나타났다. 하지만 아이콘의 크기가 88*88 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 47

53 픽셀 이상으로 클 경우에는 4가지 단계 모두 반응 속도에 큰 차이가 없으며, 실루엣과 아웃라인 단계 의 아이콘 중 조금 더 많은 묘사가 실행되는 아웃라인 아이콘의 선호도가 더 높은 것으로 조사되었다. [그림 5-6] 아이콘 크기에 따른 반응 속도와 선호도의 차이 반면에 드로잉, 포토그래프 타입의 아이콘은 실내에서는 어느 정도 그 형태와 의미를 인지할 수 있었 으나, 야외에서는 세세한 질감과 양감의 묘사가 시각적으로 잘 들어오지 않았다는 답변이 많았다. 특히 나 이동하면서 드로잉, 포토그래프 형식의 아이콘을 사용했을 시에는 변화하는 배경의 컬러대비에 따 라 형태를 인지하지 못하는 경우의 수도 생겨났다 텍스트의 서체와 중량, 크기에 따른 인지 성공 실험 결과 1) 텍스트의 서체와 중량에 따른 인지 성공 실험 결과 각기 실내와 야외에서 진행되었던 읽기 실험은 아래와 같이 그 평균값을 정리할 수 있었다. [표 5-10] 폰트의 서체와 중량에 따른 평균 읽기 속도(초) 실내 Extra Light Light Medium Bold Extra Bold 명조 고딕 [표 5-11] 폰트의 서체와 중량에 따른 평균 읽기 속도(초) 야외 Extra Light Light Medium Bold Extra Bold 명조 (실패1명) 4.68 고딕 (실패2명) 4.72 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 48

54 조도에 따라 서체에 대한 반응 속도에 대해서는 큰 차이는 나지 않았지만, 고딕체에 대한 읽기 속도가 Light 타입으로 갈 수록 조금씩 빠른 양상을 띄었다. 반대로 Bold타입의 경우 명조가 더 빠른 속도를 보이고 있다. 하지만 실제 가시성에 대한 선호도는 명조체보다 고딕체가 월등히 더 높게 측정 되었다. 특히나 실내보다는 야외에서 고딕체에 대한 가시성 선호도가 크게 증가하였다. 이 선호도는 중량에 따 라서도 크게 달라지지 않았다. [그림 5-7] 환경별 서체 가시성 선호도 그러나 중량에 대한 선호도는 야외 실험의 Bold 타입 실패 상황에서도 알 수 있듯이 폰트의 중량이 커 짐에 따라서 문장을 읽는데 어려움을 보이고 있다. 대다수의 사용자들은 폰트가 Bold 타입으로 갈 수 록 글자가 번지고 뭉개져 보이는 시각적 현상을 경험했다고 인터뷰 하였다. 반면에 Extra Light부터 Medium까지는 평균적으로 폰트의 가독성이 크게 차이 나지 않았으나, Medium과 Light 타입에 대한 선호도가 비슷하게 높은 것으로 나타났다. [그림 5-8] 폰트 중량별 가시성 선호도 2) 텍스트 크기에 따른 인지 성공 실험 결과 실내에서 진행된 폰트 크기에 대한 인지 성공 실험의 경우 모두 화면상의 내용이 무엇인지는 인지할 수 있었으나, 야외로 나가면서 15px 이하의 크기는 인지하지 못하는 경우들이 대다수의 피험자들에게 나타났다. 특히나 이동함에 따라서는 15px크기의 폰트를 한번에 인지하지 못해 모두 읽는데 시간이 현 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 49

55 저히 차이 나게 기록되었다. 반면에 20px 이상의 폰트에서는 야외의 조도가 높은 상황에서도 20px 미 만의 폰트 사이즈에 비해 무리 없이 실험이 진행되었다. 즉 문장을 구성하여 안정적으로 읽기에 적합 한 폰트의 사이즈는 적어도 20px 이상이 되어야 하며, 그 이하는 메인 문장보다는 보조적 역할로서 사 용이 적합함을 의미한다. [표 5-12] 폰트의 크기에 따른 평균 읽기 속도(초) - Medium 10px 15px 20px 25px 30px 실내 야외 8.09(실패6명) 6.82(실패8명) [표 5-12] 폰트의 크기에 따른 평균 읽기 속도(초) - Light 10px 15px 20px 25px 30px 실내 야외 8.98(실패9명) 7.41(실패7명) 또한 크기가 작은 폰트일수록 Light 타입 보다는 Medium 타입 폰트의 가독성 선호도 및 평균 읽기 속 도가 미묘하게 조금 더 빠른 것으로 나타났다. 뿐만 아니라 텍스트 타입에 대한 선호도 또한 25px 이 상의 경우 Light가 조금 더 높게, 25px 이하의 경우 Medium 타입이 더 높게 나타났다. 이는 텍스트의 크기에 따라서도 적용되는 중량이 다르게 나타날 수 있음을 시사한다. 5.4 GUI 가시성 모형 요소의 홗용 앞서서 진행된 실험 결과를 바탕으로 광경로 가이드형 씨스루 글래스 타입 디바이스에 적용될 수 있는 GUI 가시성 모형 요소들의 최적화 가이드라인을 제안한다. 본 가이드라인은 Optivent ORA의 해상도 640*480을 기준으로 한다 레이아웃 제공되는 레이아웃은 사용자의 이용상태에 따라 달라질 수 있다. 첫 번째는, 이동을 멈추고 집중적으로 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 50

56 화면 상의 콘텐츠, 인터페이스를 확인해야 하는 경우. 두 번째는, 증강현실을 활용하여 이동과 함께 콘 텐츠를 번갈아 가며 확인해야 하는 경우. 세 번째는, 이동을 하며 잠깐씩 화면상의 콘텐츠를 확인하는 경우이다. 메인화면과 대쉬보드 타입 화면의 경우 이동을 멈추고 기기와의 인터랙션이 필요하거나 이 동중에 잠깐 보아도 콘텐츠가 인식이 잘 되어야만 한다. 때문에 비교적 가시성이 높은 정보들을 화면 의 중앙에 배치하고, 그 이외에 부수적 정보들을 점차적으로 외곽에 배치하는 형식으로 디자인이 되어 야 한다. 반면에 AR 타입의 화면 디자인의 경우 실제 배경과의 조화가 중요하기 때문에, 비교적 주목 도가 낮은외곽을 중심으로 좌상에서 우하로 이어지는 시선 흐름에 따라 정보의 중요도가 낮아지게 레 이아웃을 배치할 수 있도록 한다. 이에 따라 각 화면의 레이아웃은 다음과 같이 권장될 수 있다. [표 5-13] 타입에 따른 화면 레이아웃 가이드라인 콘텐츠 중심의 화면 레이아웃(메인화면/대쉬보드 타입) 화면상에 보여지는 강조 콘텐츠를 화면 중앙에 두는 카드형 인터페이스를 중심으로 전체 레이아웃을 형성 콘텐츠 영역 화면 중앙 기점 / 560*400 콘텐츠 부가정보 콘텐츠 영역 하단 / 560*40 인디케이션 영역 화면 상단 / 640*36 스테이터스 영역 화면 하단 / 640*10 배경+콘텐츠 혼합형 화면 레이아웃(AR 타입) 백그라운드와의 융합을 위해 콘텐츠 요소를 주변에 두는 인터페이스를 중심으로 전체 레이아웃을 형성 화면 주변부 기점 80px영역 활용 콘텐츠 영역 좌상/우하로 갈수록 중요도가 적 은 정보 배치 인디케이션 영역 화면 상단 / 640*36 스테이터스 영역 화면 하단 / 640*10 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 51

57 5.4.2 컬러 메인 컬러의 경우 White 컬러를 중심으로 폰트나 주요 아이콘의 컬러를 표현하고 나머지 RGB컬러를 혼합하여 키컬러를 사용할 수 있다. 하지만, 키컬러들의 경우 야외에 나갈 시 채도와 명도가 100%인 순색보다는 채도 명도가 20% 감산된 컬러의 가시성이 더 높기 때문에 이를 사용하여 가시성을 높이도 록 한다. 여기에 dimmed 상태의 표현은 채도와 명도가 40% 감산된 컬러를 사용하도록 한다. 단, 기기 자체에 투명도 때문에 디스플레이에 표현되는 오브젝트에 투명도를 주지 않도록 한다. [그림 5-9] 활성/비활성 컬러 사용 가이드 예시 아이콘 아이콘의 경우 기능별 아이콘의 역할에 따라 그 크기와 단순화 단계를 다르게 적용할 수 있다. 어플리 케이션 아이콘과 콘텐츠 부가정보 아이콘은 응용프로그램이나 기능을 실행하기 위해 이를 표기하는 시 각적 표현매체로서 사용된다. 반면 인디케이션 아이콘은 별도의 액션 없이 단순히 디바이스나 시스템 의 상황을 표현하여 사용자에게 전달하기 위한 목적으로 활용된다. 따라서 아이콘에 대한 주목도는 크 게 어플리케이션 아이콘 기능버튼 아이콘 > 인디케이션 아이콘 순으로 낮아진다. 이에 따라 권장되는 아이콘 사용 가이드는 아래 표와 같다. [표 5-14] 아이콘 단순화 단계와 크기를 적용한 권장 이용 형태 어플리케이션 아이콘 콘텐츠 부가정보 아이콘 인디케이션 아이콘 68px 이상 40-50px 30-34px 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 52

58 해당 어플리케이션의 크기와 단순화 단계는 실험 결과를 바탕으로 제시되었다. 우선적으로 어플리케이 션 아이콘 중 드로잉, 포토그래프 타입의 아이콘을 쓰기 위해서는 가시성에 있어 차이가 별로 나지 않 았던 68px 크기를 기준으로 제시되었다. 단, 야외와 같이 조도가 높은 환경에서 씨스루 글래스 타입 디바이스를 사용하면 아이콘의 질감이나 양감이 잘 표현되지 않고 사용자에게 혼돈을 줄 수 있으므로, 최대한 메타포가 명확한 형태로 디자인하며, 필요에 따라서는 대비를 크게 할 수 있는 백그라운드 컬 러를 외곽에 처리하여 가시성을 높일 수 있도록 한다. 콘텐츠 부가정보 아이콘의 경우 앞선 어플리케 이션 아이콘과의 구별을 위해 이보다 작게 표현되며, 해당 크기 단계에서 가시성을 확보할 수 있는 아 웃라인과 실루엣 단계의 단순화 아이콘을 제안한다. 인디케이션 아이콘의 경우 시스템 상태를 표현하 기에는 그 크기가 매우 작아지기 때문에 가시성이 가장 높은 실루엣 형태의 아이콘을 사용하도록 한다 텍스트 음성 인식을 이용한 새로운 인터페이스의 적용으로 기존의 아이콘을 중심으로 한 인터페이스 외에도 텍스트를 활용한 인터페이스가 중요한 위치로 자리매김하게 되었다. 따라서 씨스루 글래스 타입 디바 이스 내에서는 텍스트의 가시성 또한 매우 중요한데, 이를 위해 텍스트의 경우 최소 20px 이상의 크기 를 기점으로 적용하기를 권장하며, 가독성이 떨어지는 명조체보다는 고딕체를 우선하기를 권장한다. 또 한 행간과 자간은 각각 120%, 0으로 적용한다. 27 또한 텍스트 중량의 경우 너무 가늘면 외부 조명 환경에 의해 가독성이 떨어지고, 두꺼울 경우 빛으로 표현되는 폰트이기 때문에 글자가 뭉개져 보여 가독성에 영향을 미친다. 때문에 가장 가독성 선호도가 높게 나왔던 Medium과 Light 타입의 서체 사용을 권장한다. 또한 25px 이하의 텍스트는 Medium 타 입이 가독성이 더 높게 측정되었기 때문에 실제 시스템 적용 시 우선적으로 전체 텍스트 이용은 사용 자에 따라 Light/Medium 타입의 선택이 가능하거나, Light 타입을 우선적으로 사용하고, 25px 이하의 텍스트는 Medium 타입을 활용하기를 권장한다. 27 구글 글래스 스타일 가이드, 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 53

59 [표 5-15] 크기에 따른 텍스트 가이드라인 (윤고딕 300 예시) Primary Text Guide(25px 초과) 25px 초과 크기의 폰트를 사용할 때는 Medium/Light 타입 모두 권장되나 Light 타입의 사용을 우선적으로 한다. 폰트 타입 고딕/산세리프 텍스트 중량 Light/Medium 자간/행간 0, 120% Secondary Text Guide(25px 이하) 25px 이하 크기의 텍스트를 사용할 때는 Medium 타 입이 권장된다. 폰트 타입 고딕/산세리프 텍스트 중량 Medium 자간/행간 0, 120% 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 54

60 제 6 장 결론 6.1 연구 결론 6.2 연구 한계점과 향후 연구 과제 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 55

61 6.1 연구 결론 본 연구에서는 차세대 스마트 디바이스로 각광받고 있는 씨스루 글래스 타입 디바이스의 GUI를 최적 화하기 위한 연구를 진행하였다. 이를 위해 우선적으로 현재 씨스루 글래스 타입 디바이스의 외부적, 내부적 가시성 영향 요인을 선별하고, GUI를 구성하는 시각적 요소를 선별하였다. 이후 현재 씨스루 글래스 타입 디바이스 중 광경로 가이드형 디바이스를 중심으로 시각 요소들 중 가시성에 영향을 미칠 만한 요인들을 선별하였고, 선별된 요인들을 중심으로 가시성 검증을 위해 디바이스 프로토타입을 이 용하여 GUI 각 요소들의 최적화된 표현 방식을 연구하였다. 자세한 내용은 다음과 같다. 1. 일반적인 디바이스나 인쇄물의 경우 레이아웃은 중요도에 따라 좌상에서 우하로 이동하는 시선 흐 름을 중심으로 배치된다. 그러나 실제 실험에서는 눈 바로 앞에 위치하는 디바이스의 특성 상 1차적으 로 중앙을 중심으로 주목도가 더 높은 것으로 밝혀졌다. 2차적으로는 좌상에서 우하로 이어지는 시각적 흐름과 마찬가지로 주변부의 주목도가 달라짐을 알 수 있었다. 때문에 실제 디자인 시 제공되는 인터 페이스의 목적과 실제 사용자의 사용 행태를 고려하여 서로 다른 2가지의 인터페이스 레이아웃을 분류 하여 제시하였다. 2. 컬러 사용의 경우 흰색이 개인차에 구분 없이 가장 가시성이 높은 컬러로 선별되었다. 이외의 키컬 러의 경우 야외와 실내 조도 환경이 달라짐에 따라 가시성의 정도가 매우 차이 났는데, 야외의 조도가 높은 상황에서는 실제 채도와 명도가 100%인 경우 보다 오히려 20%정도씩 낮은 컬러의 가시성과 사 용자 선호도가 훨씬 높은 것으로 조사되었다. 따라서 실제 가이드로 제작될 때에는 메인 컬러로서 흰 색 컬러를 사용하며, 이외의 키컬러의 경우 완연한 순색이 아니라 -20%정도의 낮은 명/채도를 적용한 컬러를 이용하도록 권장하였다. 3. 아이콘은 크기에 따라 인지할 수 있는 아이콘의 단순화 단계가 다르게 나타났다. 따라서 아이콘의 기능적 목적과 실제 사용자의 사용 행태를 고려하여 서로 다른 3가지의 아이콘 크기와 타입에 대한 권 장사항을 제시하였다. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 56

62 4. 서체의 경우 명조체보다는 고딕체의 가시성이 전반적으로 높은 것으로 판명되었다. 또한 중량과 크 기에 따라서도 조금씩 다른 가시성의 차이를 보였다. 특히나 중량이 너무 얇거나 두꺼울 시 빛을 이용 하는 디스플레이의 특성으로 인해 아예 보이지 않거나 뭉쳐 보이는 등의 현상으로 인해 가시성이 현저 하게 떨어졌다. 때문에 Medium, Light 타입의 두 가지 중량의 텍스트 사용을 권장하였다. 또한 텍스트 의 크기에 따라서도 인지 속도나 선호도의 차이가 있어, 작을수록 Medium 타입을, 클수록 Light 타입 의 사용을 권장하였다. 본 연구에서는 위와 같이 프로토타입을 사용해 서로 다른 조도와 배경 상황에서 평균적으로 가시성을 보장할 수 있는 GUI 최적화 요인을 밝혀내었다. 이를 통해 현재 개발이 미진한 상황에 있는 씨스루 글 래스 타입 디바이스의 개발을 위한 가이드라인을 제시하는데 그 의의가 있다. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 57

63 6.2 연구 한계점과 향후 연구 과제 본 연구에서는 프로토타입을 이용하여 그래픽 인터페이스에 가시성을 뒷받침해줄 수 있는 여러 가지 시각적 요소들을 제시하였다. 하지만 인터페이스를 디자인함에 있어서 인터랙션도 매우 중요한 요소로 작용하는데, 현 프로토타입은 인터랙션이라는 내부적 요인을 배제한 채 GUI의 가시성 측면만 조명을 하여 연구가 진행되었다. 현재 씨스루 글래스 타입 디바이스에서 가능한 인풋 방식으로는 Google Glass에서 사용하고 있는 OTP센서와 음성인식을 주로 하고 있다. 이외에도 Optivent ORA의 모드변경 방식 등 다양한 인터랙션 방식을 시도하고 있다. 하지만 아직 이 인터랙션 방식들에 가장 적절하게 작용될 수 있는 인터페이스 와 관련된 연구는 많이 진행되지 않은 것이 사실이다. 그에 대한 반증으로 같은 OTP입력방식을 사용 하고 있더라도 Google Glass의 경우 타임라인을 컨셉으로 중앙을 집중으로 하는 카드형태의 인터페이 스를 제공하고 있으나, Lumus의 경우 좌측 중심의 메뉴바 형태 인터페이스를 제공한다. 또한 Optivent ORA는 상단 중심의 메뉴바를 제공하고 있다. 따라서 차후 각 인터랙션 방식에 대하여 적절한 인터페 이스는 어떻게 디자인 되어야 할지 실제적인 프로토타입을 통해 효율성을 높일 수 있는 연구가 이루어 져야 한다. 또 씨스루 글래스 타입 디바이스의 입력 방식인 OTP나 음성 인식 인풋의 경우 기존의 다른 디지털 디 바이스와 다르게 물리적 버튼과 같이 눌리는 촉감이나 다른 신체적 피드백이 없기 때문에 조작에 대한 명확한 피드백을 제공하지 않으면 사용성이 저하될 수 있다. 때문에 현재 제공되는 시각적, 청각적, 촉 각적 피드백 정보 사이의 조합/피드백을 효율적이고도 명확하게 사용자에게 전달할 수 있는 방안이 필 요하다. 이외에도 새로운 인터랙션 방식으로 떠오르고 있는 제스춰 인식을 이용한 조작방식에 대한 연구나 사 용자 이용 정황과 음성인식 인터페이스에 관한 연구들이 필요할 것으로 예상된다. 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 58

64 참고 문헌 도서 홍익대학교, 산업자원부, 디지털 제품의 GUI디자인가이드북, 2008, p.23~28 HerbertZettl, 박덕춘 정우근 역, 영상제직의 미학적 원리와 방법, 2002, 커뮤니케이션북스, p.147. 이제식, 응용 컴퓨터 편집디자인, 1999, 미담북스, p.19. 앰브로즈. 해리스, 레이아웃 북, 2007, 안그라픽스, p.81 학술 자료 및 보고서 박재운, 새로운 모바일 UX를 위한 웨어러블 디바이스 개발에 관한 연구 안경타입의 디바이스 중심으로, 2011, p.37 원종욱, 교육용 온라인 게임 GUI디자인에 관한 연구,동양대학교 대학원 석사학위논문, 2006, p.23 김교완. 소비자 인식에 따른 DTV 홈쇼핑의 화면구성 연구, 2007, p.4 이천수, 시각언어로서 효율적인 정보 전달을 위한 아이콘 디자인에 대한 연구, 2000,p.16. 이주환, 단순화 정도에 따른 아이콘 디스플레이의 가시성, 2003 양웅연, 김기홍, 개인 착용형 디스플레이 기술, 2013 웹 사이트 비즈니스 인사이더 : IDC : 제 67차 디지에코 오픈세미나 : Martin Missfeldt : Lumus Optical : 벤처 스퀘어 : Google Glass Developer : 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 59

65 Abstract A Study on GUI Optimization of See-Through Glass Device By Park Hyo Jin Dept. of Digital Media Design, Interaction Design Lab. Graduate School of Techno Design, Kookmin University Seoul, Korea Most Recent innovation in the global mobile market, in the form of wearable devices, the trend of the market is expanding. See-through glass type devices have shown rapid growth since 2012(After the Google Glass presentation). BI Intelligence applies the Google glass sales in 2014, 830,000, ten million in 2017, so 2018 is predicting 20 million. Thus, demand is increasing in the market. However, proper research on smart devices as a new paradigm is the fact that a lot of progress is not. Users in various locations can use this. And Seethrough glass type device has a higher accessibility than cell phone. Also, it has the small transparent display and it s distinctly different feature.(environmentally and contextually) Based on the advanced features of the UI, rather icon-driven GUI design than text-based GUI may find that you need more. In this study, the environmental factors (brightness, background) and internal factors device (display characteristics) was defined as the factors affecting the visibility Based on the research framework defined externally factors and internal factors that affect visibility (illuminance / move) 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 60

66 was to set up an experimental environment. And A component of the GUI layout, color, icon, text and visibility preference for targeting experiments was conducted with 30 subjects. Through this experimentation, I could find the principles of the GUI elements that may affect the visibility. Based on the results of this experiment, See-through Glass type Device s visibility environment optimized for setting layout and color, icon, and text presented in the appropriate guidelines. Keywords See-Through Glass Device Graphic User Interface Optimization 씨스루 글래스 타입 디바이스의 GUI최적화에 관한 연구 61