이걸 정리하게 된 이유는 사실, 기획자 디자이너 개발자 요렇게 소통의 파이프라인이 있다치면 그 와중에 혼선이 많아서 이다. 특히 모바일을 처음 접하는 디자이너의 경우에 @_@ 요런 표정으로 개발자와 이야기하다가 =_= 이러다가 잔뜩 썽난 표정으로 나오는 일이 참 많았는데 이미 우리가 잘 아는 그 구글의 모바일 가이드라인과 그 애플의 iOS 가이드라인을 정리했다.

1. 가이드 라인편

2. Action bar
Navigation bar
화면 맨 위에 위치

3. (iOS) 네비게이션 바
Sunrise calendar (iOS7) (iOS6)
네비게이션 바
iOS 디자인 가이드에서는 네비게이션 바를 ‘유저들이 (앱의) 정보구조 전체를 지나다니기 좋게
한다’라고 정의해 놨습니다. 부가 기능으로는 ‘화면에 표시되는 컨텐츠를 제어한다’고도 있습니
다. (A navigation bar helps users navigate through an information hierarchy and,
optionally, manage screen contents.)
화면 최 상단의 status bar 바로 밑에 붙는 영역을 말하고 아주 많이 커스터마이징하지 않는 한
네비게이션 바는 일반적으로 앱에 언제나 있습니다.
네비게이션 바의 구성요소
1.
2.
3.
4.
5.
6.
상태 바(status bar)와 네비게이션 바의 관계
네비게이션 바 형태
네비게이션 바를 이미지로 채우는 경우
네비게이션 바 타이틀
이전 버튼
네비게이션 바 위에 위치한 버튼들의 위치

4. (iOS) 상태 바(status bar)와 네비게이션 바의 관계
●●●●○ SKT
3G
4:34 PM
100%
타이틀
●●●●○ SKT
3G
4:34 PM
100%
타이틀
네비게이션 바와 상태바
iOS7 이 발표된 시점부터 표준이 바뀌면서 투명하거나 혹은 투명하지 않던 상태바가 ‘투명
(transparent)로 교통 정리되었습니다. (*가이드에는 상태바를 제외한 다른 바들, 네비게이션
바, 탭바, 툴바, 검색 바 는 반투명 하다고 표현합니다.) 상태바가 강제로 투명해지면서 앱 제작
자가 원하는 대로 상태 바 뒤의 컬러값을 지정할 수 있게 됩니다.
정확히는 상태 바가 ‘투명’해서 통과해서 보이는 형태라고 생각하면 됩니다.
이렇게 되면서
상태 바 밑에 앱의 네비게이션 바를 놓을 때, 경계를 없애버리면서 쭉 뚫린 형태로 만들어 놓는
경우가 많아졌습니다. 그런데 이렇게 하려면 네비게이션 바에 볼륨감이나 그림자나 패턴을 주
기 힘들어집니다.
* 네비게이션 바의 컬러값을 지정해서 전달할 때는, iOS에서는 RGB 값 (78,103,200) 만 표시
합니다. 같은 컬러를 안드로이드에 전달할 때는 hex 값을 사용합니다.
BG컬러
(255,216,65)

5. (iOS) 네비게이션 바의 형태
iOS 기본
네비게이션 바의 형태
올록볼록했던 iOS6까지의 디자인에서 iOS7은 납작합니다. 높이값는 44px (Retina 88px)
로 고정되어있습니다.
네비게이션 바와 다른 영역간의 구분은
(iOS6)드랍 쉐도우가 아래쪽에 들어감
(iOS7) 아래쪽에 라인이 1 픽셀짜리 가 들어감
(커스터마이징 안 하고) 지정 가능한 색상은
(iOS6) 바의 배경색 (위 이미지에서는 푸른색으로 보이는 저 영역)
(iOS7) 바 배경색 (단일 컬러, barTintColor) 과 백 버튼 색 (tintColor)
뒤로 가기 버튼은
(iOS6) 이전 화면의 타이틀이 들어간 볼록한 버튼이 표시
(iOS7) 화살표와 이전 화면의 타이틀이 자동으로 생김
* iOS7에서 화살표를 디폴트로 제공하는 거 말고 새롭게 쓰고 싶으면 마스크 이미지도 필요하
다고 합니다. (If you want to use a custom image to replace the default chevron, you also need to create a
custom mask image. iOS 7 usesthe mask to make the previous screen’stitle appear to emerge from—or
disappear into—the chevron during navigation transitions. To learn about the properties that control the Back
button and mask image, see UINavigationBar Class Reference.)

6. (iOS) 네비게이션 바를 이미지로 채운다면
●●●●○ SKT
3G
4:34 PM
100%
타이틀
Readablity (iOS6)
네비게이션 바를 이미지로 채우고 싶다면
iOS 가이드에서 제공하는 방법 말고 ‘우리의 느낌과 브랜드를 확확 나타내는 형태로 가고 싶으
니 이미지를 써야겠어요’ 할 때는 백그라운드 이미지를 지정해서 전달합니다.
iOS7에 맞춘 디자인에서는 아직 저렇게 끝이 동글동글하게 들어가거나 패턴을 깐 형태는 나오
지 않지만 iOS6까지의 디자인에서는 이미지를 채워 볼록볼록 그라데이션을 사용하기도 했습니
다.
* 이미지를 사용해 bg를 채울 때는 기본 버전과 x2 버전 (레티나) 을 제작해야 합니다. 파일 명
은 두 파일을 동일하게 하지만 레티나 이미지에는 @2x를 추가합니다.
Hey 에서 사용한 이미지
btn_menu_top_bar_pressed.png
btn_menu_top_bar_pressed.png
top_bar.png
top_bar@2x.png

7. (iOS) 네비게이션 바 타이틀
btn_menu_top_bar_pressed.png
btn_menu_top_bar_pressed.png
Instagram (iOS7)
네비게이션 바 타이틀
지금 표시한 화면에 대한 제목으로, 보통 글자를 씁니다. 하지만 앱 제작사의 브랜드를 나타내기
위해 이미지를 넣는 경우도 있습니다.
* 네비게이션 바에 올라가는 타이틀 글씨 디폴트 34px, Medium

8. (iOS) 네비게이션 바, 이전 버튼
Circa News (iOS7)
TED(iOS7)
Luvocracy (iOS7)
이전버튼
iOS에서의 이전버튼은 이전화면과 현재화면의 관계에 개의치 않고 ‘직전에 본 화면’
* 화살표 (chevron) 와 타이틀
iOS7 기본대로 한 예
1. 이전 페이지의 타이틀을 표시
2. 이전 페이지나 현재 페이지의 타이틀이 긴 경우 (Back 이라고 자동으로 표시됨)
3. 이전 페이지의 타이틀을 표시하지 않고 싶을 때는 공백문자 입력
아래의 두 예시는 iOS7의 기본이 아닌, 커스터마이징을 한 화면
Artsy(iOS7)
Digg (iOS7)

9. (iOS) 네비게이션 바 위에 위치한 버튼들의 위치
(0,0)
●●●●○ SKT
3G
4:34 PM
타이틀
< 이전
100%
완료
(0,64)
(60,104)
contents
버튼들의 위치 표시
iOS7 (플랫 디자인) 표준대로 제작하게 되면 이전버튼 (화살표) 와 타이틀의 형태는 자동생성
이므로 버튼의 위치를 별도로 지정할 필요는 없다. 단, 네비게이션을 커스터마이징하게 되면
iOS6에서처럼 화면에 어느 위치에 마스크 이미지를 올릴 것인지에 대해서 지정하고 표시해 줘
야한다.
(150,43)
60px

10. (Android) 액션 바
액션 바
안드로이드 디자인 가이드에서는 액션 바를, ‘앱을 사용하는 내내 상단에 표시되고, 앱 내 이동
을 용이하게 돕고 주요 액션을 쉽게 한다’ 고 요약이 되어있습니다. 화면 최 상단 status bar 바
로 밑에 붙습니다. (* 위치는 iOS의 네비게이션 바와 정확히 같음 )
iOS 네비게이션 바와 대체로 기능은 일치하지만 더 많은 기능을 담고 있습니다.
1.
2.
3.
4.
앱 내 이동을 도움 (2번 뷰 컨트롤)
앱 아이덴티티 표시 (1번 앱 아이콘)
중요 액션을 버튼으로 넣어 더 쉽게 도움 (3번 액션버튼)
덜 중요한 액션은 더 보기 안에 밀어넣어 정리 (4번 액션 오버플로우)
액션 바의 구성요소
1.
2.
3.
4.
5.
6.
7.
8.
액션 바 형태
액션 바를 이미지로 채우는 경우
뷰 컨트롤
앱 아이콘과 상위로 이동하는 화살표
화살표와 백버튼으로 인한 네비게이션 구조 차이
액션버튼
액션 바 위에 위치한 버튼들의 위치
더 보기 버튼 (액션 오버 플로우)

11. (Android) 액션 바 형태
액션 바 형태
안드로이드 디자인 가이드에서 권장하는 사항은 (1) 앱 아이콘 (2) 뷰컨트롤(페이지 타이틀)
(3) 액션버튼 입니다. 하지만 실제 시중에 나와있고 제작된 앱들은 약간씩 변형된 모습을 보입
니다.
안드로이드 OS를 사용하는 다양한 기기들은 서로 다른 해상도와 화면비율을 가지고 있어서 같
은 앱이라도 액션바의 가로길이는 앱을 만든 사람도 구글도, 제조사도 보장못하게 쭉쭉 늘어납
니다. 그러다 보니 액션 바는
1. 단일 컬러로 채우거나 (google play 와 twitter)
2. 패턴으로 채우거나 (Instagram, 8 tracks, 싸이월드)
3. 이미지를 깔고 늘어날 영역을 표시 (이음, hey)
합니다.
1번으로 디자인 할 때에는 BG컬러를 Hex 값 (#31B7D5) 으로 지정해야 합니다.
2번과 3번의 경우는 기준이 되는 이미지를 제작하고 나인패치를 적용합니다.
* 싸이월드의 경우 iOS의 UI를 그대로 차용한 형태로 권장하는 형태는 아닙니다.

12. (Android) 액션 바를 이미지로 채우는 경우
여기가 다 늘어나는 영역
액션바 끝이 동그랗게 말린 형태를 원한다면
라운딩된 이미지는 미리 제작한 이미지에서 ‘늘려야 할 영역’을 표시합니다.
이음에서 제작한 앱 중에서는 대표적으로 hey 와 연애유형검사 가 있습니다.
통상 Status bar가 검은색이므로 액션바 라운딩으로 남은 영역은 검은색으로 표시
이미지에서 늘어날 수 있는 영역을 표시해줍니다.
나인패치, 이미지의 왼쪽과 위쪽 영역에 점을 한 개씩 찍어 줍니다.

13. (Android) 액션 바와 뷰 컨트롤
모든 음악
오프라인 전용
드로워와 뷰컨트롤은 뭐가 어떻게 다른가
드로워 : 일반적으로 앱 전체를 총괄하는 메뉴를 표시하고 주로 가장 큰 메뉴 중심으로 표시
뷰컨트롤 : 화면에 표시하는 내용을 걸러서 표시 (구글 뮤직 / 구글 플러스 / 기본 내장 갤러리
앱 / 에버노트)
안드로이드에서는 욕심 많게 액션바에서 네비게이션을 여러 형태로 제공하게 됩니다. 동등한
풀 안에 있는 아이템을 어떻게 보여줄 것이냐를 뷰컨트롤에서 조정합니다. 뷰컨트롤을 쓰는 방
식은 앱을 제작할 때 별도로 지정할 수 있기는 하지만 현재까지 발견된 용도는 ‘sorting 혹은
filtering’ 입니다.

14. (Android) 앱 아이콘과 상위로 이동하는 화살표
액션 바에 표시되는 앱 아이콘과 화살표
앱 아이콘은 각 앱 제작사들의 아이덴티티를 나타냅니다. 가이드라인을 뒤져보면 액션 바에서
브랜드를 나타낼 수 있는 거의 유일한 영역이기도 합니다.
1. 아이콘 만 있는 경우 : 앱에서 가장 상위 화면일 때
2. 아이콘과 옆에 화살표 (Up caret) 가 있는 경우 : 올라갈 상위화면이 있을 때
* 안드로이드에서의 네비게이션 구조는 허니콤(Honeycomb) 전에는 온전히 디바이스에 내장
된 ‘뒤로가기(back)’ 버튼에만 의존했지만 앱 아이콘과 함께 위로 가는 화살표를 표시하게 되
면서 “앱 내부에서 이동을 어떻게 할 것인가”에 대해서 보다 명확하게 정의되었습니다.
최근 출시된 앱들에서는 젤리빈 (Jellybean) 기준으로 공식 지정된 네비게이션 드로워와 함께
표시되고 있습니다.
Navigation Drawer 열린 상태, 최상단
선택한 메모 상세화면
Navigation Drawer 닫힌 상태, 최상단
Google Keep (ICS+)

15. (Android) 화살표와 백버튼으로 인한 네비게이션 구조 차이
Google Keep (ICS+)
디바이스 뒤로가기 버튼과 액션 바의 위로가기 버튼
1. 디바이스 ‘뒤로가기’ 버튼
- 화면에 표시되는 내용을 기준으로 이전, 방금 전에 본 화면을 표시
- 때문에 앱 내 이동이 아니라 방금 전까지 사용하던 앱으로 이동할 수도 있음
- 네비게이션 드로워로 메뉴 1에서 메뉴 2로 이동해있을 때 ‘뒤로가기’ 버튼은 드로워에서
선택한 메뉴는 무시함
2. 아이콘 옆 화살표
- 앱 내 상위로 이동
- 앱 내 상위페이지를 연 적이 없어도 (이전 히스토리에 안 남아도) 이동
가장 일반적인 케이스
디바이스 뒤로가기 버튼과 앱 내 위로가기 버튼이 차이 없는 경우
1. 홈 화면에서 앱 실행
2. 앱 내 최상단 페이지 표시됨.
- 뒤로가기 버튼을 누르면 1번 화면으로 이동
- 아이템을 선택하면 해당 아이템의 하위 화면 (3번) 으로 이동
3. 아이템 상세화면이 표시됨
- 뒤로가기 버튼을 누르면 2번 화면으로 이동
- 위로가기 버튼을 누르면 2번 화면으로 이동

16. (Android) 화살표와 백버튼으로 인한 네비게이션 구조 차이
Archive
위젯으로 앱 실행 케이스
디바이스 버튼과 앱 내 위로가기 버튼이 다른 화면을 가리키는 경우
1. 홈 화면에서 위젯에서 특정 아이템을 선택해 앱 실행
2. 아이템 상세화면 표시
- 뒤로가기 버튼을 누르면 1번 화면
- 위로가기 버튼을 누르면 3번 화면 (앱 내 상위페이지)
3. 앱 내 상위페이지 표시
- 뒤로가기 버튼을 누르면 1번 화면 (앱 실행 전으로) 돌아가버림 (최상위이기 때문에 뒤로
가기 눌렀을 경우 앱이 종료됨)
- 위로가기 버튼 없음. 네비게이션 드로워 표시됨
4. 네비게이션 드로워를 펼침
- 뒤로가기 버튼을 누르면 드로워가 닫히고 3번화면이 표시됨
- 드로워에서 다른 메뉴를 선택하면 5번 화면 표시
5. 드로워에서 선택된 메뉴로 페이지가 표시되고 3번과 동일하게 앱 내 최상위페이지로 표시
- 뒤로가기 버튼을 누르면 1번 화면 (앱 실행 전으로) 돌아가버림 (최상위이기 때문에 뒤로
가기 눌렀을 경우 앱이 종료됨)
- 드로워를 펼치면 3번화면에서 펼쳤을 때와 동일한 액션이 가능함

17. (Android) 액션 버튼
액션 바 위에 올리는 액션버튼
사용자에게 ‘지금 이 상황에서는 이걸 하는 게 너에게는 꽤 좋을 거야’ 를 미리 제공해주는 버튼
입니다. 가이드에는 ‘Contextual Action Button’이라고 나와있고 실제로 액션 바에 버튼이
붙박이로 딱 있는 것은 아니고 상황에 따라 버튼이 나왔다가 다른 걸로 바뀌었다가 합니다.
Google Music, 검색 액션 제공
8tracks, 새로고침 액션 제공
기본 액션 바에 올라가는 형태
화면 전체 (혹은 앱 전체) 에 영향을 주는 대표적인 두 액션입니다. 사용자가 딱히 뭘 선택하지
도 뭘 보내려하지도 롱프레스를 하지도 않은 상태에서 표시되는 액션 버튼입니다. 대신 이 버튼
을 선택하면 화면이 변합니다.
선택된 아이템에 대한 액션이 액션바에 표시
선택한 걸 복사하거나 자르거나 공유하는 경우에 해당 액션에 대한 표시가 액션 바에 올라옵니
다. 기능이 많으면 액션 바에는 선택만 표시되고 bottom bar 에 액션버튼이 올라오기도 합니
다. 하지만 이음에서는 이렇게 많은 기능을 당분간은 제공하지 않을 것 같네요.

18. (Android) 액션 바 위 버튼들의 위치
위치 표시는 상대적으로
안드로이드 가이드 대로 디자인을 하게 되면 각각의 간격와 크기에 대해서는 별도 지정을 하지
않아도 됩니다. (Google Keep) 하지만 디자인상의 이유로 커스터마이징을 하는 경우가 많고
이 경우에는 액션 바 위에 올라가는 아이콘의 위치와 간격을 지정해줘야 합니다.
1. 통상 가장자리에 가장 가까운 아이콘의 위치를 먼저 지정합니다.
- 가장 끝에 놓일 아이콘이 위에서 얼마 왼쪽에서 얼마 떨어져 있는 지 dp로 표시합니다.
2. 그 다음 놓이는 아이콘은 미리 놓인 아이콘과의 떨어진 거리를 표시합니다.
3. 액션바에 올리게 되는 모든 아이콘과 이미지는 사이즈와 특성 지정이 필요합니다.
- 구분선의 경우에도 다른 이미지와 동일하게 취급하고 선의 두께, 길이, 색에 대한 정의가
필요합니다.
DIP과 DP 에 대한 자세한 설명 (by. 블루님 자료)
1dp는 160dpi(mdpi) 스크린에서 물리적으로 1픽셀에 해당한다. 고해상도일수록 1dp가 많
은 픽셀을 차지한다. px = dp * (dpi / 160)이다. 예를 들어 240dpi에서 1dp는 1.5 physical
pixel과 같다.
dp = px / (dpi / 160)
어플리케이션의 UI를 작성할 때에는 반드시 dp 단위를 사용하여야 한다. 그래야 다양한 해상도
에서의 적절한 UI를 지원할 수 있다.

19. (Android) 더 보기 버튼 (액션 오버 플로우)
보관처리
삭제
확인란 표시
공유…
설정
의견 보내기
도움말
액션 오버플로우
화면에 표시한 아이템에 대해서 가능한 액션을 액션 바에 왕창 넣어서 ‘공간이 모자라’ 그러니까
‘덜 중요한 걸 숨기자’ 라는 취지로 만들어진 더 보기 입니다.
Q. 내 폰에선 저 쩜쩜쩜이 없어요! 왜인가요?
A. 안드로이드 기기 중에는 메뉴버튼이 기계에 딱 박혀 출시되는 경우가 있습니다. 하지만 캡쳐
화면에 있는 폰은 레퍼런스 폰에서 표시되는 UI로, 그 레퍼런스 폰에는 메뉴버튼이 기기에 없고
OS에서 표시를 해줍니다. 그래서 보이지 않는 거에요. 메뉴버튼을 누르면 저게 화면 아래쪽에
서 보일 거에요.

20. 네비게이션 바와 액션바, 한 장으로 요약
OS
iOS
Android
이름
네비게이션 바 (navigation bar)
액션 바 (action bar)
주요 기능
앱에서 길을 안내
앱 내 이동을 도움
중요 액션을 버튼들로 제공
부 기능
앱 아이덴티티 표시
중요 액션을 버튼으로 제공
앱 아이덴티티 표시
네비게이션 구조
이전 버튼으로 페이지 전환을 도움
디바이스 뒤로가기 버튼
앱 위로가기 버튼
뷰컨트롤
네비게이션 드로워
네 가지를 혼용해서 사용
타이틀 텍스트
가운데 정렬
<
이전 화면으로
버튼 들의 위치 표시 절대수치를 표시
액션 버튼
통상 오른쪽 위에 한 개 표시
(추가/ 작성 / 완료 등)
왼쪽 정렬
상위 화면으로
* 이전화면으로는 디바이스 버튼 사용
상대수치, 간격을 표시
오른쪽 위에 1-2개 혹은 더 많이 표시
많아지면 더 보기 로 줄임
* iOS의 경우 액션버튼이 정말 많은 경우는 툴바로 분리해서 제공

21. Tab
탭 메뉴 혹은 탭 바

22. 탭은 왜 아래에 있기도 하고 위에 있기도 하나
iOS와 안드로이드에서 서로 다른 탭에 대한 개념
메뉴를 사용자에게 쫘악 늘어서 보여주는 가장 쉬운 방법이 탭 메뉴입니다. 햄버거 버튼 안에 마
구 넣고 숨겨놓기도 싫고 안드로이드에서 제공하는 드로워 안에 메뉴를 넣기도 싫으니 ‘사용자
보이는 데 놓아야 잘 쓰지!’일 때는 사실 탭을 메뉴로 써서 내용을 다 보여주는 게 최선의 방법입
니다.
그런데 탭이 있는 위치가 다릅니다. iOS는 밑에 안드로이드는 위에 있습니다. 안드로이드 가이
드에서는 2.x 버전때부터 주구장창 탭을 화면 위쪽으로 지정해놓고 있었지만 앱을 제작할 때
iOS 디자인을 기준으로 가게 되면서 탭을 아래에 박는 형태를 많이 취했죠. 그거 나쁜 거에요.
안드로이드에서의 나쁜 예
CGV
아시아나
싸이월드

23. 두 OS에서 탭의 관할 영역
iOS에서는 탭이 메뉴, 안드로이드에서의 탭은 액션바에 속한 영역
탭이 제공하는 사용자 경험은 두 OS에서 완전히 다릅니다.
iOS 탭은 탭 메뉴
iOS는 앱에서 제공하는 모든 기능을 탭으로 구획 짓고 탭 간의 이동으로 네비게이팅 역할을 담
당합니다. (In general, use a tab bar to organize information at the app level. )사용자
에게 ‘이걸 누르면 이 기능을 보여줄거야’를 안내합니다. 통상 2개에서 5개까지의 탭을 제공하
고 6개 이상이 되면 누르기 불편하기 때문에 다섯 번째 탭을 ‘더 보기’로 묶어서 보여줍니다.
(iTunes) 더 보기로 묶을 수 없다면 사용자도 ‘뭐가 이렇게 많아? 복잡해.’ 라고 느끼며 안 쓸
테니 그때는 메뉴를 줄이세요.
안드로이드 탭은 액션 바의 하위
반면, 앱에서 제공하는 모든 기능을 정리하고 표시하는 역할을 액션바에서 맡고 있습니다. 가이
드라인 상에서 안드로이드에서의 ‘탭’은 액션 바의 하위항목으로 봅니다. 그래서 액션바랑 꼭
붙어 있는 게 일반적이라고 보면 됩니다. 모양은 iOS의 탭과 비슷해 보이지만 iOS의 탭보다 좁
은 범위에 대한 영향력이 있습니다. 이게 반장이라면 iOS의 탭은 학생회장.
(iOS) iTunes 앱
Music 탭을 누르면 화면 전체에는 음악 컨텐츠가 테마 별로 묶여서 소개됩니다.
다른 탭에서는 Music 카테고리에 해당하는 아이템을 볼 수 없습니다.
(안드로이드) Play store 앱
드로워에서 선택한 Apps 의 페이지 내부의 구분으로 탭이 있습니다.
TOP NEW PAID 순으로 표시하고 다른 탭에서는 나열 순서다 달라집니다.

24. (iOS) 탭 메뉴
iOS에서의 탭 메뉴
iOS7 가이드라인에서는 지정한 디자인 방향
•
•
•
•
반투명 (translucent)
언제나 화면 맨 아래쪽에 위치 (Always appears at the bottom edge of the screen)
한 번에 5개 이상 쓰지 마요 (Displays no more than five tabs at one time on iPhone.)
언제나 모든 방향으로의 높이를 똑같게 유지하세요.(Maintains the same height in all
orientations.)
• 뉴 떴을 때 뱃지를 달 수 있게 하세요. (Can display a badge—a red oval containing
white text and either a number or exclamation point—to communicate appspecific information.)
iOS7으로 표준이 변경되면서 스타일이 변경되었습니다. 화면에 표시되는 위치는 최하단으로
변하지 않았고 기본 높이값, 폰트크기, 기본 아이콘 크기 등은 동일합니다.
탭 메뉴 인터랙션
1. 탭 간 이동에서는 이동 전 탭의 상세화면은 보존
2. 동일 탭을 두 번 눌렀을 때 해당 탭의 최상위 화면으로 이동

25. (iOS) 탭 구성요소
iOS 탭 구성요소
1. 아이콘
- 탭 바 아이콘 권장사이즈 (iOS 중 Retina 기준) 50 * 50 px (최대 제한 96 * 64 px)
* 툴바 혹은 네비게이션 바에 올라가는 아이콘의 권장 사이즈는 44 * 44px (Retina)
2. 아이콘 및 메뉴에 대한 설명 텍스트
- 경우에 따라 생략되기도 함.
- 20px, Regular (Retina) 권장
3. Normal과 Pressed, Selected 구분 중 iOS7에서는 주로 Normal과 Selected만 사용함
4. Disable 상태의 탭이 필요한 경우도 있음
- 앱을 사용하던 중 특정 상황에 따라 탭을 사용할 수 없는 경우에도 탭을 없애기보다는 탭
을 disable 상태로 변경하는 것을 가이드에서 권장하고 있음

26. (iOS) 탭 메뉴 인터랙션
음악
<
영화
신화
<
화이
신화
화이
음악
음악
영화
음악
iOS 탭 메뉴 인터랙션
1. 탭 간 이동에서는 이동 전 탭의 상세화면은 보존
2. 동일 탭을 두 번 눌렀을 때 해당 탭의 최상위 화면으로 이동
영화
음악
영화

27. (iOS) 비슷하게 생겼지만 다른 존재들
iOS 의 Segmented Control 과 Scope bar
종종 이 모양의 요소를 ‘탭’이라고 지칭하는데, 이름도 다르고 하는 일도 달라요.
Segmented Control
탭 바로 선택한 그 화면에서 표시되는 내용에 대한 컨트롤
1. 전체 집단 안에 있는 요소들을 표시하는 방식을 달리 가져갑니다.
2. 구분은 2개 이상이고 서로 관련되어있지만 배타적인 구분이어야 합니다.
3. 이미지 혹은 텍스트를 사용해서 구성할 수 있습니다. 하지만 각 세그먼트 하나에 이미지와
글자 모두 넣는 건 피해주세요.
4. 각각은 누르기 쉬워야 해서 44 *44 사이즈 이상이어야 합니다.
5. 눌러야 하는 이유로 아이폰에서는 5개 이하의 구분을 권장합니다. (아이패드의 경우 더 많
을 수 있음)
6. 모든 세그먼트는 같은 너비를 가져야 합니다. 뭔가 하나 글자가 더 기니까 길게 쓸래, 이렇게
되면 보기에 좋지 않습니다.
Scope bar
1. 모양 자체는 비슷하지만 검색바가 화면에 나타났을 때 그 근처에 나타나는 형태임
2. 디자인 규칙은 검색 바와 최대한 유사하게 맞추는 게 일반적
3. 스쿱 바의 각 세그먼트는 검색 바와 앱 특성에 따라 지정할 수 있고 그게 더 유용하다.
(예를 들면, 메일 앱의 경우, From, To, Title, All 음악 앱의 경우, Song, Album, Artist,
All)
4. 물론 유저가 굳이 그걸 스쿱바에서 지정하지 않도록 결과가 엄청 똑똑하게 나오는 게 베스트
라는 말은 있다.

28. (Android) 안드로이드 탭의 많은 예
세상엔 많은 안드로이드 탭 형태가 있습니다.
안드로이드에서는 주로 애플리케이션 최상위 레벨 (메뉴) 에서의 전환은 탭으로 하지 않는 편
입니다. 구글에서 나온 앱들을 레퍼런스 삼아 본다면 탭은 이미 화면에 나와있는 애들을 다시 나
눠서 보여줄 때 사용하는 경우가 많습니다. (iOS의 Segmented Control 처럼 작동함)
구글에서 제공하는 표준은 2.x대부터 매우 많이 바뀌었지만 쭉 탭 의 위치는 ‘상단’으로 고정되
어 있었습니다. 상단으로 올라와있는 탭이 iOS의 탭 메뉴처럼 메뉴의 역할을 한 적도 많지만 역
시 앱 상황에 따라 천차만별로 나타납니다. (위의 구글+, 포스퀘어, 텀블러, 챗온의 사례) 최근
에 Navigation Drawer 를 사용하게 되면서 탭 자체가 없어지는 추세도 보이고 탭이 하위메뉴
에 대해서만 표시하는 경우가 꽤 생겨나고 있습니다.
# 신비한 안드로이드의 탭
• 안드로이드에서는 탭이 마구 늘어날 경우 가로 스크롤이 가능한 탭이 있다. 앱 마켓이나 뉴스
앱의 경우 카테고리가 많아질 수 있어 움직이는 스크롤을 볼 수 있다.
• 안드로이드에서 탭 기능을 대신해서 쓰일 수 있는 스피너 (앞서 말한 뷰 컨트롤) 가 있다. 탭
과 기능은 동일하지만 밖에 빼놓고 싶지 않을 때 사용

29. (Android) 신비한 안드로이드의 탭
탭 간 스크롤 이동
탭이 길어지면 (탭 개수가 마구마구 늘어나서) 좌우로 스크롤이 가능합니다. (CNN)
탭이 길어지지 않고 화면에 고정되게 개수가 3-4개 여도 좌우 스와이프 액션으로 탭 간 이동이
가능합니다. (카카오톡)
탭과 스피너 (왼쪽이 탭, 오른쪽이 스피너)
가이드에서는 탭 기능을 대신해서 스피너를 써도 된다고 명시하고 있다. ‘사용자가 탭1에서 탭
2로 쉽게 쉽게 왔다 갔다 하면서 볼 수 있으면 좋겠어!’ 라면 탭을, ‘그렇게 자주 움직일 거 같진
않지만 필요는 하겠지‘라면 스피너를 쓰라고 권장하고 있다.

30. 탭, 한 장으로 요약
OS
iOS
Android
이름
탭, 탭 메뉴
탭바
위치
최하단 (bottom edge)
액션바 소속이므로 액션바 밑
(*화면이 넓어지면 액션바랑 길게 붙음)
주요 기능
앱 최상위 레벨에서의 구분과
페이지 이동
그때그때 다름
(구글의 앱) 컨텐츠 카테고라이징
네비게이션 기능
탭 간 전환 시 이전 탭에서 진행되었던
사항을 최대한 보존. 이전 탭에서 보던
상세사항을 유지할 수 있음
탭은 단일 뷰만 표시하고 상세화면으로
들어갔을 땐 탭은 사라짐. 필연적으로
다른 탭으로 이동하기 위해선 상세화면
을 버리고 나와야 함.
탭 형태
고정
고정, 스크롤 가능
탭 간 이동
이동을 원하는 탭을 눌러야 함
누르거나 스크롤 하거나
유사품
Segmented control
Scope Bar
Spinner (View Control)

31. Table View
List View (& Grid)
컨텐츠 목록 표시

32. 일반적으로 설정에서 많이 쓰는 UI
앱의 설정 화면
앱을 제작할 때 다른 화면은 브랜드 아이덴티티, 기획자의 물씬물씬 아이디어, 디자이너의 예술
혼을 담아 만들지만 설정 화면은 디폴트 가이드를 따르는 편이 많습니다. 직접적으로 매출(..)
이 나는 화면도 아니고 앱을 사용할 때 제반의 역할을 하는 ‘설정’이기 때문에 보통 디폴트대로
합니다.
안 지켜도 되지만 지키면 기획자도 디자이너도 개발자도 사용자도 편하지요.
iOS의 경우 저 모양(↑)을 테이블 뷰(Table View)라고 하고
안드로이드의 경우 리스트 뷰(List View) 라고 합니다.

33. (iOS) 테이블 뷰
테이블 뷰,
컨텐츠의 목록을 표시합니다.
이 다음에 연결될 상세화면이 있습니다.
타임라인 화면과의 차이점은 상세한 내용을 ‘매우 짧게’ 요약해줄 뿐 보여주진 않다는 점입니다.
(타임라인 화면은 컨텐츠를 쫙쫙 열어서 보여줍니다. 페이스북 처럼)
iOS 가이드에서는 그룹 지어진 ‘Table view’ 를 예시로 보여줍니다.
테이블 뷰의 구성요소
1.
2.
3.
4.
5.
6.
테이블 뷰 그룹 지어진 타이틀 (iOS7의 경우 짙은 회색 영역)
테이블 뷰 셀 (iOS7과 iOS6 모두 흰색 영역)
테이블 뷰 셀 안의 아이콘 (세 번째 화면에서 아이콘)
테이블 뷰 셀 안에 표시되는 텍스트 (About, Software Update 같은 텍스트)
테이블 뷰 안의 화살표 (Accessory view)
테이블 뷰 자체에서 컨트롤하는 ON-OFF 버튼 (세 번째 화면의 Airplane mode)

34. (iOS) 테이블 뷰의 셀
테이블 뷰의 셀
셀 크기 디폴트
- 세로 디폴트 값 44px (Retina 88px) (*랜드스케이프 32px Retina 64px)
- 가로 디폴트 값 320px (Retina 640px)
(*랜드스케이프 480px Retina 960px 5/5S 1136px)
- 가장자리에서 컨텐츠로의 간격 디폴트 15px (Retina 30px)
1px / LINE컬러 (231,227,221)
320*47
BG컬러 (255,255,255)
디자인 가이드 넘길 때
사이즈 기준은 No Retina 사이즈로 표시하더라고요. (두 개 다 표시할 수 있지만 작은 숫자를
표시)

35. (iOS) 테이블 뷰의 아이콘
테이블 뷰의 아이콘
모든 테이블 뷰에 아이콘이 있지는 않음. 있기도 하고 없기도 함.
- 디폴트 크기는 29px * 29px (Retina는 58*58)
- iOS 기본 설정에서 표시하는 아이콘으로 디자인에 따라 유동적
d1_icon_1.png
16*16
d1_icon_2.png
16*16
d1_icon_3.png
16*16

36. (iOS) 테이블 뷰 셀 안의 텍스트
테이블 뷰 셀 안에 들어가는 글자
테이블 뷰에 글자는 언제나 들어감.
- 디폴트 크기는 28px
- 두께는 Regular

37. (iOS) 테이블 뷰 셀 안의 화살표
테이블 뷰 셀 에서 표시되는 화살표
이 셀을 누르면 다음 페이지로 넘어갈거야, 를 나타내는 화살표
정확히 이 모양 화살표는 Disclosure Indicator 라고 부릅니다.
iOS6일 때는 Detail Disclosure Button이랑 매우 비슷했지만 iOS7에서부터는 모양이 달라
졌습니다.
나온 리스트에서 셀을 선택할 때 표시
(상황에 따라 한 개 혹은 여러 셀 선택 가능)
이 셀을 눌러서 데이터 구조 상 하위(다음페이지)에
테이블 뷰가 있을 때 사용
이 셀을 눌러서 표시되는 다음 화면이 셀에 표시된
아이템의 상세화면일 때 사용 (테이블 뷰 아님)
테이블에서 셀 들의 순서 조정
테이블에서 셀을 추가
(아이템 추가)
테이블에서 셀을 삭제할 때 (아이템 삭제)
이 걸 누르면 delete button 이 나타남
Delete button control 을 누르면 선택된 셀의
오른쪽에서 튀어나옴. 누르면 정말 지워짐 (얼럿
없음)

38. (iOS) 테이블 뷰 온오프버튼
테이블 뷰 셀 에서 껐다켰다 하는 온오프 버튼
스위치는 딱 두 개의 제한된 선택 혹은 상태를 변경할 때 사용됩니다.
모양새는 비슷한데 보기에 달라졌습니다.
저기 ON 상태에 있는 TintColor 만 지정가능하고 iOS6에서 까지 사용되던 커스텀 온오프 버튼
은 무시(ignored) 됩니다. 만들어봐야 쓸 수 없음.

39. (Android) 리스트 뷰와 설정
리스트 뷰, 그리고 설정 용 인터페이스
앞에서 써놓은 iOS의 테이블 뷰의 경우 설정에서 많이 사용합니다.
안드로이드 에서는 대표적인 레이아웃 두 가시 리스트 뷰와 그리드 뷰 중 리스트 뷰 형태로 설정
을 표현합니다.
설정 화면의 구성요소
1.
2.
3.
4.
5.
그룹 지어진 타이틀 (STORAGE 라고 써 있는 영역)
셀
셀 내 타이틀 텍스트
셀 내 서브 텍스트 (설명)
ON-OFF 를 나타내는 체크박스 와 온 오프 버튼
• iOS에서 사용하는 화살표 (다음 화면의 특징을 구분 지어주는 아이콘) 가 없습니다. 따라서
해당 셀을 눌렀을 때 팝업을 띄울 것인지 다음페이지로 넘어갈 것인지를 구분하지 않고 있습
니다.
• iOS에서는 온오프가 체크박스 기능도 한 번에 해결하는 반면 안드로이드에서는 이 두 개가
분리돼서 사용됩니다.

40. (Android) 리스트 뷰 예시
리스트 뷰 예시
세로로 길게 아이템을 표시해줍니다.
각 항목들은 가로로 긴 형태로 표시됩니다.
1. 그룹 지어진 타이틀 (Section Divider 섹션 구분선)
- 리스트 내용을 그룹 지어서 표시. 보통 나열되는 컨텐츠가 매우 많아질 때 사용합니다.
2. 셀 (Line items 라인 항목)
- 리스트 항목은 단순한 한 줄 항목, 여러 줄 항목, 아이콘이 있는 사용자 정의 항목, 체크박
스, 동작 버튼 등을 포함하여 각기 다른 데이터 형태에 따라 다양한 구성을 수용할 수 있습니
다. (List items can accommodate a wide range of data types in different
arrangements, including simple single-line items, multi-line items, and custom
items with icons, checkboxes, and action buttons.) 라고 써 있음

41. (Android) 리스트 뷰의 셀 크기
리스트 뷰의 셀 크기 (권장)
안드로이드 디자인 가이드 라인에서는 눌러져야 하는 UI 요소(Touchable UI components)
에 대해서는 48dp을 권장으로 제시하고 있습니다.
권장이 48dp 인 이유는
- 근래에 나온 기기들의 화면과 해상도 상 48dip 이면 7mm 밑으로 떨어지지 않는 크기임
- 되도록 많은 기기에서 적당히 많은 정보를 잘 표현할 수 있는 합의점인 크기
* 하지만 디폴트 크기가 없다고 보고 셀의 높이값, 글자와의 간격들을 지정해서 전달해야합니다.

42. (Android) 리스트 뷰의 텍스트
리스트 뷰에서의 텍스트
아이스크림 샌드위치 이후에 안드로이드에서는 Roboto 폰트를 권장으로 밀고 있지만, 이건 영
어고 한국어는 유저가 폰에서 셋팅한 폰트대로 나오고 있습니다.
폰트를 나타내는 단위는 SP(Scale-independent Pixels)
160dp 기준으로 1sp = 1픽셀 (인데 보통 1dp = 1sp 로 판단하고 일하면 됩니다.)
정말 중요한 폰트 크기
안드로이드 가이드 라인 상 폰트 크기는 4종으로 제한. (하지만 이걸 어긴다고 앱이 리뷰에서
짤리지는 않으나 ‘지저분해 질 수 있으니(too many different sizes in the same UI can be
messy.)’ 제한을 두었습니다.
리스트 뷰 (설정) 에서의 기본 폰트 크기는
- 셀 내 타이틀 텍스트 : 18sp
- 셀 내 서브 텍스트 (설명) : 14sp

43. (Android) 설정 온오프 버튼과 체크박스
설정에서의 체크박스
체크박스에 대한 설명은 단 하나의 체크박스로 특정 기능을 끄고 키는데 사용하지 마세요. 그때
는 스위치(온오프 버튼)를 쓰세요. (Checkboxes allow the user to select multiple
options from a set. Avoid using a single checkbox to turn an option off or on.
Instead, use an on/off switch.) 라고 나와있지만 이미 설정에서는 이 둘을 혼용하고 있다.
원래 만들어진 목적 자체는 iOS 설명에서의 Checkmark 와 같고 리스트 중 복수 선택의 의미
를 가지고 있음 . 하지만 실상은 그냥 기능을 켜놓을래 끌래 로 사용되고 있다.
* Focused는 디바이스에 내장된 볼로 화면을 이동할 때 보이는 Pressed 전 상태. 정확히 모든
기기에 다 대응하려면 디자인을 위에 표시된 5종을 모두 해야 한다.
설정에서의 온오프 버튼(Switch)
온-오프 스위치는 단일 설정에 대한 옵션 토글에 사용한다. (On/off switches toggle the
state of a single settings option.) 이렇게 정의되어 있음. 주로 에어플레인 모드, 와이파이
꼈다 키는 모드, 등에 사용되고 ‘알림을 켜놓을게요’ 와 같은 기능은 체크박스를 쓴다.

44. 테이블 뷰와 리스트 뷰, 한 장으로 요약
OS
iOS
Android
이름
테이블 뷰 (Table view)
리스트 뷰 (List view)
셀 여러 개
묶는 타이틀
있음
있음
셀 내 텍스트
한 줄 (28px)
화살표
스위치
Disclosure indicator *
Detail Disclosure button *
상태가 딱 둘일 때 사용
iOS의 화살표 는 서로 용도가 다르므로 구분해서 사용
타이틀 텍스트
설명 텍스트 (서브)
없음
에어플레인 등 모드 전환시 사용
수신 / 수신거부 등은 체크박스

45. (Android) 그리드 뷰
그리드 뷰 (예시는 google play music , 폰과 타블릿 버전)
모자이크 형태 (혹은 타일) 로 가로세로로 이미지를 나열. 이미지와 함께 보여주는 리스트 화면
이기 때문에 ‘보기 좋음’ 리스트가 위아래로만 스크롤이 가능한 반면 그리드 리스트는 위아래 양
옆으로 모두 스크롤 할 수 있다. 그렇지만 위-아래 혹은 양옆으로 스크롤 방향을 고정해야지 둘
다 한번에 제공하려고 욕심부리면 안 된다.
가로로 놓고 스크롤 되게 하는 이유는 ‘화면 사이즈가 다양해서’
세로로 스크롤이 되는 경우에는 가로에 놓이는 이미지 수가 딱 정해지고 (아래 왼쪽)
가로로 스크롤이 되는 경우에는 세로로 놓이는 이미지 수가 정해짐 (아래 오른쪽)

46. Popup & dialog
화면에 뭔가 하나
더 뜬 다면

47. 얼럿, 경고창
iOS에서의 경고창
영어로 된 가이드에서는 대문자 어쩌고 있지만 한국어로 했을 때는 그런 거 다 무시하고 두 스타
일로 나옵니다.
1) 상세 설명이 없는 경고창
- 되도록 한문장으로 끝나는 경고
2) 타이틀과 상세설명이 있는 경고창
- 타이틀은 짧고 상세설명도 한문장으로 끝나는 경고
안드로이드에서의 경고창
1) 타이틀이 없는 경고창
- 되도록 한문장으로 끝나는 경고 (본질은 iOS와 같으나 스타일이 다름)
2) 타이틀 바가 있는 경고창
- 타이틀은 짧고 상세설명도 한문장으로 끝나는 경고
* YES / NO 옵션이 있을 때
- YES는 언제나 오른쪽 / NO는 왼쪽

48. 피커
iOS에서의 피커
화면 하단에 붙어 보이고 각각이 독립적인 휠로 존재.
선택된 숫자는 다른 것보다 찐한 색으로 표시
사이즈 조정 불가능. 아이폰 키보드와 똑같은 사이즈
안드로이드에서의 피커
대화상자로 뜸 (얼럿처럼)
무엇을 선택해야하는 지 타이틀을 표시 (경고창 타이틀과 스타일이 동일)

49. 액션시트
iOS에서의 액션시트
화면 가장 하단에 표시, 2개 이상의 옵션을 제공.
유저에게 ‘이거 할래, 저거 할래’ 를 받아서 처리
조금 위험하다 싶은 액션 (연락처 지우기) 에 대해서는 확인 차 사용 (빨간 글씨)
아이폰에서는 제시한 옵션 중에 선택하지 않고 그저 액션시트를 닫기 위한 Cancel의 위치가 화
면 최하단 으로 누르기 쉽게 설계함
안드로이드에서의 액션시트
어떤 액션을 하길 원하는 아이템을 롱프레스하면 대화상자로 뜸. 여러 옵션을 제공
(일반적으로 안드로이드에서 제공하는 기능 리스트가 더 많은 편)
Cancel 버튼은 따로 없고 디바이스에 있는 뒤로가기 버튼을 누르면 닫힘
* 액션바에서 해결하기도 함

50. 토스트
안드로이드에만 있는 토스트 메시지
커스터마이징을 하지 않고도 제공하는 토스트 메시지
사용자가 뭔가를 해서 전송하거나 삭제하거나 저장되거나 했을 때 되도록 사용자를 기다리게
하지 않고 다른 일을 할 수 있게 하고 앱이 알아서 먼저 시킨 일을 한 다음에 ‘나 이거 다 했어요’
를 알려주는 UI
통상 아래쪽 가운데에 검은색 bg에 흰 글씨로 뜬다.

51. 화면에 하나가 더 뜨는 상황, 한 장으로 요약
OS
경고창(Alert)
iOS
Android
경고창, 확인창
경고창, 확인창
타이틀 텍스트
기본 텍스트
타이틀 + 상세설명
타이틀 + 기본 텍스트
Y/N 버튼 위치
N 왼쪽 Y 오른쪽
N 왼쪽 Y 오른쪽
피커(Picker)
Pickerview
Picker, 대화상자
위치
화면 맨 하단, 키보드와 같은 길이
중앙
스타일
휠방식
+ 버튼 – 버튼으로 조정
액션시트
액션시트
Picker, 대화상자
위치
화면 맨 하단
중앙
취소버튼
있음
없음
권장 옵션 수
2-3개,
스크롤이 될 정도로 길면 안 됨
권장사항 없음.
보통은 5-6개까지도 늘어남
토스트메시지
없음
있음, 화면 하단에 표시
경고창 내용
* 위의 4가지 모두 다 ‘화면에 하나 더’는 아니지만 현재 보고 있는 뷰에 추가된다는 점에서 모아서 정리

52. Details
세세한 차이

53. 검색화면의 차이점, 텍스트 필드 UI
텍스트 필드에서 기본으로 제공하는 (X)
위에 표시한 이미지는 고전, 이긴 하지만 저 시대부터 지금까지 이어져오는 큰 차이점. iOS 검색
바는 자동으로 X 가 생성되는 반면, 안드로이드는 이것과 같은 모양을 제공하려면 커스텀 제
작이 필요합니다.
Android
iOS
X

54. 버튼의 차이점
(안드로이드) 기본 버튼 형태
기본버튼 (박스 안에 글자 혹은 아이콘이 들어가있는 형태)과
테두리가 없는 버튼 (글자 혹은 아이콘만 보임) 두 형태가 있음
*눌러졌을 때의 홀로 효과가 들어가 있음
(iOS7) 기본 버튼 형태
iOS7의 기본 버튼 형태는 테두리 없고 글자만 있는 형태이다.
필요하다면 테두리와 배경색을 쓰는 것을 허용하고 있다.
* 테두리의 형태는 박스도 가능하고 원도 가능하다. 사용맥락에 따라 허용하고 있음
iOS7으로 넘어오면서 두 OS의 버튼 스타일이 덜 상이해졌다.

55. 용도에 따른 화면편

56. Timeline
컨텐츠를 쭈욱 펼쳐서
보여주는 화면

57. 타임라인은 딱히 UI 가이드에는 없음
타임라인
iOS와 안드로이드 모두 피드 형태의 화면에 대한 가이드는 딱히 없다. 가이드라인대로만 보자
면 사용자에게 제공되는 컨텐츠는 리스트에서 선택해서 눌러서 전체 내용을 보는 방식으로 제
공 되어야 할 것 같지만 소셜네트워킹 앱들 대부분이 그 아이템에 해당되는 내용을 다 까서 보여
주는 UI를 취하고 있다. 내용만 보여줄 뿐 아니라 그 상태에서 아이템에 대한 액션까지 취할 수
있는데 (좋아요, 코멘트달기, 리트윗 등)
• iOS와 안드로이드 고유의 UI가 녹아나기보다는 서비스 업체의 브랜드 아이덴티티가 매우 잘
드러나는 편이라 ‘보이는 화면’보다 인터랙션에서의 차이가 더 두드러진다.
디자인 가이드 라인의 경우 테이블뷰와 텍스트 뷰에서 보여주는 규칙과 동일하게 ‘요소들의 위
치‘ 혹은 ‘요소들간의 관계＇에 대해서 표시해주면 됩니다.
하지만 사용자가 제스쳐를 알기 힘들기 때문에 굳이 사용하지는 않는 편.

58. 타임라인에서의 제스쳐
타임라인 에서 개별 아이템 에 대한 제스쳐
iOS의 경우 좌우 스와이프를 하면 메뉴가 나타납니다.
안드로이드의 경우 롱프레스를 하면 메뉴가 나타납니다. (일반적으로 많이 쓰는 메뉴 형태는 아
님)
* 옆의 벅스 화면은 타임라인 화면은 아니지만 개별 아이템에 대한 제스쳐에 대한 비교로 표시.
안드로이드의 경우 롱프레스로 선택 가능한 액션이 있을 경우 셀 아래쪽에 삼각형으로 표시
이 경우 제스쳐를 통해 제공하는 기능은 해당 아이템 상세화면에서 똑같이 제공하고 있습니다.
해당 아이템 상세화면은 타임라인에서 그 아이템을 누르면 들어가는 화면입니다.

59. Compose
글을 작성하는 화면

60. (iOS) 글 작성 화면
Twitter (iOS7)
Sunrise calendar (iOS7)
Nextdoor (iOS6)
Tumblr(iOS6)
글을 작성하는 화면
iOS7의 경우 왼쪽에 cancel 오른쪽에 완료 (Tweet 혹은 Add 혹은 Save) 버튼이 올라갑니다.
Cancel을 누른 경우 추가 저장을 할 것인지 아닐지 action sheet 가 표시됩니다.
완료를 누른 경우 입력한 데이터는 별도의 확인과정 없이 전송됩니다.
액션 시트는 iOS6와 iOS7에서 모양이 조금 달라져있습니다. 액션시트에 표시하는 아이템 수는
2개 이상 가능합니다.

61. (iOS) 글 작성 화면의 많은 예
완료 (SEND) 액션을 키보드 엔터로 대신한 예
Circle (iOS6)
Movies & TV Shows (iOS6)
작성 창 자체가 팝업으로 따로 뜬 예
Flip Board (iOS6)
Friends around me (iOS6)
키보드 밑에 더 첨부할 사항들을 넣은 예
Path (iOS6)
Evernote (iOS6)

62. (Android) 글 작성 화면
Vine
Nwplaying
Foursquare
글을 작성하는 화면
안드로이드의 경우 오른쪽에 완료 (Tweet 혹은 Add 혹은 Save) 버튼이 올라갑니다
왼쪽에는 이전화면으로 이동하는 버튼이 있고 디바이스의 back버튼 기능과 유사합니다.
- 단, 키보드가 올라와있는 상태에서 디바이스 뒤로가기 버튼을 누르면 키보드가 내려가고 한
번 더 눌러야만 그 페이지에서 이탈하는 반면, 화면에 표시된 위로가기 버튼은 한번에 그 페이지
를 이탈합니다.
- 취소 버튼을 눌렀을 때 다이얼로그 출력
* UI에 따라 작성한 화면 아래쪽에 완료 버튼을 놓기도 합니다.

63. (Android) 글 작성 화면
완료 (V) 버튼이 왼쪽에 있는 예
Evernote
앱 기능이 수정된 사항은 무조건 저장, 이라 취소버튼이 존재하지 않음
완료가 아래, 취소가 오른쪽 위에 있는 경우.
Runkeeper
취소와 공유가 위쪽에 반반씩 박혀있는 형태
Google Plus

64. Side bar & Drawer
옆에서 나오는 메뉴

65. 사이드바 & 네비게이션 드로워
Google Currents (iOS6, iOS7)
Google Currents (Android)
메뉴가 많아지면 옆으로 세우는 사이드 바
iOS에서는 Path 앱의 2.0 버전을 전후해서 햄버거버튼으로 메뉴가 나왔다 들어갔다 하는 형태
가 굉장히 지배적으로 바뀌었습니다. (사용성에 대해서는 여전히 논란이 많지만 여러 개 컨텐츠
를 더 고민하지 않고 밀어 넣을 수 있다는 장점이 있습니다.) 안드로이드에서는 개별 앱 개발자
들이 사이드바를 사용하다가 네비게이션 드로워를 들고 나오면서 공식화되었고요.
나타난 모양이 사이드바인지 네비게이션 드로워인지는 나타나는 모양에 따라 구별할 수 있습니
다. 화면 전체를 채우는 컨텐츠의 위치가 이동하는 것은 동일하지만 사이드바의 경우 액션바나
네비게이션바가 통째로 이동하고, 네비게이션 드로워는 액션바 위치는 그대로 유지한 채로 컨
텐츠가 밀리고 아래에 있던 게 나타는 형태입니다.
* Google Currents (세상보기) 앱에서는
안드로이드에서의 스피너를 iOS에서는 네비게이션 바에서 sorting 가능하게 처리함.

66. (iOS) 사이드바
Google Gmail (iOS6)
Readablity (iOS6)
rdio (iOS6)
Snapguide (iOS7)

67. (Android) 사이드 바 & 네비게이션 드로워
다음 사전
Amazon Kindle
Linked in
CliffHanger
The Verge

68. Profile
프로필

69. 프로필 화면, 예시 1 Vine
Vine (iOS6, Android, iOS7)
프로필 화면은 OS별로 다르지 않음
OS 특성이 보이기 전에 우선 서비스 특성을 녹아내는 편이 더 많습니다. 하지만 OS특징에 맞춰
서 약간씩 변동되기도 합니다.
주로 서비스 특징에 맞춰서 디자인을 하고 세부적인 사항에서 OS별 특징을 적용합니다.
1. Vine에서 iOS6와 안드로이드의 차이점을 찾아보세요.
2. Vine에서 iOS6와 iOS7으로 변경되면서 다른 점을 찾아보세요.

70. 프로필 화면, 예시 2 Instagram
Instagram (iOS6, Android, iOS7)
iOS7만 매우 다르지만 인스타그램의 예시도 비교해봅시다.
# 이 서비스의 경우 iOS6 지원에서 iOS7 위주로 바뀌었을 때 탭의 기능이 추가되어 포토맵 옆
에 사람 모양의 아이콘이 더 나오게 되었습니다. UI상의 차이점이라고 보기 어려우니 이 부분은
스킵하고 비교해주세요.
1. Instagram 앱 의 OS별로 다른 점을 되도록 많이 찾아보세요.

71. Login
로그인 화면

72. 로그인 화면이 OS를 아주 많이 타는 이유
Vine (iOS7, Android)
또 Vine 이지만 OS의 특징이 많이 많이 녹아있는 로그인 화면
이 화면은 키보드가 화면의 반을 차지해서 화면을 사용하는데 제약이 많습니다. 그리고 취소, 저
장 액션과 위치가 OS에서 제공하는 방식을 그대로 따르게 되어 같은 앱이라고 해도 서로 다르
게 나타납니다.
1.
2.
3.
4.
Cancel 액션
SAVE 혹은 Next 기능의 표시 방식
커서
입력영역 표시

73. (iOS7) 로그인
Luvocracy (iOS7)
Sunrise Calendar (iOS7)
eBay (iOS7)
Artsy (iOS7)

74. (iOS6) 로그인
Basecamp (iOS6)
Sparrow (iOS6)
Spotify (iOS6)
Square (iOS6)

75. (안드로이드) 로그인
Instagram
Tumblr
벅스
Facebook

76. 이후 내용은
여러분의 제보를
기다립니다
elenkim@i-um.net
이런 부분이 더 궁금하다?!
보내주세요