AI 에이전트로 인터랙티브 게임 스타일 3D 포트폴리오 구축

이 파이프라인에서는 Verdent 에이전트 플랫폼을 사용합니다. VS Code와 JetBrains용으로 제공되지만, 저수준 구문보다 전체 아키텍처에 집중하는 사용자에게는 간소화된 인터페이스의 데스크톱 애플리케이션을 권장합니다.

이 워크플로우의 핵심 엔진은 Claude 4.5 Opus입니다. 이 모델은 높은 추론 능력과 복잡한 코드 구조 생성의 효율성 덕분에 3D 웹 애플리케이션에 특히 효과적입니다.

• GitHub 연결: GitHub 계정을 Verdent에 연결하여 에이전트가 자동으로 버전 관리 및 브랜치 생성을 관리할 수 있도록 합니다.
• 워크스페이스 관리: 이 셋업의 가장 강력한 기능 중 하나는 여러 워크스페이스를 병렬로 실행할 수 있다는 것입니다. 이를 통해 한 브랜치에서 보조 도구(에셋 옵티마이저 등)를 개발하면서 다른 브랜치에서 메인 포트폴리오를 구축할 수 있어, 표준 AI 코드 에디터에서 흔한 코드 충돌을 방지합니다.

새 워크스페이스를 열고 에이전트에게 glTF-transform 라이브러리를 활용하는 로컬 Next.js 웹 애플리케이션을 만들도록 프롬프트합니다. 목표는 다음을 자동화하는 간단한 "드래그 앤 드롭" 인터페이스입니다:

• 텍스처를 WebP 포맷으로 변환.
• 메시 최적화로 버텍스 수 감소.
• 텍스처를 최대 1k 또는 2k 해상도로 리사이즈.

에이전트를 실행하고 파일 구조를 빌드하도록 합니다. 완료되면 로컬 서버를 실행하고 무거운 GLB 모델을 인터페이스에 드롭할 수 있습니다.

모범 사례: 높은 충실도가 필요하면 2k 또는 4k 텍스처를 사용하되, 최종 웹 빌드에서는 옵티마이저가 압축하여 모바일 기기에서도 사이트가 반응적으로 유지되도록 합니다.

코드에 바로 뛰어들지 말고, 에이전트를 Plan Mode로 전환합니다. 이렇게 하면 에이전트가 요구사항을 분석하고, 자체 로직을 다시 확인하며, 로드맵을 제시합니다.

• 다이어그램 검토: 에이전트가 사이트 아키텍처의 기술적 다이어그램을 생성합니다.
• 복잡도 줄이기: AI 에이전트는 기본적으로 멀티 페이지 레이아웃을 제안하는 경향이 있습니다. 현대적인 "게임 스타일" 느낌을 유지하려면, 에이전트에게 하나의 높은 임팩트의 진입 화면과 메인 뷰어로 경험을 통합하도록 지시합니다.

텍스트와 레퍼런스 이미지의 조합을 사용하여 비전을 전달합니다. 이 포트폴리오에 효과적인 프롬프트 구조는 다음과 같습니다:

• 진입 화면: 썸네일과 "포트폴리오 입장" 버튼이 있는 랜딩 페이지.
• 캐릭터 뷰어 레이아웃: 3D 캐릭터가 왼쪽 60%를, 정보 카드가 오른쪽을 차지하는 분할 화면 방식.
• 내비게이션: 캐릭터 전환 버튼(좌/우)과 캐릭터를 화면 높이에 자동으로 맞추는 시스템.
• 비주얼 스타일: 순수 검정 배경, 멀리 사라지는 무한 그리드 바닥, 깊이감을 위한 떠다니는 "반짝임" 또는 "별빛" 파티클.

에이전트가 프롬프트하면 다음 설정을 지정합니다:

• 그리드 스타일: 검정으로 사라지는 무한 그리드를 선택합니다. 브랜딩 일관성을 위해 나중에 그리드 색상 변경(예: 오렌지)을 요청할 수 있습니다.
• 파티클 스타일: 배경에 은은한 움직임을 만드는 "떠다니는 반짝임"을 선택합니다.
• 사용자 인터랙션: 자동 회전을 비활성화합니다. 캐릭터는 사용자 인터랙션에 의해서만 회전하여 더 촉각적인 "게임 메뉴" 느낌을 제공합니다.

캐릭터 모델(GLB)에 달리기 또는 대기 애니메이션이 포함되어 있는지 확인합니다. 에이전트에게 캐릭터가 로드되면 이러한 애니메이션이 자동으로 트리거되도록 지시합니다.

파일 탐색기에서 프로젝트 폴더로 이동하여 다음과 같이 에셋을 배치합니다:

• 모델: 최적화된 .glb 파일을 public/models 디렉토리에 배치합니다.
• UI 이미지: 썸네일이나 프로필 사진을 public/images 폴더에 배치합니다.

에이전트에게 캐릭터 데이터 목록을 제공합니다: 이름과 설명, 생성에 사용된 도구, 소스 파일이나 외부 비디오 콘텐츠 링크 등. 에이전트는 데이터 구조를 채울 뿐만 아니라 파일 경로도 자동으로 수정합니다. 예를 들어, .jpg를 제공했는데 코드가 .png를 기대했다면, 에이전트가 폴더의 파일을 감지하고 수동 개입 없이 코드를 업데이트합니다.

브라우저에서 프로젝트를 로드합니다. 3D 모델이 너무 작게 나타나거나 정보 카드가 정렬되지 않으면, 브라우저 창의 스크린샷을 찍습니다.

스크린샷 프롬프트: 스크린샷을 에이전트에 다시 업로드하고 구체적인 비평을 제공합니다. 예: "오른쪽 카드가 현재 검은 배경 위에 있습니다. 3D 뷰어 위에 오버레이되도록 이동해주세요. 또한 모델이 화면 전체 높이에 맞고 정상적으로 줌되도록 해주세요."

일반적인 외관에서 벗어나려면 커스텀 브랜딩을 적용합니다:

• 브랜딩: 특정 브랜드 색상에 맞추기 위해 "오렌지 스타일링" 테마를 요청합니다.
• 컴포넌트 업그레이드: 외부 비디오에 대한 단순 텍스트 링크 대신, 콘텐츠의 시각적 프리뷰를 제공하는 "YouTube 썸네일 카드"를 만들도록 에이전트에게 요청합니다.