Show GN: 고양이도 발로 코딩한다는 'MOUSE' AI 서비스.
(openfree-mouse.hf.space)AI 코딩 코파일럿을 넘어서서, 프롬프트 입력만으로 단 한번에 실시간으로 '웹서비스'를 생성해주는 'MOUSE'를 소개합니다.
서론: 왜 MOUSE가 필요한가?
코딩 초보자들을 위한 진입 장벽 낮추기
우리는 이제 디지털 시대에 살고 있습니다. 웹사이트나 간단한 게임을 만들고 싶은 분들이 많지만, 프로그래밍 언어를 배우는 것은 쉽지 않은 도전입니다. MOUSE는 이러한 진입 장벽을 획기적으로 낮추어줍니다.
자연어로 소통하는 코딩
"타로카드 운세를 볼 수 있는 웹페이지를 만들어줘"
"벽돌깨기 게임을 만들어줘"
"3D 분자 모형 시뮬레이션을 만들어줘"
이렇게 평소에 사용하는 언어로 요청하면, MOUSE가 자동으로 실행 가능한 코드를 만들어냅니다. 마치 전문 개발자와 대화하듯이, 여러분의 아이디어를 곧바로 실제 웹페이지나 게임으로 구현할 수 있습니다. 그것도 단 한번에, 한방에 서비스가 생성됩니다.
즉각적인 결과 확인
코드를 작성하고 실행하는 복잡한 과정 없이, 버튼 클릭 한 번으로 결과를 바로 확인할 수 있습니다. 실시간으로 수정도 가능해서, 원하는 결과가 나올 때까지 계속해서 개선할 수 있습니다.
실제 활용 사례
학생들의 프로그래밍 학습 도구
아이디어를 빠르게 프로토타입으로 만들어보고 싶은 창업자
간단한 웹 도구가 필요한 직장인
코딩을 배우고 싶지만 어디서부터 시작해야 할지 모르는 입문자
- 개요
MOUSE는 인공지능 기반의 코드 생성 및 실시간 웹 렌더링을 결합한 혁신적인 플랫폼입니다. 사용자의 자연어 요청을 바탕으로 실행 가능한 웹 코드를 생성하고, 즉시 결과를 확인할 수 있는 독특한 기능을 제공합니다.
- 핵심 아키텍처
2.1 AI 엔진 통합
멀티 LLM 연동 시스템
Claude, OpenAI 등 멀티 LLM 모델들이 통합되어 추론/검증 지원
자동 폴백(Fallback) 메커니즘 구현
실시간 스트리밍 응답 처리
최적의 코드 생성을 위한 Instruction 및 추가 학습 등이 적용
2.2 프론트엔드 구조
사용자 친화적 인터페이스
직관적인 입력 방식
현대적이고 깔끔한 디자인
쉽게 이해할 수 있는 메뉴 구성
- 주요 기능
3.1 코드 생성 및 실행
자연어 입력을 통한 코드 생성
실시간 코드 미리보기
즉시 실행 가능한 샌드박스 환경
코드 히스토리 관리
3.2 데모 시스템
50여개 이상의 실용적인 베스트 예제 제시
게임, 도구, 시각화 등 다양한 카테고리
클릭 한 번으로 실행 가능한 데모
- 기술적 특징
4.1 안전한 실행 환경
보안된 샌드박스에서 코드 실행
사용자 데이터 보호
안정적인 서비스 제공
4.2 사용자 경험 최적화
빠른 응답 시간
직관적인 인터페이스
단계별 가이드 제공
- 활용 사례
5.1 교육 분야
프로그래밍 기초 학습
실습 환경으로 활용
즉각적인 피드백을 통한 학습
5.2 업무 활용
빠른 프로토타입 제작
간단한 업무용 도구 제작
아이디어 검증 도구
- 미래 발전 방향
더 많은 예제와 템플릿 추가
사용자 커뮤니티 구축
협업 기능 강화
- 결론
MOUSE는 "코딩은 어렵다"는 고정관념을 깨고, 누구나 자신의 아이디어를 웹서비스로 구현할 수 있게 도와주는 혁신적인 도구입니다. 전문적인 개발 지식이 없어도, 여러분의 창의적인 아이디어를 현실로 만들 수 있습니다.
- 기술 스택
사용자 인터페이스: 직관적이고 현대적인 디자인
AI 엔진: 자연어를 코드로 변환하는 최신 AI 모델
실행 환경: 안전하고 즉각적인 결과 확인
보안: 사용자와 데이터를 보호하는 다층적 보안 시스템
MOUSE를 통해, 이제 여러분의 상상력이 곧 현실이 됩니다. 복잡한 코딩 지식 없이도, 여러분만의 웹서비스를 만들어보세요. 현재 테스트 버전은 무료로 공개되어 있으니 누구나 체험해 보실 수 있어요.
https://news.hada.io/topic?id=15592
예전에 이 광고 글로 욕먹더니 아이디 바꿔서 또 광고네요. 운영자님 처리좀 하셔야할듯
그러네요. https://brunch.co.kr/@seawolf/21 글의 저자가 seawolf인걸 보니 아래 다중 계정 사용자네요.
https://news.hada.io/user?id=rainchicken
이 계정도 다중계정으로 보입니다. 저 게시글 등록된 시점부터 가입해서 댓글 다는 것 보면 의심스럽습니다
qwen-2.5-coder 허깅페이스 화면이랑 굉장히 흡사하네요 다른 부분이있을까요 ?
https://huggingface.co/spaces/Qwen/Qwen2.5-Coder-Artifacts
최근의 qwen2.5 coder 32b가 claude와 chatgpt보다 우수하다고 하기에,
그렇다면 현재 가장 앞서있다는 qwen의 ui와 비슷하게 구성하여봤습니다.
즉, qwen과 mouse 화면 띄워놓고 이용자가 동시에 동일한 요청을 하고 그 소요 시간과 화면 출력 결과를 이용자가 직접 "비교"하여 어느것이 더 우수한지를 판단하라는 의도입니다.
물론 어떤 qwen LLM 모델도 mouse에는 사용하지 않았습니다.
'MOUSE' 업데이트가 또 이뤄졌습니다.
이번 업데이트 내용은 "배포하기"입니다.
- 사용자가 프롬프트에 원하는 것을 입력(예, "3D 테트리스 게임을 만들어라.")
- 코드 생성과 동시에 화면에 "생성 결과가 웹으로 표현됨"
- '배포하기' 버튼 클릭시, 웹서비스 URL로 자동 생성되어 공개됨
'MOUSE' 업데이트가 이뤄졌습니다.
핵심 내용은 '템플릿' 버튼과 메뉴가 생겨서, 생성된 결과물의 스크린샷과 프롬프트 내용을 볼 수 있게 했습니다. 해당 프롬프트 내용을 복사하여 프롬프트 입력칸에 붙여넣고 사용할 수 있습니다.
잘 봤습니다! 나중에 아키텍쳐나 패턴, 보일러플레이트, 주석, 컨벤션 등 여러 개발요소들을 프롬프트 옵션으로 체크박스 형식으로 추가하면 더 좋을 것 같습니다~
Qwen을 제외하고 Claude, OpenAI 등을 포함하여 여러 LLM들을 복합적으로 적용하였습니다.
특정 LLM 모델(버전)들이 특정 작업에 배치된 복합 Agent 개념으로 적용하였습니다.
MOUSE로 약 200회 이상의 비교 실험을 진행해봤습니다.
-
실험의 목적: 가장 코딩에 특화되어 있다는 QWEN 2.5 32B와 OpenAI GPT 4o를 대상으로 MOUSE에 적용된 멀티 LLM 배분/검증 기술과 결과(생성물) 비교
-
실험의 방법: 비교대상 LLM들과 유사한 UI 화면 구성 및 배치를 하고, 동일한 프롬프트를 각각 입력후 소요시간과 서술 및 동작 결과를 비교(지정된 약 10명의 인간 검증자들의 판단 결과 취합)
-
비교 대상 실험 결과(모든 결과 MOUSE 선호)
- 프롬프트 지시 반영률: 약 90% 이상 충족
- 오류(결과가 동작 안되거나 등)비율: 5% 미만
- 결과물에 대한 인간 선호도 핵심 판단 요소: 프롬프트 지시 반영률> UI/UX >컬러 및 가시성 > 한글 > 구성 순
MOUSE는 현재 2단계(파이썬 등 백엔드 중심 버전), 3단계(C++ 등 시스템 코어에 특화된 버전) 버전이 있는데, 현재 이 버전은 1단계 버전으로 'Web 랭귀지'에 특화되어 있습니다. 현재 버전 MOUSE는 외부 라이브러리, 메타데이터 등을 제외하고는 MOUSE-II로 만들어졌습니다.
저는 코파일럿이나 CURSOR 같은, 프롬프트를 주면 AI가 서비스 생성에 필요한 코드를 죽 만들어주는 류의 프로그램들을 전혀 사용하고 있지 않은데요.
이런 것들이 좀 더 발전하게 되면, AI한테 프롬프트 잘 줘서 초기 코드를 만든 뒤, 프로그래머는 그걸 좀 수정하고 다듬고 발전 시키고 이런 식으로 일하게 되지 않을까 싶기도 하네요.
프론트... 아니, 벡엔드도 그렇게 될까요. 주로 웹 어플리케이션 개발에 이런 툴들이 많이 나오는 것 같은데 C++로 클라이언트 만드는 분야에서도 곧 나오겠네요. 의존성만 잘 해결한다면요.
당장 프로덕션에 쓰기엔 불안하지만, 개인적으로라도 써보긴 해야 겠고, 지켜보긴 해야 겠어요.
저도 ai 코딩에 회의적이었는데 토이프로젝트를 시작하면서 그 생각이 완전 바뀌었습니다. Ai에게 일을 잘 시키는 방법이 앞으로 더 중요해질 거 같아요
코드 완성 기능이 코파일럿과 커서의 핵심 기능입니다. 모든 상황에 잘 동작한다고 얘기할 수준은 아니구요. 다만 어느 정도 코드베이스에 맞는 패턴을 인식하고 코드를 생성해줍니다. 일단 파이썬, 리액트+타입스크립트 개발에 잘 사용하고 있습니다