AI 기술의 발전으로 웹사이트 제작이 한층 더 편리해졌습니다. ChatGPT와 같은 프론트엔드 코드를 작성해주는 AI나 실시간으로 웹사이트를 구현해 주는 ClaudeAI의 아티팩트 기능을 통해 웹사이트를 쉽게 제작할 수 있습니다. 하지만 대화형 AI는 언어 선택, 언어별 컴파일러를 통한 실행 방법, 파일 구조 안내 등에서 여러 번의 대화가 필요하거나 원하는 기능을 정확히 구현하기 어려운 경우가 있습니다.
이러한 문제를 해결하기 위해 등장한 서비스가 바로 websim.ai입니다. 이 AI 서비스는 Claude나 GPT 모델을 활용하여 사용자가 웹사이트에 대한 설명을 작성하면 이를 빠르게 구현하고 실시간으로 시뮬레이션할 수 있는 강력한 도구입니다.
웹사이트 설명만 하면 AI가 이런거까지 생성해준다?
websim.ai는 사용자의 아이디어만 있다면 무료로 상상하는 모든 걸 제작할 수 있는 신개념 AI입니다.
websim.ai는 다른 사람들이 만든 다양한 결과물을 확인하고 시뮬레이션해 볼 수 있는 기능을 제공합니다. 단순히 나만의 웹사이트를 만드는 데 그치지 않고, 다른 사용자들의 창작물을 통해 새로운 아이디어를 얻을 수 있는 기회를 얻을 수 있습니다.
웹사이트에 방문하여 다양한 기능과 실제 사용자들이 websim.ai를 통해 생성한 웹사이트들을 확인하실 수 있습니다.
(websim.ai링크)
websim.ai로 제작된 서비스
홈페이지에서도 살펴볼 수 있지만 다른 사람들이 만든 프로젝트 중 퀄리티가 높고 참신한 아이디어들이 굉장히 많습니다. 아래 몇 가지 websim.ai로 제작된 서비스를 소개해드리겠습니다.
2D플랫포머 게임을 websim.ai로 제작하였으며 캐릭터 이동, 채팅, 동물들의 이동 등 정말 디테일하게 제작되어 있어서 놀라웠던 프로젝트입니다.(링크)
3D 캐릭터 모델을 돌려볼 수 있게 한 프로젝트도 있습니다. 아직 개발 중인 프로젝트 같은데 다양한 VRM모델을 교체할 수 있게하거나 게임 서비스로 만들어도 좋을거 같습니다.(링크)
공포게임에 나올법한 3D 게임맵을 제작한 프로젝트도 있습니다.
실제 게임을 만들 때도 굉장히 유용할 거 같습니다.(링크)
마음에 드는 서비스가 있다면 코드를 살펴볼 뿐만 아니라 주소창을 클릭하여 해당 웹사이트가 어떠한 설명으로 제작되었는지 프롬포트 작성 내역을 확인할 수 있습니다.
서비스 배포, 코드 다운로드 기능
websim.ai를 통해 생성한 서비스의 오른쪽 상단에는 다양한 기능을 제공하는 메뉴가 있습니다.
- 북마크 기능 - 결과물을 북마크에 저장할 수 있습니다. (다시 열람하고 싶다면 마우스를 화면 왼쪽으로 가져다가 대면 북마크 항목이 나타납니다.
- URL 배포 - 생성된 웹사이트의 URL을 복사하여 다른 사람에게 제공하고, 누구나 내 서비스에 접근하여 체험해 볼 수 있습니다.
- 코드 저장 - 생성된 서비스의 코드를 HTML 파일로 저장할 수 있습니다. (HTML, CSS, JS가 포함된 단일 HTML파일)
- 삭제 - 해당 프로젝트에 접근하길 원하지 않거나 해당 프로젝트를 폐쇄하고 싶을 경우 삭제할 수 있습니다.
AI로 해커 OS 웹 페이지 만들어보기
websim은 Claue와 GPT의 모델을 제공해 주며 개인적으로 추천하는 모델은 기본으로 설정된 클로드모델이며 Sonnet 3.5로 빠르고 정교한 웹사이트를 제작할 수 있습니다.
상단박스에 만들고자 하는 웹사이트를 간략하게 설명합니다.
한글을 이용한 설명도 작동하지만, GPT나 Claue AI를 써보셨다면 아시겠지만 AI의 학습은 영어가 압도적으로 많기 때문에 영어로 사이트를 설명하는 게 더 높은 퀄리티를 제공합니다.
리눅스 시뮬레이션 웹사이트를 제작해 보았습니다. 간단한 터미널이 나오고 명령라인이 나오는데 굉장히 심플하기 때문에 몇 가지 수정을 요청해 보겠습니다.
결과가 생성된 프로젝트의 주소줄을 클릭하여 수정을 원하는 웹사이트 설명문을 작성하면 기존 결과를 바탕으로 수정할 수 있습니다.
GUI 리눅스를 요청하였더니 작업표시줄도 생성되었고 기존의 터미널은 앱 아이콘으로 등록되어 클릭하여 실행할 수 있습니다. 이런 식으로 원하는 요청사항을 하나씩 추가하여 구상하는 웹사이트를 코딩 없이 시뮬레이션해 보면서 금방 제작할 수 있습니다.
저는 조금 더 다양한 기능이 있고 디테일한 서비스를 원해서 결과물에 디자인에 관한 설명, 기능에 관한 설명을 여러 차례 시도하여 기본으로 생성된 결과물을 바탕으로 제작해 보았습니다.
최종 생성된 웹사이트
websim.ai를 통해 여러 번 요청을 하고 일부 기능을 직접 수정하여 완성된 HackerOs_Simulation을 직접 한 번 사용해보고 싶다면, 아래 링크를 통해 확인 후 사용가능합니다.
GitHub - Blue-B/HackerOs_Simulation: A browser-based Hacker OS simulation project consisting of HTML, CSS, and JS.
A browser-based Hacker OS simulation project consisting of HTML, CSS, and JS. - Blue-B/HackerOs_Simulation
github.com