IDE를 열지 않고도 제품 및 디자인의 프론트엔드 수정 진행

Frontman은 브라우저에서 작동하는 오픈 소스 AI 코딩 에이전트입니다. 실행 중인 앱의 모든 요소를 클릭하고 일반 영어로 변경 사항을 설명하면, Frontman이 실제 소스 파일을 수정하며 즉각적인 hot reload를 제공합니다. Frontman은 라이브 DOM(Document Object Model), 컴포넌트 트리(component tree), 계산된 CSS(computed CSS), 라우트(routes), 소스 맵(source maps), 서버 로그(server logs) 등을 파악하므로, 비기술 직군 팀원들도 UI를 어떤 파일이 담당하는지 추측할 필요 없이 정확한 프론트엔드 수정을 할 수 있습니다.

Frontman에게 요청할 수 있는 것들

Frontman은 디자인 QA(Quality Assurance), 제품 검토 또는 내부 도구 백로그에 자주 막히는 소규모 프론트엔드 변경 사항을 위해 만들어졌습니다.

• "모든 브라우저와 장치에서 이 요소를 수정해 주세요" — 깨진 UI를 선택하고 문제를 설명하면, Frontman은 브라우저 컨텍스트와 소스 맵(source maps)을 사용하여 올바른 컴포넌트나 스타일을 업데이트합니다.
• "내부 서브 페이지의 이 버튼을 수정해 주세요" — 정확한 경로로 이동하여 버튼을 클릭하면, Frontman은 해당 렌더링된 요소 뒤의 소스를 편집합니다.
• "앱 전체의 빈 상태(empty-state) 문구를 변경해 주세요" — 메시지 변경 사항을 한 번 설명하고 적용되기 전에 생성된 diff를 검토할 수 있습니다.
• "모바일 카드가 데스크톱 간격과 일치하도록 수정해 주세요" — Frontman은 정적 소스 파일에만 의존하는 대신, 계산된 CSS(computed CSS)와 레이아웃 컨텍스트를 읽습니다.

누가 사용해야 할까요?

제품 관리자 및 디자이너: 개발자가 IDE를 열기를 기다릴 필요 없이 문구, 간격, 색상, 레이아웃 문제 및 내부 UI 폴리싱을 수정해야 하는 분들.

프론트엔드 개발자: 터미널 기반 AI 도구가 제공하는 것보다 더 풍부한 컨텍스트가 필요한 분들. Frontman은 소스 파일뿐만 아니라 렌더링된 페이지를 읽기 때문에, CSS가 무엇을 계산하는지(computes to) 그리고 어떤 컴포넌트가 각 DOM 노드를 렌더링하는지 알고 있습니다.

팀: 인계 비용이 실제 변경 비용보다 더 많이 드는 팀. Frontman은 팀원들이 인-브라우저(in-browser)에서 편집을 수행한 다음, 일반적인 검토 프로세스를 통해 diff를 보낼 수 있게 합니다.

Frontman과 다른 AI 코딩 도구의 비교

대부분의 AI 코딩 도구는 소스 파일로부터 작동하며 실행 중인 애플리케이션을 결코 볼 수 없습니다. Frontman은 정반대의 접근 방식을 취합니다. 브라우저에서 시작하여 소스로 거슬러 올라갑니다.

OpenClaw와 연동

Frontman은 OpenClaw 스킬로 사용할 수 있습니다. 이를 설치하여 AI 에이전트에게 전문적인 프론트엔드 편집 기능을 제공하세요. 여기에는 컴포넌트 트리 인식, 계산된 CSS(computed CSS), 소스 맵 해결(source map resolution), 그리고 OpenClaw의 일반 브라우저 도구에서는 갖추지 못한 핫 리로드 피드백이 포함됩니다.

openclaw skill install frontman-dev

OpenClaw는 범용 자동화(셸, 메시징, 파일)에 사용하고, Frontman은 코드베이스 내의 정밀한 시각적 편집에 사용하세요. 비교 정보 읽기.

작동 방식

1. 개발자가 프로젝트에 Frontman을 추가합니다 — 한 번의 명령으로 Next.js, Astro, Vite와 함께 작동합니다.
2. 팀원 누구나 브라우저에서 앱을 엽니다 — localhost/frontman으로 이동하여 채팅 인터페이스와 함께 앱의 실시간 미리보기를 얻습니다.
3. 요소를 클릭하고 변경 사항을 설명합니다 — Frontman은 요소의 컴포넌트 트리 내 위치, 계산된 스타일(computed styles), 그리고 서버 측 컨텍스트를 파악합니다. 올바른 소스 파일을 편집하고 핫 리로드를 수행합니다.

이 프레임워크 통합은 로컬 개발 서버를 MCP 서버로 변환하며, AI 에이전트는 이를 통해 클라이언트 측 컨텍스트(DOM 트리, 계산된 CSS, 스크린샷, 요소 선택)와 서버 측 컨텍스트(라우트, 서버 로그, 쿼리 타이밍, 컴파일된 모듈) 모두에 대한 정보를 질의할 수 있습니다.

빠른 시작

Next.js

npx @frontman-ai/nextjs install
# 프로젝트가 src/를 사용하는 경우: mv proxy.ts src/proxy.ts
pm run dev
...

App Router와 Pages Router 모두에서 작동합니다. Turbopack과 호환됩니다.

자세한 내용은 Next.js 통합 가이드를 참조하세요.

Astro

npx astro add @frontman-ai/astro
pm run dev
# http://localhost:4321/frontman 열기

Astro 5, 6, 7 및 Node.js 22.19 이상에서 호환됩니다. Astro 통합 레지스트리에 등록되어 있습니다. Islands 아키텍처, 콘텐츠 컬렉션, SSR/하이브리드 모드를 이해합니다.

자세한 내용은 Astro 통합 가이드를 참고하세요.

Vite (React, Vue, Svelte)

npx @frontman-ai/vite install
pm run dev
# http://localhost:5173/frontman 에서 열기

vite.config에서 프레임워크를 자동 감지합니다. React, Vue, Svelte — SvelteKit을 포함하여 작동합니다.

자세한 내용은 Vite 통합 가이드를 참고하세요.

설정 도움이 필요하신가요? Discord에 참여하거나 GitHub 이슈를 여세요.

지원 스택 (Supported Stacks)

프레임워크 통합은 개발 모드에서만 실행됩니다. 프로덕션 빌드는 Frontman을 제거하므로, 배포된 번들은 Frontman 설치 여부와 관계없이 동일합니다.

AI 모델 지원 (AI Model Support)

Frontman은 BYOK(bring your own key) 방식을 사용합니다. 모든 LLM 제공업체에 연결하세요:

• OpenAI — GPT 및 Codex 모델
• Anthropic — Claude Pro/Max 모델
• OpenRouter — Claude, GPT, Gemini, Kimi, MiniMax 및 수백 개의 다른 모델
• Fireworks AI, NVIDIA, Google, 및 xAI

LLM 제공업체에 표준 요율로 직접 비용을 지불합니다. Frontman을 무료로 사용해 보세요: 카드 없이 5회 사용 가능합니다. 저장소 약관에 따라 자체 호스팅이 가능합니다.

자체 호스팅 및 라이선스 (Self-Hosting and License)

Frontman은 오픈 소스이며 소스에서 자체 호스팅할 수 있습니다. 공식 호스팅 및 자체 호스팅 패키징은 아직 개발 중입니다.

프로젝트는 분리된 라이선스 모델을 사용합니다:

• 프레임워크 통합 및 클라이언트 라이브러리 (libs/) — Apache License 2.0
• 서버 (apps/frontman_server/) — GNU Affero General Public License v3

Frontman을 상업용 앱에서 사용할 수 있습니다. AGPL은 서버에 적용되므로 Frontman을 기반으로 구축된 호스팅 서비스는 오픈 상태를 유지합니다.

아키텍처 (Architecture)

┌─────────────────────────────────────────────────┐
│ Browser │
┌─────────────────┐ ┌────────────────────────┐ │

기여 (Contributing)

기여를 환영합니다! 시작하려면 기여 가이드를 읽어주세요.

라이선스 (License)

위의 셀프 호스팅 및 라이선스와 각 해당 LICENSE 파일을 참고하세요.

스타 기록 (Star History)

링크 (Links)

• 웹사이트
• GitHub Pages
• 문서화 (Documentation)
• 통합 기능 (Integrations)
• 비교 (Comparisons) — Frontman vs OpenClaw, Cursor, Copilot, v0, Stagewise
• 변경 로그 (Changelog)
• 이슈 (Issues)
• 디스코드 (Discord)