참고: 이 가이드는 새로운 맞춤 요소 버전 1 사양을 준수하도록 업데이트되었습니다. 해당 사양을 확인하고 자세히 알아보실 수 있습니다.
2021년 7월부터 Google Web Designer에서 오래된 맞춤 구성요소가 더 이상 지원되지 않습니다. 맞춤 구성요소를 업데이트하려면 업그레이드 가이드를 확인하세요.
숙련된 웹 개발자는 기존 구성요소를 확장하거나 처음부터 새로 빌드하는 Google Web Designer의 맞춤 구성요소를 작성할 수 있습니다. 다른 사용자는 이러한 맞춤 구성요소를 설치하여 코드를 수정하지 않고도 프로젝트에 기능을 추가할 수 있습니다.
유효한 구성요소 패키지는 JSON 매니페스트 파일이 포함된 .zip 파일로 구성되어 있습니다. 패키지에는 맞춤 HTML 요소 또는 기타 필요한 자바스크립트 및 CSS 파일을 정의하는 자바스크립트 파일과 같은 다른 파일도 포함될 수 있습니다.
1. 맞춤 요소 정의
맞춤 구성요소는 Google Web Designer에서 맞춤 요소로 구현됩니다.
맞춤 요소는 사용자가 자바스크립트 코드로 정의하고 맞춤 태그 이름을 지정하는 HTML 요소 유형입니다. 맞춤 요소를 정의하고 나면 표준 요소처럼 사용할 수 있습니다. 네이티브 HTML 요소에서 작동하는 DOM API는 맞춤 요소에서도 작동합니다.
WHATWG에서 HTML 사양의 맞춤 요소에 대해 자세히 알아보기
Google Web Designer의 맞춤 요소에 대해 다음과 같은 가이드라인을 따르세요.
- 맞춤 요소의 태그 이름에는
x-panel또는expand-button처럼 하이픈(-)이 포함되어 있어야 합니다. gwd-네임스페이스는 Google Web Designer에 소유권이 있으므로 맞춤 요소에 사용할 수 없습니다.
2. 필요한 자바스크립트 및 CSS 파일 추가로 만들기
원하는 기능과 스타일을 제공하는 자바스크립트 및 CSS를 작성합니다.
자바스크립트 및 CSS 파일을 패키지에 포함하는 대신 외부 서버에서 제공할 수 있습니다. JSON 매니페스트에 외부 파일에 대한 참조를 포함합니다.
3. ES5로 코드 변환(선택사항)
브라우저 호환성을 극대화하려면 자바스크립트 ES5 구문을 사용하도록 구성요소 코드를 변환하는 것이 좋습니다. 이렇게 하면 구성요소가 이전 버전의 브라우저에서도 제대로 실행됩니다.
- https://babeljs.io/repl에서 자바스크립트 컴파일러인 Babel로 이동합니다.
- Presets(사전 설정) 섹션에서 es2015를 선택합니다.
- 구성요소 자바스크립트 코드를 복사하여 왼쪽 창에 붙여넣습니다. 구성요소에 사용할 수 있도록 변환 버전의 코드가 오른쪽 창에 표시됩니다.
4. 구성요소 파일의 JSON 매니페스트 만들기
맞춤 구성요소를 사용하려면 Google Web Designer에 구성요소를 알려주는 manifest.json라는 JSON 형식의 매니페스트 파일이 필요합니다. 아래에 자세히 설명된 스키마를 따르세요. 메모 속성에는 다음과 같은 항목이 있습니다.
type- 필수 항목입니다.version- 필수 항목입니다. 맞춤 구성요소를 업데이트할 때마다 버전 번호를 높입니다.customElementsVersion- 맞춤 요소 v1 사양을 준수하는 새 구성요소에 필요합니다.files- 맞춤 구성요소 패키지에 포함된 다른 파일이 나열됩니다.externalScripts- 외부 스크립트 종속성을 지정합니다. 이러한 스크립트는