Windows 8 및 iOS 태블릿의 Office Web Apps에서 터치 편집 기능 사용

최초 문서 게시일: 2012년 8월 20일 월요일

몇 주 전에 새로운 Office Web Apps(영문일 수 있음)에 대해 소개해 드렸는데요. 이번에 새로운 기능이 추가되고 앱 성능이 향상되었으며, 널리 사용되는 다양한 브라우저를 통해 어디서나 문서에 계속해서 액세스할 수 있게 되어 관련 기능을 소개해 드리고자 합니다.

이 게시물에서는 차원이 다른 입력 방식인 터치에 대해 소개해 드립니다. 이제는 완벽한 보기 및 편집 기능을 Windows 8의 IE와 iOS의 모바일 Safari를 비롯하여 터치를 지원하는 태블릿 및 브라우저의 Office Web Apps에서 사용할 수 있게 되었습니다.

 Microsoft에서는 터치 가능 Office Web Apps를 디자인할 때 다음과 같은 목표를 달성하고자 했습니다.

• 사용자가 터치 사용 Office Web Apps를 즉시 실행하여 작업을 바로 시작할 수 있어야 합니다.
• 사용자가 새로운 사용자 인터페이스 탐색 방법을 별도로 익히지 않아도 됩니다.
• 사용자가 터치 환경과 마우스/키보드 환경 간을 쉽게 이동할 수 있어야 합니다.
• 편집 도구를 비롯한 Office Web Apps의 모든 기능 집합을 태블릿, 터치 모니터 등의 터치 장치에서 사용할 수 있어야 합니다.

이처럼 터치 가능하며 터치 입력에 반응하는 사용자 인터페이스를 작성하는 과정에서 디자인상 여러 가지 과제를 해결해야 했습니다. 이 게시물에서는 그러한 과제 및 Microsoft에서 이를 해결한 방법에 대해 설명하겠습니다.

터치용 프레임워크 개발

Microsoft에서는 지원 대상 플랫폼과 일치하는 통합형 프레임워크와, Microsoft Office 데스크톱 응용 프로그램/Windows 8/iOS용 터치 상호 작용 지침을 개발했습니다. 또한 이러한 프레임워크 및 지침과, 특정 터치 장치 사용 시 사용자가 기대하는 터치 조작 성능 및 사용자 환경 간의 균형을 적절하게 유지하기 위해 노력했습니다.

여러 플랫폼에서 사용자 환경을 작성할 때 적용된 원칙은 다음과 같습니다.

• 터치 입력만 사용하는 효율적인 종단 간 환경 제공
  • 터치 장치의 시나리오와 환경을 우선적으로 고려
  • 사용자가 사용자 인터페이스를 올바르게 터치할 수 있도록 고려
  • 간단하면서도 직관적인 터치 조작 기능 작성
  • 브라우저 기능 활용
• 터치, 마우스 및 키보드를 조합해 활용하는 유용한 종단 간 환경 제공
  • 사용자가 터치, 마우스 및 키보드를 쉽게 번갈아 사용하면서 응용 프로그램과 상호 작용할 수 있음
  • 응용 프로그램이 터치에 응답해야 함

다음 섹션에서는 이러한 각 원칙에 대해 좀 더 자세하게 설명하겠습니다.

터치용으로 최적화된 시나리오 및 환경

저는 이 게시물을 며칠에 걸쳐 작성했으며 여러 번 편집했습니다. 대부분의 사용자들과 마찬가지로 저도 늘 책상 앞에만 앉아 있는 것은 아니었으며, 그렇다고 노트북을 들고 다닌 것도 아니었습니다. 처음에는 데스크톱에서 게시물 작성을 시작하고, 문서를 SkyDrive에 업로드하여 어디서나 사용할 수 있도록 한 후에 태블릿에서 편집을 계속했습니다.

터치 기능 작성 과정에서는 사용자 연구를 통해 확인된 사용 방식 및 동작의 추세와 패턴을 고려하여 다음의 두 가지 시나리오를 대상으로 선택했습니다. 

1.        문서 콘텐츠 읽기/사용 및 프레젠테이션과 스프레드시트 보기를 더욱 빠르고 효율적이면서도 즐겁게 수행할 수 있음

• 대부분의 태블릿 사용자는 정보를 읽고 사용하는 작업을 가장 많이 수행합니다.
• 사용자는 문서와 프레젠테이션을 탐색하고 동료와 친구가 공유한 콘텐츠에 의견을 남깁니다.
• 차량을 구입하기 위해 모든 조사 내용을 OneNote Web App에 통합한 다음 차량 계약 협상을 할 때 태블릿에서 해당 조사 내용을 확인하고자 하는 경우를 예로 들 수 있습니다.

 2.        간단한 편집 기능이 제공되므로 사용자가 문서를 추가, 수정 및 개정할 때 유용합니다.

• 학부모의 경우 자녀의 학교에서 공유한 스프레드시트를 통해 학부모 활동 참가 신청을 빠르게 완료할 수 있습니다.

• 학생의 경우 과제물을 간편하게 편집하고 정리해야 하는 프레젠테이션에 대해 공동 작업을 수행할 수 있습니다.

효율적인 터치

사용자 인터페이스에서 원치 않는 컨트롤이 터치되면 대단히 불편합니다. 원하는 사용자 인터페이스 항목이나 컨트롤을 안정적으로 터치할 수 있어야 앱을 마음껏 사용할 수 있을 것입니다. Office Web Apps를 사용할 때는 잘못된 터치로 인한 불편이 없습니다.

마우스는 사용자 인터페이스에서 정밀하게 통제된 상호 작용을 수행하는 데 사용되는 도구입니다. 마우스와 실제 키보드를 함께 사용하면 삽입 지점을 정확한 위치에 놓고, 원하는 항목을 선택하고, 단추를 누르고, 상황에 맞는 메뉴/드롭다운/기타 UI를 호출할 수 있습니다.

반면 사람의 손가락은 모양과 크기가 제각각이며, 삽입 지점을 정확하게 배치하거나 사용자 인터페이스와의 상호 작용을 정확하게 제어하기도 어렵습니다.

따라서 Office Web Apps의 터치 기능을 제작할 때는 사용자 인터페이스를 어려움 없이 터치하고 마우스를 사용할 때와 동일한 결과를 얻도록 하는 것이 주요한 목표였습니다.

화면에서 원하는 항목을 쉽게 터치하려면 터치 대상의 크기가 중요합니다. 리본 메뉴 컨트롤, 상황에 맞는 메뉴와 같은 대부분의 사용자 인터페이스 요소는 Windows 8 및 Microsoft Office에서 정의하는 "터치 가능" 크기 제한보다 훨씬 작습니다.

새로운 Office Web Apps에서는 이러한 모든 요소를 훨씬 쉽게 터치할 수 있습니다. UI의 실제 크기를 증가시킴과 동시에, 실제 문서 콘텐츠가 차지할 수 있는 공간도 최대한 유지하기 위해 노력했습니다.

이전에 비해 더 커져 쉽게 터치할 수 있는 단추와, 사이 간격이 보다 넓어져 사용이 편리해진 컨트롤을 아래 그림에서 보다 자세하게 확인해 보시기 바랍니다.

 Excel Web App의 홈(Home) 탭

PowerPoint Web App의 삽입(Insert) 탭

OneNote Web App의 홈(Home) 탭

Word Web App의 색 선택(Color Picker)

간편하고 직관적인 터치 조작 기능 사용

효율적인 터치 기능을 제공하는 데 있어 또 다른 핵심적인 목표는, 사용자가 따로 익히고 기억해야 하는 복잡한 제스처가 아닌 쉽고 직관적인 터치 조작을 통해 태블릿에서 Office Web Apps 사용을 즉시 시작할 수 있도록 하는 것이었습니다.

Office Web Apps에서는 다음의 5가지 동작만 사용하면 됩니다.

그러면 이러한 동작을 Office Web Apps에서 사용하는 방법에 대해 설명하겠습니다.

문서 스크롤 및 탐색

문서 내를 빠르게 훑어봐야 하는 경우 빠른 스크롤 동작을 사용하여 문서를 살짝 밀거나 긋습니다. 그러면 문서 콘텐츠가 빠르고 유연하게 가속 스크롤되며, 언제든지 문서를 탭하면 스크롤을 중지할 수 있습니다.

Word Web App의 읽기 및 편집 보기에서는 기본 브라우저 기능을 통해 가속 스크롤을 적용했습니다.

PowerPoint Web App에서는 동일한 살짝 밀기 동작을 통해 슬라이드를 변경할 수 있습니다.  

확대/축소

손가락 두 개를 모은 상태에서 펼치거나 벌린 상태에서 집는 방법으로 사용자 인터페이스를 확대 및 축소할 수 있습니다.

입력

Office Web Apps 의 편집 보기를 한 번 탭하면 삽입 지점이 배치되고 입력을 시작할 수 있도록 키보드가 표시됩니다.

Word Web App의 삽입 지점

보시다시피 삽입 지점은 마우스와 키보드를 사용할 때와 다르게 표시됩니다. 삽입 지점에 원형 "위치 조정 막대"가 함께 표시되어 삽입 지점을 쉽게 선택한 다음 끌어서 원하는 부분을 선택할 수 있습니다.

입력은 편집 시 가장 기본적인 작업이므로 효율적인 입력 환경을 제공하는 것은 핵심 지원 시나리오입니다.

삽입 지점 배치

손가락을 사용할 때는 기계 장치에 비해 입력 정확도가 떨어지므로, 사용자가 원하는 위치에 삽입 지점을 안정적으로 놓을 수 있는 방법을 마련해야 했습니다.

저희는 대부분의 사용자가 단어 처음이나 끝을 수정한다는 점에 주목했습니다.

이에 따라 삽입 지점 배치에 "책갈피" 방식을 도입했습니다.

이 방식은 기존 단어를 한 번 탭하면 가장 가까운 "끝"(단어 시작이나 끝)을 계산하여 해당 위치에 삽입 지점을 놓는 방식입니다. 같은 단어를 다시 탭하면 터치가 등록된 정확한 위치로 삽입 지점을 이동합니다.

선택

텍스트와 개체를 선택하여 조작하거나, 서식을 적용하거나 기타 작업을 수행할 수 있습니다. 마우스와 컨트롤 및 키보드의 Shift 키를 사용하면 대상을 정확하게 선택할 수 있으므로 이러한 작업을 효율적으로 수행할 수 있습니다.

터치 환경에서는 핸들 역할을 하는 삽입 지점의 "위치 조정 막대"를 잡아 끌어서 새 선택 영역을 만들 수 있습니다. 또한 위치 조정 막대를 사용하여 선택한 범위의 양 끝을 끌어 선택 영역을 축소하거나 확장할 수도 있습니다.

Word Web App에서 위치 조정 막대를 끌어 텍스트 선택

  끌기를 통해 표 삽입 차원 선택

상황에 맞는 메뉴에서 작업 적용

상황에 맞는 메뉴를 통해 특정 컨텍스트에서 작업을 빠르고 쉽게 적용할 수 있습니다. Office Web Apps에서 마우스를 통해 상황에 맞는 메뉴를 이미 사용해 보셨을 것입니다. 마우스 오른쪽 단추를 클릭하면 상황에 맞는 메뉴가 표시됩니다.

마우스 오른쪽 단추를 클릭하여 Word Web App 편집 보기에서 상황에 맞는 메뉴 표시

이제는 선택 항목을 탭하기만 하면 상황에 맞는 메뉴가 표시되므로 작업을 쉽게 수행할 수 있습니다. 상황에 맞는 메뉴 외부를 탭하면 해당 메뉴가 사라집니다.

선택 영역을 탭하여 상황에 맞는 메뉴 표시

상황에 맞는 메뉴에서도 컨트롤 간에 간격이 넓어 원하는 명령을 터치하기가 쉽습니다.

삽입 지점에서는 손가락으로 잠시 누르고 있으면 상황에 맞는 메뉴가 표시됩니다.

Word Web App 읽기 보기에서는 한 번 탭하면 한 줄이 선택되고 선택된 줄에서 또 한 번 탭하면 상황에 맞는 메뉴가 표시됩니다.

Word Web App 뷰어의 선택 및 상황에 맞는 메뉴

터치, 마우스 및 키보드를 조합해 활용하는 유용한 종단 간 환경 제공

태블릿에서는 터치, 마우스 및 키보드 입력 방식을 사용할 수 있습니다.

Windows 8에서는 터치 또는 마우스/키보드 입력을 사용하거나 두 방식을 조합하여 Office Web Apps를 사용할 수 있습니다. iOS의 Office Web Apps에서는 터치 입력을 사용하는 것이 가장 효율적입니다.

터치 모드

Office Web Apps에서는 사용자 인터페이스를 다음과 같이 구분할 수 있습니다.

• 고정 사용자 인터페이스

항상 제공되며 앱에 표시되는 사용자 인터페이스입니다.

예: OneNote Web App 탐색 창, 리본 메뉴

• 상황별 사용자 인터페이스

 요청 시 표시되고 사라지는 사용자 인터페이스입니다.

예: 상황에 맞는 메뉴

터치 장치를 사용할 때 Office Web Apps에서는 기본적으로 고정 사용자 인터페이스가 터치 모드로 표시됩니다. "터치 모드" 단추를 눌러 마우스를 통해 사용자 인터페이스를 사용하도록 이 모드를 변경할 수 있습니다.

터치 모드 단추는 Office Web Apps 왼쪽 위의 빠른 실행 도구 모음에 표시되므로 터치 모드와 정밀/마우스 모드 간을 쉽게 전환할 수 있습니다.

누른 상태의 터치 모드(Touch Mode) 단추: 터치 가능 사용자 인터페이스 표시

터치 모드(Touch Mode) 단추(확대)

상황에 맞는 메뉴, 리본 메뉴 플라이아웃 및 요청 시에만 표시되는 메뉴는 해당 메뉴를 호출한 입력 방법(터치 또는 마우스)으로 표시됩니다.

요약

skydrive.com(영문일 수 있음) 또는 Office 365(영문일 수 있음) Preview에서 새로운 Office Web Apps Preview를 사용해 보시기 바랍니다. 이 Preview는 Windows 8 터치 장치 및 iPad의 iOS에서 사용 가능합니다. 

사용자 환경에 대한 여러분의 의견을 기다리고 있습니다. 앱 오른쪽 위와 파일 메뉴에 있는 "의견 보내기" 옵션을 통해 많은 의견을 보내 주시기 바랍니다.

Microsoft는 사용자 환경을 지속적으로 개선하고 있으며 여러분의 의견을 적극적으로 반영하고 있습니다.

 Renu Devi

프로그램 관리자(Office Web Apps)

이 문서는 번역된 블로그 게시물입니다. 원본 문서는 Bringing touch editing to Office Web Apps on Windows 8 and iOS tablets를 참조하십시오.