webflow+spline 클론 디자인 2

오늘의 학습은 webflow와 spline을 사용한 두번째 클론 디자인입니다. 유튜브에서 Spline으로 제작된 멋진 비행기 디자인을 발견했습니다. 튜토리얼이 따로 제공되지 않았고, 영상 댓글에서도 튜토리얼을 요청하는 사람들이 많았습니다. 이를 참고하여 직접 클론 디자인 작업을 시작하기로 했습니다.

1. 비행기 모델 찾기

비행기 모델을 찾기 위해 Sketchfab을 활용했습니다. 무료 3D 모델 중 적합한 모델을 선택해 glb 파일 형식으로 다운로드했습니다. glb 파일은 텍스처를 별도로 불러올 필요가 없어서 작업 효율을 높이는 데 유용합니다.

2. 간단한 로고 제작

3D 작업에 들어가기 전에 간단한 로고를 제작했습니다. 컨셉은 비행 브랜드로, 이름은 "Flyer"로 정했습니다. 여기에 슬로건과 추가 정보를 더해 로고를 완성했습니다. 로고 제작 과정에서는 GPT의 도움을 받아 빠르고 효율적으로 작업을 진행했습니다.

3. Spline으로 비행기 모션 추가

다운로드한 glb 파일을 Spline에 임포트한 뒤, 재질을 조정했습니다. 블랙 메탈 느낌을 표현하기 위해 matcap 텍스처를 적용했습니다. 비행기 모션과 엔진 효과도 추가했습니다.

• 상태(State)를 하나 추가한 뒤, 비행기가 살짝 기울어진 모습을 설정했습니다.
• 무한 반복 이벤트를 적용해 비행기가 계속 나는 듯한 동적인 연출을 구현했습니다.
• 엔진 효과는 Cylinder 오브젝트에 depth 그라데이션을 적용하여 제작했습니다.

4. 배경과 디테일 작업

작업의 완성도를 높이기 위해 배경과 세부 디테일을 추가했습니다.

1. Sphere 오브젝트를 활용해 배경 이미지를 적용하고, 카메라를 Sphere 내부에 배치했습니다.
2. 주변을 돌아다니는 빛 효과는 Cloner와 Ellipse 오브젝트를 사용해 구현했습니다.

5. 카메라 세팅과 마무리

마지막으로 카메라를 추가한 뒤, 원하는 각도를 설정하며 작업을 마무리했습니다. 비행기를 화면 중앙에서 약간 대각선으로 배치하여, 움직임이 더 동적이고 생동감 있게 느껴지도록 조정했습니다.

완성된 결과물은 아래 링크에서 확인할 수 있습니다.
완성된 프로젝트 링크

이번 작업은 레퍼런스와 거의 유사하지만, 다양한 작업에 활용이 가능합니다. 예를 들어 비행기 대신 가구나 커피머신 같은 오브젝트를 활용할 수도 있습니다.

무엇보다 중요한 것은, 이러한 작업들을 개발자나 3D 모델러 없이도 수행할 수 있다는 점입니다. 앞으로도 기본적인 디자인 능력을 꾸준히 키워야겠다는 다짐으로 이번 작업을 마무리합니다.