Studio Two 에디터: 사용자 지정 CSS 추가
이 도움말은 2026년 11월에 출시된 새로운 Studio Two 에디터에 관한 내용입니다. Studio 에디터와 Studio Two 에디터 중 어떤 에디터를 사용 중인지 확실하지 않다면 여기에서 자세한 내용을 확인하세요.
사용자 지정 CSS는 사이트 요소의 디자인을 제어하는 스타일링 언어입니다. CSS를 사용하면 색상, 간격, 테두리, 애니메이션, 마우스오버 효과 등을 사용자 지정할 수 있습니다.
Studio Two 에디터에서는 원하는 효과를 자연어로 설명해 AI로 모든 요소의 CSS를 생성할 수 있습니다. 이 도움말에서는 AI로 CSS를 생성하는 방법과 결과를 수정해야 할 때 대처하는 방법을 설명합니다.
사용자 지정 CSS는 선택한 요소에만 적용됩니다. 사이트의 모든 기본 버튼처럼 같은 유형의 모든 요소에 스타일을 적용하려면 스타일 적용 요소를 사용하세요.
AI를 사용해 요소에 CSS 추가하기
원하는 효과를 설명하면 Aria가 CSS 코드를 생성합니다. 결과는 요소에 즉시 적용되므로 캔버스에서 바로 확인할 수 있습니다.
한 번에 하나의 효과만 설명합니다. 하나의 프롬프트에 여러 변경사항을 포함하면 원하는 결과가 생성되지 않을 수 있습니다.
필요한 경우 상태를 포함합니다. 예: '마우스오버 시', '페이지 로드 시', '선택 시'
구체적으로 설명합니다. '버튼을 눈에 띄게 해줘' 대신 '마우스오버 시 버튼 주위에 굵은 빨간색 테두리를 추가해 줘'와 같이 입력해 보세요.
AI로 CSS를 생성하려면:
스타일을 적용할 요소를 클릭합니다.
오른쪽의 속성 검사 패널에서 사용자 지정 CSS로 스크롤한 후 + 추가를 클릭합니다.
사용자 지정 CSS 패널에서 AI로 CSS 코드 생성 입력란을 클릭한 후 원하는 효과에 대한 설명을 입력합니다(예: '마우스오버 시 빛나는 파란색 테두리 추가').
Enter 키를 누릅니다.
CSS를 생성해 캔버스의 요소에 적용합니다. 입력란 아래에는 코드의 기능을 알기 쉽게 설명하는 스타일 요약이 표시됩니다.
CSS 문제 해결
AI로 생성한 결과가 예상과 다르다면 프롬프트를 다시 작성하거나 코드를 직접 편집해 개선할 수 있습니다.
프롬프트를 다시 작성하려면 다음 단계를 따르세요.
AI로 CSS 코드 생성 입력란에서 기존 프롬프트를 지우고 새로운 설명을 입력합니다.
Enter 키를 누릅니다. 캔버스의 기존 CSS가 새 CSS로 교체됩니다.
CSS를 직접 편집하려면 다음 단계를 따르세요.
AI로 생성한 결과가 원하는 디자인과 비슷하다면 처음부터 다시 생성할 필요 없이 코드를 직접 수정할 수 있습니다.
사용자 지정 CSS 패널에서 CSS 직접 편집을 클릭합니다.
사용자 지정 CSS 에디터에서 코드를 수정합니다.
저장을 클릭합니다.
자주 묻는 질문
아래 질문을 클릭해 사용자 지정 CSS에 대한 자세한 내용을 확인하세요.