게시일: 2024년 10월 21일
지난주 DevTools에 완전히 새로운 패널이 도입되었습니다. AI 지원을 사용하면 DevTools에서 직접 Gemini를 사용하여 스타일 지정 문제를 디버그할 수 있습니다.
어떤 기능이 있는지 궁금하신가요? 레이아웃 이해에서 비행기 수정에 이르기까지 이 새로운 기능을 사용하여 페이지 스타일을 더 쉽게 지정할 수 있는 5가지 멋진 방법을 확인해 보세요.
1. 레이아웃 이해
웹사이트를 빌드할 때는 항상 처음부터 시작하는 것은 아닙니다. 사전 지식이 없는 기존 코드 위에 빌드해야 하는 경우가 많으며, 최악의 경우 주변에 아는 사람이 아무도 없는 경우도 있습니다.
AI에 요소의 레이아웃에 관해 물어보고 마지막 노드까지 요소가 표시되는 방식과 요소의 overflow: hidden;가 실제로 있는 이유를 파악합니다. 👀
시도해 보라는 메시지
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. 페어 프로그래밍
이제 CSS가 정말 강력해졌습니다. 가능성이 너무 많아서 가끔 혼란스러울 수 있습니다. align-items이 필요한가요? 아니면 justify-items? 아니면 justify-self 또는 align-content?
무엇을 해야 할지 알고 있지만 적절한 CSS 속성을 찾을 수 없는 경우가 있습니다. 다음에 비슷한 상황에 처하면 AI에 문제를 설명하고 AI가 알아서 해결하도록 하세요.
AI 어시스턴스는 기존 코드를 조사하고 이를 개발자가 달성하려는 목표와 비교하여 검토, 적용, 코드베이스에 복사할 수 있는 필수 수정사항을 제안합니다.
3. 접근성 어드바이저
보조 기술을 사용하여 웹사이트에 액세스하고 쉽게 사용할 수 있도록 하는 것이 중요합니다. 접근성을 부차적인 요소로 생각하지 말고 개발 초기부터 고려하고 개발 프로세스 전반에서 웹 콘텐츠 접근성 가이드라인 (WCAG)을 따르세요.
AI 지원을 사용하여 <div>를 더 의미 있는 HTML 요소로 대체할 수 있는 위치, 추가 aria-* 속성이 유용한 방법 또는 색상 대비를 개선하는 방법에 관한 도움말을 확인하세요.
시도해 보라는 메시지
What about color contrast in this element?
4. 맞춤설정
트렌드는 오고 가고 있습니다. 그라데이션, 그림자, 선명한 테두리가 있었고, 그다음에는 플랫 디자인이 이어졌으며, 어두운 배경에 밝은 네온 색상이 사용되는 오늘날의 디자인 시대로 넘어갔습니다.
하지만 웹에서 너무 획일적인 디자인을 보면 지루하지 않나요? 기분이 좋지 않은 날이라면 테마파크 놀이기구처럼 AI 어시스턴트에게 분위기를 바꿔주고 웹을 좀 더 재미있게 만들어 달라고 요청해 보세요.
시도해 보라는 메시지
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. 항공정비사 되기
스타일 지정 문제 설명, 문제 해결 지원, 접근성 관련 조언, 기존 스타일 변경 등 AI 지원이 제공하는 기능은 이미 많지만 앞으로 더 많은 기능이 추가될 예정입니다. AI 지원이 비행기 수리에도 도움이 된다고 믿으시나요? 이전 경험이 없어도 됩니다. 작업복을 입고 Chrome DevTools 창고에서 직접 체험해 보세요.
공개 Issue Tracker에서 사용 경험을 알려주세요.