피그마 활용법(2)_2주차 숙제

✅ 과제 1 : UI 차이점 찾아보기(최소 2개 이상의 앱/제품에서 2곳 이상)
(1) OS 별로 차이가 있는 부분을 찾아보고, 왜인지 나름의 이유를 적어 보세요.
 - 동일한 앱의 UI가 안드로이드 기기와 아이폰에서 다르게 보이는 부분을 찾고 왜 다른지 다양한 이유를 논의해 보세요.
  ① Google map : 
  • 캐러셀 상세 내용
    Android : 캐러셀 안에 제공되는 정보가 더 상세하게 적혀 있음(km제공, 리뷰수 제공, 호텔급 제공)
    iOS : 반면에 좀 더 심플하게 제공되고, 주요 내용에 더 집중
  • 날씨 제공
    Android : 지도 화면 내에 날씨 아이콘이 없음 
    iOS : 지도 화면 내에 날씨 아이콘을 제공하고, 검색한 근처 주변의 온도를 제공
  • 업데이트 탭 내에 추천
    Android : 업데이트 탭을 누르고 들어가면 팔로잉 아래에 팔로잉 추천이 뜸
    iOS : 팔로잉 추천을 제공하지 않음
   ‣ 나름의 이유 : Android는 사용자에게 정보를 상세하게 안내하므로써 편리함을 제공. 반면에, iOS는 사용자에게 집중할 내용을 간결하게 보여주므로써 정보 전달에 집중한 느낌이다. 회사의 슬로건에 따라 중요 포인트가 다르다.

Android 화면

iOS 화면

(2)웹과 앱에 차이가 있는 부분을 찾아보고, 왜인지 나름의 이유를 적어 보세요.
 - 동일한 서비스의 UI가 앱과 모바일 웹에서 다르게 보이는 부분을 찾고 왜 다른지 다양한 이유를 논의해 보세요.
  ① Instagram :
• 계정 네비게이션바 위치
  웹 - 가로에 공간이 넓어서 많은 메뉴를 넣어도 가독성이 좋다.
  앱 - 많은 공간이 없기 때문에 위, 아래로 메뉴를 분리해서 배치했다.
• 계정 안에 사람 찾아보기 기능
  웹 - 클릭할 수 있는 메뉴가 좌측바에 항상 표시되어 있고 누르기 쉽게 되어있다.
  앱 - 사람 찾아보기 기능을 메뉴를 찾아서 들어가지 않고, 바로 노출되어서 수월하게 진행할 수 있게 표시해두었다.

(좌) 웹 Instagram / (우) 앱 Instagram

  ② Tistory : 
• 카테고리 메뉴 배치
  웹 - 마찬가지로 가로 화면 구성이 자유롭기 때문에 메뉴를 노출시키면 가시성이 확보된다.
  앱 - 엄지손가락으로 탭을 누르기 쉽게 배치하고, 자유롭게 탭에 들어갔다가 나올 수 있게 되어있다.
• 화면 레이아웃 구성
 웹 - 화면에서 메뉴를 고르기 전에 기존 화면에 노출 면적이 넓어서 볼 수 있고, 보기 방식을 선택 할 수 있다.(레이아웃 구성이 다양함)
 앱 - 화면이 제한적이기 때문에 고른 한가지 액션에는 한가지 결과값이 반형된다.

(좌) 웹 Tistory / (우) 앱 Tistory

✅ 과제 2 : 와이어프레임 그리기
다음 중 하나를 골라 와이어프레임을 만들고, 각 화면들을 선으로 연결해 주세요.
❏ 가상의 OTT 서비스의 콘텐츠 목록 화면과 콘텐츠 상세 정보 화면
✔︎ 가상의 굿즈 커머스 서비스의 제품 리스트 화면과 제품 상세 정보 화면
  - 아이디어스 : 링크

🍯 꿈팁 : 잘 만들어진 와이어프레임 키트를 사용하면 시간을 단축
* Wireframe Kit (https://www.figma.com/community/file/1148152271646787632)
* Paper Wireframe Kit (https://www.figma.com/community/file/1075811850250564922)
* Wireframe Kit (https://www.figma.com/community/file/1166747266128505675)