스타일 지정을 위해 AI 지원 패널을 사용하여 웹사이트의 전반적인 레이아웃, 특정 요소 스타일을 파악하고 CSS 버그에 대한 AI 생성 수정사항을 가져옵니다.
'AI 지원' 패널 열기
AI 지원 패널이 서랍에서 열립니다.
요소 패널에서
요소 패널에서 AI 지원을 열려면 DOM 노드를 검사할 때 노드를 마우스 오른쪽 버튼으로 클릭하고 AI에 묻기 옵션을 선택합니다.
이렇게 AI 지원을 열면 검사된 DOM 요소가 이미 대화의 컨텍스트 요소로 사전 선택되어 있습니다.
또는 마우스 오버한 DOM 노드에 연결된 플로팅 버튼을 클릭합니다.
명령 메뉴에서
명령 메뉴에서 AI 지원을 열려면 AI를 입력한 다음 옆에 Drawer 배지가 있는 Show AI assistance 명령어를 실행합니다.
'도구 더보기' 메뉴에서
또는 오른쪽 상단에서 옵션 더보기 > 도구 더보기 > AI 지원을 선택합니다.
대화 컨텍스트
AI 지원을 통한 채팅은 항상 Elements 패널 DOM 트리에서 선택한 마지막 요소인 현재 검사 중인 요소와 관련이 있습니다. 이 요소에 대한 참조는 패널의 왼쪽 하단에 표시됩니다.
현재 요소 옆에 있는 요소 선택기 버튼을 사용하거나 요소 패널 DOM 트리에서 선택하여 컨텍스트를 변경합니다.
현재 검사 중인 요소가 대화의 기반이 되지만 AI 지원은 모든 웹 API에 액세스하여 검사된 페이지에서 더 많은 정보를 수집할 수 있습니다. 여기에는 document.querySelector로 다른 요소를 쿼리하거나 계산된 스타일을 평가하는 것이 포함됩니다.
메시지 표시
새 대화를 시작할 때 스타일 지정을 위한 AI 지원이 예시 프롬프트를 제공하여 빠르게 시작할 수 있도록 도와줍니다.
프롬프트를 클릭하여 패널 하단의 프롬프트 입력란을 미리 채웁니다.
또는 입력란에 직접 프롬프트나 질문을 입력할 수도 있습니다.
프롬프트를 보내려면 Enter를 누르거나 입력란 오른쪽에 있는 화살표를 클릭합니다.
대화 흐름
프롬프트를 전송하면 스타일링 상담사와의 대화가 시작됩니다. 프롬프트에 가장 적합한 답변을 제공하는 데 필요한 정보를 얻기 위해 상담사는 웹 API를 호출하는 JavaScript를 생성하고 실행합니다. 상담사 진행 상황은 단계별로 표시됩니다. 초기 단계 상태는 Investigating…입니다.
상담사가 질문을 해결하기 위해 더 구체적인 작업을 실행하면 단계 라벨이 업데이트됩니다.
상담사가 최종 답변을 내리면 후속 프롬프트 제안을 포함하여 답변이 조사 단계 아래에 표시됩니다.
추천 프롬프트를 클릭하여 대화를 계속합니다. 를 클릭합니다.
AI 지원이 백그라운드에서 어떤 작업을 했는지 자세히 알아보기 위한 조사 단계입니다.
진행률 칩을 펼치면 상담사가 실행한 코드와 반환 값이 표시됩니다. 실행된 코드를 복사하여 나중에 사용합니다(예: 콘솔 패널을 사용하여 실행).
일시중지된 대화
AI 지원으로 인해 부작용이 있는 코드가 생성될 수 있습니다. 이 경우 코드가 실행되기 전에 대화가 일시중지됩니다.
대화가 일시중지되면 상담사가 제안한 코드를 검토합니다. 계속을 클릭하여 계속 진행하거나 취소를 클릭하여 실행을 중지합니다.
답변 없음
AI 지원은 다양한 이유로 답변을 제공하지 않을 수 있습니다.
프롬프트가 AI 어시스턴트가 논의할 수 있는 내용이라고 생각되면 버그를 신고하세요.
대화 기록
대화를 시작하면 이후 모든 대답은 사용자와 AI 간의 이전 상호작용을 기반으로 합니다.
패널 왼쪽 상단의 컨트롤을 사용하여 대화 기록을 관리합니다.
새로 시작
현재 선택된 대화 컨텍스트로 새 대화를 시작하려면 버튼을 클릭합니다.
계속
이전 대화를 계속하려면 버튼을 클릭하고 컨텍스트 메뉴에서 선택합니다.
삭제
기록에서 대화를 삭제하려면 버튼을 클릭합니다.
답변 평가 및 의견 제공
AI 지원은 실험용 기능입니다. 따라서 Google은 답변 품질과 전반적인 환경을 개선할 수 있는 방법을 알아보기 위해 사용자의 의견을 적극적으로 수렴하고 있습니다.
답변 투표
답변 아래에 있는 좋아요 및 싫어요 버튼을 사용하여 답변에 평점을 매깁니다.
답변 신고
부적절한 콘텐츠를 신고하려면 투표 버튼 옆에 있는 버튼을 클릭합니다.