TeleportHQ
TeleportHQ · 코딩
TeleportHQ는 AI 프롬프트와 Figma 디자인을 게시 가능한 반응형 사이트로 바꾸고 다섯 가지 JS 프레임워크로 깔끔한 코드를 내보내는 로우코드 웹사이트 빌더다.
TeleportHQ 소개
About
TeleportHQ란
TeleportHQ는 브라우저에서 돌아가는 로우코드 빌더로 웹사이트, 웹 앱, 온라인 스토어를 다룬다. AI 웹사이트 제작 도구로서 시각적으로 디자인하고, 마지막에는 고정된 템플릿이 아니라 실제 운영에 쓸 수 있는 코드로 결과물을 게시한다.
핵심은 분명하다. 코드를 쓰지 않는 사람은 드래그 앤 드롭으로 작업하고, 코드를 쓰는 사람은 끝에 HTML, CSS, 프레임워크 코드를 가져간다. 이 조합은 드물다. 대부분의 사이트 빌더는 호스팅된 페이지 하나를 주고 끝난다.
한계는 미리 알아두는 편이 낫다. 웹 앱 프로젝트, 추가 언어, 추가 편집자 좌석은 유료 슬롯이 필요하고, 7일 무료 체험의 AI 토큰 3만 개는 한 번만 주어지며 매달 채워지지 않는다.
시작하는 방법
- play.teleporthq.io에서 가입하고 카드 없이 7일 무료 체험을 시작한다.
- AI 빌더에 사이트 요구를 설명하거나 Figma 파일을 불러와 첫 레이아웃을 만든다.
- 드래그 앤 드롭으로 디자인을 다듬고 컴포넌트를 조정하며 글꼴과 색을 바꾼다.
- 자체 도메인을 연결하거나 Vercel에 배포하고, 직접 호스팅하려면 코드를 내보낸다.
제품 정보
TeleportHQ의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- 코딩을 모르는 사람
- 프런트엔드 개발자
- 마케팅 팀
- 에이전시
작업
- Figma 파일을 코드로 변환하기
- 랜딩 페이지 출시하기
- 헤드리스 CMS 프런트 만들기
- 작은 스토어 열기
활용 상황
- 소스 코드를 원하는 팀에 완성된 사이트를 넘기기
- 여러 시장을 위해 사이트를 번역하기
- 예산을 확정하기 전에 웹 앱을 시험 제작하기
주요 기능
AI 웹사이트와 웹 앱 빌더
목표, 스타일, 내용을 설명하면 TeleportHQ가 레이아웃 전체나 인터랙티브 웹 앱을 생성한다. 몇 초 만에 여러 디자인 시안을 받고 손으로 다듬는다. 각 프로젝트는 AI 기능용 체험 토큰으로 시작한다.
드래그 앤 드롭 시각 편집
에디터에서 코드를 쓰지 않고 색, 글꼴, 섹션, UI 요소를 바꾼다. 재사용 가능한 컴포넌트를 만들고 색과 서체를 전역 스타일 가이드에서 관리한다. 코딩을 모르는 편집자도 개발자와 같은 프로젝트에서 작업한다.
다섯 가지 프레임워크 코드 내보내기
HTML, CSS, React, Next.js, Vue, Angular의 운영용 코드를 내보낸다. 만든 사이트가 TeleportHQ에 묶이지 않고 자신의 저장소와 호스팅으로 옮겨진다는 뜻이다. 코드 내보내기는 정적 프로젝트에만 적용된다.
Figma 코드 변환 플러그인
Figma에서 사이트 디자인을 불러오거나 선택한 레이어를 편집 가능한 HTML과 CSS로 복사한다. 디자인과 코드 사이의 재작업 단계를 건너뛰고, 내보낸 마크업은 개발자가 다루기 쉽다.
헤드리스 CMS와 데이터 연동
프로젝트를 Strapi, Contentful, WordPress, Caisy, Flotiq에 연결하고 외부 데이터 소스를 가져온다. 콘텐츠가 화면과 분리되어 마케터가 에디터를 열지 않고 블로그나 카탈로그를 갱신한다.
폼과 리드 수집
에디터 안에서 코드 없이 폼을 만들고 꾸미며, 제출 내용은 대시보드에서 모으고 관리한다. 요금제에 정해진 수의 폼과 월 제출량이 포함되고, 추가분은 팩으로 살 수 있다.
호스팅과 원클릭 배포
TeleportHQ 서브도메인에 무료로 게시하고, 자체 도메인을 연결하거나 Vercel로 바로 배포한다. SSL과 글로벌 CDN이 기본으로 붙고, 모든 요금제에 1 GB 자산 저장 공간이 포함된다.
장단점
장점
- HTML, CSS, React, Next.js, Vue, Angular 코드 내보내기 덕분에 사이트를 옮길 수 있다.
- 시각 편집이 전역 스타일 가이드, 재사용 컴포넌트와 함께 있어 팀이 일관성을 지킨다.
- Figma 불러오기로 디자인과 코드 사이의 재작업이 줄어든다.
- 내장 호스팅, 자체 도메인, SSL, CDN이 아이디어에서 출시까지의 길을 모두 덮는다.
- 7일 체험은 카드가 필요 없어 평가 부담이 적다.
단점
- 코드 내보내기는 정적 프로젝트에만 적용되어, 인터랙티브 웹 앱은 같은 방식으로 플랫폼을 떠나지 못한다.
- 웹 앱 프로젝트, 추가 언어, 추가 편집자 좌석은 각각 별도의 월 요금이 붙는다.
- 체험용 AI 토큰은 3만 개가 한 번 주어질 뿐 매달 주어지지 않아, 프롬프트를 많이 쓰면 금방 바닥난다.
- 무료 프로젝트에는 TeleportHQ 브랜드가 붙고 비공개로 돌릴 수 없다.
자주 묻는 질문
아니다. 드래그 앤 드롭과 AI 빌더로 사이트를 만들고 게시할 수 있다. 내보낸 프로젝트를 더 손보려면 코딩 지식이 도움이 된다.
관련 콘텐츠
TeleportHQ와 관련된 도구, 스킬, 아티클을 살펴보세요.
TeleportHQ 대안
Forefront
Forefront · 코딩Forefront는 오픈소스 AI로 무언가를 만드는 웹 플랫폼이다. 대표적인 오픈소스 언어 모델을 자신의 데이터로 미세 조정하고, 성능을 평가하고, API로 실행하거나 내보내 직접 호스팅할 수 있다. 폐쇄형 플랫폼의 편의를 원하면서도 모델과 데이터의 소유권은 놓지 않으려는 개발자가 대상이다.
Startkit
StartKit.AI · 코딩Startkit은 AI SaaS와 AI 래퍼 제품을 만들기 위한 보일러플레이트다. 지루한 부분을 미리 연결해 둔 AI 스타트업 보일러플레이트라고 생각하면 된다. 인증, Stripe와 Lemon Squeezy 결제, 사용량 제한, 트랜잭션 이메일, 그리고 OpenAI, Anthropic, Groq, Llama와 통신하는 AI API 스타터 키트가 포함된다. 저장소를 복제하고 가격을 정한 뒤 사용자가 실제로 돈을 내는 부분에 착수하면 된다. React와 Tailwind 위의 Next.js로 만들어졌기 때문에 보일러플레이트 코드의 상당 부분이 이미 익숙하게 느껴진다.
Testim
Tricentis · 코딩Testim은 웹, 모바일, Salesforce 애플리케이션 전반에 걸쳐 엔드투엔드 테스트를 만들고 실행하는 AI 기반 테스트 자동화 플랫폼이다. 머신러닝에 기대어 인터페이스가 바뀌어도 테스트를 안정적으로 유지하므로, 팀은 깨진 셀렉터를 고치는 데 쓰는 시간을 줄인다. 오늘부터 쓸 수 있는 자동화 테스트 도구치고 나쁘지 않다. 브라우저에서 동작을 녹화해 테스트를 만들고, 더 세밀한 제어가 필요하면 JavaScript를 더한다. 바쁜 QA 팀에게 탄탄한 선택이다.