‍

오늘의 학습은 Webflow와 Spline을 사용한 클론 디자인입니다.

실력을 더 높이려면 최고의 작업물을 봐야 하니, 매일 Awwwards를 들락거리고 있습니다. 그러다 생각해낸 방법이 바로 클론 디자인이었죠.

멋진 작품을 하나 발견하면, 무엇이 다른지, 왜 그렇게 만들었는지를 분석하며 클론 디자인을 진행합니다. 디자인하면서 조금 바꾸고 싶다 싶은 부분은 바로 수정해 보며, 최대한 재미있게 연습하고 있습니다.

‍

‍

자, 이제 사이트를 하나 골랐으니 시작해 보겠습니다.

코드로 작업하면 시간이 너무 오래 걸리기 때문에, 우선 Figma로 간단히 레이아웃을 잡아봅니다.

‍

‍

메인 슬라이더는 Spline으로 제작합니다.

1. 요소를 하나 생성한 뒤, 클로너를 사용해 복제합니다.
2. 그런 다음, 각 요소에 hover 인터랙션을 적용하면 슬라이더가 완성됩니다.

이제 완성된 슬라이더를 Webflow로 가져갑니다. Spline에서 생성한 코드를 Webflow에 붙여넣으면 바로 3D 슬라이더가 적용됩니다.

‍

‍

더 부드럽고 정교한 효과를 원한다면 Three.js와 Shader를 활용하는 것이 좋습니다. 하지만 Webflow와 Spline을 사용하면, 단 몇 분 만에 이런 웹사이트를 제작할 수 있다는 큰 장점이 있습니다. 프로토타입이나 간단한 사이트에서는 고객의 만족도를 높이는 동시에, 많은 시간과 비용을 절약할 수 있습니다.

‍

완성된 링크입니다.