iOS Developer Library

Developer

iOS Human Interface Guidelines

iBooks

케이스 스터디 : 데스크탑에서 iOS로

아이패드의 키노트

데스크탑의 키노트는 세계수준의 프레젠테이션을 만들기 위한 강력하고 유연한 앱이다. 사람들은 키노트가 사용하기 쉽고 세밀하게 정제된 컨트롤들을, 애니메이션이나 텍스트 애트리뷰트처럼, 무수한 정밀한 디테일로 결합하는 것을 사랑한다.

image: ../Art/keynote_desktop_2x.png

아이패드의 키노트는 데스크탑 키노트의 필수적인 부분을 잡아서, 다음과 같은 사용자 경험을 통해 아이패드에서 편안함을 느끼도록 한다:

  • 사용자의 콘텐트에 초점을 맞춘다

  • 기능 약화 없이 복잡함을 없앤다

  • 강력함과 즐거움을 주는 단축실행(shortcut) 제공

  • 데스크탑 경험의 익숙한 특징을 도입

  • 설득력있는 애니메이션을 통해 피드백과 대화를 제공

키노트 사용자는 즉각적으로 아이패드에서 그 앱을 사용하는 법을 알게 된다. 왜냐하면 예상되는 기능을 아이패드의 본질적인 패러다임을 사용해 제공하고 있기 때문이다. 새로운 사용자는 아이패드용 키노트 사용법을 쉽게 배울 수 있다. 그들의 콘텐트를 단순하고 자연스러운 방식으로 직접 다룰 수 있기 때문이다.

키노트의 테스크탑에서 아이패드로의 변환은 미세한 부분부터 지대한 부분까지 무수한 수정과 재디자인에 기반한다. 가장 시각적인 적용을 보면 :

간결한 툴바. 툴 바에는 자주 쓰는 몇 개의 아이템만 올라갈 수 있으므로, 콘텐트를 만드는 데 사용자가 항상 접근 필요한 필요가 있는 기능과 도구들이 올라갈 수 있도록 한다.

image: ../Art/keynote_toolbar_2x.png

사용자 포커스에 대응하는 단순화되고 우선순위 정렬된 인스펙터. 아이패드의 키노트는 자동적으로 선택한 오브젝트를 수정하는 데 필요한 툴과 애트리뷰트를 자동으로 가진다. 주로, 사람들은 첫 번째 인스펙터 뷰에서 원하는 모든 수정을 할 수 있다. 만약 그들이 덜 자주 수정하는 애트리뷰트를 수정하려 한다면, 다른 인스펙터 뷰로 파고들어갈 수 있다.

image: ../Art/keynote_inspector_2x.png

수 많은 제공되는 스타일 콜렉션들. 사람들은 챠트나 테이블 같은 오브젝트의 룩앤필을 미리 제공된 스타일을 이용해 손 쉽게 변경할 수 있다. 컬러 계획외에도 각각의 콜렉션들은 테이블 헤딩이나 축 분할 마크등 미리 스타일된 애트리뷰트들을 포함하며, 이들은 전체적인 테마에 걸쳐서 디자인되었다.

image: ../Art/keynote_presets_2x.png

콘텐츠를 직접 다루며 의미있는 애니메이션을 더하자. 아이패드에서의 키노트에서 사용자는 새로운 위치로 슬라이드를 드래그할 수 있고, 오브젝트를 뒤틀어서 회전시킬 수 있고, 이미지를 탭 해서 선택할 수 있다. 직접 다루는 느낌은 아이패드 키노트가 실행하는 응답성 애니메이션에 의해 더욱 좋아진다. 예를들어, 사용자가 슬라이드를 움직이면 그것은 조용히 흔들리고, 새로운 위치로 옮기면, 주변의 슬라이드들이 바깥쪽으로 물결치면서 공간을 만든다.

아이폰에서의 메일

메일은 OS X 앱들 중 가장 눈에 잘 띄고, 잘 만들고, 사람들이 좋아하는 앱 중 하나다. 이것은 또한 굉장히 강력한 프로그램으로, 사용자들은 메일을 쓰고, 받고, 순위를 정하고, 저장한다. 그리고 액션 아이템과 이벤트를 추적하고, 메모와 초대장을 만들기도 한다. 데스크탑에서의 메일은 이러한 강력한 기능을 두 종류의 윈도우에서 제공한다.

image: ../Art/ds_mailondesktop.jpg

아이폰에서의 메일은 데스크탑에서의 메일의 핵심 기능에 초점을 맞춰서, 사람들이 메일을 수신, 생성, 송신 그리고 관리 하도록 돕는다. 아이폰의 메일은 이러한 응축된 기능을 다음 사항을 포함하는 모바일을 위해 잘 재단된 UI안에서 제공한다 :

  • 사람들의 콘텐트를 전면 중심에 내세우는 간략화한 외관

  • 각각의 테스크를 위해 디자인 된 뷰들

  • 힘들이지 않고 오르 내릴 수 있는 직관적인 정보 구조

  • 필요하면 사용할 수 있는 파워풀한 편집과 관리 툴

  • 액션과 피드백 제공에 사용되는 은은하지만 표현력있는 애니메이션

아이폰에서의 메일 앱은 데스크탑에서의 메일 앱 보다 낫지 않다는 것을 아는 게 중요하다; 그 대신, 이것은 모바일 사용자들을 위해 재디자인된 메일이다. 데스크탑 기능의 서브셋에 집중하고 그것을 매력적인 간소한 UI에 표현한, 아이폰의 메일 앱은, 모바일에서 메일 경험의 핵심을 제공한다.

모바일 컨텍스트에서 메일 사용경험을 적용하기 위해, 아이폰의 메일 앱은 몇 가지 중요한 방향의 UI 혁신을 한다.

뚜렷하고 잘 초점 맞춰진 화면들. 각각의 스크린들은 메일 경험의 하나의 면을 표시한다: 계정 리스트, 메일박스 리스트, 메세지 리스트, 메세지 뷰 그리고 작성 뷰. 스크린에서, 사용자들은 전체 콘텐트를 보기 위해 스크롤해야 한다.

image: ../Art/ds_mailscreens.jpg

쉽고, 예측가능한 네비게이션. 스크린당 한번의 탭을 할 때마다, 사람들은 일반적인 것(계정 리스트)에서부터 구체적인 것(메세지)으로 파고 들어간다.각 화면은 타이틀을 표시해서 사람들이 지금 어디에 있는지를 알려주며, 그들이 온 단계를 추적할 수 있는 뒤로가기 버튼을 표시한다.

단순하고, 탭 가능한 컨트롤들이 필요한 순간에 사용가능하다. 메세지를 작성하고 새로운 메일을 확인하는 것은 주요한 기능으로서 사람들이 어떤 컨텍스트에 있더라도 할 수 있기 원한다. 아이폰의 메일은 그것들을 여러 스크린에서 접근 가능하도록 한다. 사람들이 메세지를 볼 때, 회신하기, 이동하기 그리고 버리기는 해당 메세지에서 동작 가능한 것이기 때문에 사용가능하다.

다른 테스크에는 다른 타입의 피드백. 사람들이 메세지를 지우면, 그것은 쓰레기통 아이콘으로 움직인다. 메세지를 보내면, 그 진행단계를 볼 수 있다; 전송이 완료되면, 인식할 수 있는 소리가 들린다. 메세지 리스트 툴바를 보면 잔잔한 텍스트가 메일 박스가 언제 업데이트 되었는지를 한 눈에 볼 수 있다.

iOS에서의 웹 콘텐트

iOS에서의 사파리는 iOS기기에서 탁월한 모바일 웹-보기 경험을 제공한다. 사람들은 경쾌한 텍스트와 선명한 이미지 그리고 장치를 회전시키거나 스크린을 핀치, 탭을 함으로서 뷰를 조정할 수 있는 기능을 즐긴다.

표준에 기반한 웹 사이트는 iOS에서 잘 보인다. 특히나, 플러그-인들을 사용하지 않으면서 장치를 인식하는 웹사이트는 아이폰과 아이패드 양쪽 모두에서 거의 수정없이 멋지게 보인다.

추가적으로, 성공적인 웹사이트는:

  • 페이지 너비가 장치의 너비에 맞춰야 할 필요가 있을때, 장치를 위해 뷰 포트를 적절히 설정한다

  • 고정된 위치를 위한 CSS를 피함으로서, 사용자가 페이지를 줌 하거나 이동하더라도 콘텐트가 화면 밖으로 튀어 나가지 않는다

  • 포인터 기반의 인터렉션에 의존하지 않고 터치 기반의 UI를 가능하게 한다

이따금씩, 다른 수정도 적당할 수 있다. 예를 들어, 웹 앱들은 항상 뷰포트 너비를 적당히 맞추고 iOS 사파리의 UI를 숨긴다. 그런 수정을 하는 법을 공부하고 싶으면, Safari Web Content Guide“Configuring the Viewport”“Configuring Web Applications”를 본다.

웹사이트는 다른 방법을 통해서도 데스크탑 웹 경험을 iOS의 사파리에 적용할 수 있다:

iOS 사파리의 키보드에 맞춘다. 키보드와 폼 어시스턴트가 함께 나타나게 되면, 아이폰의 사파리는 URL 텍스트필드 아래에서부터 키보드와 폼 어시스턴트 위의 영역까지만 당신의 웹페이지를 표시한다.

iOS 사파리의 팝업 메뉴 컨트롤에 맞춘다. 데스크탑의 사파리는, 많은 수의 아이템이 있는 팝업 메뉴를 OS X 앱들이 하는 것처럼 표시한다; 즉, 메뉴는 모든 아이템들을 표시하기 위해 열리고, 필요하다면 윈도우의 경계선을 넘어서까지 확장된다. iOS의 사파리는 팝업 메뉴는 네이티브 요소를 통해 표시되며, 보다 나은 사용자 경험을 제공한다. 예를 들어, 아이폰에서, 팝업메뉴는 사용자가 선택할 수 있는 선택지의 리스트인 피커에 의해 표시된다.(피터 컨트롤에 대해 보다 더 알고 싶으면, Picker를 보라)