노코드로 웹사이트에 3D 캐릭터 넣어봤어 (생각보다 쉬움)

안뇽~~파박이 왔당 ㅎㅎ

설명절 잘 지냈지?? 

나는 명절증후군이 와버렸지 머야....ㅠㅠ

흠흠..정신 차리고 가볼게 ㅎㅎ

 

오늘 내가 할 이야기는 홈페이지에 3D 캐릭터 넣기야!

어때 잼있겠지???

 

요즘 멋있는 사이트 들어가 보면
마우스 따라 움직이는 3D 캐릭터 하나쯤은 있지 않아?

예전엔 이런 거 보면
“저건 개발자 영역이지…”
이렇게 생각했어.

근데 해보니까 아니더라.

코딩 한 줄 없이
Spline으로 30분 만에 만들어봤어.

---

왜 굳이 Spline이었냐면

일단 노코드야.
그리고 웬만한 툴이랑 다 붙어.

• 워드프레스
• 피그마
• 프레이머
• 웹플로우
• 노션

심지어 React 프로젝트에도 바로 넣을 수 있어.

요즘 웬만한 플랫폼이랑은 다 친하더라.

---

1단계. 3D 모델부터 구했어 (직접 만들진 않았어 ㅋㅋ)

 

솔직히 모델링까지 할 줄은 몰라.

그래서 Sketchfab에서 무료 모델 가져왔어.

방법은 간단했어.

1. 스플라인에서 New File 눌렀어.
2. Sketchfab 가서 마음에 드는 모델 검색했어.
3. GLB 파일로 다운로드했어.
4. 스플라인에 Import 했어.
5. 크기랑 위치만 조정했어.

이게 끝이야.

생각보다 허무했어 ㅋㅋ

---

2단계. 배경 지우고 웹에 넣었어

이게 핵심이야.

1. Export 들어갔어.
2. BG Color를 Hide로 바꿨어. (배경 투명)
3. Update Viewer 눌렀어.
4. Embed 코드 복사했어.

그 다음
홈페이지 에디터에서 HTML/임베드 블록 열고
코드 그대로 붙여 넣었어.

저장 눌렀더니…

화면에 3D 캐릭터가 딱 뜨더라.

그 순간은 좀 신기했어 ㅋㅋ

---

3단계. 그냥 두긴 아쉬워서 움직이게 했어

여기서 재미가 시작돼.

Spline에는 이벤트 기능이 있어.

✔ Look At 기능

마우스 움직이면
캐릭터가 시선을 따라오게 만들 수 있어.

Event → Start → Look At 추가하면 돼.

값은 적당히 조절해보면 감 와.

살짝만 움직이게 해도
훨씬 살아있는 느낌 나더라.

---

✔ Camera Orbit Hint

사용자가
“이거 움직일 수 있어요”
알 수 있게 화살표 힌트도 넣을 수 있어.

이거 하나 추가했을 뿐인데
훨씬 인터랙티브해 보였어.

---

그래서 뭐가 좋았냐면

정적인 이미지랑은 완전히 다르더라.

사이트가 살아있는 느낌이었어.

그리고 중요한 건 이거야.

코딩 몰라도 된다.

정말로.

툴만 조금 만져보면
30분~1시간 안에 충분히 가능해.

---

Spline 전체 과정 한 줄 요약해볼게

1. 모델 구해.
2. 스플라인에 넣어.
3. 위치 잡아.
4. 이벤트 넣어.
5. Embed 코드 복사해서 붙여.

끝.

---

이런 사람들한테 추천해

• 홈페이지에 포인트 하나 주고 싶은 사람
• AI 시대 느낌 조금은 내고 싶은 사람
• “개발자 도움 없이 어디까지 되지?” 실험해보고 싶은 사람
• 노코드로 3D 한 번 만져보고 싶은 사람

---

솔직히 말하면
생각보다 쉬웠어.

그리고 생각보다 재미있었어.

3D 하나 넣었을 뿐인데
사이트 분위기가 확 달라지더라.

한 번 해볼래?

재밌어 😎

 

휴..내용 공유 끝!! ㅎㅎ

이제 난 러닝하러 나갈게~~

설연휴기간 살이 너무 쪘자나...ㅠㅠ

 

파박이 간닷!!