스케치로 iOS 디자인 시작하기
신입에게 알려주는 스케치
스케치 68.1에서 작성된 글입니다.
모바일보다 데스크톱에서 보는 게 좋습니다.
iPhone 12, iPhone 12 Pro, iPhone 12 Mini 정보를 추가했습니다.
아이폰 디자인
어떻게 하나요?
iOS를 디자인할 때는 아이폰 디자인은 애플의 Human Interface Guidelines을 보면 됩니다. Apple HIG에서는 아이폰을 디자인하기 위한 스케치 라이브러리와 스케치 파일을 제공합니다. Apple Design Resources에서 해당 파일을 다운로드할 수 있습니다.
애플의 가이드라인은 한 번 만들어지고 영원히 변경되는 것이 아니라, iOS의 변화에 따라서 조금씩 업데이트됩니다. 업데이트되는 내용은 What’s New에서 확인하실 수 있습니다.
이거만 하면, 웬만한 디자인은 해결되지만, 문제가 있습니다. 어느 정도 디자인이 익숙해지면, 다시 찾아보지 않습니다. 그리고 처음 시작하는 사람은 매뉴얼을 보는데, 익숙하지 않아서 자주 찾아보게 됩니다.
그래서 이 문서를 만들었습니다. 틀린 내용이 있거나, 필요한 내용이 더 있으면, 추가로 업데이트를 하겠습니다.
스케치에서 iOS
아트보드 만들기
출시된 아이폰 기종은 꽤 많은 편입니다. 아이폰12가 출시된 후에는 스케치에서 10개의 아트보드를 제공합니다. 그리고 각 수치는 pt로 되어 있습니다. 아이폰12가 출시되면서 사이즈가 늘어났습니다.
iPhone 11 Pro까지 출시된 아이폰의 크기와 pt, px 리스트입니다. 이렇게 보면 좀 혼란스럽습니다. 스타트업 디자이너의 경우, 여러 가지 디바이스에 앱을 출시하는데, 픽셀 크기를 잘 모르면, 곤란한 경우가 가끔 있습니다.
iPhone 11과 12가 출시된 후에는 사이즈가 더 많아집니다.
좀 더 디자이너가 보기 쉽게 바꾸면, 이렇게 됩니다. 굵게 표시된 모델이 스케치에서 프리셋을 제공하는 크기입니다. 아이폰은 4인치에서 6.5인치에서 5.4인치, 6.7인치가 추가되었습니다. 스토어에 올릴 스크린을 만들다 보면, 크기로 나오는 게 아니라 인치로 나오기 때문에 이 표로 보면 대응이 좀 쉬울 겁니다.
iPhone 11 Pro가 iPhone 11보다 화면 크기가 약간 작지만, 명암대비 등 디스플레이의 스펙이 더 좋습니다. iPhone 12 Mini는 @2.88x가 됩니다. 명확하게 @3x는 안되지만, 디스플레이가 좋아져서 큰 무리는 없습니다.
스케치에서 제공하는 각 디바이스의 모양과 수치를 같이 표시했습니다. ppi를 알면, 대강의 픽셀을 계산할 수 있습니다. 가끔 개발자가 위치를 계산할 때, 각 스크린의 ppi를 바탕으로 계산하기 때문에 참고하면 좋습니다. 새로운 iOS와 디바이스가 출시되기 때문에 수정될 수 있습니다.
이 크기를 좀 더 생각해보면, 6개 화면에서 별 문제없이 화면을 꽉 채울 수 있는 크기를 알아낼 수 있습니다. 넘치는 부분은 크롭(Crop)하면 됩니다.
아이폰12가 출시된 후의 사이즈는 iPhone 12 vs Designers에서 조금 더 자세히 알수 있습니다.
사진으로 스플래시 스크린을 만들 경우, 1장으로 가능합니다.이미지 제작 후에는 각 디바이스에서 테스트하여, 중요한 내용이 적절하게 보이는지 꼭 확인해야 합니다.
regular와 compact
아이패드도 같이 디자인하는 경우는 레귤러와 콤팩트라는 말을 듣게 됩니다. iOS에서 좀 신경을 써야 하는 부분인데, 디자이너는 콤팩트로 할 경우, 크기가 제한된다는 것만 알면 됩니다. 자세한 내용은 Apple HIG의 Adaptivity and Layout부분을 찾아보시면 됩니다.
찾아보면, 아이패드에서 앱을 멀티 태스킹 할 때, 가로와 세로로 스크린을 고정할 때 유연하게 보이도록 한다고 합니다. 좀 피곤하지만, 아이폰 앱을 만들 때는 Size Classes를 알아야 합니다.
화면이 큰 기종과 화면이 작은 기종의 차이는 가로 모드, Landscape orientation에서 차이가 있습니다. 이제 화면 양쪽의 마진(margins)을 봅니다.
콤팩트 사이즈에서 좌우 마진은 16pt입니다. 레귤러 클래스의 Landscape 상태의 마진은 20pt입니다. 마진 영역은 가급적 배경색 하나만 두는 것이 좋습니다.
모든 디자인에서 Adaptive와 Responsive가 들어가게 되면, 화면의 가장자리에 오브젝트를 배치하지 않는 것이 좋습니다. 배치할 경우는 여러 가지 상황에서 충분히 테스트를 해야 합니다. 가이드에서는 Saft Area를 고려하는 말로 표현되어 있습니다.
How iOS Apps Adapt to the various iPhone 12 Screen Sizes에서 좀 더 자세한 구성요소의 구분을 확인할 수 있습니다.
디자인 시작할 때
선택하는 아이폰 크기
스케치에서 iOS 앱 디자인을 하게 될 때는 6가지 아트보드 프리셋 중에서 2가지를 선택하면 됩니다. 저의 경우는 375x667pt로 작업하고, 라이브러리의 심벌은 4인치 사이즈의 320pt를 기준으로 제작합니다. 실제 적용을 할 때는 375pt에 맞게 조정합니다.
저의 경우는 목록이 아닌 경우 상단을 기준으로 폭을 조정합니다. 이 경우 이점은 작은 사이즈에서 큰 사이즈까지 콘텐츠를 적당히 보이도록 조정할 수 있습니다. 단점은 큰 화면에서 여백이 생기는 화면이 생깁니다.
아이폰 8과 아이폰 11 pro에서는 노치와 홈 인디게이터 때문에 위아래가 다르기 때문에 주의해야 합니다. 가끔 각각의 사이즈를 모두 작업해야 하냐고 묻는 사람이 있는데, 한 사이즈만 작업해도 개발자는 큰 차이가 없습니다. 다만, 아주 엄밀한 레이아웃이나 복잡한 디자인을 하게 되면, 양쪽 사이즈를 모두 준비하는 것이 좋습니다.
아이폰은 상단의 내비게이션 바와 하단의 탭 바 아이콘 사이즈가 다릅니다. 가이드에 꼭 맞출 경우 참조하시면 됩니다. 내비게이션 바의 경우는 24pt이고, 최대 28pt까지 사용할 수 있습니다.
탭 바의 경우는 레귤러와 콤펙트에 따라서 아이콘 크기가 조금 달라집니다. 오래전에 가이드를 보신 분은 아이콘 관련 가이드가 꽤 정교해졌으니 확인을 하셔야 합니다.
디자인을 하다가 보면, 기획이나 프로덕트 매니저에 의해서 터치 영역에 대한 이야기를 합니다. 애플은 44pt를 말합니다. 안드로이드는 48dp입니다. 대개의 경우, 5~7mm 정도도 손가락으로 탭할 수 있습니다.
Nielsen Norman Group에 따르면, 화면에 닿는 손가락의 면적이 대략 1.6~2cm, 엄지 손가락의 경우에는 2.5cm라고 합니다. 하지만 한국인의 손가락 면적은 연구되어 있지 않으니까, 관련 내용으로 분쟁이 생기게 되면, 적당히 크게 하는 편이 좋습니다. 닐슨 노먼 그룹에서는 1 x 1cm를 해보라고 합니다.
작은 닫기 버튼, 화살표, 슬라이딩의 인디게이터 등 작은 오브젝트의 경우는 조금 다르게 적용해야 합니다. 또 단순한 화면에 면적이 넓을 경우는 좁게 잡힐 수도 있습니다. 이럴 경우는 프로그래머가 터치 영역을 조정할 수 있습니다. 좁은 영역에 너무 많은 버튼을 촘촘하게 배치하는 것은 피해야 합니다.
너무 넓게 잡으면, 마찬가지로 잘못 누를 수 있습니다. 주의하시기 바랍니다.
안드로이드 경우는 터치를 한 영역을 표시하는 것이 가이드에 포함되어 있지만, iOS는 그림자가 곳곳에 나오는 것이 싫은가봅니다.
앱 아이콘
Apple HIG에서 필요하다고 하는 아이폰의 앱 아이콘 크기입니다. 각각의 상황에 따라 다르게 들어갑니다. 이건 그냥 참고 삼아서 적어둡니다. Apple에서 리소스를 다운로드하면, 스케치 파일에 이보다 훨씬 자세한 프리셋이 있기 때문에 주기적으로 Apple Design Resources를 방문하시면 됩니다.
이 글을 작성하는 시점에서 가장 최신 파일은 2020년 2월에 업데이트된 iOS 13 Download for Sketch입니다.
홈스크린과 퀵 액션 아이콘에 대해서는 이 문서를 수정하거나, 따로 글을 올리겠습니다.
폰트
애플의 타이포그래피에서 폰트는 New York (NY)과 San Francisco (SF)를 사용합니다. iOS에는 Dynamic Type Sizes를 사용하는데, 디바이스에 따라서 유연하게 글자 크기를 변경할 수 있게 해 줍니다. 그래서 iOS에서 타이포그래피를 할 때는 스타일과 텍스트 크기를 참조하시면 됩니다.
가끔 글자 크기를 물어보시는 분이 많은데, 아이폰에서는 이 크기를 참조하시면 됩니다. 가이드를 자세히 보시면, 자간(Tracking)과 행간(Leading)도 정해져 있습니다.
iOS에서는 가장 작은 글자 크기를 11pt로 하는 것이 좋습니다. 모바일 웹디자인을 할 때도 특정 크기 이하의 글자는 아이폰에서 11pt 정도의 크기로 조정됩니다.
타이포그래피의 경우는 애플의 iOS 13 Download for Sketch를 다운로드하여서 보시면, 잘 정리되어 있습니다. 라이브러리를 만드시거나 디자인 시스템을 만드실 때는 꼭 참조하시기 바랍니다.
가이드는 정기적으로
확인하시는 것이 좋습니다.
아이폰 화면 크기를 설명하기 위해서 시작했는데, 매번 가이드를 찾아보기 힘들어서 다른 부분도 정리를 시작해보았습니다.
