[스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 6주차 - 개인

2024.11.27 ~ 12. 3(열한 번째 일지)

 

SeSAC 동대문 캠퍼스

 

 

 

오전

피그마 실습 1

애니메이션

 

 

커브(스마트 애니메이션)

 

 

스플래쉬(스마트 애니메이션)

 

 

 

 

피그마 실습 2

 

 

프로토 타입2(스크롤)

 

 

 

피그마 실습 3

 

 

 

 

 

1. 오늘 어떤 것을 배웠나요? (핵심 내용 & 인사이트)

 

• 27일(월) - 프로토타입2(애니메이션,커브)

저번 주의 프로토 타입을 배운 것을 이어 애니메이션과 커브를 배웠다.

애니메이션은 시각적 효과이다.

애니메이션

• instant : 즉시 
• Dissolve : 서서히
• Smart animate : 전환효과를 자동으로
• Move in : 화면 안으로
• Move out : 화면 밖으로
• Push : 화면을 밀어내면서
• Slide in : 화면을 밀어내면서 안으로
• Slide out : 화면을 밀어내면서 밖으로

커브

 

커브는 애니메이션 속도 선의 커브를 말한다.

• Liner : 일정하게
• Ease in : 처음에 약간 느리게
• Ease out : 끝에 약간 느리게
• Ease in and out : 처음과 끝에 약간 느리게
• Ease in back : 처음에 뒤로 갔다가
• Ease out back  끝에 뒤로 갔다가
• Ease in and out back :  처음과 끝에 뒤로 갔다가
• Custome bezier : 커스텀 곡선
• Gentle : 자연스럽게
• Quick : 빠르게
• Bouncy : 통통 튀면서
• Slow : 천천히
• Custome spring : 커스텀 스프링

 

 

• 29일(금) - 프로토 타입 2(스크롤)

애니메이션과 커브에 이어서 이번에는 스크롤을 배웠다.

스크롤에는 4가지 종류가 있는데 순서대로

No crolling : 스크롤 없음

Horizontal : 가로 스크롤

Vertical : 세로 스크롤

Both directions : 가로세로 양방향 스크롤

 

이렇게 있다! 가로 세로는 각각 좌우/상하 방향으로 스크롤할 수가 있고,

Both directions는 양방향으로 스크롤이 가능하다. -> 지도로 위치 확인할 때 이걸로 사용하는구나 하는 생각이 들었다.

 

 

스크롤을 거는 방법

• 스크롤을 하려는 대상 프레임을 선택한다. *꼭 프레임을 선택한 상태에서 해야 한다.
• 우측 패널에 프로토 타입 메뉴에 들어간다.
• Scroll behavior이랑 메뉴에 Position을 Scroll with parent(기본설정)으로 되어있을 것이고 Overflow에서 눌러 원하는 스크롤 방식을 선택해 주면 된다.
• 만약에 앱화면에서 상단메뉴나 하단메뉴, 또는 고정시켜놔야 할 개체가 있으면 프레임을 선택 후 Scroll with parent가 아닌 Fixed(stop in place)로 설정해 두면 된다.

 

 

* 주의해야 할 점

 

*스크롤을 걸었는데 안 되는 경우가 확인해야 할 것이 두 가지가 있다.

하나는 만약 안되면 해당 프레임을 선택하고, 우측패널의 프로토 타입에서 디자인 패널로 넘어간다. 그리고 해당 프레임의 레이아웃 x, y 값 아래에 clip content에 체크가 되어있는지 확인해 보고, 안되어 있으면 체크해 두면 된다.

 

 

두 번째는 해당 프레임을 스크롤 설정을 하고 나면 오류가 있을 경우에 설정한 Overflow에 느낌표 마크가 떠있을 것이다.

" For scrolling to work on this frame, the content needs to be bigger than the frame "

" 스크롤이 이 프레임에서 작동하려면, 콘텐츠가 프레임보다 커야 합니다. "

콘텐츠가 프레임보다 커야 한다! 프레임이 필이나 허그 같은 게 설정되어 있으면 내용과 프레임이 한꺼번에 같이 줄어들기 때문에

프레임을 더블클릭해서 프레임이 내용보다 작아지도록 크기 조절을 해야 한다.

 

 

• 2일(월) - 드롭다운 컴포넌트

드롭다운 컴포넌트 : 누르면 목록이 펼쳐져 나오는 것

 

호버 베리언트 먼저 만들기
두 컴포넌트를 컴포넌트 세트로 만들기
각 개체에 프로퍼티 이름 설정하기

 

드롭다운 베리언트 만들기
개체 만든 것 다선택->컴포넌트세트 만들기->두 개체 프로퍼티의 이름 설정하기 ->로컬 베리어블 열어서 점 3개 누르고 새로운 컬렉션 만들기
[설정] while hovering, change to / on click, change to
펼쳐진 목록 중 상단선택 ->프로토타입 인터렉션 추가->[설정] on click-set variable-만들었던 컬렉션 선택-모드설정 ->  텍스트 선택-> 디자인에서 텍스트 옆 스트링 연결

*목록 만든 것에 곡선 안 먹히면 클립 콘텐츠 체크해 주기

 

 

 

 

 

2. 오늘 겪은 시행착오 / 어려운 점이 있었나요? 

• 27일(수) - 마지막 예제인 스플래쉬를 만들 때, 파도모양 두 개랑 원 하나랑 같이 마스크를 적용시켜야 했는데 마스크를 잘못 적용한 것인지 원안으로 파도모양 두 개가 잘 안 들어갔다. 애니메이션 효과를 적용해야 할 때 창이 뜨고 설정을 하나하나 만져줘야 하는데 이 부분이 헷갈려서 원본을 보면서 디테일을 따라 만들었다.
• 29일(금) - 스크롤을 만들었는데 작동은 안 했다. 디자인에서도 레이아웃에 클립 콘텐츠도 체크해 놨는데 안되길래 보니까 설정해 둔 프로토 타입 패널에! 경고 표시가 있었다. 확인해 보니 프레임과 내용물이 너무 딱 맞게 되어있어서 작동을 안 하는 것이었다..! 스크롤을 하려면 내용이 프레임보다 더 커야 한다는 것이었다. 프레임을 줄이려는데 필, 허그 걸려있는 오토레이아웃이라 프레임과 내용물이 같이 줄어들고 커지길래 더블클릭 해봤더니 얼떨결에 돼서 프레임 크기를 줄이고 스크롤을 성공적으로 적용시켰다.
• 2일(월) - 호버 베리언트는 괜찮았는데 드롭다운 베리언트 만들기가 어려웠다. 다 만들고 프로토타입 돌려서 봤는데, 호버는 잘 작동했지만 드롭다운 베리언트에서 만든 목록들이 선택하면 그 텍스트로 안 바뀌던 것이다. 앞서 연습 때 한번 만들던 컬렉션이랑 교차가 되었는지, 프로퍼티 설정이었나 설정을 잘못해놔서 그런 것이었다.

 

3. 앞으로 적용해야겠다고 느낀 점이 있다면 무엇이고, 어떻게 해보면 좋을까요?

• 마스크를 적용할 때, 원형틀이 마지막에 있도록 하는 것 잊지 말기! 
• 스크롤 만들고 안되면 , 디자인패널-레이아웃의 클립 콘텐츠 체크되어 있는지 확인하기,  스크롤 만들 때 내용이 프레임보다 더 커야 한다는 점
• 드롭 다운 베리언트도 연습을 많이 해야겠다고 생각했다.

 

4. 현재까지의 학습 평가 및 다음 학습을 위한 다짐/목표를 공유해 주세요.

• 저번주보다는 수월한 것 같으면서도 애니메이션의 세부적인 것을 맞추는 것이 어려운 것 같기도 하다. 여기저기 얽혀있는 노브를 많이 맞닥뜨리게 될 때 잘 헤쳐갈 수 있을지..!
• 프로토 타입 만드는 것이 하면 할수록 생각보다 재밌다..! 내가 재미를 느끼다니..! 여러 개 만들면 복잡하고 설정해야하는 게 여러개 있긴 하지만 생각보다 재밌다. 내가 사용하는 앱들을 이렇게 만들었겠구나라는 생각이 들어서 더 그런 것 같다. 설정한 대로 작동하는 모습을 보면 뿌듯하고, 일할 때도 만들고 잘 작동하는 모습을 보면 너무 좋을 것 같다. 스마트 애니메이션 기능은 신세계였다! 파도 두 개와 원형 하나로 설정만 해둔 건데 알아서 움직이는 상태로 만들어 주다니 인상 깊었다.
• 현재까지 어려운 것들 : 오토 레이아웃, 필/허그 컨텐트, 드롭다운 컴포넌트 세 가지를 연습해야겠다는 생각이 들었다.

 

 

 

 

 

* 본 후기는 [스나이퍼팩토리x웅진씽크빅] UX/UI 실무 초격차 디자인 전문가 양성과정 (B-log) 리뷰로 작성되었습니다.