오늘의 과제는 UI 차이점 찾아보기와 와이어프레임 그리기이다.
UI 차이점 찾아보기는 내가 사용하는 서비스에서 UI 차이가 있는 것을 찾아 보는 과제이며 OS 별로 차이 웹과 앱를 최소 2개 이상의 앱에서 2곳 이상 찾는 것이다. 우선 앱에 대해 살펴보겠다.
OS에 따른 App디자인 변화
위의 화면은 음식 배달/포장 어플인 요기요 홈이다 왼쪽은 안드로이드기종의 화면이며 오른쪽은 IOS기종 화면이다 얼핏 보면 큰 차이점이 없는 것 같지만 안드로이드기종 에 우측상단에 있는 알림 아이콘이 IOS기종에서는 보이지 않으며 빨간 섹션을 친 구간에는 카테고리 항목이 다르게 배치되어 있는것을 볼 수 있다
두번째로 볼 화면 웹툰 플렛폼인 네이버웹툰의 my 화면이다. 왼쪽은 안드로이드기종의 화면이며 오른쪽은 IOS기종 화면이다 안드로이드 상단 앱바의 my 텍스트가 좌측에 배치되고 우측에 네이버웹툰에 쓰이는 토큰인 쿠기 버튼이 배치되어 ㅇ있느 반면 ios는 좌측에 쿠키가 배치되고 중앙에 my 텍스트가 배치되어 있다.
이렇게 os에 따른 ui의 차이점을 살펴 보았다. 다음은 앱과 웹에 대한 차이점을 살펴보겠다.
app과 web의 차이점
위의 화면은 네이버 홈화면이다 상단의 아이콘 구성과 검색창 아래의 구성이 다르다
위의 화면은 영상플렛폼인 유튜브의 앱과 웹이다 상단 앱바와 하단 네비게이션바의 구성이 다르다
와이어 프레임 제작
다음 과제는 와이어 프레임 이다. ott서비스를 목적으로 한 와이어를 제작했으며 간단한 구조방식을 만들어 봤다.
'피그마 심화과정' 카테고리의 다른 글
| [피그마 심화과정 챕터 4] 프로토타입 기능 활용 (0) | 2025.02.19 |
|---|---|
| [피그마 심화과정 챕터 3] 네이버 지도 앱 클론 디자인 (0) | 2025.02.19 |
| [피그마 심화과정 챕터 2] UXUI 역설계와 클론 디자인 실습 (0) | 2025.02.12 |