[UX/UI 디자인] IOS와 안드로이드 앱 비교 분석

 

내일 배움 캠프가 이제 3주가 지나갔습니다!

오늘이 끝나면 이제 기대하고 고대하던 연~~~휴가 기다리고 있네요 ㅎㅎ

연휴 중 계획해둔 일정은 없지만 쉬엄쉬엄 할 수 있다는 게 참 행복하네요 ㅎㅎㅎㅎㅎㅎ

 

 

 

어제부터 피그마 활용 심화 강의를 듣기 시작했습니다.

오늘은 IOS와 안드로이드의 앱이 어떻게 

다른지 스타벅스 홈 화면으로 알아보는 공부를 해보았습니다!

 

 

위에 있는 이미지는 안드로이드이고 밑에 있는 이미지는 IOS 인데요.

저는 스타벅스의 홈 화면을 기준으로 분석을 해보았습니다!

가장 먼저 앱 화면 위에 아이콘의 컬러가 다르다는 걸 느꼈는데요

배경의 컬러가 다르지만 IOS의 배경 컬러와 아이콘의 컬러가 비슷한 밝기의 컬러를 가지고 있어서 

보기가 힘들더라구요.

 

그리고 가장 큰 차이로는 하단에 있는 딜리버스 버튼의 생김새가 보이는데요.

가장 먼저 차이가 나는 것이 그림자라고 생각했어요.

(컬러의 차이는 디스플레이마다 다를 수 있기 때문에 일단 배제해두었습니다.)

다시 보니 또 다른 차이가 보이는데요.

버튼의 패딩값이 다른 점을 확인할 수 있습니다.

그리고 마진값도 다르네요 :)

 

 

다른 화면에서도 찾아보았습니다.

슬라이드로 아래로 내렸을 때 칩의 그림자가 또 다른 것을 확인했습니다.

---

IOS와 안드로이드의 UI의 차이가 어떤 것이 있을지 이렇게 찾아본 후 

안드로이드와 IOS 앱 디자인 가이드 사이트에서 확인을 해보았습니다!

https://developer.apple.com/design/human-interface-guidelines

Human Interface Guidelines | Apple Developer Documentation

https://m3.material.io/

Material Design

---

 

IOS의 아이콘 기준에서 배경색과 아이콘 컬러에 대한 내용을 가져왔습니다.

아이폰의 종 모양 아이콘은 보기 어려웠는데
IOS에서 말하는 좋은 앱 아이콘이라고 보기 어렵다고 생각합니다.
중요한 알림일 수도 있는 기능인데 잘 보이지 않는 컬러로
배치한 이유가 뭘지 한번 생각해 봐야겠습니다.
안드로이드에는 아이콘 배경색에 대한 지침을 확인하지 못했습니다.

 

 

 

또한 그림자에 대한 내용에서 안드로이드 디자인 가이드 기준에서 확인해 보았습니다.

위의 내용에서 안드로이드에서는 컴포넌트의 기본 높이에 대한 기준이 명확하게 있었습니다.

---

 

 

챗 지피티의 앱도 안드로이드와 IOS 버전이 다른 것을 확인해 보았습니다.

안드로이드와 IOS 버전에서 어떤 기준이 있기 때문에 이렇게 다른지 함께 확인해 보면 좋을 것 같습니다 ㅎ

 

 

---

개인 회고

오늘은 안드로이드와 IOS의 차이에 대해서도 공부했지만 웹과 앱의 차이도 다름을 배웠습니다. 웹에서의 그리드와 태블릿과 앱의

그리드 차이가 다름을 알게 되었는데요. 그 기준을 디자이너가 잡고 디바이스마다 디자인을 하는 것을 알게 되었습니다.

 

또한 디자인을 하기 전 작업이 생각보다 여러 방법이 있다는 것을 알게 되었는데요.

사용자 시나리오와 IA로 기획을 해보는 것도 있음을 알게 되면서 "와 간단해 보이는 앱조차 이런 과정을 가지고 앱이 만들어지는구나"라는 것을 생각하게 되었습니다.