How to Build $10,000 Hand-Controlled 3D Websites With Hermes Agent & Higgsfield API

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Hermes Agent에 Higgsfield API와 손 추적 기능을 연결하면 손으로 조작하는 3D 포트폴리오 웹사이트를 단계적으로 제작할 수 있지만, 제목의 1만 달러 가치는 영상에서 입증되지 않는다.

📌 핵심 요점

1. Hermes가 웹사이트 개발을 맡고 Higgsfield API가 이미지를 생성한다. 에이전트가 이미지 생성과 웹사이트 반영까지 수행하도록 도구를 연결하는 방식이다.
2. 제작은 브리핑, 참고 이미지 분석, 기본 화면 구현, 상호작용 추가, 이미지 교체, 손 제스처 연결, 최종 보정 순서로 진행한다. 변경 전 백업과 단계별 프롬프트도 작업 규칙에 포함한다.
3. 참고 이미지를 화면 구성의 기준으로 삼고, 분석 내용을 Markdown 파일에 기록하게 한다. 구현 후에는 헤드리스 브라우저로 화면을 촬영해 참고 이미지와 비교하도록 요청한다.
4. HTML·CSS·JavaScript와 Three.js·WebGL 기반의 3D 구체에 카드 애니메이션과 화면 전환을 붙인다. 손 추적으로 회전·확대 및 축소·주먹을 이용한 포트폴리오 진입을 시연한다.
5. 이미지 161개를 모두 생성하는 대신 20개를 생성해 반복 배치한다. 마지막에는 음향, 배경 효과, 초기화 버튼, 라이트박스와 모바일 레이아웃을 다듬지만, 총비용과 객관적인 성능 측정 결과는 제시하지 않는다.

🧩 배경과 문제 정의

발표자는 사진 카드로 구성된 3D 구체를 중심으로, 마우스와 손동작에 반응하는 사진 포트폴리오 사이트를 제작한다. 평소 사용하던 코딩 도구 대신 Hermes를 개발 에이전트로 활용하고, 자체 이미지 생성 기능을 보완하기 위해 영상 후원사인 Higgsfield의 API를 연결한다.

핵심 과제는 시각적 참고 자료를 실제 작동하는 화면으로 옮기고, 이미지 생성·3D 렌더링·손 추적을 하나의 사이트에 통합하는 것이다. 영상은 이를 번호가 붙은 프롬프트와 반복 수정으로 풀어가는 과정을 보여준다. 제목의 가격 표현과 달리 실제 판매나 수익 검증을 다루는 영상은 아니다.

🕒 시간순 섹션별 상세정리

1. 완성된 사이트의 조작 방식 소개

• 손으로 구체를 회전시키고 두 손으로 확대·축소하며, 주먹을 쥐면 사진 포트폴리오 화면으로 전환하는 결과물을 먼저 보여준다. [00:16]
• 마우스에 반응하는 사진 카드, 연기 같은 배경 효과, 움직임에 따른 음향과 회전 표시기를 보여준다. [00:51]
• Hermes로 제작한 결과에 만족한다고 말하고, 화면 크기에 따라 구체와 포트폴리오가 재배치되는 모바일 화면을 보여준다. [01:21]

2. Hermes에 이미지 생성 API를 연결하는 이유

• Hermes가 개발을 맡되 이미지를 생성할 외부 도구가 필요하다고 설명하며, 후원사 Higgsfield의 이미지·영상 생성 API를 보여준다. [01:48]
• 월 구독의 남거나 부족한 크레딧과 비교해 사용량 기반 결제를 선호한다고 드러낸다. 이는 발표자의 사용 경험에 따른 평가다. [02:22]
• 에이전트가 API로 이미지를 생성하고 웹사이트에 가져오게 해, 사용자가 생성 플랫폼에서 직접 작업하는 단계를 줄이려 한다. [02:48]

3. 계정 준비와 개발 브리핑

• 가입 혜택과 할인 화면을 소개하고, 결제 메뉴에서 자금을 충전하는 절차를 보여준다. [03:16]
• 새 Hermes 환경의 에이전트를 Builder라고 부르며, 번호가 붙은 프롬프트를 차례로 전달해 사이트를 만들겠다고 보여준다. [04:25]
• 이미지 생성 API 사용과 변경 전 백업 등 작업 규칙을 Telegram으로 전달하고, 에이전트가 이해한 내용을 되짚는 응답을 확인한다. [04:54]

4. API 연결 환경과 키 등록

• 에이전트에게 API 문서를 읽고 이미지 생성용 연결 환경을 준비하게 하는 동안, 대시보드에서 API 키를 만든다. [05:51]
• 키를 채팅에 넣지 않고 서버에 SSH로 접속해 터미널의 숨김 입력으로 저장하는 과정을 시연한다. [06:42]
• 키 저장 사실을 에이전트에게 알린 뒤, 사과 이미지 생성으로 API 연결을 시험했다고 보여준다. [06:52]

5. 참고 디자인과 이미지 업로드 준비

• 만들고 싶은 사이트의 모습을 먼저 이미지로 정리하고, 디자인 사례 사이트에서 시각적 영감을 얻는 방법을 보여준다. [07:45]
• 다른 사이트의 구체 표현에서 영감을 얻어 사진 포트폴리오용 변형을 만들었으며, 여러 참고 화면으로 자신만의 디자인 이미지를 만드는 방법을 제안한다. [08:20]
• 참고 이미지 업로드와 사이트 미리보기에 사용할 백엔드를 만들게 하고, 터미널에서 터널 연결을 실행하는 절차를 보여준다. [09:04]

6. 참고 이미지 분석과 시각적 검수 지시

• 브라우저의 업로드 화면으로 참고 이미지를 전달하고, 이를 레이아웃과 외관의 기준으로 삼아 분석하도록 요청한다. [09:55]
• 분석 결과를 Markdown 파일에 기록하고, 구현 후 헤드리스 브라우저로 촬영한 화면을 참고 이미지와 나란히 비교하도록 지시한다. [10:20]
• 에이전트가 이미지를 부분별로 분석하고 구현을 시작하지만, 20분 넘게 진행된 초기 결과에서도 구체 모양 등 차이가 남아 있음을 확인한다. [10:59]

7. 실제 3D 구체와 마우스 상호작용 구현

• HTML·CSS·JavaScript와 로컬 Three.js를 사용하고, WebGL 기반의 실제 3D 구체를 구현하도록 구체적인 방향을 전달한다. [11:28]
• 수정된 화면에서 구체·배경 이름·메뉴·표시기를 확인한 뒤, 마우스를 올렸을 때 작은 사진 카드가 날아오는 동작을 추가한다. [12:21]
• 에이전트는 앞서 작성한 분석 파일을 참고한다. 결과 화면에서는 카드 효과와 회전 표시기가 움직이고, 구체를 길게 누르면 포트폴리오로 전환된다. [13:04]

8. 생성 이미지로 사진 카드 채우기

• 임시 이미지를 교체하기 위해 컬러 패션 인물 이미지 20개를 생성하고, 이를 반복 사용해 161개의 이미지 자리를 채우는 방식을 선택한다. [13:41]
• 이미지 생성 모델과 단가를 비교하고 저렴하다고 판단한 모델을 선택한다. 생성 전 계정 잔액은 보여주지만 이 구간에서 최종 지출은 제시하지 않는다. [14:23]
• 생성 이미지가 적용된 구체와 카드 효과를 확인하고, 길게 눌러 사진 목록으로 이동했다가 구체로 복귀하는 전환을 시연한다. [14:56]

9. 손 추적과 제스처 동작 설계

• Google의 손 랜드마크 감지 도구를 소개하며, 카메라로 손가락과 손바닥 등의 위치를 감지해 구체 움직임에 연결한다고 보여준다. [15:31]
• 브라우저에서 최대 두 손을 추적하고, 한 손의 이동에 따른 회전과 두 손 조작, 주먹을 이용한 포트폴리오 전환을 요청한다. [16:07]
• 에이전트가 관련 도구를 찾아 구현하고, 한 손·두 손 동작을 테스트 및 시뮬레이션했다는 보고와 이미지를 제공한다. [16:29]

10. 실제 손동작 시험과 수정 목록

• 카메라를 켜고 손의 좌우·상하 이동에 따른 회전, 두 손 간격에 따른 확대·축소, 주먹을 이용한 화면 전환을 직접 시연한다. [16:59]
• 메뉴 여백, 구체 위 이미지의 어두운 색감, 음향과 회전 표시기 너비, 모바일 레이아웃을 추가 수정 대상으로 정한다. [17:49]
• 남은 사용량에 따라 Hermes에서 계속 작업하거나 다른 코딩 도구로 보정할 수 있다고 말하지만, 최종 선택은 명시하지 않는다. [17:57]

11. 최종 화면과 세부 효과 확인

• 최종 화면에서 구체의 떠오르는 효과와 자유로운 마우스 회전, 연기 같은 배경, 축소된 메뉴, 유리 느낌의 음향 및 초기화 버튼을 보여준다. [18:32]
• 초기에는 손 제스처에 버그가 있었지만 보정했다고 설명하고, 주먹으로 포트폴리오에 진입하는 모습을 다시 보여준다. [18:41]
• 사진을 클릭하면 라이트박스가 열리고, 스크롤할 때 이미지가 어두운 상태에서 밝아지는 효과를 확인한다. [18:54]

12. 프롬프트 공유 예고와 모바일 최종 시연

• 사용한 프롬프트를 무료로 공유하고, 시청자가 체험할 수 있도록 사이트를 온라인에 올려보겠다고 드러낸다. [19:05]
• 모바일 화면에서 구체와 메뉴가 재배치되고 포트폴리오가 열리는 모습을 보여주며 모바일 호환성을 강조한다. [19:21]
• 제작 관련 질문을 댓글로 받겠다고 안내한 뒤 영상을 마무리한다. [19:30]

🧾 결론

• 이 사례는 코딩 에이전트에 외부 이미지 생성 도구를 연결해 시각적 콘텐츠와 인터랙티브 화면을 함께 제작하는 과정을 보여준다.
• 완성도는 한 번의 요청보다 참고 이미지 분석, 구체적인 구현 지시, 화면 비교와 반복 수정에서 만들어진다.
• 손 제스처와 모바일 화면은 시연되지만, 모든 기기에서의 안정성이나 상업적 납품 수준까지 검증된 것은 아니다.

📈 투자·시사 포인트

• 제작 사업 관점에서는 구현뿐 아니라 시각적 방향 설정, 상호작용 설계와 최종 검수가 중요한 작업으로 남는다. 영상에서도 초기 결과물을 여러 차례 수정한다.
• 사용량 기반 이미지 생성은 필요한 만큼 자산을 만드는 방식으로 소개된다. 다만 실제 경제성은 생성 단가, 재시도 횟수와 기타 제작 비용을 합산해야 판단할 수 있다.
• 에이전트와 외부 API의 연결은 이미지 생성부터 사이트 반영까지 이어지는 작업 흐름을 보여준다. API 연결 환경과 자격 증명 관리가 제작 과정의 일부가 된다.
• 제목의 1만 달러는 판매 실적이나 수익률 근거로 사용할 수 없다. 영상에는 고객 계약, 실제 매출 또는 가치 산정 자료가 없다.

⚠️ 불확실하거나 확인이 필요한 부분

• 제목의 1만 달러가 제작비, 판매가 또는 가치 평가 중 무엇을 뜻하는지 설명하지 않으며, 이를 뒷받침하는 거래 사례도 제시하지 않는다.
• 이미지 단가를 설명하는 대목의 숫자와 cents 단위는 확인이 필요하다. 생성 후 총비용을 확인하겠다고 말하지만 제공된 영상에서는 최종 지출액을 보여주지 않는다.
• Higgsfield는 영상 후원사로 소개된다. 비즈니스 이메일 가입 혜택과 할인은 촬영 당시 설명이며, 적용 조건이나 현재 유효성은 확인되지 않는다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 참고 이미지와 원하는 동작을 먼저 정리하고, 브리핑에 단계별 구현 순서와 변경 전 백업 규칙을 포함한다.
• 이미지 생성 API의 실제 단가와 가입 혜택 조건을 확인하고, 소량 생성으로 연결 및 지출을 점검한다.
• API 키는 채팅에 붙여넣지 않고 영상에서처럼 서버 터미널을 통해 등록한 뒤, 테스트 이미지 생성으로 연결을 확인한다.
• 기본 화면을 구현한 뒤 스크린샷을 참고 이미지와 비교하고, 구체 모양·메뉴 크기·이미지 밝기를 순차적으로 수정한다.

❓ 열린 질문

• 이 결과물을 실제 고객에게 제공한다면 1만 달러의 가격을 정당화할 작업 범위와 검수 기준은 무엇인가?
• 조명이나 카메라, 모바일 기기가 달라져도 손 제스처가 안정적으로 작동하는가?
• 이미지 재생성과 수정 작업까지 포함한 전체 비용 및 제작 시간은 얼마인가?