본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
▶ 오늘 수강 강의
 |
| 어제에 이어 Ch. 5. 일부 강의를 수강하였다. |
▶ 오늘 배운 내용
UI Art Polising 3-6. Upgrade Screen, Icon, Prototype
- 디자인적 문제 정의 및 목표성 확립 → 해결 방안 모색
- 사용자의 시선이 가는 곳에 디테일 집중
- UI 아트 폴리싱 후 UX에 넣어서 목표한 대로 디자인이 되었는지 자주 확인
- UX에서 정의한 기능들을 시각적으로 표현할 아이콘 생성 (1:1 ratio의 8~32 pixels)
- Figma를 활용하는 경우 Interaction 기능을 활용해서 각 요소들의 디자인적 기능이 제대로 동작하는지 검수
- 하나의 디자인에 보통 세 가지 인터랙션 생
Figma 활용하기
- Design Path - 생성한 그림을 우클릭 → Frame 또는 Auto Layout화 → Create Component → 우측 Properties에서 Variant로 설정 + 이름 지정 (상위 컴포넌트(default)를 수정하면 복사 붙여넣기된 하위 컴포넌트들은 자동 수정 / 복+붙 대신 컴포넌트 박스 하단에 + 버튼을 누르면 하위 컴포넌트 자동 생성)
- Interaction - 요소 우측 Prototype 탭 → Interaction 방식 설정 (어떤 액션을 어떤 요소로, 어느 시간 동안 실행할지 등 / 여러가지 세팅 가능) → Layer에서 요소가 있는 프레임을 선택 → Prototype 탭 → Start Flowing Point를 누르면 프레임 이름을 지정하고 프레임 옆 플레이버튼으로 Interaction 설정해 둔 것을 확인 가능
- Vector Path - 도형간의 편집 (Subtraction, Flatten 등)
- Color - 그라데이션 색상 저장 기능
- Present - 우측 상단 Share 버튼 옆 Play 버튼을 누르면 각 프레임을 큰 화면 확인 가능.Interaction 기능 동작도 확인 가능
▶ 나의 이야기
이전에 Figma로 만들어진 포트폴리오를 구경한 적이 있었는데, 마치 ppt의 버튼 클릭하면 다른 화면으로 전환 되는 것 처럼 화면 전환도 되고 마우스의 올림에 따라 애니메이션 출력도 되고 하는 걸 보면서 정말 신기하다라고 생각했었다. 그때는 Figma를 사용해볼 생각이 없었어서 그 기능에 대해서는 자세하게 알아보지 않았었는데, 이번에 간략하게 나마 어떻게 생성되는 건지 볼 수 있어서 흥미로웠다. 강사님이 알려주는 2D 아트 폴리싱 작업은 당장 따라하기 어렵지만 Figma 인터렉션 구현 정도는 가능해 보여서 내일 Ch. 5. 강의를 다 듣고 스스로 시도해보려고 한다. Ch. 5.가 끝나면 바로 캐릭터로 넘어가는 지라 내일 아니면 따로 Figma에 대해서 더 탐색할 시간이 안나올거 같기에 해보겠다는 다짐을 오늘 글에 남긴다.
▶ 시간 및 공부 인증
 |
 |
| 아무래도 따라하기보단 시청하듯 진행해서 배속으로 들은지라 강의 시간 대비 더 빠르게 수강한거 같다. | |
 |
|
| 아트 수정 내용은 따라하면서 할 수 없어서 중간 중간 알려주시는 팁을 정리하면서 공부를 진행했다. 인증 사진을 너무 초반에 찍어서 내용이 없다. ㅎㅎ |
|
#패스트캠퍼스 #환급챌린지 #습관챌린지 #패스트캠퍼스후기 #습관형성 #직장인자기계발
패스트캠퍼스(FastCampus) 강의 둘러보러 가기
↓ ↓ ↓
https://fastcampus.info/4oKQD6b
11월이니까, 강의 1+1 쿠폰 이벤트 3일 앵콜💟 (~11/13 23:59) | 패스트캠퍼스
지금 온라인 강의 구매하면 강의 하나 더 쏩니다! 배움도 성장도 2배로!
fastcampus.co.kr