UI 디자인 기본상식 - iOS
UI 디자이너가 알아야할 모바일 기본상식, iOS
이 글은 UI 디자이너들을 위한 모바일 OS별 기본상식을 정리한 글입니다. 만약 글을 읽는 분이 초심자분이라면, 다음과 같은 맥락의 글을 먼저 읽으시는 것을 추천드립니다.
모바일 UI 디자인을 공부하는 3가지 단계
https://brunch.co.kr/@clay1987/94
UI 디자이너를 위한 모바일 기본상식 - 1편 : 안드로이드
https://brunch.co.kr/@clay1987/154
UI 디자이너를 위한 모바일 기본상식 - iOS
이전 글에서는 UI와 UX가 무엇인지, 모바일 UI 디자인이란 무엇인지. OS는 어떤것이 있는지 등을 알아보았습니다. 또한 안드로이드 OS에 대해서 알아보았는데요, 이번에는 애플의 iOS에 대해 알아보려합니다. 안드로이드보다 사용되는 수는 적지만, 높은 완성도와, 폐쇄적이며, 어찌보면 매니악할 수 있는 특이한 모바일 OS입니다.
사실, iOS를 이렇께 따로 다루는 이유는 몇가지가 있지만, 어떤 OS를 기본으로 해서 배우느냐에 따라서, 다른 OS를 배우는 난이도가 어려울수도, 쉬울 수도 있기 때문입니다. ( 개인적으로는 안드로이드의 복잡한 OS 디자인에 대해서 배우는 것이 더 유리하고, 추후의 사용 빈도도 높아 도움이 된다고 봅니다.) 이 글은 안드로이드에 상대적으로 다른 iOS의 특징에 대해서 설명하게 될 겁니다.
애플의 iOS
iOS는 애플이 만든 고유한 모바일 OS입니다. OS나 모바일 OS에 대한 이해는 다 되셨죠? 이제부터 보게될 애플의 OS는 안드로이드에 비해 상당히 특이한 점이 많습니다. OS의 역사로 치면 안드로이드에 비해 더 일찍 나온 OS이지만, 실제로 더 많이 쓰이고있느냐에 대해서 묻는다면. 전 세계적으로 안드로이드와 1~2위를 다투는 사이라고 생각할 수 있습니다. iOS는 고급스러운 디자인과, 폐쇄적인 시스템, 잘 짜여진 논리구조 등으로 명성이 높은 애플의 작품입니다. 그렇다보니 '개방적이고, 개발자나 디자이너에게 많은 자유도를 부여하며, 때로는 무책임하기까지 한' 안드로이드와는 그 성격이 정 반대라고 생각할 수 있습니다.
사실상 iOS는 스마트폰의 시초라고 할 수 있는 애플이 만든 첫 스마트폰 OS이며. PC 세대때부터 마이크로소프트와는 정 반대의 정책으로 항상 자신만의 높은 퀄리티와 고급 브랜드 이미지를 유지해온 역사가 있습니다. 또한 높은 디자인적 수준과, 하드웨어 (스마트폰 기기)와 OS의 밀접한 통합으로 인해 높은 시너지를 내고있는 OS입니다. 추후에 OS의 역사에 대해서 공부해보시려하신다면, PC 세대에서 애플의 맥과 마이크로소프트의 PC 시대. 웹의 등장 때부터 공부해보시면 매우 도움이 되실 겁니다.
애플의 iOS, 휴먼인터페이스 가이드라인
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
iOS의 특징
iOS는 애플 전용 OS
안드로이드의 경우 OS는 구글이 만들었지만 실제 기계는 어느 제조사에서 만들었더라도 서로 복합 사용이 가능한 형태입니다. 그러나 애플의 iOS는 절대로, 다른 기기에서 구동이 불가능합니다. 그렇기 때문에 iOS는 안드로이드에 비해 '폐쇄적'이라는 평가를 듣기도 하며, 동시에 '하드웨어와 소프트웨어 (OS)의 완성도가 매우 높다'라는 찬사도 함께 듣습니다. 애플에서 만드는 휴대용 기기는 아이폰 시리즈와, 아이패드 시리즈가 전부이기 떄문에. 해당 기기들의 해상도와 대응법만을 알아두시면 사실상 iOS에 대해서는 걱정할 일이 없다고 할 수 있습니다. (저는 iOS의 이해가 쉽기 때문에 반대로 안드로이드부터 배워야 할 필요가 있다고 봅니다. 너무 간단한 대응방법에 익숙해지면 추후에 안드로이드를 배우기가 힘들어지거든요.)
애플에서 현재 통용되고있는 기기들의 종류는 다음과 같습니다.
이제는 왠만한 안드로이드보다 화면 크기가 제각각이된 iOS스마트폰 : 아이폰 5 (5c, 5s) / 아이폰 6 (6s, 6+) / 아이폰 SE / 아이폰 7(7+) / 아이폰 8 (8+) / 아이폰 X / 아이폰 XS (Xs Max) / 아이폰 XR
타블렛 : 아이패드 (3,4,5,6세대) / 아이패드 에어 1,2 / 아이패드 미니 (2,3,4) / 아이패드 프로 1,2,3세대
뭔가 엄청 수가 많아서 복잡해보이지만, 실제로는 알아야할 내용만 알면 -나머지는 개발자들이 알아서 화면배율을 다르게 만들어주니. 별로 신경은 쓰지 않으셔도 됩니다.
iOS의 특징
iOS는 뒤로가기 물리버튼이 없다
실제로 아이폰 / 아이패드에는 누를 수 있는 물리버튼이 '홈 버튼' 뿐이었습니다. 그러나 그나마도 최근 들어서는 사라져버렸죠. 볼륨조절이나 전원종료 키를 제외한다면, 화면상의 버튼으로 모든 앱이 동작해야한다는 겁니다. 안드로이드 기기에 익숙해있는 우리에게, 아이폰 / 아이패드에 있는 단 하나의 물리 버튼이란 사실상 절망적일수도 있습니다. 그렇다면 대체 이 한계를 어떻게 극복할까요?
iOS의 앱들은 모두 앱 좌측 상단 끝 부분에 '뒤로가기' 버튼을 제공하게 되어있습니다. 혹은 기본적으로 뒤로가기 버튼을 사용하지 않아도 되는 깔끔한 논리적 로직을 기반으로 앱을 만들기를 원하는 겁니다. 이 부분이 안드로이드와는 가장 큰 차이라고 할 수 있습니다. 하드웨어에서 지원하는 뒤로가기 버튼이 없기 때문에. 앱 상단의 좌측에는 항상 '뒤로가기' 버튼이 들어갈 수 있다는 사실을 기억해두어야합니다.
iOS의 특징
레티나 디스플레이
레티나 디스플레이의 '레티나'라는 말은 인간의 각막을 뜻하는 말이며. 실제적인 의미는 애플의 기본 해상도를 기준으로 '2배'의 밀도 (DPI)를 지원한다는 의미입니다. 과거에는 비 레티나 해상도인 기기와, 레티나 해상도인 기기가 따로 있었으나. 최근에는 그 구분이 거의 무의미해졌습니다. 최근에 이르러서는 왠만한 아이폰 기기들이 화면 밀도가 매우 높은 상태기 때문에. 이런 '키워드가 있다'는 정도만 기억해두시면 될것같네요.
해상도의 밀도가 높을수록 선명한 화면을 제공할수 있습니다 PS. 아이패드 미니의 경우 레티나 / 비 레티나 디스플레이의 차이가 있는 편입니다. 그러니 패드에 관련된 내용을 공부하실 때에는 조금 의미가 있는 내용이긴 하겠네요.
iOS의 특징
iOS 7을 지원하지 않는 기기는 잊어버리세요
iOS 7은 사실상 애플의 전환기라고 불려도 될 만큼, OS의 스타일에 큰 차이가 있었습니다. 기존의 iOS 6 이전 버전이 '사실적인 물체들을 따라하는' 디자인 컨셉이었다면. iOS 7 부터는 플랫 / 미니멀디자인이라고 불려도 좋을 만큼 사실적인 이미지 사용이 줄고, 단순하고 간단한 색 / 아이콘의 사용이 주를 잇게 되었습니다. (수년간 이어오던 디자인 컨셉이 엄청나게 변화하기 때문에, 아이폰의 iOS는 6버전과, 7 버전 이후의 OS를 모두 경험해보시기를 추천드립니다.)
iOS는 7.0 버전에서 디자인적으로 큰 변혁기를 맞았습니다아이패드는 아이패드 1세대 / 아이폰은 3(3GS) 모델 이전의 모델에 한해 iOS 7을 공식적으로 지원하지 않습니다. 그리고 이런 오래된 기기들은 더이상 디자인을 위해 고려하실 필요가 없습니다. 그러니 OS를 공부하실때는 서비스를 지원해야할 기기 공식 범위를 찾아보는게 좋습니다.
iOS의 특징
iOS 11, 또 하나의 경계선
iOS 11은 여러 신규업데이트 내용들이 많이 추가된 OS 버전입니다. 또한 아이폰 5S 이전의 제품들을 모두 정리하려는 애플의 전략이기도합니다. 기업마다 계속해서오래된 기기를 지원해야할수록, 유지보수가 많아지는게 가장 큰 이유입니다. 또한 해당 OS 자체가 갖고있는 하드웨어 성능이 떨어져, 신규 서비스를 원활히 제공하기 어려워지는 부분도 한몫 합니다. 사실상 11 이상을 지원하지 않는 기기들은 비 주류라고 보고 - 더이상 개발 업데이트를 위해 신경을 쓰지 않아도 될 가능성이 높습니다.
iOS 11 지원 대상에서 빠지는 애플 기기 목록
http://www.itworld.co.kr/news/105396
iOS의 특징
기기별 해상도 차이
iOS의 해상도는 - 아이폰 6를 제외하고는 모두 안드로이드와 해상도값이 다릅니다. px 기준으로 보더라도 1920 x1080을 제외한 사이즈에서는 - 픽셀값이 모두 깔끔하게 떨어지질 않죠. 물론 요즘은 제플린 플러그인의 등장으로. 이런 세세한 해상도에 대해서는 고민할 필요가 없어진 상태입니다. 다만 해상도가 계속해서 커지고있는데다, 아이폰 X의 노치 디자인의 등장으로. 해당 폰을 위한 개별 화면을 제공해야하는 등의 문제가 생기고있습니다. 기존에는 배율만 생각하면되는게 아이폰이었는데, 점점 더 복잡해지고있네요.
iOS 디자인가이드를 위한 - 사설 업체의 정리본입니다. iOS 공식 내용보다 훨씬 보기 편합니다.
https://ivomynttinen.com/blog/ios-design-guidelines
iOS의 특징
아이폰 / 아이패드용 앱을 따로 만들어야한다고?
안드로이드의 경우 타블렛용 앱과 스마트폰용 앱의 지원이 꽤나 수월한 편입니다. 때로는 플레이스토어 내에서 두가지 앱의 구분이 따로 없이, 설치했을 때 - 사용자의 기기가 타블렛인지, 스마트폰인지를 구분해서 지원가능한 앱을 설치해줍니다. 그러나 iOS의 경우 아이패드(미니) 전용 앱과 아이폰용 앱을 엄격하게 구분해서, 각 기기별 해상도에 맞춘 전용 앱을 따로 만들거나, 두가지를 함께 만들지 않으면 앱스토어에 올릴 수 없게 되어있습니다. 이 점이 iOS의 앱 개발시 가장 중요해지는 부분 중 하나입니다. 그렇기 때문에 디자인에 있어서, 배치와 UI 구성이 다른 또 하나의 앱을 만들어야하는 상황에 놓일 수도 있습니다.
아이패드 미지원 앱을 열면 이런식의 화면이 나옵니다.아이패드와 아이폰의 구성은 안드로이드에 비해 높은 요구사항을 가지고있기 때문에, 애플의 이미지가이드를 여러번 읽고, 권장사항에 맞춰 디자인해야합니다. 아이패드용 앱을 지원하지 않는 아이폰용 앱의 경우, 설치시 - 아이패드에서 '비 레티나' 해상도의 아이폰 가상 머신이 등장해 아이폰 해상도에 맞는 크기로 동작이 됩니다. 단언컨데 결코 아이패드에선 사용하기가 편리하지 않은 구조입니다.
iOS의 특징
iOS에는 나인패치 (9patch) 규격이 없다
말 그대로, iOS에서는 나인패치 규격이 없습니다. 나인패치는 안드로이드 전용의 독특한 규격이거든요. 다만 iOS에서도 나인패치를 대신하는 개념으로, '반복될 이미지를 개발자가 직접 지정하여 반복시키는' - 기능이 있습니다. 그러나 이 경우는 나인패치와는 다르게 개발자가 직접 그 영역을 지정해야한다는 점이 가장 큰 차이점입니다. 반복될 부분이 단순한 색상이어야하는 부분은 나인패치와 동일하며, 로고나, 사진, 아이콘처럼 반복될 수 있는 영역이 없는 경우는 해당 방법을 사용할 수 없습니다.나인패치와 동일해보이지만, 나인패치 툴을 통해 편집하기 전의 이미지를, 그대로 png와 같은 규격으로 전달하여 개발자와 상의하면 - 그 소스를 직접 반복하여 늘여붙이는 방식입니다.
마무리
모바일 디자이너가 iOS에 대해서 알아야할 부분은 일단 여기까지입니다. 디자인은 디자이너가 제일 잘안다는 말은 IT와 모바일 업계에서는 반만 맞는 이야기입니다. 개발자의 생각의 방식이나, 작업방식에 대해서 이해를 하지 못해서는 이미지가이드나, 디자인 리소스를 잘라 전달하는 일이 사실상 불가능하기 때문이죠. 그렇기에 계속해서 변화하는 기기환경과, 개발자들의 사고방식, 작업방식을 알아나가야합니다. 이후에는 개발자들의 대략적인 사고회로에 대한 설명과, 일반적인 작업의 흐름, 그리고 이미지가이드의 제작과 전달, 추후의 팔로우업에 대해서 설명해보겠습니다.
만약 추후의 진로에 대해 고민중인 분이 계시다면 다음 글을 읽어보세요!
https://brunch.co.kr/@clay1987/108
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
