teleport HQ - 프롬프트 한 줄로 디자인과 리액트 코드까지 완성
teleport HQ는 간단한 프롬프트 입력만으로 웹사이트를 빠르게 작성해줍니다. 반응형 디자인과 프론트엔드 코드 생성도 해줍니다만, 실무에 바로 적용하기엔 아쉬운 부분도 있습니다. 빠른 프로토타이핑이 가능하다는 점에서 꽤 편리하다는 인상을 줍니다.
최근엔 AI를 활용한 다양한 도구들이 쏟아져 나오고 있습니다. 다양한 아이디어들이 쏟아져 나와서 마치 스마트폰이 처음 나왔을 때, 재미있는 앱들이 나오던 때와 유사한 느낌입니다.
프론트엔드 튜토리얼 예제를 준비하면서 가상의 웹사이트를 만들어서 진행해야겠다고 생각하던 차에 직접 기획하고 디자인하는게 무척 시간도 많이 걸리고 힘들다는 생각이 들었습니다.
당연히 사람들이 만들어놓은 도구들이 있겠지? 싶은 생각이 들어서 검색을 해봤다가 재미있는 도구를 발견했습니다.
teleport HQ
teleport HQ는 제품의 이름이면서 사명社名이기도 하네요. figma 에도 플러그인 형태로 서비스되고 있는 모양입니다.
간단하게 AI 로 프롬프트만 입력해도 웹사이트가 만들어진다고 하길래 한 번 시도해봤습니다.
회원가입을 하고 나면 딱 1개 의 프로젝트만 무료로 생성해서 사용해볼 수 있습니다. Generate with AI 를 누르면 아래와 같은 화면이 나옵니다.
저는 A professional Website for a freelance front-end web developer 라는 프롬프트를 작성해주었고, Start Building 버튼을 눌러주었습니다.
뭔가 진행사항을 보여주고, 모든 것이 완료되면 체크박스가 모두 활성화되고, Go to the Page 버튼이 활성화 됩니다. 완성된 화면으로 넘어가봅니다.
뭔가 화면이 뚝딱 만들어지니 좀 어안이 벙벙합니다. 디자인이 일단 완성되서 반응형까지 구현이 되어있어서 화면 사이즈를 줄이거나 늘리면 위와같이 자동으로 화면도 변합니다.
물론 디자인 수준이 바로 실제 업무에 활용할만큼 훌륭하진 않습니다. 하지만 기획/프로토타이핑 단계를 대신해준다는 느낌이라 일이 많이 줄어들겠구나 싶더군요.
간단한 수정도 가능하고, 제법 유연한 환경을 제공해주고 있습니다.
한가지 더 재미있는 점은 프론트엔드 코드도 작성해준 다는 점입니다.
React, Vue, Angular, HTML, UIDL - 5가지 형식으로 프론트엔드 소스까지 작성해줘서 꽤 많은 일을 덜어준다는 느낌입니다. 하지만 이 소스들도 어디까지나 외양만 만들어주는 소스들이기 때문에 바로 쓰기보다는 일단 이것저것 손봐야될 구석들이 많습니다.
그래서 전체적인 인상으로 봤을때는 빠르게 프로토타이핑하고, 어떤 컨셉을 시도해보기에 훌륭한 툴이라는 인상입니다.
AI 로 만드는 도구들은 대략 이런 인상입니다. 바로 제품으로 활용하기엔 무리가 있지만, 빠르게 시도해보는데 도움이 되는 도구들이 많이 나와서 작업 효율이 올라가겠구나 싶습니다.
Comments ()