8P by xguru 2020-05-07 | favorite | 댓글 2개

단순 비교만이 아니라, 각 OS UI의 특장점을 이해하는데 좋은 글

기본 차이점
1. HIG vs. Material Design
2. 단위: pt vs. dp
3. 스크린: 320pt x 568pt vs. 360dp x 640dp
4. 폰트 : San Francisco vs. Roboto
5. 안드로이드 네비게이션 바
6. 매터리얼 디자인의 Shadow와 Elevation
7. Naming:
ㅤ→ Tab bar vs. Bottom Navigation Bar
ㅤ→ Navigation Bar vs. Top App Bar,
ㅤ→ Segmented Controls vs. Tabs
ㅤ→ Alerts vs. Dialogs
ㅤ→ Touch ID vs. Android Fingerprint
8. 탑 레벨 내비게이션 방법
9. 탭바와 하단 네비게이션 바의 차이
10. 안드로이드 탭의 특별한 기능
11. 하위 페이지 보이는 방법의 차이
12. 네비게이션 서랍(Drawer) 호출 패턴
13. 스크롤시의 동작 차이
14. 검색 동작의 차이

컴포넌트(UI) 차이점
15. iOS에 없는 것들
ㅤ→ Navigation Drawer, Backdrops, Banner, Snackbar, Chips, Bottom App Bar, FABs(Floating Action Button), Bottom Navigation Drawer, Side Sheet, Expanding Bottom Sheet, Standard Bottom Sheet,
16. Android에 없는 것들
ㅤ→ Page Control, Toolbars, Steppers, Popovers
17. 같지만 다른 Status Bar
18. Refresh Content Control vs. Swipe to refresh
19. 컨트롤들의 비주얼 차이점
20. 뒤로 가기 화살표의 모양과 헤더포지션 차이
21. "점 세개" 아이콘의 차이점
22. Pickers : iOS 날짜선택은 드럼타입, 안드로이드는 일반 달력 모양
23. 텍스트 필드의 차이
ㅤ→ iOS 는 레이블을 필드위에 보여주고 입력시 사라짐, 안드로이드는 입력시 위로 이동
ㅤ→ 내용 Clear 버튼은 비슷
ㅤ→ 매터리얼 디자인은 입력시 밑줄을 Primary색상으로 강조
24. Context Menus vs. Menus
25. Action View/Activity View vs. Modal Bottom Sheet
26. Edit Menus vs. Text Selection Toolbar
27. 디바이더 사이즈 크기 : iOS 0.5pt vs. Android 1dp

다른 차이점
28. 탭 존 크기 : iOS 44x44pt , Android 48x48dp
29. App Store vs. Google Play
30. iOS의 특이한 Undo/Redo : 사용자가 폰을 흔들면 Undo 기능 동작
31. 런치 화면의 차이 : 매터리얼은 런치화면에 앱로고를 허용하지만, HIG는 런치화면에을 마케팅용도로 사용하는것은 추천하지 않음. 플레이스 홀더로만 사용
32. 매터리얼 디자인의 추가 요소 : Data Format, Data Visualization, Empty States, Offline States 등

스타트업인데 앱은 뭘로 개발해야 하나요? 라는 질문에 저의 기본 대답은

#1 앱이 꼭 필요없는 서비스라면, 모바일 웹만 먼저 잘 만들어도 됩니다.
#2 앱이 꼭 필요하다면 초기엔 React Native 나 Flutter 로 iOS/Android 플랫폼을 동시 지원하세요.
#3 사용자 많아지고 개발자도 늘고 자금도 생기면, 각 OS에 최적화된 네이티브앱으로 바꿔도 좋습니다. (Swift & Kotlin)

근데, 이거 10년 전과 대답이 똑같습니다.
그때는 HTML5, Hybrid(Phonegap) , Objective C++ & Java 였을 뿐..
지금은 웹을 React로 만들면 React Native 때문에 조금 편하긴 하겠네요.
#1은 무조건, #2를 추천하고, #3은 선택

이 UI 비교 글은 #3번일 때는 잘 이해해야 하고, #2일때도 봐두면 좋은 글입니다.

xguru님이 남긴 댓글에 이어서

단 카메라, GPS, 가속 센서 등이 하드웨어를 많이 타는 서비스이라면, 바로 3번으로 가십시요.
(ex. 실시간 비디오 필터앱을 만들겠다 -> #3으로...)