クロム開発者バージョン(特に Chrome Canaryや Dev Channel)に搭載される AI 機能中, お問い合わせた内容と一番直接的に係わったことは Chrome DevToolsの AI 支援(AI Assistance) 機能です.
が機能は開発者がウェブページ作業をする時 AIをコーディング補助道具で活用できるように設計されました.
1. Chrome DevToolsの AI サポート機能
これは開発者たちが使う Chromeの開発者道具パネル内に Gemini 基盤の AI 機能を統合したのです. この AI 支援は次のような方式で動作して, おっしゃった **”コード生成” 及び “既存ページ構造を触れないで動的具現コード提供”**科一致します.
コード生成及び修正要請: 開発者が DevTools 内衣 AI サポートパネルで自然語でプロンプトを入力して特定機能を要請することができます. 例えば, ”がフォームに電話番号(TEL) フィールドを追加して入力市有效性検事をするジャバスクリプトコードを作ってくれ” のような要請が可能です.
リアルタイムコード適用及びテスト: AIの生成したコードは開発者の確認の下にウェブページに動的に適用されて リアルタイムに変更事項をテストできます.
コンテクスト理解: AIは開発者が現在見ている DOM 要素, CSS スタイル, ネットワーク要請など DevToolsのコンテクストを理解と返事とコードを生成します.
フォーム拡張及び機能具現: 開発者が直接コードを組まなくて AIに “このボタンをクリックした時新しい入力フィールドを追加するジャバスクリプトコードを作ってくれ”と要請すれば, AIが既存ページ構造(HTML)を分析して該当の機能を遂行する JavaScript コードを生成してくれる方式です.
2. Built-in AI API (window.ai)
開発者バージョンで実験中のまた他の重要な機能は window.ai APIです. これは開発者がウェブサイトや Chrome 拡張プログラム内で Gemini Nanoのようなローカル(オンデ−バイス) AI モデルを直接呼び出すように標準化しようとする試みです.
開発者はこの APIを使ってサーバーとの通信なしもクライアント側で AI 機能を具現することができるようになります.
例示: ウェブページで選択されたテキストを要約するとか(テキストセッション), 使用者入力に基盤して動的なコンテンツ(例: フォーム要素)を生成するなどの機能を
window.aiを通じて具現することができます.
結論的に, お問い合わせた “既存ページ構造を触れないで AIが動的にフィールド追加及び機能具現コードを作ってズーム”として開発者がコーディングなしに機能を確張する方式は現在 Chrome 開発者バージョン(Canary, Dev)の DevTools AI Assistance 機能を通じて実現している開発補助機能だと見れば良いです.
크롬 개발자 버전(특히 Chrome Canary나 Dev Channel)에 탑재되는 AI 기능 중, 문의하신 내용과 가장 직접적으로 관련된 것은 Chrome DevTools의 AI 지원(AI Assistance) 기능입니다.
이 기능은 개발자가 웹 페이지 작업을 할 때 AI를 코딩 보조 도구로 활용할 수 있도록 설계되었습니다.
1. Chrome DevTools의 AI 지원 기능
이는 개발자들이 사용하는 Chrome의 개발자 도구 패널 내에 Gemini 기반의 AI 기능을 통합한 것입니다. 이 AI 지원은 다음과 같은 방식으로 동작하며, 말씀하신 **"코드 생성" 및 "기존 페이지 구조를 건드리지 않고 동적 구현 코드 제공"**과 일치합니다.
코드 생성 및 수정 요청: 개발자가 DevTools 내의 AI 지원 패널에서 자연어로 프롬프트를 입력하여 특정 기능을 요청할 수 있습니다. 예를 들어, "이 폼에 전화번호(TEL) 필드를 추가하고 입력 시 유효성 검사를 하는 자바스크립트 코드를 만들어줘" 와 같은 요청이 가능합니다.
실시간 코드 적용 및 테스트: AI가 생성한 코드는 개발자의 확인 하에 웹 페이지에 동적으로 적용되어 실시간으로 변경사항을 테스트할 수 있습니다.
컨텍스트 이해: AI는 개발자가 현재 보고 있는 DOM 요소, CSS 스타일, 네트워크 요청 등 DevTools의 컨텍스트를 이해하고 답변과 코드를 생성합니다.
폼 확장 및 기능 구현: 개발자가 직접 코드를 짜지 않고도 AI에게 "이 버튼을 클릭했을 때 새로운 입력 필드를 추가하는 자바스크립트 코드를 만들어달라"고 요청하면, AI가 기존 페이지 구조(HTML)를 분석하여 해당 기능을 수행하는 JavaScript 코드를 생성해주는 방식입니다.
2. Built-in AI API (window.ai)
개발자 버전에서 실험 중인 또 다른 중요한 기능은 window.ai API입니다. 이는 개발자가 웹사이트나 Chrome 확장 프로그램 내에서 Gemini Nano와 같은 로컬(온디바이스) AI 모델을 직접 호출할 수 있도록 표준화하려는 시도입니다.
개발자는 이 API를 사용하여 서버와의 통신 없이도 클라이언트 측에서 AI 기능을 구현할 수 있게 됩니다.
예시: 웹 페이지에서 선택된 텍스트를 요약하거나(텍스트 세션), 사용자 입력에 기반하여 동적인 콘텐츠(예: 폼 요소)를 생성하는 등의 기능을
window.ai를 통해 구현할 수 있습니다.
결론적으로, 문의하신 "기존 페이지 구조를 건드리지 않고 AI가 동적으로 필드 추가 및 기능 구현 코드를 만들어 줌"으로써 개발자가 코딩 없이 기능을 확장하는 방식은 현재 Chrome 개발자 버전(Canary, Dev)의 DevTools AI Assistance 기능을 통해 실현되고 있는 개발 보조 기능이라고 보시면 됩니다.