피그마 프로토타입) 5초 만에 만드는 원형 스핀(Spin) 애니메이션 구현

 

썸네일

 

안녕하세요?

오랜만에  UI 관련 게시글로 찾아뵙습니다

다름이 아니라 1월과 2월은 다양한 프로토타입을 소개해 드릴 예정이에요! 튜토리얼과, 완성된 비디오까지 보실 수 있습니다

모르시는 게 있으면 질문 주세요!

 

네비게이션 같은 기본적인 프로토타입 튜토리얼은 이미 정보가 방대해서, 여러분들의 포폴에 쓸 수 있거나 웹디자인을 하실 때 가미하면 조금 더 매력적으로 보일 수 있는 프로토타입 위주로 천천히 소개해 드리겠습니다

 

주의: 겁나 쉬울 수 있음;

---

💡첫 번째, 원 1개와 돌아갈 요소 1개 제작

첫 번째 튜토리얼

 

To Path Plugin 바로가기

시작은 의외로 간단합니다 돌아가려면 원형 하나가 필요하겠죠?

우리는 이 원형을 프레임으로 쓸 겁니다

 

원하는 크기의 원 1개와 돌아갈 요소를 하나 생성해 주세요

원이나 직사각형, 자신이 돌아갔으면 하는 도형으로 맞추어 만드시면 됩니다

 

🚩 신경 쓸 점
1. 실제로 돌아갈 도형은, 프레임보다 작아야 합니다
2. To Path Plugin을 다운로드합니다

 

---

💡두 번째, 프레임 투명도 0%

두 번째 튜토리얼

 

이렇게 Link를 누르면, 원형과 실제 돌아갈 도형이 합쳐져서 나옵니다

이때, 프레임으로 만들어 놓은 원형의 투명도를 0%로 설정합니다

(지우시면 안 돼요)

 

🚩 신경 쓸 점
1. 프레임을 지우지 마세요
2. 프레임의 투명도를 0% 으로 설정해 주세요

 

---

💡세 번째, 사진 삽입

세 번째 튜토리얼

저는 돌아갈 도형들을 직사각형 6개로 만들었는데요

Fill > 색상 사각형 클릭 > 이미지

위 루트를 따라서 각 6개에 모두 사진을 삽입해 주세요

 

🚩 신경 쓸 점
1. Shift를 눌러서 각 도형의 기울기를 동일하게 해 주세요

 

---

💡네 번째, 기울기 조절과 대지 복붙

네 번쨰 튜토리얼

 

대지 프레임을 복사하여 각각 도형에 사진을 모두 넣어 주세요

만약 8개의 직사각형이 돌아가게끔 구현하고 싶으시다면, 대지 개수와 동일하게 8개의 대지를 복사해 줍니다

 

Tip!
1번째 센터 -> 복사 -> 2번째 사진 센터 -> 복사

ㄴ 이런 식으로 다음에 센터가 될 요소인 대지에서 복붙해 주시면 훨씬 빠르게 작업할 수 있습니다

 

---

💡다섯 번째, 프로토타입 연결

다섯 번째 튜토리얼

 

마지막으로 프로토타입을 각각 연결해 주면 끝납니다! 봤을 땐 화려한데, 이렇게 튜토리얼로 뜯어 놓고 보니까 생각보다 별거 없죠? 

^^;

 

🚩 신경 쓸 점
1. 마지막 대지를 첫 번째로 꼭 연결해 줍니다
(그래야 원형이 돌아가는 것처럼 구현돼요)

 

---

💡여섯 번째, 디자인 마무리 및 썸네일 확인

끝!

 

이렇게 요소를 배치하고 나면, 사진을 넣을 때 모든 요소들에 박힌 사진이 센터에 와 있는 대지들을 구경하실 수 있습니다

프로토타입을 디테일하게 구현하고 싶다면, 이런 디테일적인 노가다가 꼭 필요한 것 같아요...

 

---

완성본 구경하기

 

 

짠~

이렇게 프로토타입이 완성되었습니다

모두 도움이 되셨으면 좋겠습니다...

이런 돌아가는 프로토타입이 만들기 까다로워 보여도 막상 시작하고 나면 정말 심플한데 멋져 보이는 인상을 줄 수 있어서 정말 활용도가 높거덩요

 

 

다음 프로토타입으로 뵙겠습니다 :)