AI를 활용한 Chrome DevTools에서의 CSS 변경 적용 방법

카테고리

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

서브카테고리

웹 개발

대상자

• *웹 개발자** (CSS 작업이 필요한 개발자, Chrome DevTools 사용자)
• *난이도**: 중급 (워크스페이스 설정, UUID 생성, JSON 파일 관리 필요)

핵심 요약

• AI Assistance 기능 확장: 2025년 Google I/O에서 Chrome DevTools의 AI Assistance가 로컬 소스 코드에 CSS 변경을 직접 적용하는 기능 추가
• 워크스페이스 연결 필수: com.chrome.devtools.json 파일 생성을 통해 소스 코드와 DevTools 연결 (필수 조건: workspace.root, workspace.uuid)
• 자동 설정 기능: Vite 프로젝트에서 vite-plugin-devtools-json 플러그인 사용 시 .well-known/appspecific 폴더와 UUID 자동 생성

섹션별 세부 요약

1. AI Assistance 기능 소개

• Chrome DevTools의 AI Assistance는 2024년 10월에 출시되며 페이지 내용만 수정 가능
• 2025년 Google I/O에서 로컬 소스 코드에 변경사항을 지속적으로 적용하는 기능 추가
• 예시: "Change font color to red" 입력 시 AI가 CSS 수정 제안

2. 워크스페이스 연결 방법

• 수동 연결: com.chrome.devtools.json 파일 생성 (경로: .well-known/appspecific)
• workspace.root: 프로젝트 폴더 절대 경로
• workspace.uuid: v4 UUID (예: 53b029bb-c989-4dca-969b-835fecec3717)
• 자동 연결: Vite 프로젝트에서 vite-plugin-devtools-json 플러그인 사용 시 자동 생성

3. JSON 파일 생성 방법

• UUID 생성 옵션:
• 온라인 UUID 생성기
• CLI: npx --package uuid uuid v4
• JavaScript: crypto.randomUUID()
• 스크립트 예시:

```bash

mkdir -p .well-known/appspecific

echo "{\"workspace\":{\"root\":\"${PWD}\",\"uuid\":\"npx --package uuid uuid v4\"}}" > .well-known/appspecific/com.chrome.devtools.json

```

4. AI Assistance 사용 방법

• 단계:

1. Chrome DevTools 열기
2. Elements 패널에서 원하는 요소 선택 후 "AI Assistance" 클릭
3. "Apply to workspace" 클릭 시 로컬 소스 코드에 변경사항 저장

결론

• *AI Assistance 기능은 CSS 수정 시 수동 복사-붙여넣기 작업을 줄여 개발 효율성 향상**
• *Vite 프로젝트 사용자**는 vite-plugin-devtools-json 플러그인을 통해 자동 설정 가능

> "AI Assistance를 활용하면 웹 개발자의 작업 흐름을 간소화하고, 빠른 수정 반복이 가능해진다."