와아~
오늘도 배울 게 많은 하루!
만 하루가 지나고서야 적기 시작한 학습일지에요...ㅋㅋㅋ
배운 것도 너무 많고, 해야 할 것도 엄청 많지만~
꾸준히 적어두면 기억을 되짚어 보기에도 좋더라구요!
어제 배운 걸 뒤적여보다가 찾지 못해서 후다닥 작성해 보려고요😂
매일매일 열심히 일지를 써 둬야 하는 이유...
오늘은 모르는 것들을 많이 배웠어요!
정신없이 따라가다 보니 피그마에서 작성하며 연습한 것들이 많아서, 필기 내용이 많을지는 모르겠어요.
우선!
저번 시간에 배운 것을 참고해서 버튼을 만들어 줬어요.
강사님의 안내를 따라 버튼을 제작했어요.
제가 익숙한 방식은 Rectangle 제작 + 그 안에 텍스트 및 아이콘 삽입이었는데,
강사님은 텍스트 박스에 Fill 을 사용해서 안을 채우고 버튼을 제작하시더라구요!
사바사라 정답인 방식이 따로 없는 건지,
회사마다 고수하는 방식이 있는 건지,
더 효율적인 방식이 있는 건지 궁금~
나중에 한 번 여쭤봐야 할 것 같아요🤔
강사님의 예시와 안내를 따라 모달을 제작했어요!
저는 오늘따라 핑크가 끌려서 필이 오는 대로 제작했답니다 🤭
우측 페이지 상세는 다음과 같아요~~~
타이틀, 내용 타이틀, 본문 내용, 아래 버튼을 오토 레이아웃으로 묶고, Alignment는 좌측 상단으로 했어요!
구성은 Width는 Fill&Height은 Hug로 했고, 레이아웃 Dismension은 Fixed로 맞추기!!
Padding은 가로세로에 각 40을 줬어요~충분한 여유공간이 남도록!!!😘
이외에도 많은 걸 배웠지만~
아무래도 Interactions 등을 사용한 움직이는 영상이다 보니,
캡쳐 만으로는 보여드리기가 영 힘들 것 같더라고요😭 특히 앞으로는 더더욱이요!
그래서 준비했습니다😎
바로바로~~~~~
직접 확인 가능한 프로토타입 링크~~!!!
우선 준비한 건 세 가지에요😆
| 옆으로 드로우 가능~😎링크는 여기! | 구글 지도 저리가라! 🗺️확대 화면 | 바로 보이는 그림 Click! |
| 🔴Ready~Action! |
아참!
Animatione 중 Smart animate 를 사용할 시 레이어 및 하위 구조들의 이름이 같아야 해요.
동일하지 않을 시 Disorve, 즉 사라지는 효과가 진행되며 제대로 시행되지 않는다!
라고 설명을 들었어요😉
| 천만의 말씀😏 |
위에 표시된 강조 표시!
Overlay 와 관련된 애니메이팅 시에 자주 등장할 예정이에요~ㅎㅎ
체크한다면 해당 오버레이의 바깥쪽을 클릭할 시 오버레이를 닫을 수 있답니다.
실무에서도 자주 사용되는 애니메이션이죠?
알아두면 유용할 거에요!
사실상 '오버레이'란 Animation에서 'Smart animate'로 선택된 요소 뿐만을 말하는 게 아니에요~
단순히 창 하나를 닫고자 할 때에도 Close overlay 라는 Action을 사용할 수 있답니다🤗
좌측의 Direction은 오브젝트가 움직이는 방향을 정하는 버튼이에요.
아래의 네모 창으로 미리 확인이 가능하답니다!
| 해당 Animation 이 사용된 페이지는 여기에! 이외의 것도 잔뜩이에요😉 |
마지막 애니메이션!
이것도 예제를 참고하고 강사님의 안내를 따라 제작했어요!
| 여기까지 봐 주셔서 감사합니다😆💕 |
사각형에는 트리거~즉 이동 행동이나 탭 등을 2개까지 걸 수 있다는 점을 이용해 제작한 프로토타입이에요.
그룹과 프레임에는 적용이 1개까지만 가능하니 꼭 기억하기로!
이제 정말로 슬슬 외울 것도 많아지고, 헷갈리는 것도 많아지고...!
머리가 바쁘게 돌아가는 와중에 과제까지 완벽하게 하고 싶어서 그런가, 몸보다 마음이 더 바쁘네요😂
한 해의 마무리가 다가오는 만큼 다들 지치고 바쁜 일이 많겠지만!
화이팅해서 버텨내고 좋은 결과를 거머쥐기를 바라요💕
그럼~오늘은 여기까지!
아참참!
마지막으로 유용한 단축키 네 개를 적어두고 갑니당😘
피그마 파일 안의 이미지 복사 단축키!
CMD + Shift + C
Ctrl + Shift + C
속성복사 단축키!
Cmd + Oqt + C
Cmd + Alt + C
아듀.
본 후기는 유데미 x 스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (B-log) 리뷰로 작성되었습니다.
'대외활동_콘텐츠디자인 2기 인턴형 프로그램' 카테고리의 다른 글
| 하나를적응하면다른하나를새로배우고하나를겨우겨우따라가면또다른고통이나를기다리고_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (3) | 2024.11.12 |
|---|---|
| 떡볶이마라탕탕수육육개장양장피유산슬_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (1) | 2024.11.07 |
| 주 4일제라는 악습에 대한 지지를 전면 철회합니다_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (8) | 2024.11.05 |
| 메가커피와 차은우의 상관관계_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (6) | 2024.11.02 |
| 갑자기죄송하지만단체방에글하나만젇겠습니다_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (0) | 2024.11.01 |