GPT6와 Hyper3D MCP로 3D 개인 웹사이트 만들기

이것은 창허(苍何)의 597번째 오리지널 글입니다!

안녕하세요, 저는 창허입니다.

최근에 제 개인 웹사이트에 새로운 방식을 시도해보고 싶었습니다.

이전 웹사이트는 비교적 평범했습니다. 페이지를 열고, 내용을 둘러보고, 다 보면 그냥 떠나는 식이었죠.

저는 시간을 조금 들여 개인 웹사이트를 여기저기 돌아다닐 수 있는 3D 소행성으로 만들었습니다. 그 안에는 작은 요정들이 살고 있고, 여러분이 발견하기를 기다리는 보물도 숨어 있습니다. 이름은 「창허의 작은 우주」라고 붙였습니다, 하하하.

이 작은 우주의 코드는 Codex가 완성했고, 주인공과 요정들의 3D 모델은 Hyper3D MCP를 통해 생성한 뒤 Codex가 웹사이트에 연결했습니다.

먼저 한 바퀴 둘러보시죠. 이 작은 우주에 들어가면 「창허」를 조종해 행성 위를 자유롭게 탐험할 수 있습니다.

어디로 가야 할지 모르겠다면 요정을 불러서 여러 방으로 안내받을 수도 있습니다. 요정들과 상호작용하면 전용 엽서도 받을 수 있습니다.

지표에 도착할 때마다 해당하는 보물 하나를 해금할 수 있어, 탐험 길에서 얻은 작은 성과를 주머니에 담을 수 있습니다.

이 캐릭터와 아이템들은 어떻게 만들어졌고, 어떻게 웹사이트에 들어갔을까요? 아래에서 자세히 설명하겠습니다.

1. 왜 Hyper3D MCP를 연결했는가

이 웹사이트를 만들면서 저는 제 모습과 이전에 디자인한 작은 펫들을 모두 넣고 싶었습니다.

참고 이미지는 있지만, 그것들을 장면에 넣을 수 있는 3D 모델로 만들어야 했습니다.

Hyper3D는 제가 개인적으로 계속 사용해온 AI 3D 도구로, 생성 품질이 매우 뛰어나기 때문에 가장 먼저 Hyper3D를 떠올렸습니다. 마침 그들이 최근 MCP도 출시해서 Codex에서 바로 사용할 수 있어 매우 편리했습니다.

그리고 제가 비교해본 결과, GPT-6는 3D 인물 캐릭터 모델 제작에서 효과가 요구 수준에 미치기 어려웠기 때문에 Hyper3D Rodin 같은 전문 3D 생성 도구를 연결하는 것이 매우 필요했습니다. 한편으로는 사용 가능한 3D 에셋을 빠르게 대량 생성할 수 있고, 다른 한편으로는 대량의 token도 연결할 수 있습니다.

이렇게 하면 웹사이트를 만드는 과정에서 어떤 캐릭터가 필요하든 바로 이어서 만들고 넣을 수 있어, 여러 도구 사이를 오가며 모델을 옮기는 단계를 줄일 수 있었습니다.

일부 모델은 분리해서 처리해야 했는데, 저는 Hyper3D의 BANG 분해 기능도 사용했습니다. 캐릭터와 소장품을 만들 때 이 단계를 다시 자세히 설명하겠습니다.

2. 먼저 Hyper3D MCP를 Codex에 연결하기

이번에는 Codex를 사용했고, 모델은 GPT-6 Astra를 선택했습니다.

/hyper3d.ai/workspace/rodin에 로그인하면 오른쪽 상단에서 MCP 진입점을 찾을 수 있습니다.

열면 팝업에 있는 구성 프롬프트를 복사합니다.

이 프롬프트를 Codex에 보내 구성하도록 하고, 안내에 따라 브라우저에서 Hyper3D에 로그인하고, 작업 공간을 선택하고, OAuth 인증을 완료합니다.

●●●내가 사용하는 클라이언트(Codex 또는 ClaudeCode)에서 Hyper3DMCP를 구성해 주세요: 서버 이름 hyper3d, StreamableHTTPURL https: //api.hyper3d.com/api/mcp, OAuth 사용. 이 클라이언트의 구성 방식을 사용하고, 다른 설정은 유지하며, 기존 항목이 있으면 재사용하거나 업데이트해 주세요. 브라우저 인증을 안내하고, 그런 다음 연결을 검증하고 사용 가능한 도구를 나열해 주세요. 재시작이 필요한지 알려주세요.

구성이 끝난 후 저는 Codex에게 연결을 확인하고 사용 가능한 도구를 나열하도록 했습니다. 아래에서 모델 생성, 상태 조회, 결과 가져오기, 분해 등의 도구가 이미 로드된 것을 볼 수 있습니다.

저는 안내에 따라 새 세션을 열고, 먼저 헬멧 하나로 테스트했습니다: 사실적인 중세 기사 헬멧을 생성하고, 마모된 금속 재질을 적용하고, 게임 에셋용으로.

작업이 완료되자 Codex는 모델 결과 페이지와 GLB 파일을 반환했습니다. 열어보니 금속 표면의 흠집과 마모가 모두 표현되어 있었습니다.

여기까지 Codex에서 생성을 시작하고 다시 모델을 받아오는 흐름이 완성되었습니다. 다음으로 이것을 자신의 작은 우주에 적용합니다.

3. 「창허」를 3D 캐릭터로 만들어 웹사이트에 연결하기

웹사이트 프로토타입 쪽에서는 먼저 자기소개, 작품, 보여주고 싶은 내용을 Codex에 넘겨 행성과 지표를 기획하게 하고, 이동하고 상호작용을 트리거할 수 있는 버전을 만들게 했습니다.

아래는 정식 모델을 연결하기 전의 효과입니다. 상호작용은 이미 작동하지만, 인물은 아직 기본 대체 모델입니다.

그 안의 주인공을 「창허」로 교체하려면 먼저 캐릭터 이미지를 준비해야 합니다.

저는 제 이미지 사진을 Codex에 넘겨 이 작은 우주에 맞는 로우 폴리 Q 버전 스타일로 정리하게 했습니다. 아래 단계에서 얻은 것은 참고 이미지이고, 이후 이것으로 3D 모델을 생성합니다.

참고 이미지가 있으면 Codex가 Hyper3D MCP를 통해 Rodin을 호출해 해당 3D 캐릭터를 생성하게 합니다.

첫 번째 버전 모델이 나온 뒤 전체적인 모습은 이미 맞았지만, 눈빛이 조금 멍해서 생동감이 부족했습니다. 한 바퀴 돌려 효과를 보겠습니다:

저는 바로 문제를 Codex에 알리고 계속 Hyper3D를 호출해 조정하게 했습니다. 원래의 형태와 색상 배합은 유지하고, 눈빛만 최적화하도록 했습니다.

두 번째 버전은 확실히 훨씬 보기 좋아졌습니다. 아래는 조정 후 모델 미리보기이며, 앞의 버전과 비교해 볼 수 있습니다.

효과를 확인한 후 저는 Codex에게 새 버전 모델을 웹사이트에 연결해 원래 주인공을 교체하게 했습니다.

방금 모델 미리보기에서 빙글빙글 돌던 「창허」가 이제 자신의 작은 행성 위에 서게 되었습니다.

4. 요정들을 대량 생성해 각기 다른 구역에 살게 하기

요정들도 같은 흐름을 사용했습니다. 이들의 참고 이미지는 제가 이전에 WeSight에서 디자인한 작은 펫에서 가져왔습니다.

먼저 준비한 참고 이미지를 봅니다. 로봇, 물방울, 불꽃, 작은 나무 상자 각각 나름의 모습이 있습니다.

저는 참고 이미지와 스타일 요구 사항을 함께 Codex에 넘겨, Hyper3D MCP를 통해 연속으로 생성 작업을 제출하고 진행 상황을 조회한 뒤 모델 결과를 가져오게 했습니다.

생성 후에는 하나씩 형태와 화풍이 조화를 이루는지 봐야 합니다. 아래 영상은 이 요정들의 모델 효과입니다.

효과를 확인한 후 저는 Codex에게 모델을 GLB 형식으로 다운로드하게 하고, 해당 구역에 연결해 접근, 대화, 길 안내 등의 상호작용을 붙였습니다.

최상의 효과를 위해 저는 아예 집과 건축물 같은 요소들도 Hyper3D Rodin으로 다시 생성해 교체하여 행성 전체를 업그레이드했습니다. 이렇게 해서 요정들은 진짜로 이 작은 우주에 살게 되었습니다. 아래에서 연결 후의 모습을 볼 수 있습니다:

5. BANG 분해로 모델 계속 처리하기

모델을 웹사이트에 넣은 후에도 몇 가지 세부 사항을 처리해야 합니다. 예를 들어 「창허」는 막 연결했을 때 유령처럼 행성 표면을 떠다녔고, 발밑에 실제 걷는 동작이 없었습니다.

이번에는 캐릭터의 여러 부위를 분리해서 처리하고 싶었고, Hyper3D의 BANG 분해 기능을 사용했습니다.

BANG은 하나의 완성된 모델을 여러 개의 독립된 부위로 분해해 이후 개별 편집, 재조립 또는 사용을 편하게 해줍니다.

저는 Codex가 먼저 Hyper3D MCP를 통해 분해를 완료하고, 그런 다음 부위를 Blender에 넘겨 스켈레톤 바인딩과 걷기 애니메이션 제작을 하게 했습니다. 아래 대화에서도 이 두 단계의 분업을 볼 수 있습니다.

분해 후에는 머리, 몸통, 팔다리 등의 부위를 따로 처리할 수 있습니다. 이어서 Blender에서 바인딩과 애니메이션을 완성했고, 처리 과정은 이렇습니다:

이 일련의 처리를 거치자 캐릭터는 마침내 행성 표면에 붙어 정상적으로 걸을 수 있게 되었고, 더 이상 계속 떠다니지 않았습니다.

분해된 부위는 다른 방식에도 사용할 수 있습니다. 이번에는 BANG의 분해 기능으로 소장품도 제작해 여덟 개 지표에 넣어, 방문객이 둘러보면서 수집할 수 있게 했습니다.

아래는 소장품과 수집 상호작용의 효과입니다:

마지막으로 배경 음악과 몇 가지 상호작용 세부 사항을 더하자 이 작은 우주는 서서히 완성되었습니다.

마지막으로, 하나의 모델에서 시작하기

이번 작업을 마치고 나서 제가 꽤 수월하다고 느낀 부분은 참고 이미지를 Codex에 넘기고, Hyper3D를 통해 캐릭터를 생성하고, 그런 다음 모델을 웹사이트에 연결하는 것이었습니다.

눈빛이 마음에 안 들면 요구 사항을 말하고 다시 고치고, 요정 한 무리가 필요하면 참고 이미지에 따라 계속 생성하고, 모델을 더 처리해야 하면 분해한 뒤 이어서 편집합니다.

아이디어에서 모델로, 다시 웹페이지 속 캐릭터로, 이 흐름이 이렇게 한 단계씩 완성되었습니다.

해보고 싶다면 하나의 모델에서 시작할 수 있습니다: Hyper 3D 작업대의 MCP 진입점에 들어가 구성 프롬프트를 Codex에 복사하고, 안내에 따라 인증을 완료한 뒤 첫 캐릭터나 아이템을 생성해 보세요.

현재 제가 보기에는 Hyper3D MCP 활동에 혜택도 있습니다: Credits 10개를 무료로 받고, Creator 크리에이터 멤버십 첫 달 1달러 체험. 구체적인 수령 자격과 갱신 가격은 활동 페이지에 표시된 내용을 기준으로 합니다.

유용하다고 생각하시면 「좋아요」와 「보고 있음」을 눌러 응원해 주세요.

창허

Java 개발/기술 리드 @앤트 그룹

312

글

243k

읽음

566

팔로워