Spline과 OpenAI Codex로 3D 포트폴리오 웹사이트 만들기: 노코딩 실습 정리와 라이선스 주의점

핵심 메시지

• Spline은 3D 인터랙티브 디자인을 초보자도 만들고 배포할 수 있게 설계된 도구로, 설치 없이 브라우저 에디터에서 바로 작업한다.
• 보통 코드를 일일이 작성해야 하는 마우스 반응형 인터랙션을 클릭 몇 번으로 추가하고, 익스포트가 제공하는 코드 조각을 웹페이지에 붙여 넣으면 적용이 끝난다.
• 커뮤니티 탭에는 다른 사용자가 공유한 완성도 높은 3D 에셋이 많아 리믹스해 쓰면 개발 리소스를 크게 줄일 수 있다.
• 남의 템플릿과 에셋을 쓸 때는 반드시 라이선스와 저작권을 먼저 확인해야 한다.
• Codex에게 특정 영역을 수정시킬 때는 개발자 도구의 요소 검사로 태그 이름을 직접 뽑아 알려주는 것이 가장 확실하다.

쉽게 이해하기

웹사이트에서 마우스 움직임에 따라 이리저리 반응하는 3D 디자인은 보기에는 근사하지만, 직접 만들려면 만만치 않은 수학과 코드가 필요하다고 여겨져 왔다. 이 영상은 그 진입 장벽을 Spline이라는 3D 인터랙티브 디자인 툴로 낮추는 방법을 다룬다. 3D 디자인 개발 경험이 전혀 없어도 비슷한 결과물을 만들 수 있다는 것이 출발점이다.

Spline의 핵심은 두 가지로 정리된다. 첫째는 자체 웹 에디터다. 별도 설치 없이 브라우저에서 바로 작업할 수 있고, 코드를 직접 써야 했던 인터랙션을 클릭 몇 번으로 붙일 수 있다. 웹에 올릴 때도 익스포트 메뉴가 주는 코드만 페이지에 붙여 넣으면 된다. 수정 사항이 생기면 퍼블리시 URL을 업데이트한 뒤 다시 복사해 오면 반영된다.

둘째는 커뮤니티 기능이다. 다른 사용자들이 공유한 완성도 높은 3D 작품을 리믹스 버튼 하나로 가져와 필요한 만큼 커스터마이징할 수 있다. 다만 영상은 여기서 라이선스 확인을 반복해서 강조한다. 깃허브에서 가져오는 포트폴리오 템플릿도 마찬가지로 저작권을 먼저 확인해야 하며, 잘못 쓰면 문제가 될 수 있다는 경고가 붙는다.

실습은 깃허브에서 찾은 포트폴리오 템플릿을 Spline 에셋과 조합하는 흐름으로 진행된다. 코드 수정은 OpenAI Codex에 맡기는데, ChatGPT의 Codex 페이지에서 VS Code 확장으로 설치하는 것이 가장 간단한 경로다. 설치 후 실행 방법조차 Codex에게 물어보면 index.html을 브라우저에서 직접 열면 된다고 알려준다.

실무적으로 가장 쓸모 있는 팁은 위치를 지정하는 방법이다. 바꾸고 싶은 영역이 이미지라면 Codex가 해당 코드를 제대로 찾지 못할 수 있다. 그래서 브라우저의 요소 검사 도구를 켜서 그 영역의 태그 이름을 확인하고, 그 이름을 프롬프트에 넣어 지시한다. Codex는 수정 전에 승인을 요청하고, 코드가 맞아 보이면 한 번만 허용하면 된다. 첫 시도에서 기존 요소를 지우지 않고 그냥 덧붙이는 실수가 나왔지만, 다시 지시하니 원하던 3D 로봇만 남고 마우스에 반응하는 인터랙션도 정상 동작했다.

주요 인사이트

• 3D 인터랙션의 진입 장벽은 이제 수학이나 그래픽스 지식이 아니라 도구를 조합하는 감각에 가깝다. 에디터가 만든 결과물을 코드 한 조각으로 내보내고, 그 코드를 붙이는 일은 에이전트에게 맡기는 구조다.
• 에이전트에게 UI 수정을 맡길 때 가장 흔한 실패는 위치를 잘못 찾는 것이다. 스크린샷이나 말로 설명하는 대신 요소 검사로 뽑은 태그 이름을 그대로 넘기면 실패가 크게 줄어든다.
• 한 번에 원하는 결과가 나오지 않는 것이 기본값이다. 영상에서도 첫 수정은 기존 요소를 남긴 채 덧붙이는 결과가 나왔고, 다시 지시해서 해결했다.
• 템플릿을 가져다 쓸 때는 남아 있는 더미 정보를 정리하는 작업이 반드시 따라온다. 이 부분도 코드를 직접 열지 않고 에이전트에게 맡길 수 있다.
• 커뮤니티 에셋과 오픈소스 템플릿을 조합하는 방식은 속도가 빠른 만큼 라이선스 리스크가 함께 온다. 리믹스 전에 라이선스를 확인하는 습관이 필요하다.

자주 묻는 질문

관련 AI 소식