XSS 공격에 취약합니다. 악의적인 스크립트를 가지고 있는 사이트를 띄울 수 있다고 합니다. 물론 이래저래 공격을 피하는 방법으로 여러가지 방법이 제시되어 있긴합니다
외부 스타일 적용이 어렵습니다. 특히 height 값이 마음대로 조작되지 않는다고 합니다 (스크롤이 자동으로 생성됨) 제이쿼리로 해결하는 방법이 있다고는 하지만 매우 번거로운 것 같습니다
웹 크롤링 문제. iframe으로 불러온 소스는 숨겨져 있어서 찾기가 어렵습니다.
접근성, 사용성 저하 문제. 프레임 구조의 문서는 제목을 프레임 셋 본체의 <title> 제목으로 보여주기 때문입니다. 검색 엔진에 등록시 프레임셋 뿐만 아니라 메뉴용, 콘텐츠용 페이지들까지 함께 크롤링이 되는데, 경로로 들어가면 프레임에 넣어서 표시하도록 만든 페이지만 뜨게됩니다.
사용할 수 없는 영역(상단바, 둥근 화면 모서리)을 피하기 위한 안전영역(safe area) 추가
큰 네비게이션 타이틀을 사용할 수 있게 됨
홈 화면 진입, 앱 전환 제스처와 충돌하지 않도록 제스처 사용
위 사항들은 아이폰X가 출시되면서 앞으로 iOS 앱 디자인을 할 때도 유의해야 하는 중요한 UI 가이드입니다. 하단에서 더욱 자세히 살펴보기로 하겠습니다.
Size
아이폰X의 세로모드의 경우, 디스플레이 너비는 아이폰 6,7,8의 4.7인치 디스플레이 너비와 동일하며, 높이는 4.7인치 디스플레이보다 145pt 더 큽니다. 이 것은 기존보다 콘텐츠를 위한 공간이 약 20% 더 늘어 난 것을 의미합니다.
그리고 위 표에서 보는 것과 같이 아이폰X는 배율이 3배(@3x)인 고해상도 슈퍼 망막 디스플레이를 사용합니다.
기존의 포토샵과 같은 툴을 이용하여 디자인을 하시는 분들이라면 아이폰X는 3배수 이미지를 사용한다는 점을 유의하면서 디자인을 하셔야겠습니다.
아이폰X Cutout (notch)
아이폰X는 전면 상단 카메라, 스피커, 마이크 및 새로운 얼굴 ID 센서를 수용하기 위해 화면 상단에 컷 아웃(notch)이 있습니다.
Safe Area
안전영역(safe area)은 원래 TV OS에서 처음 도입된 개념으로 컨텐츠가 가리지 않는 것이 보장되는 영역입니다. 아이폰 X이 등장하면서 안전영역을 폰에서도 사용하게 되었습니다. 디자인할 때 주요 콘텐츠와 버튼이 이 영역을 벗어나지 않도록 해야 합니다.
iPhone X를 디자인할 때 화면을 채우는 디자인 레이아웃이 장치의 둥근 모서리, 센서 하우징 또는 홈 화면에 액세스하기 위한 표시기로 가려지지 않도록 해야합니다.
탐색 막대, 표 및 모음과 같이 시스템에서 제공하는 표준 UI 요소를 사용하는 대부분의 응용 프로그램은 장치의 새로운 폼 팩터에 자동으로 적응합니다. 배경 이미지는 디스플레이의 가장자리까지 확장되며 UI 요소는 적절하게 삽입되고 배치됩니다.
커스텀 된 레이아웃이 있는 앱의 경우, 자동 레이아웃과 안전 영역 및 여백 레이아웃 가이드를 준수했다면 iPhone X를 지원하는 것이 상대적으로 쉽습니다. 자동 레이아웃(Auto Layout)에 관련해서는 하단에서 다시 살펴보겠습니다.
다음은 안전영역(Safe Area) 및 아이폰X 디자인을 할 시 참고할 유의사항입니다.
전체 화면 경험을 제공하십시오.배경이 디스플레이의 가장자리까지 뻗어 있고 테이블 및 컬렉션과 같이 세로로 스크롤 가능한 레이아웃이 맨 아래까지 계속 이어져 있는지 확인하십시오.
상태 표시 줄 높이에 주의하십시오.iPhone X에서 상태 표시줄은 다른 iPhone보다 높습니다. 시스템의 양호한 모습을 유지하기 위해 Apple은 iPhone X의 상태 표시 줄 높이를 20pt에서 44pt로 두 배 늘렸습니다. 그리고 스마트 폰의 둥근 모서리 화면으로 이동했습니다. 이를 고려하여 사용자의 디바이스를 기반으로 콘텐츠를 유동적으로 배치하도록 앱을 업데이트해야 합니다. 음성 녹음 및 위치 추적과 같은 백그라운드 작업이 활성화되어 있어도 iPhone X의 상태 표시줄의 높이는 변경되지 않습니다.
현재 디자인된 앱이 상태 표시줄을 숨기고 있다면 iPhone X디자인에 대한 결정을 재고하길 요청합니다. 상태 표시줄에는 사람들이 유용하다고 생각하는 정보도 표시되기 때문에 이 정보는 부가 가치에 대한 대가로만 숨겨져 있어야 합니다. iPhone X 의 표시 높이는 4.7 “iPhone보다 더 많은 수직 공간을 제공하며 상태 표시줄은 앱과 상관없는 화면 영역을 차지합니다.
Auto Layout
아이폰 6와 6+가 출시된 이후 기존과 비교하여 가장 크게 변화한 점은 아무래도 iOS의 디스플레이 크기가 다양해졌다는 점일 것입니다. 이런 변화로 인해 그 전에 좌표와 크기로 작업하던 방식으로는 다양한 디스플레이 사이즈에 대응하기 어렵다는 결론에 도달한 apple은 Adaptive layout (Auto layout) 에 대한 지원을 하게 되었습니다.
자동 레이아웃(Auto Layout)은 구성요소들 간의 관계를 ‘규칙’으로 정의해서 화면 크기가 변경되더라도 적용되게 하는 방법입니다. 이제는 이러한 자동 레이아웃을 이용하여 아이폰6, 6+ 이후 iOS 시리즈, 아이폰X까지도 상대적으로 쉽게 지원할 수 있습니다.
많은 앱이 특정 너비와 높이 또는 비율에 따라 콘텐츠를 배치합니다. 하지만 아이폰X의 화면 높이와 비율은 다른 아이폰장치와 다르죠. 그렇기 때문에 아이폰X에서는 콘텐츠의 크기가 올바르게 조정되었는지 확인이 필요합니다.
그리고 가로 방향으로도 앱을 테스트해야 합니다. 대부분의 문제는 가로방향에서 나타나기 때문입니다. 기기가 왼쪽, 오른쪽으로 회전된 모든 상태를 테스트합니다.
iPhone X디자인 가이드 라인 따르기
이미 언급했듯이 화면의 둥근 모서리와 함께 노치 (notch) 때문에 앱의 콘텐츠가 잘릴 수 있습니다. iPhone X 용으로 디자인할 때 이 노치영역을 주의해야 합니다. 이 목적을 위해 Apple은 안전 영역 가이드를 작성하고 이를 손상시키지 않으면서 앱에 콘텐츠를 배치하는 방법을 알려주었습니다. 앱의 배경이 가이드를 따르지 않아야 한다면 버튼, 그림, 텍스트 등과 같은 다른 콘텐츠가 반드시 있어야 합니다.
휴대 전화를 가로 모드로 전환하면 콘텐츠에 최대 공간을 제공하기 위해 상태 표시줄이 숨겨집니다.
모든 앱이 iPhone X 가로 모드의 이점을 필요로하지는 않지만 사실상 그 사용법에 대한 시나리오는 여전히 남아 있습니다. 예를 들어 사진, 비디오, 텍스트와 같은 다양한 종류의 콘텐츠를 전체 화면으로 볼 때 적합합니다. 그리고 게임이 있습니다. 사용자가 iPhone X와의 상호 작용을 끝내면 가로로 바뀌므로 세로 모드로 쉽게 전환할 수 있어야 합니다.
Apple은 표준 UI 요소 (예 : 테이블, 탐색 모음 등)를 사용하는 앱이 새로운 폼 팩터에 자동으로 적응하기 때문에 괜찮을 것이라고 확신합니다. 맞춤 레이아웃을 사용하는 앱의 경우 자동 레이아웃이 적용되고 ‘iPhone X 안전 영역을 따라 여백 가이드’가 있는 경우 가로 모드 적응이 비교적 쉽습니다.
기존 앱을 아이폰X용으로 업데이트하려면 먼저 배경 이미지를 포함한 asset을 PDF로 업데이트하거나 @3x이미지를 추가해야 합니다. 그리고 안전 영역을 켜서 안전 영역 레이아웃 가이드에 맞춰 수정합니다. (안전 영역 레이아웃 가이드는 위쪽, 아래쪽 및 가장자리 구속조건을 변경하므로 이 부분을 확인하고 필요한 경우 수정하세요.)
만약 세로 스크롤이 있는 경우, 안전 영역 가이드에 맞춰 오토 레이아웃을 통해 기존의 앱을 아이폰X용으로 빠르게 대처할 수 있지만, 한 화면에 전체 배경 이미지 소스가 들어가는 경우 아이폰X를 위한 디자인을 업데이트 해야 할 것 같습니다.
컨트롤은 모서리, 센서 하우징에서 멀리 이동해야 합니다. 기존의 Touch ID는 물리적 홈버튼이 없는 아이폰X에서는 사용할 수 없으므로 Face ID로 대체 가능하게 해야 합니다. 모든 사항을 수정한 후에는 아이폰X 시뮬레이터에서 앱을 빌드하여 실행하고 각각의 레이아웃 구성을 하나씩 확인해야 합니다.
새로운 디바이스가 출시 될 때마다 개발자와 디자이너가 고려해야 할 사항들이 추가되고 있습니다. 그리고 더욱 편리하기도 때로는 더욱 힘들기도 한 것 같습니다. 다음 아이폰 시리즈는 어떤 디자인일까요? 아이폰X과 같은 디자인일까요? 아니면 새로운 시도의 디자인 혹은 기존의 아이폰시리즈로 돌아갈까요?
