1. iOS Human Interface Guidelines
번역자 : 시스포유아이앤씨 마영희 주임
번역일 : 2013년 4월 12일
2. iOS장치 간의 변화
사람들은 모든 어플리케이션이 자신의 iOS장치에서 실행되길 바란다. 각각의 어플리케이션 버전
이 장치들의 특징을 잘 활용하는지를 가능한 많이 확인 해야 한다.
1)iPhone에서 iPad로 메일 보내기
메일은 iPhone 최고의 내장 어플리케이션이다. 사람들은 많은 양의 정보를 사용하기 쉽게 화면에
정리한 것을 높이 평가한다.
iPad에서 메일은 같은 핵심기능을 제공한다. 사람들의 메시지 현실적인 터치 그리고 항상 사용 가
능한 강력한 정리 및 편집 도구 등을 동시에 화면에 제공한다. 단일 화면의 시각적 안정성은 최
소한의 변화로 사람들이 필요로 하는 공간 안에서 잘 정리하여 제공한다.
2. iPhone의 메일과 iPad의 메일의 다른 점은 각각의 장치마다 다른 사용자 경험을 반영한다는 점이
다.
iPhone에서의 메일은 사람들이 줄 서있거나 회의를 할 때 사용하기 편하게 만들어졌다.
iPad의 메일은, 사람들은 이동 중에 사용하기에 충분한 효율적이지만, 그 경험은 보다 세
밀한 사용을 권장하고 있다.
비록 iPad 메일을 장치에 사용자 경험을 맞춘다고 하더라도, 사람들이 사용하는 핵심적인 기능을
바꾸거나, 무의미하게 위치를 바꾸거나 개인적인 기능을 넣거나 할 수 는 없다.
iPhone의 사용자들은 iPhone와 iPad의 도구모음 및 사서함 구조가 실질적으로는 같기 때문에 그
것들을 사용하는 방법을 빠르게 인지할 수 있다. 모바일 이메일 경험을 강화하기 위해서 iPad에서
메일은 iPhone의 메일 UI를 진화시키는 중요한 방법이 있다.
장치 방향의 확장지원. 사람들은 iPad에서 4가지 방향 어디로든 메일을 사용할 수 있다. 가로방향
레이아웃과 세로방향 레이아웃은 다소 다르지만 핵심은 사용자에게 도움을 줄 수 있는 컨텐츠와
기능이다.
3. 메시지 내용 증가에 초점을 맞추고 있다. iPad의 메일은 모든 방향으로 현재 메시지를 위해 대부
분의 화면을 남겨 두고 있다. 메시지 내용에 사용할 수 있는 수직 공간을 늘리기 위해 메시지 뷰
상단에 도구 상자를 이동한다. 여분의 공간으로 인해 사람들은 적은 스크롤로 메시지 내용을 읽
을 수 있다. 그리고 사람들이 세로방향으로 메시지를 보려고 할 때 에도 여전히 메시지의 대부분
을 볼 수 있다.
4. 계층의 평면화. 세분화된 UI요소가 메시지 상위 모든 계층을 제어 함으로써 iPad에서 메일계층이
효과적으로 평면화 된다. 가로화면에서는 이 분할 화면은 왼쪽 창에 영구적으로 나타나고 세로화
면에서는 화면 일부에 볼 수 있도록 했다.
전체 화면의 변화를 크게 줄였다. 계층의 대부분이 독립적인 화면 요소에서 사용할 수 있기 때문
에, 사람들은 단일화면으로 접속할 수 있다. 사람들이 계층을 통해 계정>사서함>메시지 목록 보
기의 하위 수준으로 이동할 때 전제화면 변화가 아닌 일부분만 변화 하게 했다.
현실적인 메시지. 사람들이 메시지의 오타를 삭제할 때 실제 종이와 같은 슬라이드 화면이 보여
진다. 추가적으로 삭제할 때 실제 종이가 쌓이는 모습을 볼 수 있다.
2)iPhone5의 실행
당신은 iPhone에 맞춰서 당신의 어플리케이션을 재설계 할 필요는 없다. 많은 어플리케이션이 기
존의 UI를 사용해도 어울리게 보일 것이다. 허나 일부분은 컨텐츠나 배경을 늘려야 될 필요도 있
다. 가령 게임이나 개인적인 이미지 등의 어플리케이션은 추가적은 작업이 필요할지도 모른다.
5. Note : iPhone5에 실행하는 모든 어플리케이션은 정확한 크기의 초기화면을 포함 해야 한다. iOS
장치를 위한 초기화면 만들기는 “Launch Image”를 통해 배울 수 있다.
iPhone5 디스플레이는 다른 iPhone과 iPod touch 장치의 디스플레이에 비해 세로로 176 픽셀이
크다. 세로보기 화면에서 추가 높이는 표준 테이블보기에 2 개의 행을 추가한 높이와 거의 동일
하다. 예를 들어, iPhone5(오른쪽 아래 그림 참조)에서 실행되는 메시지화면은 iPhone4S에서 실행
되는 메시지화면 보다 긴 대화 영역이 표시된다. (왼쪽 아래 그림 참조).
6. 물론 가로 방향 일 때는 추가적인 176픽셀이 양쪽 측면공간으로 이동하게 된다. 예를 들면
iPhone5에서 메시지를 보낼 때 UI가 늘어나면서 추가적인 가로 공간을 채운다.
위의 메시지 화면이 보여주는 중요한 점은 iPhone5에 적용되어 만들어진 작은 UI도 어떤 방법으
로든 기능을 변화시키면 안된 다는 것이다. 사용자경험의 일관성을 위해 iPhone5의 핵심 디자인
원칙을 따라야 한다. 큰 장치의 화면에서는 많은 컨텐츠를 볼 수 있다. 그러나 어플리케이션의 기
능을 더 들어가 있는 것은 아니다. 당신 어플리케이션의 기능을 변경하는 것은 아니기 때문에 일
반적으로 iPhone5에 알맞은 어플리케이션을 만드는 것은 드물다. 어플리케이션 UI를 설계하기 위
해 자동 레이아웃을 사용하는 경우에는 작업을 수월하게 할 수 있다. 다음 가이드 라인은 당신의
UI를 당신의 어플리케이션에 알맞게 변화 시키는 데 도움을 줄 것 이다.
7. Note : 당신의 어플리케이션을 어떤 변경도 하지 않는다면 그것은 iPhone5호환 모드로 실행될
것 이다. 어플리케이션이 호환모드에서 실행되면 iOS는 상하에 검은색 바를 생성하면서 자동으
로 어플리케이션 UI를 가운데 배치한다. 몇몇의 개발자들은 정확한 초기화면을 새로 만들거나
UI를 바꾸지 않고 iPhone5 화면의 가운데 배치 하는 것이 더 간단할 수 있다고 말했다.
자동적으로 많은 컨텐츠를 나타나게 했다. UI화면 일부가 화면의 하단에 숨겨져 있는 경우
iPhone5에서는 UI를 나타나게 하기 위해 화면높이를 변경할 필요가 없다. 설정화면을 예로 들어
보자. iPhone5에서는 4S보다 추가적으로 더 많은 테이블을 볼 수 있다.
8. 컨텐츠 영역을 늘렸다. 당신이 컨텐츠의 화면을 볼 때 추가적으로 몇몇의 컨텐츠를 더 보기 위해
수직으로 화면확장을 생각할 것이다. 예를 들면 iPhone5에서 메일의 메시지 영역은 4S보다 더 크
다.
컨텐츠 영역 사이의 배경영역을 확장 하였다. 컨텐츠 화면 사이의 수직 공간을 확장 함으로써 당
신의 레이아웃은 좀더 편안하게 보이게 할 수 있다. 예를 들면 iPhone5의 게임센터 화면은 4S보
다 메인 컨텐츠 영역 사이의 배경을 좀더 많이 볼 수 있다.
9. recenter
필요하다면 최신의 시각적인 요소를 사용. 추가 공간에 맞추기 위해서 배경이나 화면을 조정한
후 당신의 UI요소가 알맞게 들어갔는지 확인하고 싶을 지도 모른다. 확인하는 한가지 방법은 화
면의 상단부분을 늘이고 나서 요소를 가운데로 조정하는 하는 것이다. 예를 들면 iPhone5에서 나
침반을 사용자 초점에 유지하고 확장된 배경가운데에 요소들 배치하는 것이다.
사용자 최적화 이미지는 확장해도 새로운 영역에 필수 적인 세부사항을 배치하지는 않는다. 만약
당신의 어플리케이션이 대부분 사용자 최적화 UI를 사용하는 경우(가령, 게임의 경우) 당신은 사
용자가 이미지를 원할 하게 볼 수 있도록 여분의 공간을 주어야 한다. 어플리케이션에서는 모든
사용자들이 추가영역에 배치된 주요기능이나 세부사항들을 볼 수 없을 수도 있기 때문에 선호하
지 않는다. 예를 들면, iPhone5의 음성메모는 4S에서 보다 더 더 많은 마이크 스탠드 이미지를 볼
수 있다.
10. 일반적으로 컨트롤 사이즈를 늘리는 것을 피한다. 만약 당신의 어플리케이션에서 누를 수 있는
가장 작은 크기의 컨트롤을 사용할 때 그것이 44X44포인트 보다 작으면 안 된다. iPhone5에서는
그런 조정이 필요가 없다. 그렇지만 기존 컨트롤 사이에 공간을 추가하는 방법을 선택할 지도 모
른다.
추가적인 Bar나 Banner를 표시 하기 위해 추가 공간을 사용하면 안 된다. 사람들은 iPhone5에서
좀더 많은 컨텐츠를 볼 수 있기를 바란다. 사람들의 기대에 실망을 주지 않기 위해 추가 공간에
개인적인 버튼이나 배너를 넣는 일은 없어야 하겠다.