ios vs aos (1)
Feat. ChatGPT
일하면서 헷갈렸던 개념들을 정리해 봤습니다.
먼저 챗GPT의 도움을 받아서 ios와 aos의 디자인 차이점을 표로 받았습니다.
출처 : ChatGPT정리할 내용이 많아서 몇 개의 글로 나눠서 발행하려고 합니다.
이 중에서 제가 특히나 정리해두고 싶은 내용은 아래와 같습니다.
1. 툴바(toolbar), 탭바(tab bar), 네비게이션 바(navigation bar), 앱바(app bar)
https://designflyover.com/understanding-the-ios-and-android-ui-guidelines/Toolbar: 주식 상세 화면 내의 관심종목 추가 버튼처럼, 특정 화면 내에서 가능한 행동 제시.
- Android는 상단에서 앱 타이틀과 액션을 제공, iOS는 하단에서 추가 액션을 제공.
Tab Bar: 해당 앱의 최상위 메뉴. 현재 앱에서 내가 어느 메뉴에 있는지, 어디로 이동할 수 있는지를 보여줌.
- Android는 스크롤 가능 및 상단 위치, iOS는 고정형 하단 위치.
Navigation Bar: tab bar와 비슷한 개념.
iOS는 상단에 간결한 뒤로 가기 및 제목 표시, Android는 Toolbar와 통합된 유연한 내비게이션 제공.
aos의 Top App Bar = ios의 Navigation bar
aos의 Navigation Bar = ios의 Tab bar
추가로 참고하면 좋을 글입니다.
https://brunch.co.kr/@blckschrl/62
https://brunch.co.kr/@nikeskywalker/7
https://pixso.net/kr/reviews/the-ui-differences-between-ios-and-android/
3. 텍스트 필드 동작
by ChatGPT
https://brunch.co.kr/%40ebprux/250placeholder by ChatGPT
**플레이스홀더(Placeholder)**는 입력 필드(Input Field) 안에 표시되는 힌트 텍스트로, 사용자가 해당 필드에 어떤 종류의 정보를 입력해야 하는지 안내하는 역할을 합니다. 입력 전에 필드 내부에 흐릿하게 표시되며, 사용자가 입력을 시작하면 일반적으로 사라지거나 다른 위치로 이동합니다.
플레이스홀더의 특징
목적: 입력 필드가 무엇을 요구하는지 명확히 안내. 사용자의 혼란을 줄이고 입력 과정을 직관적으로 만듦.
위치: 입력 필드 내부에 기본적으로 표시.
동작: 사용자가 데이터를 입력하기 시작하면 사라지거나, 다른 위치로 이동(플로팅 라벨).
스타일: 일반 텍스트보다 흐릿하거나 더 가벼운 색상으로 표시하여 배경 정보임을 나타냄.
플레이스홀더와 레이블의 차이
플레이스홀더: 필드 안에 표시되는 안내 텍스트. 사용자가 입력을 시작하면 보통 사라짐.
레이블: 필드 위나 옆에 위치하며, 사용자가 데이터를 입력하더라도 유지됨.
플랫폼별 플레이스홀더 동작
iOS:
플레이스홀더는 입력 필드 안에 표시되고, 사용자가 입력을 시작하면 완전히 사라짐.
간결하고 직관적인 방식.
Android:
Material Design에서는 플레이스홀더가 사용자가 입력을 시작하면 상단으로 이동(플로팅 라벨) 하여 입력 내용을 방해하지 않음.
더 많은 정보를 제공하면서 사용성을 향상.
플레이스홀더 예시
이름 입력 필드: Enter your name
이메일 입력 필드: Enter your email
요약
플레이스홀더는 입력 필드 안에 임시로 표시되는 텍스트로, 사용자가 해당 필드에 무엇을 입력해야 하는지 명확히 안내하는 역할을 합니다. 플랫폼마다 스타일과 동작 방식에 약간의 차이가 있습니다.
https://brunch.co.kr/@uxdragon/31우측 하단 액션 버튼
ios : 키보드 종류에 관계없이 엔터 버튼
aos : 키보드 종류에 따라 다르게 적용 가능 (엔터, 다음, 이동, 우측 화살표 등)
https://brunch.co.kr/@monodream/37ios : 텍스트필드에 입력하면 우측에 x버튼 제공
aos : 기본 텍스트필드에는 x버튼 적용되지 않으나 검색창에는 적용
https://brunch.co.kr/@monodream/37aos는 글자 수나 에러 메시지를 보여주는 helper text도 제공
5. snackbar by ChatGPT
Snackbar는 Material Design에서 정의된 UI 컴포넌트로, 화면 하단에 일시적으로 표시되는 간단한 알림 메시지입니다. 사용자에게 특정 작업의 결과나 상태를 전달하면서도, 작업 흐름을 방해하지 않는 데 초점이 맞춰져 있습니다.
Snackbar의 주요 특징
위치: 화면 하단에 표시됩니다. 사용자가 주로 보는 영역에 나타나 시각적으로 쉽게 인식 가능.
목적: 사용자 작업의 결과나 상태를 간단히 전달. 예: "파일이 삭제되었습니다.", "메시지가 전송되었습니다."
지속 시간: 일반적으로 2~3초 동안 표시된 후 자동으로 사라집니다.
동작 버튼 (Action): 하나의 액션 버튼을 포함할 수 있습니다. 예: "실행취소" 버튼을 눌러 작업을 취소 가능.
상호작용: Snackbar가 표시되더라도 사용자가 다른 작업을 수행하는 데 방해가 되지 않음.
구성 요소: 간단한 텍스트 메시지와 선택적으로 하나의 액션 버튼으로 구성.
by ChatGPTSnackbar 사용 예시
삭제 작업 후: 메시지: "파일이 삭제되었습니다." 액션 버튼: [실행취소]
업로드 완료: 메시지: "업로드가 완료되었습니다."
네트워크 연결 상태: 메시지: "인터넷 연결이 끊어졌습니다. 다시 시도하세요."
장점
작업 흐름을 방해하지 않고 정보 전달 가능.
추가 액션 버튼으로 사용자와 상호작용 가능.
직관적이고 간결한 디자인.
사용 시 주의점
너무 자주 사용하면 사용자 경험을 해칠 수 있으므로 꼭 필요한 경우에만 사용.
중요한 정보는 Snackbar 대신 다이얼로그나 Alert로 전달.
Snackbar는 사용자의 작업 맥락을 방해하지 않으면서도 필요한 정보를 전달할 수 있는 강력한 UI 컴포넌트입니다.
https://m2.material.io/components/snackbars