1. iOS Human Interface Guidelines
번역자 : 시스포유아이앤씨 마영희 주임
번역일 : 2013년 4월 5일
IV. 변화사례 연구
새로운 어플리케이션을 만들 때, 기존의 어플리케이션 또는 새로운 플랫폼 및 장치의 일부분을
가져오길 원할지도 모른다. 하지만 몇몇의 경우에는 어플리케이션이나 새로운 플랫폼 및 장치를
모두 삭제하고 시작하는 것보다 더 어려울 수 있다. 또 다른 경우에는 새로운 환경에서 몇 단계
를 거쳐 작업을 하는 것이 더 좋다. 당신의 프로젝트가 크건 작건, 프로젝트를 위한 좋은 방법은
같은 방식으로 만든 다른 제품의 사례를 연구하는 것이다.
1. 데크스탑과 iOS장치간의 변화
당신의 소프트웨어를 데스크탑에서 iOS플랫폼으로 가져올 때 사람들이 iOS 장치를 쓰는 방식을
잘 봐야 한다.
 사람들은 산만한 공간을 이동 중에 iOS장치를 많이 사용한다. 사람들을 끌어당기고, 빠르
게 컨텐츠를 얻게 하고, 컨텐츠에 집중할 수 있도록 만드는 것이 당신의 일이다.
 잘 알려진 80~20 법칙을 따라야 한다. 80%정도의 사람들은 어플리케이션의 일부분의 기
능만 사용하고 나머지 20%정도의 사람들만이 어플리케이션의 모든 기능을 사용한다. 대
부분의 iOS어플리케이션의 모든 기능은 필요가 없다. 일부분의 사용자에게만 필요하다.

2. 1) 데스크탑에서 iPhone로 메일 보내기
메일은 OS X의 어플리케이션에서 가장 사용빈도가 높은 것 중에 하나이다. 또한 사용자에 의
해 수신 우선 순위 및 스토어 메일, 작업 항목 및 이벤트를 추적하고 메모나 초대장을 만들
수 있는 매우 강력한 프로그램이다. 두 개의 창 모드에서 강력한 기능을 제공한다.
iPhone에서 메일은 데스크탑 메일에서 핵심적인 기능인 받기, 쓰기, 보내기 그리고 메시지를 정리
하기 등을 중점적으로 제공하고 있다. iPhone에서 메일은 다음의 모바일 경험을 포함한 UI에 기
능을 압축하여 제공한다.
 합리적인 외관
 각각의 작업에 맞는 화면
 직관적인 정보구조
 강력한 편집 및 정리 도구
 커뮤니케이션과 피드백을 위한 풍부한 애니메이션

3. iPhone의 메일이 데스크탑의 메일보다 더 뛰어난 어플리케이션은 아니다. 그것은 단지 모바일
사용자들을 위해 재설계된 것일 뿐이다. 그들이 모바일을 통해 메일을 사용 할 때 iPhone의
메일은 데스크탑의 핵심적인 기능과 매력적인 UI에 그들이 집중하게 한다. 데스크탑에서 메일
을 사용하는 경험을 모바일에 적용하기 위해서는 iPhone의 메일은 다음의 몇 가지 UI를 사용
해야 한다.
고유하고 집중도 높은 화면. 각각의 화면에는 한가지 외관을 표시한다.
-계정 목록 사서함 목록, 메시지 목록, 메시지보기 및 컴포지션 화면
쉬운 검색. 화면당 한 개의 탭을 만든다. 각각의 화면에는 이전단계로 돌아 갈수 있는 돌아가
기 버튼이 있어야 한다.
간단하고, 누를 수 있는 컨트롤, 필요할 때 사용할 수 있는 것. 새로운 메일이 왔을 때 사람들
은 내용을 알 수 없기 때문에 iPhone의 메일은 다중화면의 제공하여 내용을 확인 가능하게 한
다. 사람들은 메시지에 따라 행동하기 때문에 가령 응답, 이동, 휴지통 등의 기능을 이용 가능
하다.

4. 작업에 따라 피드백의 유형도 다르다. 사람들이 메시지를 삭제할 때 휴지통 아이콘을 사용한다.
사람들이 메시지를 보낼 때는 진행상황을 볼 수 있다. 메일 보내기가 완료될 때는 소리가 알려
준다. 메시지 목록 도구상자에 텍스트를 봄으로써 사람들은 메일의 최신 업데이트 상황을 볼 수
있다.
2)데스크탑의 Keynote에서 iPad의 Keynote로
데스크탑의 Keynote는 세계적인 수준의 슬라이드 프리젠테이션을 만들기 위한 강력하고 유연한
어플리케이션이다. 사람들은 정확한 내용, 세부적인 제어 및 사용자 편의성을 결합한 방식을 선호
한다. 가령, 애니메이션이나 텍스트 속성 같은 것들이 있다.
다음 사항을 통해 iPad에서의 Keynote는 데스크탑의 Keynote의 본질을 잘 파악하고 만들어야 한
다.
 사용자 컨텐츠에 집중하라.
 성능의 손실 없이 복잡함을 줄여라
 도움을 주는 단축키를 제공하라.

5.  데스크탑의 경험과 유사하게 만들어라
 설득력 있는 애니메이션을 통해 피드백을 제공하라
Keynote의 사용자들은 기존의 iPad 패러다임과 유사한 기능을 제공하기 때문에 어플리케이션을
빠르게 이해하고 사용한다. 신규 사용자들은 간단한 방법으로 컨텐츠를 다루기 때문에 iPad에서
Keynote사용을 쉽게 배울 수 있다. 데스크탑에서 iPad로의 Keynote 변환에는 많은 수정과 재설계
가 필요하다. 여기 몇 개의 확실한 적용법이 있다.
간소화된 도구상자. 도구상자에는 오직 7개의 항목만이 존재한지만, 그들은 사용자가 콘텐츠를 만
드는 데 필요한 모든 기능과 도구와 일관된 액세스를 제공한다.
사용자 초점에 응답하는 간단한 관리자. 관리자는 자동으로 사람들은 선택한 개체를 변경하는 데
필요한 도구와 속성이 포함되어 있다. 사용자들은 관리자 보기에서 필요한 모든 것을 변경 할 수
있다. 자주 변경되는 속성을 변경해야 할 경우, 또 다른 관리자 보기를 볼 수 있다.
많은 양의 사전 제작된 스타일 모음. 사람들은 사전 제작된 스타일 테이블을 통해 객체의 변화를

6. 쉽게 보고 느낄 수 있다. 색상 이외에 각 컬렉션은 전체적인 테마에서 작동하도록 설계되어 같은
테이블의 제목이나 축 분할 부호 등 사전 제작 스타일 속성이 포함되어 있다.
컨테츠를 직접 조작할 때 의미 있는 충분한 애니메이션 동반. iPad의 Keynote에서 사용자들은 슬
라이드를 드래그 하여 새로운 위치에 놓거나 돌려서 회전하거나 두드려서 선택할 수 있다. 직접
조작 효과는 iPad의 Keynote 애니메이션 반응을 통해 강화되었다. 예를 들어, 사용자가 슬라이드
를 새로운 장소로 이동시킬 때 주변 슬라이드는 물결치며 만들어진 공간으로 이동한다.
3)데스크탑 브라우저에서 iOS의 Safari로
iOS의 Safari에서는 iOS장치의 탁월한 모바일 웹 시각경험을 제공한다. 사람들은 장치를 회전시키
거나 화면을 눌러서 볼 때 조정하는 기능과 명확한 글씨와 이미지 등에 만족하고 있다. 표준 기
반의 웹사이트는 iOS장치에서 잘 나타난다. 이와 다르게 plug-in을 사용하지 않은 웹사이트는
iPhone과 iPad에서 변조되어 나타나게 된다.

7. 대부분의 성공적인 웹사이트는 다음과 같다.
 페이지의 폭이 장치의 폭과 일치 해야 하는 경우에는 장치에 따라 적절하게 뷰 포트
를 설정한다.
 CSS를 통한 고정위치는 피하고, 사용자가 확대할 때 화면 밖으로 이동하지 않게 한다.
 포인터 기반이 아닌 터치기반의 UI을 활성화 한다.
때로는 또 다른 수정이 적합할 수 있다. 예를 들면, 웹 어플리케이션은 항상 올바르게 뷰포트의
폭을 설정하고 iOS의 Safari의 UI를 숨길 수 있다. 이러한 변경 방법에 대한 자세한 내용은 "뷰포
트의 설정"을 참조하면 된다. Safari 웹 컨텐츠 가이드의 "웹 어플리케이션 구성"을 참조 하면 된
다.
웹사이트는 다른 방법으로 iOS의 Safari에 데스크탑 웹 경험을 적용한다.
적절한 UI 제공을 위해 사용자지정 CSS를 사용한다. 각각의 환경에 맞는 적합한 UI요소를 사용
할 수 있다. Apple 웹사이트에 있는 사용자들이 볼 수 있는 트레일러 영상 페이지를 예로 들어보
겠다. 데스크탑의 Safari에서 사용자는 추가 트레일러를 보기 위해, 숫자 또는 이전 및 다음 컨트
롤을 클릭 할 수 있다.
iPhone에서 다음, 이전, 그리고 숫자 컨트롤은 눈에 잘 띄고 사용하기 쉬운 버튼형식으로 교체되
었다.
.

8. iOS의 Safari의 키보드는 다루기가 쉽다. iPhone의 Safari에서 키보드와 양식도우미가 표시되는 경
우 URL영역 아래쪽에 표시된다.
Note: 고해상도의 iPhone와 iPod touch의 경우 다음에서 보여지는 값의 두 배로 나타난다.

9. 키보드와 양식 도우미가 표시되지 않을 경우, 추가적으로 사용할 수 있는 수직공간이 216픽셀이
있다. 가로형 화면에서는 키보드 높이가 162픽셀 양식도우미 높이가 32픽셀로 달라진다.
iOS의 Safari에서는 팝업 메뉴 컨트롤이 적용된다. 데스크탑의 Safari에서 팝업메뉴는 수많은 OS
X어플리케이션 아이템을 포함하고 있다. 즉, 메뉴는 필요에 따라 윈도우 경계를 넘어 확장하고 모
든 항목을 표시하기 위해 열린다. iOS의 Safari에서 팝업 메뉴는 더 나은 사용자 경험을 제공하는
기본 요소를 사용하여 표시된다 예를 들면 iPhone의 팝업메뉴는 아래그림에서 보는 것과 같이 목
록을 찍어서 고를 수 있게 나타나게 된다.

10. iPad에서 팝업 메뉴는 아래그림과 같이 보여진다.

11. iPhone의 웹 어플리케이션에서 데이터를 표시하기 위해 목록을 사용한다. iOS 사용자는 기존의
어플리케이션 목록에 익숙하기 때문에 그들이 웹 어플리케이션 목록을 볼 때, 웹 컨텐츠가 어플
리케이션이라고 생각 할 수도 있다. iPhone에서 목록은 각이 있거나 둥근 사각형으로 되어있다.
각각의 스타일은 명확한 측정기준이 있다.