[내일배움캠프] Day 13 - UI 차이점 찾아보기

[숙제]

 

1) UI 차이점 찾아보기

1. 카카오톡

• iOS: 하단에 탭 바(Tab Bar)가 고정되어 있으며, 아이콘과 텍스트가 함께 표시
• Android: 하단 내비게이션 바가 Material Design을 따르며, 탭 아이콘이 더 크고 일반적으로 텍스트는 선택된 탭에만 표시

이유:

• iOS는 일관된 탐색 경험을 제공하기 위해서 Human Interface Guidelines에 따라 하단 고정 탭 바 사용을 권장
• Android는 Material Design의 영향으로 플로팅 액션 버튼(FAB)이나 단순화된 내비게이션 구조를 선호

차이점 2: 뒤로 가기 버튼

• iOS: 네비게이션 바 상단에 'Back' 텍스트와 화살표 표시
• Android: 하드웨어 뒤로 가기 버튼이 기본적으로 지원, UI에서는 화살표 아이콘만 표시되는 경우가 많음

이유:

• iOS는 화면 전환 내비게이션이 상단에 집중되며 텍스트와 함께 직관성을 높이는 방식
• Android는 하드웨어 버튼 사용이 가능해 UI 공간을 더 단순하게 설계할 수 있음

2. 인스타그램 (Instagram)

• iOS: 상단 우측에 공유 버튼이 위치하며, 네이티브 iOS 공유 시트가 열림
• Android: 상단 또는 하단의 세로 점 세 개(Overflow Menu)로 메뉴를 열어 여러 옵션을 제공

이유:

• iOS는 기본 공유 시트 UI를 유지하여 Apple 생태계와 일관성을 유지
• Android는 Material Design의 더 많은 사용자 정의를 지원, 다양한 기기와 화면 크기에서 최적화된 UI를 제공

차이점 2: 폰트 스타일과 크기

• iOS: SF Pro 폰트를 기본으로 사용, 자간과 행간이 더 좁음
• Android: Roboto 또는 구글 Sans를 사용, 상대적으로 폰트 크기와 간격이 더 큼

이유:

• iOS는 미니멀리즘과 세련된 텍스트 렌더링을 지향
• Android는 가독성과 다양한 화면 해상도를 고려해 더 큰 폰트를 권장
• 차이점 1: 콘텐츠 공유 및 메뉴 옵션의 위치와 아이콘
• 차이점 1: 하단 내비게이션 바의 위치와 스타일

 

같은 서비스의 앱과 웹의 차이

 

1. 네이버(Naver)

차이점 1: 홈 화면의 구성 및 탐색 방식

• 앱: 홈 화면에 검색창과 주요 서비스 바로가기가 상단에 고정되어 있으며, 사용자가 커스터마이징할 수 있는 하단 탭 메뉴가 있음
• 모바일 웹: 검색창과 메뉴는 스크롤에 따라 사라졌다가 다시 나타나며, 커스터마이징 옵션이 없음

이유:

• 앱은 지속적인 사용과 개인화를 염두에 둬 더 정교한 UI 설계를 제공
• 모바일 웹은 브라우저 기반으로 동작하기 때문에 사용자 세션이 짧고, 메모리 사용을 줄이기 위해 UI가 단순화됨

차이점 2: 푸시 알림 및 실시간 피드 업데이트

• 앱: 푸시 알림을 통해 새로운 콘텐츠를 실시간으로 알려줌
• 모바일 웹: 푸시 알림을 사용할 수 없거나 브라우저 알림만 제한적으로 제공

이유 : 앱은 네이티브 기능을 활용해 실시간 알림을 제공할 수 있지만, 모바일 웹은 브라우저 제한으로 인해 실시간 업데이트가 어려움

 

2. 쿠팡(Coupang)

차이점 1: 결제 및 구매 화면

• 앱: 결제 화면에서 쿠팡페이를 지원하며, 생체 인증을 활용할 수 있음
• 모바일 웹: 로그인 유지 시간이 짧고, 생체 인증을 사용할 수 없으며 결제 과정이 더 복잡함

이유:

• 앱은 로컬 데이터 저장 및 보안 기능을 활용해 빠르고 안전한 결제를 지원할 수 있음
• 모바일 웹은 보안상 제약과 세션 기반 인증으로 인해 복잡한 프로세스를 가질 수밖에 없음

차이점 2: 애니메이션 및 전환 효과

• 앱: 부드러운 애니메이션과 전환 효과(슬라이딩, 페이드인/아웃)가 풍부
• 모바일 웹: 전환 효과가 단순하거나 페이지 리로드가 발생

이유:

• 앱은 네이티브 코드로 더 정교한 애니메이션 구현이 가능하며, GPU 가속을 사용할 수 있음
• 모바일 웹은 HTML, CSS, JavaScript에 의존하며, 과도한 애니메이션은 성능 저하를 초래할 수 있음

요약

1. 기술적 제한: 웹은 브라우저 기반 기술에 의존, 앱은 OS와 직접 통신할 수 있음
2. 사용자 경험 최적화: 앱은 지속적이고 반복적인 사용을 위한 최적화가 필요
3. 데이터 저장 및 보안: 앱은 로컬 데이터와 생체 인증을 활용할 수 있지만, 웹은 쿠키 및 세션 기반 인증에 의존
4. 퍼포먼스 차이: 앱은 네이티브 코드로 더 빠르고 부드러운 동작을 제공

 

2) 와이어프레임 그리기

 

어디까지 단순화 해야하는지 아직 감이 잘 안잡힌다.

어렵다 어려워 피그마

계속 수정중이긴 한데 와이어 프레임을 계속 수정한다고 큰 의미가 있나 싶다ㅠㅠ

그래도 해야지! 해봐야 느는거지!
아우 화이팅이다!