Same.New: 간단한 프롬프트로 완전한 기능을 갖춘 웹사이트를 빠르게 디자인·구축·배포 144

Same.New은 ai 기반의 풀스택 웹 개발 플랫폼으로, 사용자는 간단한 프롬프트만으로 완전한 기능을 갖춘 웹사이트를 설계하고 구축하며 배포할 수 있습니다.

Same 핵심 기능

✅ 풀스택 애플리케이션 생성: 대상 URL이나 텍스트 설명을 입력하면 프런트엔드, 백엔드 및 데이터베이스를 포함한 풀스택 코드를 자동으로 생성합니다.

✅ 웹사이트 UI 복제: 대상 웹사이트의 인터페이스 디자인과 레이아웃을 정확하게 복제합니다 (픽셀 단위 정확도).

✅ 실시간 편집 미리보기: 내장된 온라인 개발 환경에서 코드를 직접 수정하고 즉시 결과를 확인할 수 있습니다.

✅ 다중 프레임워크 호환: 생성된 코드는 React, Vue, Next.js 등 주요 프레임워크와 호환됩니다.

✅ 원클릭 배포: Vercel, Netlify 등 호스팅 플랫폼에 빠르게 게시할 수 있습니다.

Same 사용 시나리오

✅ 스타트업: 비기술 인력도 개발팀에 의존하지 않고 빠르게 MVP(최소 기능 제품)를 구축할 수 있습니다.

✅ 디자이너/프로덕트 매니저: 디자인 시안이나 프로토타입을 직접 상호작용 가능한 웹페이지로 변환하여 제품 반복 속도를 높입니다.

✅ 교육 및 학습: 프로그래밍 초보자가 AI가 생성한 코드를 통해 풀스택 개발 로직을 이해할 수 있습니다.

✅ 기업 도구: 관리 백엔드, 데이터 대시보드 등 내부 도구를 빠르게 맞춤 설정할 수 있습니다.

가격

✅ 무료 버전: 매월 50만 token.

✅ 유료 버전: 구독 플랜에 따라 다른 token 한도가 제공되며 가격은 10~100달러입니다.

Same 사용流程

1. 로그인 및 가입: 공식 웹사이트를 통해 접속하며 Google/GitHub 로그인을 지원합니다. 계정이 없는 경우 빠르게 가입할 수 있습니다.

2. 소재 입력: 입력 상자에 대상 URL을 붙여넣거나(예: BiliBili 사이트 모방 시 해당 페이지 링크 입력), 스크린샷 또는 Figma 디자인 파일을 업로드합니다. 시스템이 자동으로 페이지 구조, 스타일 및 주요 구성 요소(예: 탐색 바, 비디오 목록)를 분석합니다.

3. 코드 생성: 대상 웹사이트 레이아웃에 따라 구성 요소화된 코드(예: Header.js 등 재사용 가능한 React 구성 요소로 분할)를 출력하며, styled-components 또는 인라인 스타일을 통해 시각적 효과를 복원합니다. 다중 페이지 애플리케이션의 경우 라우팅 구성을 자동으로 생성합니다(예: BiliBili 홈은 HeroCarousel.tsx 등의 코드를 생성할 수 있음).

4. 로컬 디버깅: 생성된 프로젝트는 한 번의 클릭으로 다운로드할 수 있으며, 로컬에서 실행 시 먼저 npm install을 실행하여 종속성을 설치한 후 npm start로 서비스를 시작합니다(기본적으로 http://localhost:3000에 접속). 실시간으로 코드를 비교하고 조정할 수 있습니다.

✅ 참고: 복제 시 원본 웹사이트의 저작권을 존중하여侵权 위험을 피해야 합니다.