Learninig Point - 웹과 앱의 차이점을 잘 알고 적합한 UI를 설계하는 것이 중요 URL 페이지 이동 : 앱은 임의로 주소를 입력햇 이동할 수 없는 반면 웹은 주소창에 URL을 입력하면 어디든 접근할 수 있다. 즉, 로그인하지 않으면 볼 수 없는 화면 등에 접근할 수 있다는 문제가 생긴다. 사용자가 잘못된 화면에 접근했을 때, 다시 정상적인 화면으로 돌려 보내줄수 있어야 한다.
대표적인 웹과 앱의 UI 차이 (위에 페이지 이동 포함)
UI는 기능과 목적이 중요하다. 이런 UI에 차이가 있다는 건 다시 말해 목적에 차이가 있다는 뜻이고, 목적에 차이가 있다면 UX에서도 차이가 생긴다.
뒤로가기
앱 의 경우, 일반적으로 화면 상단의 아이콘 등 버튼을 눌러 화면을 이동
반면, 웹의 경우 브라우저 자체 기능을 통해 이전 화면으로 돌아가는 것이 자유로움
접근할 수 없는 화면에 뒤로가기를 통해 접근이 가능한 경우 결제가 2번 발생하거나 취소가 여러번 되는 등 치명적인 문제가 발생할 수 있기 때문에 이 상황에서 어떤 장치를 마련할 것인지 개발자와 논의해야 함 (뒤로가기 할 때 사용자를 어떻게 못가게 막을 것인지)
주요 메뉴 이동
모바일 웹에선 일반적으로 화면 상단에 주요 메뉴로 이동할 수 있는 UI를 배치
앱에선 화면 하단에 고정된 탭을 배치해 주요 메뉴로 이동할 수 있도록 함
두 UI는 동일한 목적과 기능을 가지고 있지만, 웹과 앱에서 다르게 나타나는 대표적인 UI
최근 모바일 웹들도 앱처럼 화면 하단에 고정된 메뉴를 놓는 걸로 바뀌고 있다 (결국 사용자가 더 편하고, 더 수월하게 제품을 쓸 수 있는 방향으로 수렴한다는 뜻)
무신사의 모바일 웹과 앱의 UI는 매우 비슷하다
바텀 시트
화면 하단에 고정되어 현재 화면과 관련된 옵션이나 메뉴를 제공하는 UI. 다이얼로그와 같은 컨테이너 컴포넌트.
바텀 시트의 경우 화면의 하단에 고정되어 있다.
앱에서는 바텀 시트를 다양한 용도로 활용하지만, 모바일 웹에서는 사용하기 까다로움
✅ 웹브라우저의 기본 UI가 숨겨져 있다가 등장하는 과정에서, 하단에 고정된 바텀 시트의 위치를 계속 바뀌게 만들기 때문. 웹브라우저의 하단 탭바가 스크롤에 따라 노출됐다 사라지면서, 바텀 시트의 위치에 계속 영향을 주기 때문에 사용자 입장에서는 바텀 시트를 제대로 사용하기 불편하다.
✅ 앱에서는 바텀 시트를 드래그해서 닫을 수 있지만, 모바일 웹에서는 드래그해서 닫기 어려움 🙄 → 웹 브라우저에서 아래로 화면을 드래그하면 새로고침이 될 가능성이 있어요.
앱이나 프로그램을 실행하는 배경이 되는 시스템. iOS나 안드로이드도 운영체제의 종류. MacOS나 윈도우는 노트북이나 데스크톱 같은 컴퓨터의 운영체제.
안드로이드 두 가지가 충돌하기 때문에 (이전 화면 가기와 상위 화면을로 가기) 디자이너는 뒤로 가기 버튼 클릭 시 어느 쪽으로 갈 것인지 규정해 주어야 한다.
✅ 앱 심사 가이드라인
웹은 비교적 자유롭지만, 앱의 경우 반드시 앱스토어나 플레이스토어 같은 앱 마켓에 등록해야 사람들이 설치하고 사용할 수 있음. 따라서 앱 마켓에서 제시하는 앱 심사 가이드라인을 따라야 함. 만일 가이드라인에 맞지 않는 부분이 있다면 심사에서 거절 당하는 경우가 있다.
아이폰의 경우, 애플 로그인이 다른 로그인 수단에 비해 덜 중요하게 보이지 않도록 해야 한다.
또한 소셜 로그인이 있는 경우, 애플 로그인도 로그인 수단에 반드시 포함시켜야 한다. (자세한 건, 애플 앱 심사 가이드 라인 참고)
왼쪽은 안드로이드, 오른쪽은 아이폰. 로그인 방법 4가지의 순서가 다르다.
iOS 홈 인디케이터
아이폰에서 홈 화면으로 이동할 수 있는 UI예요. 다른 UI와는 다르게 화면 위에 있기 때문에 실제 화면과 겹치는 경우가 있다. 이전 아이폰 모델의 경우 홈 버튼이 물리적으로 기기에 있지만, 이후 비교적 최신 모델은 홈 버튼이 없고 대신 홈 인디케이터가 있기 때문에 같은 아이폰 앱이라고 하더라도 차이를 고려해야 한다.
