[240617] Figma 활용법(2) 완강

🗓️ 오늘 한 일

✅ Figma 활용법(2) 2주차 강의 수강

✅ Figma 활용법(2) 2주차 과제

✅ Figma 활용법(2) 3주차 강의 수강

✅ Figma 활용법(2) 3주차 과제

 

---

 

[Figma 활용법(2) 2주차]

📌 앱과 웹의 차이

- 페이지 이동

앱에서는 뒤로 가기 버튼을 눌러야만 페이지를 이동할 수 있지만, 웹에서는 주소창이나 웹 브라우저 자체 기능으로 페이지 이동이 가능하다.

 

- 주요메뉴 위치

앱에는 대부분 하단에 GNB가 있는 반면, 웹에서는 주로 상단에 주요메뉴가 위치한다.

 

- 바텀시트

앱에서는 바텀시트를 이용하기 편하지만 웹에서는 바텀시트를 이용 시에 드래그하여 새로고침하는 영역과 겹쳐져서 닫기가 쉽지 않다.

 

📌 OS 별 차이

- 소셜 로그인

안드로이드에는 애플로 로그인이 없거나 간편로그인 중 하단에 위치하는 반면, iOS에서는 간편 로그인이 비교적 위쪽에 위치한다.

 

- 홈 인디게이터

iOS에는 홈 버튼이 사라진 이후로 홈 인디게이터가 생기고 일정 영역을 차지하여 콘텐츠를 가릴 수 있기 때문에 그 만큼의 높이를 고려해야 한다.

 

- 네비게이션 바

안드로이드에는 기본 네비게이션 바가 하단에 위치하며, 뒤로 가기 버튼이 존재한다. 

이 때, 뒤로 가기는 이전 화면으로 가기( ex. B-2에서 B-1로), 상위 화면으로 가기(ex. B-2에서 A로)가 모두 가능하기 때문에 이 점을 고려해서 디자인해야 한다.

 

 

---

[Figma 활용법(2) 3주차]

📌 스마트 애니메이트

스마트 애니메이트가 작동하려면 작동하는 요소의 이름과 레이어의 구조가 같아야 한다!

이전에 티빙 앱클론을 하면서 프로토타입을 적용할 때 오동작한 이유였다..

 

프로토타입 오버레이

 

프로토타입의 오버레이를 이용하면 모달 효과를 줄 수 있다. 

- open overlay = 모달 창 열기

- close overlay = 모달 창 닫기

- swap overlay = 모달 창이 열려 있는 상태에서 다른 모달 창 열기