iOS 아이폰용 앱 개발을 위한 디자인시, 디자이너가 참고 해볼만한 사항들
스크랩 - http://blog.naver.com/PostView.nhn?blogId=vowed&logNo=220525263909&redirect=Dlog&widgetTypeCall=true
저는 안드로이드와 아이폰 둘다 개발을 합니다.
안드로이드앱의 개발은 UI요소 개발이 비교적 자유료운 반면,
아이폰 개발은 디자인과 관련되서, 제한이라던지, 커스텀의 어려움이라던지 하는, 고려해야할 사항들이 좀 있습니다.
지인의 부탁으로 인해, 아이폰 개발과 관련되서, 앱 디자인시 유념해둬야 할 부분을 적어둡니다.
서두 ----- (대충보고 모두 이해하지 못하셔도 무방합니다)
안드로이드는, 처음부터 수많은 기기, 수많은 해상도에 알맞게 표현하기 위해 LinearLayout, RelativeLayout, TableLayout 등등,
레이아웃을 자동으로 잡기에 알맞게 되어있습니다.
게다가 "WrapContent"라는 옵션이 있어서, 컨텐츠의 크기에 알맞게 자동으로 자신의 뷰 크기를 결정해주는것이 아주 편리합니다.
반면, 아이폰은 단일기기, 단일 해상도만 개발해주면 되었던, 태생적 특징 때문에 "X, Y" 절대좌표를 가지고 개발을 했었습니다.
후에 "AutoLayout"이라는 개념(안드로이드의 RelativeLayout과 비슷) 이 도입되긴 합니다만,
여러 디자인 요소들사이의 상관관계를 계산하고 결국 X,Y 절대좌표를 가져버리는 특징이 있습니다.
그래서 안드로이드는 여러가지 상황에 따라 자동으로 레이아웃의 좌표, 크기등을 가변적으로 자연스럽게 표현해주기 매우 편리하지만, 아이폰은 그렇지 않습니다. 가변적인 상황이 불가능하지는 않습니다만, 귀찮은 코딩을 해줘야만 하지요.
그래서 가급적이면 아이폰 개발에 관련된 디자인을 할 때에는, 뷰 (혹은 레이아웃)의 크기를 컨텐츠의 크기에 의존적으로 가변적이게 디자인 하기 보다는,
뷰들의 크기를 결정(Fix)하고, 지정해놓는 편이 개발시에 편리하고 좋습니다.
본문 ---------------------------------------------------------------
1. 해상도에 관해서.
안드로이드는 dip 기준으로 디자인을 하지만,
아이폰은 해상도 PIXEL 에 기초한 "Point" 를 사용합니다.
기기종류
|
기기종류
|
기기해상도
|
개발시 Point
| 표현 픽셀 배수 |
아이폰 4, 4s
|
3.5 인치
|
640 * 960
|
320 * 480
| 2x |
아이폰 5, 5s
|
4 인치
|
640 * 1136
|
320 * 568
| 2x |
아이폰 6, 6s
|
4.7 인치
|
750 * 1334
|
375 * 667
| 2x |
아이폰 6(s) PLUS
|
5.5 인치
|
1080 * 1920
|
414 * 736
| 3x |
여기서 중요하게 보셔야 할 부분은 "개발시 Point" 입니다.
iOS 개발 할 때, 위치를 잡는건 저 Point를 기준으로 잡기 때문입니다.
그리고 그 Point 를 지정할 경우 표현픽셀 배수에 따라서 실제 픽셀수가 잡힙니다.
개발할 때 10 point 를 지정해주면, 2x 계열에서는 20pixel 로, 3x 계열에서는 30pixel로 표현됩니다.
예를들어, 이미지 아이콘을 표현할 20p X 20p 이미지뷰를 쓰고 싶으시다면,
개발자에게 "이미지 뷰의 크기는 20p X 20p 입니다."
라고 말씀해 주시고,
실제 이미지는 그 포인트의 2배수인, 40 pixel X 40pixel 이미지와,
3배수인 60 pixel X 60 pixel 이미지가 필요합니다.
그래서, 모든 이미지파일(png)은 2배수 이미지파일과, 3배수 이미지 파일, 이렇게 두종류로 준비하셔야 합니다.
(1배수는 이미지는 이제 안쓴다고 보셔도 무방합니다)
그리고 2배수 파일 이름 뒤에는 @2x, 3배수 파일 이름 뒤에는 @3x 라고 붙여주시면 개발자 분께서 매우 좋아하실겁니다.
예를들어 이미지 소스 파일, " icon.png " 파일을 제공하실 때,
2배수 이미지는 = " icon@2x.png "
3배수 이미지는 = " icon@3x.png "
이런식으로 파일이름을 지정해 주시면 개발자 분께서 "아, 이 디자이너 뭐 좀 아는구나..." 하실껍니다~
------- 그냥 쉬운 요약 -------
아이폰 6를 기준으로 디자인을 시작하세요.
750 X 1334 해상도로 크기를 잡으시고, 디자인을 하시면 됩니다.
그리고 개발자에게 크기를 말할 때는, 그 해상도의 반으로 (포인트) 말씀해 주시면 됩니다.
이미지 소스 파일(png)을 줄때는, 포인트의 2배수와 3배수 파일, 두종류로 준비해서 주시면 됩니다.
2. 여러가지 뷰 요소들의 크기들.
(1).
- 최상단에 상태바 (배터리, 시간, 안테나 등 표시 되는 부분) 은20p 고정 입니다.
- 아이폰에서 가장 많이 쓰이는 '네비게이션바' 는 높이가 44p 고정 입니다. 중앙에 있는 "타이틀" 글씨의 크기도 기본 지정되어있습니다. 특별히 지정하지 않을 때, 뒤로가기 버튼 < 표시는 자동으로 생성됩니다.
(2). (2)번 (시계 아이콘)과 같이 이미지를 사용할때는 (20p x 20p) 로 크기를 지정하셨다면, (40 pixel x 40 pixel) 파일과, 60 pixel x 60 pixel 이미지 파일, 이렇게 두종류의 파일을 준비해 주셔야 합니다.
(3). 뷰들의 상대적인 위치를 지정해 줍니다. 3번 사진 이미지뷰를 상단 이미지로부터 8p, 좌측 끝에서부터 8p ... 이런식으로 상대적인 위치를 지정해 줍니다. 애플은 최 하단 뷰에서부터는 16p 씩의 여백, 테이블 셀에서는 상하 8p, 각 뷰와 뷰 사이에는 8p 여백 등등, 권고되는 여백들이 있습니다만, 일일히 다 신경쓰고 할 순 없고, 그저 디자이너 눈에 이쁘게 보이면, 그런 권고사항들은 왠만큼 자동으로 지켜지게 될것입니다.
(4). 상대적인 위치를 잡아준다고 말씀을 드렸는데, 이와같은 예제에서는 상식적으로 (3) 사람 아이콘은 좌측으로부터 기준, (2)시계 아이콘은 오른쪽으로부터 기준을 잡았을 것입니다. 그런데, 만약에 (4)번에 표시한것처럼, 글씨와 시계 사이의 거리를 지정해 버린다면, 아이폰 4나, 아이폰 6Plus에서는 원하는것과 같은 결과가 나지 않을 수 도 있습니다. 뷰의 상대적인 위치를 잡을 때는 기준이 명확해야 합니다.
(5) 하단 탭바의 높이는 49p 입니다. 그리고 탭바 아이콘의 크기는 가로세로 25p 입니다.(애플 권고사항) 따라서, 탭바 아이콘은 2x인 50pixel, 과 75pixel 두가지 준비해 주셔야 합니다.
애플에서는 여러가지 뷰 요소에 대한 사이즈를 지정 혹은 권고 합니다. 상세한 내용은 위 링크를 보시면 됩니다.
그 외에도 디자인 가이드가 잘 나와있습니다...... 만 영어인게 함정 ㅡ,.ㅡ;
3. Tint (빛깔?)
아이폰에는 "Tint"라는 개념이 있습니다. 뷰의 배경색이라던지, 글씨색이라던지, 그림자 색이라던지 이런것들을 다 지정할 수 도 있겠지만,
기본적으로 Tint (빛깔) 이라는 개념이 있어서, Tint 를 지정하면, 뷰의 종류나 상황에 따라 그 색에 알맞게 표현됩니다.
(예전에는 그라데이션까지 자동으로 표현해줬었는데, 요새는 FLAT 디자인으로 넘어오면서 그라뎅은 다 사라졌네요)
4. 요소들.
(1) 버튼
버튼은 기본적으로는 투명 바탕에 Tint 를 줌으로써 글씨색을 표현합니다.
이때 버튼이 눌렸을때 표시되는 효과는 배경색이 바뀌질 않고, 지정된 Tint 에 맞춰서 글씨 자체에 효과가 들어갑니다.
(안드로이드는 보통 버튼을 누를때, 백그라운드에 효과가 나지만, 아이폰은 글씨 자체에 효과가 들어갑니다)
기본 버튼에 테두리는 없습니다.
(2) on/off 스위치
아이폰의 스위치는 크기가 51 x 31 로 고정되어있습니다.
Tint 를 변경함으로써 색이 변경됩니다.
(3) TextField - 1줄짜리 간단한 텍스트를 입력을 받을때는 텍스트 필드를 사용합니다.
- 맨 위가 기본적으로 많이 사용하는 TextField 입니다. 높이는 30p 로 고정되어서 변경 불가능합니다.
- 2,3,4 는 뷰 자체의 높이 변경이 가능은 합니다만,
하지만, TextField는 1줄 이상 표현이 안되기 때문에 큰 의미는 없습니다. (넓으면 터치가 잘 눌린다는 점...?)
(4) Activity Indicator
로딩할 때 뺑글뺑글 돌아가는 애니메이션이 있는 인디케이터 뷰입니다.
맨 좌측부터, "Dark", "White", "Large White" 세가지 스타일이 있습니다.
물론 Tint 변경으로 색깔을 지정할 수 있습니다.
Dark, 와 White 는 20p x 20p , Large White 는 37p x 37p 로 크기는 고정입니다.
(5) SegmentedControl
여러개 중에 한개만 선택되는 라디오 버튼이라고 생각하시면 됩니다.
선택된 버튼은 Tint 색으로 채워집니다. 높이는 29p 로 고정입니다.
-- 몇개 더 있지만, 위에가 가장 많이 쓰이는 것들이네요.
----------------------------------------------------------------------------------
5. 애플의 디자인 가이드에 보시면, UI 색은 여러개 쓰지 말라고 되어있습니다. 한 두개? 정도로 보시면 되겠네요,
따라서, 모든 요소들마다 색깔을 일일히 지정해 주시기 보다는,
테마색 하나 결정하시고, 거의 모든 요소들은 그 테마색을 Tint 로 주는것이 좋다고 봅니다.
(뭐 디자이너 분들은 말 안해도 그렇게 하더군요~^^)
-------------------------------------
6. UI 커스텀에 대해서.
앱을 개발할 때에, 가장 어렵고 시간이 한도끝도 없이 걸리는 부분이
앱의 중요기능이 구현되는 것보다 , 이런 UI요소, 애니메이션 효과 이런것들입니다.
특히나 안드로이드에 비해, 아이폰은 UI 커스텀이 훨씬더 까다롭습니다.
안드로이드에는 기본적으로 제공되는 옵션이 있는 반면, 아이폰에는 고정되어있거나, 애플의 강력권고(?)가 있는 경우들이 많기 때문입니다.
그리고 서두에서 말했듯이, "좌표"기준으로 개발이되는 태생적 특징때문에, 가변적으로 크기를 변경시키거나 요소들을 추가, 제거하기 쉽지 않습니다.
그걸 코드로 일일히 해주기 시작하면, 중요기능을 구현한 코드보다 UI 커스텀하는 코드가 더 많아지게 되겠죠.
아이폰은 가급적 아이폰 기본 UI를 사용하는게, 가장 아이폰 앱 답게 보여지고 좋다고 여겨집니다.
아이폰 개발 때, UI 커스텀이 안드로이드에 비해 까다로운 반면,
기본만 해줘도, 충분히 깔끔하고 이쁘게 나오기 때문입니다.
(아이폰 개발이 더 까다롭지만, 개인적으로 아이폰 개발을 더 사랑하는 이유이기도 합니다.)
그러니 개발자 입장에서 말씀드린다면,
모든 UI를 매우 상세하고 디테일하게 커스텀해서 요구하시는 것보다,
최대한 기본 UI를 활용, 응용해 가면서, 매우 중요한 효과나 디자인들을 뽑아서,
커스텀을 최대한 줄이는것이 서로에게 좋습니다.
(그게 유지보수시에도 매우 유리합니다, 한번 개발하고 말게 아니라면 유지보수도 매우 중요하겠죠)
-------------------------------------
7. 어떤 폰을 기준으로 디자인을 해야 할까??
- 지금 아이폰은 4종류의 해상도가 있습니다.
이제 4s 까지 크기였던 3.5인치 아이폰은 곧 사라지겠죠 ㅋㅋ
그러면 4인치, 4.7인치, 5.5 인치 크기가 남으니,
그중 가운데인 4.7인치 (375 x 667 point) 기준으로 디자인을 하시는게 적당해 보입니다.
그리고 뷰의 상대적 위치를 지정해 주실때는, 기기마다 따로따로 지정하지 말아주세요.
(그건 일일히 코드를 쳐서 넣어줘야 합니다. 불가능하다고 봐주세요)
4.7인치 기준으로 이뻐 보이는 기준을 잘 잡아주신다면, 4인치와 5.5인치에서도 왠만큼 이쁘게 잘 보입니다.
또한,
아주 디테일한 모든 부분에 (사이즈, 여백, 간격 등등)에 point 지정은,
완벽하게 잘 지정되어있다면, 좋을 수 도 있지만,
자칫하면 개발자 입장에서는 불가능하고 비상식적인 지시가 될 가능성도 있습니다.
그래서 모든 부분에 미주알 고주알 일일히 point 를 지정해 주기보다,
(아이콘의 크기와 같은) 매우 중요한 부분에 대한 point 정도는 지정해 주시고,
한눈에 보이는 디자인 가이드 파일을 보내주신다면, 개발자가 상식적으로 잘 지정할겁니다.
(아이폰 개발 툴이, 애플의 권고사항도 자동으로 잘 적용되어지게 만들어져 있습니다.)
------------------------------------------
8. 최종 결론 요약.
- 크기를 지정해서 주실 때는 point 로 알려주세요.
- 이미지 소스 파일을 주실 때는, 그 포인트의 2배수, 3배수 해상도 파일 (두종류) 로 준비해 주셔야 합니다.
- 4.7인치 기기 (375 x 667 포인트) 기준으로 디자인 해주시고, 상식적인 기준으로 상대적 위치를 지정해 주시고,
- 중요도가 떨어지는 부분은, 그냥 전체 디자인 보여주시면, 개발자가 알아서 잘 지정해 줄 수 도 있습니다.
- 최대한 아이폰의 기본 UI를 사용하고, 커스텀, 애니메이션, 효과 등등은 정말 중요한것 외에는 최소화 해주세요.
(유지보수, 개발기간, 난이도와 직결되어있습니다.)
댓글
댓글 쓰기