UIUX 디자인 입문 피그마로 간단한 프로토타입 만들어보기(숙제) 4-5 학습일지 겸

2024. 2. 29. 17:03강의(Today I Learned)

숙제

 

피그마 프로토타입 기능 활용.

프로토타이핑 감을 잡아 보자.

 

빠르게 구현하기 쉽고 기본적 기능 제공해서 많이 사용하고 있다~

 

버튼을 클릭했을때 화면이 이동하는 기능을 사용해보자.

 

  1. 피그마 오픈
  2. 프로토타입 탭 전환
  3. 인터랙션 주고 싶은 대상 개체 선택
  4. 연결 대상 선택후, 플러스아이콘 드래그앤드롭  화살표
  5. 창 확인 네비게이션 투, 메뉴 

빽기능

직전에 왔던 화면을 기억하고 그 화면으로 보내는 기능.

 

프로토타입애니메이션 장면

전환 A에서 B로 전환 될때 A(원본)를 밀려서 B가 들어오겠다.

Instant 위로 장면전환없이 노출

Dissolve a위에 b가 진해지면서 노출

스마트 애니메이션 a에서 b로 같은레이어 인식해서 자연스럽게 넣어줌.

무브 인  새로운화면 원본화면 위로 밀어 들어옴서 노출

무브 아웃  에이(원본화면)가 퇴장하고 b가 노출

push 새로운 화면이 원본화면 밀면서 노출

 

피그마로 프로토타입해보는 과제 완료! 심화과정까지 완료.

 

 

애니메이션

dissolve , move in, move out

time이 0.3초는 짧은거같은서 0.5초로 늘리니 전환될때 화면이 연하게 보이면서 새로운화면이 진하게되는게 보였다.

 

무브인아웃은 손으로 예를 들어서하면 외우기 쉽당!

인은 원본을 밀고 자기가 위에 자리차지하고

아웃은 원본이 나가고 새로운애가 자리차지하게 되는거임.

 

장바구니 메뉴아이콘에서는 장바구니 화면으로 장바구니화면 close 아이콘에서는 다시 장바구니화면으로

dissolve하고,

 

리스트아이템3인 아이리스 레티큘라타 는 상세화면으로 전환하면서 무브인,

상세화면에서 다시 뒤로 갈때는 장바구니화면으로 무브아웃

 

 

디자인툴도 다양하고, 원래도 잘 몰라서 이런게 있구나~ 하고 지식을 쌓아가는 과정이 되었다.

그리고

이론강의만 듣다가 갑자기 피그마 과제하니까 재밌다...ㅎ

이론만 들으면 넘 졸립다! 외워야 할것도 많고, 머릿속에 다들어가질 않는다.

매번 들으면서 느끼는거지만 복습이 답이겠지 가까이 두는 책처럼 읽고 또 읽고. 무한반복이 답

팀이름이 이지인것처럼 지금은 안외워져서 어렵고 지루하지만 외우고 나면 넘넘 쉽겠지 머릿속에서는..

그치만 실무에서는 고민해봐야할것이야ㅠㅠㅠ! ㅋㅋㅋ

아티클이고, 직무분석할 시간도 없다. 휴식도 간간이 알아서 쉬엄쉬엄해야하고 은근 바쁜 하루다.

국취제상담까지 갔다오니 시간도 빨리간다.

상담사 선생님도 강의를 듣고있는 나를 위해 빨리 끝내주려고 노력하셨다.

말씀도 친근하고 재밌게 해주셨다... 근데 반존대를 하신다.. 엉 그르치! 그래서 여기서 알려주거야 웅!ㅋ이런말투...

전화에서도 그러시길래 당황했는데, 원래 그러신분이었다.

암튼

속세의 커피맛을 느끼기위해 텐퍼센트에서 돌체콜드브루라떼를 사고 빠바빵들을 사왔다.

3만원정도 쓰고온거같다..훈련지원금은 간식값으로 나가지않을까싶다.

마음은 푸근하다.

지금은 4주차 내용 블로그 정리한거보면서 가볍게 복습 해야겠다.

숙제도 캡처화면은 비어놨다. 수정해놓고 저녁에 다시 강의들어야겠다.