TIL_OS에 따른 UI/ 와이어프레임

웹과 앱은 보기엔 크게 차이 없어 보이지만 많은 차이점이 있다.

디자인 할땐 이 차이점들을 잘 알고 적합한 UI를 설계하는게 중요하다.

웹과 앱의 특성 비교

웹은 데스크톱 웹과 모바일 웹을 모두 포함하지만,

차이를 비교하기 쉽도록 모바일 웹으로 범위를 좁혀서 생각해주자

 

우리가 아는 사파리, 크롬, 삼성 인터넷 등을 웹 브라우저(Web Browser)라고 부른다.

 

 

UI는 기능과 목적이 중요하다고 했다. 이런 UI에 차이가 있다는건

목적에 차이가 있다는 뜻.

목적에 차이가 있다면 UX에서도 차이가 생긴다.

 

대표적인 예로 오늘의 집이 있다.

앱과 웹의 UI가 다른 대표적인 서비스중 하나다.

 

<뒤로가기 버튼>

앱은 일반적으로 화면 상단의 아이콘 버튼을 눌러 화면 이동.

웹의 경우 브라우저 자체 기능을 통해서 이전 화면으로 돌아가는게 자유롭다.

 

접근할 수 없는 화면에 뒤로가기를 통해 접근이 가능한 경우

결제가 2번 발생하거나 취소가 여러번 되는 등 치명적인 문제가 발생할 수 있다.

앱  장바구니 화면  → 주문서 작성 → 결제 완료(뒤로가기 불가능)

 

웹  장바구니 화면 →   주문서 작성   →   결제 완료

                                      ↑                    ↓

                                           ←  문제 발생  ← 뒤로 가기 가능

<메뉴 이동>

모바일 웹에선 일반적으로 화면 상단에 주요 메뉴로 이동할 수 있는 UI를 배치한다.

앱에선 화면 하단에 고정된 탭을 배치해 주요 메뉴로 이동할 수 있도록 한다.

두 UI는 동일한 목적과 기능을 가지고 있지만, 웹과 앱에서 다르게 나타나는 대표적인 UI다.

최근 모바일 웹들도 앱처럼 화면 하단에 고정된 메뉴를 놓는걸로 바뀌고 있다.

-> 사용자가 가장 편하게 더 수월하게 제품을 쓸 수 있는 방향으로 수렴한다는 의미.

 

<OS별 차이>

운영체제

앱이나 프로그램을 실행하는 배경이 되는 시스템.

우리가 이야기하는 IOS나 안드로이드도 운영체제의 종류다.

 

<앱 심사 가이드 라인>

웹은 비교적 자유롭지만, 앱의 경우 반드시 앱스토어나 플레이스토어 같은 앱 마켓에 등록해야 사람들이 설치하고 사용할 수 있다.

앱마켓에서 제시하는 앱 심사 가이드 라인을 따라야 한다.

만일 가이드 라인에 맞지 않는 부분이 있다면 심사에서 거절 당하는 경우가 있다.

 

아이폰의 경우, 애플 로그인이 다른 로그인 수단과 비교했을때 덜 중요하게 보이거나 하면 안된다. 한마디로 애플로그인 상위권에 잘보이게 배치

 

또한 소셜 로그인이 있는 경우, 애플 로그인도 로그인 수단에 반드시 포함시켜야 한다.

https://developer.apple.com/kr/app-store/review/guidelines/#sign-in-with-apple

앱 심사 지침 - Apple Developer

애플 앱 심사 가이드 라인 참고

 

 

 

정보구조도와 플로우차드는 이론 좀더 공부하면 될것 같고

 

웹앱관련 숙제랑 와이어프레임 과제 제작 하느라 시간 금방가버림

 

 

와이어프레임 OTT 연습해보구

재밌었다 

낼은 완강하고 복습까지 해야지

만족!

끝