Chrome DevTools AI Assistance, 이제 로컬 소스 코드와 연동하여 CSS 변경 사항 직접 적용 가능

핵심 기술

Chrome DevTools의 AI Assistance 기능이 발전하여, 이제 사용자가 AI를 통해 제안받은 CSS 변경 사항을 로컬 소스 코드에 직접 적용할 수 있게 되었습니다. 이는 개발 워크플로우를 간소화하고 생산성을 향상시키는 중요한 진전입니다.

기술적 세부사항

• 초기 기능: 2024년 10월 출시된 AI Assistance는 페이지 콘텐츠 수정은 가능했으나, 변경 사항을 로컬 소스 코드에 바로 적용하는 기능은 없었습니다.
• 업데이트 기능: 2025년 Google I/O에서 발표된 새로운 기능은 AI 제안을 로컬 소스 코드에 직접 적용하여 영구적인 변경을 가능하게 합니다.
• 소스 코드 연동 (Workspace):
  • 기능 활성화를 위해 소스 코드를 Chrome DevTools의 Workspace에 연결해야 합니다.
  • 자동 Workspace 폴더: com.chrome.devtools.json 파일을 .well-known/appspecific 폴더 내에 생성하여 소스 코드 경로(workspace.root)와 고유 식별자(workspace.uuid)를 지정합니다.
  • com.chrome.devtools.json 파일 생성 예시:
    bash mkdir -p .well-known/appspecific echo "{"workspace":{"root":"${PWD}","uuid":"`npx --package uuid uuid v4`"}}" > .well-known/appspecific/com.chrome.devtools.json
  • Vite 플러그인: vite-plugin-devtools-json을 사용하면 Vite 설정에서 .well-known/appspecific 폴더와 com.chrome.devtools.json 파일을 자동으로 생성할 수 있습니다.
• AI Assistance 사용법:
  1. Chrome DevTools를 엽니다.
  2. Elements 패널에서 요소를 우클릭하고 "AI Assistance"를 선택합니다.
  3. CSS 변경을 위한 프롬프트를 입력합니다 (예: "Change font color to red").
  4. 임시 변경 사항을 확인합니다.
  5. "Apply to workspace"를 클릭하여 로컬 소스 코드에 변경 사항을 영구적으로 적용합니다.

개발 임팩트

• AI 기반 CSS 수정의 편리성을 극대화하여, 수동으로 코드를 복사/붙여넣기 하는 번거로움을 줄여줍니다.
• 개발 생산성을 향상시키고, 디자인 및 스타일 수정 작업 속도를 높입니다.
• AI가 웹 개발 워크플로우에 더욱 깊숙이 통합되는 기반을 마련합니다.

커뮤니티 반응

톤앤매너

이 업데이트는 웹 개발자가 AI의 도움을 받아 CSS 변경 사항을 더 빠르고 효율적으로 로컬 소스 코드에 반영할 수 있도록 하는 실질적인 개선을 제공합니다.