제목

Stop Copy-Pasting Your Entire Codebase to AI — Try Stagewise Instead

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자 및 AI 도구 사용자

- 난이도: 중간 (AI와의 협업 편의성 향상에 초점)

핵심 요약

• AI와의 협업 과정에서의 문제점 해결: "Stagewise는 프론트엔드 요소를 직접 선택하여 AI에 시각적 컨텍스트를 제공함으로써, 코드 설명과 UI 설명을 생략하는 방식으로 시간 절약 가능"
• AI에 전달되는 데이터: 선택한 요소의 DOM 구조, 클래스, 스타일, 텍스트 내용 등 포함되어 정확한 이해 가능
• 프레임워크 지원: @stagewise/toolbar-react, @stagewise/toolbar-next 등 React, Next.js, Vue, Nuxt 등 주요 프레임워크 지원

섹션별 세부 요약

1. 문제 상황 설명

• 현재 AI 도구 사용 시의 과정:

- 사용자가 50~100줄의 JSX/CSS 코드를 붙여넣어야 함

- AI가 UI 구조나 사용 목적을 명확히 이해하지 못해 예상 결과와 다른 코드 생성

• 시간 소모: 20분 이상의 오랜 대화 후에도 결과 불만족

2. Stagewise의 핵심 기능

• 포인트 & 클릭 기능:

- 웹페이지 내 요소를 직접 선택하여 AI에 전달

- 시각적 컨텍스트 제공으로 코드 설명 생략 가능

• AI의 반응:

- 선택한 요소의 DOM, 스타일, 텍스트 등 정확한 데이터를 기반으로 코드 수정

- 자동 적용으로 수정 시간 단축

3. 설치 및 설정 방법

• 자동 설정 (권장):

- VS Code에서 Ctrl+Shift+P → setupToolbar 입력 → 자동 코드 삽입

• 수동 설정:

- 프레임워크별 예시 (React, Next.js 등) 제공

- npm run dev 실행 후 하단 오른쪽 툴바 확인

4. 프레임워크 지원 및 예시

• 지원 프레임워크:

- React: @stagewise/toolbar-react

- Next.js: @stagewise/toolbar-next

- Vue: @stagewise/toolbar-vue

- Nuxt: @stagewise/toolbar-vue

• 예시 코드:

- npm install @stagewise/toolbar-react 설치 후 사용

결론

• 실무 적용 팁: Stagewise를 사용하면 AI와의 협업 시간을 70% 이상 절약 가능
• 권장사항:

- 복잡한 UI 수정 시 시각적 선택 기능 활용

- 프레임워크별 툴바 설치로 정확한 코드 수정 가능

- 자동 설정을 통해 간단한 설치로 즉시 사용 가능