Google Web Designer에는 프로젝트를 만들고 코드를 수정하기 위한 큰 중앙 영역이 있습니다. 이러한 중앙 영역 주위에는 요소 수정, 구성요소 추가, 이벤트 추가 등의 작업을 할 수 있는 툴바, 도구 옵션 막대, 타임라인, 패널 모음이 있습니다.
문서
Web Designer 인터페이스의 가운데 부분에서 현재 문서를 확인할 수 있습니다.
다음과 같은 두 가지 문서 보기 방법이 제공됩니다.
- 디자인 보기에서는 문서의 이미지, 텍스트 및 기타 요소가 브라우저에서 표시되는 것처럼 시각적으로 표시됩니다. 흰색 스테이지는 광고 또는 웹페이지의 표시 영역을 나타냅니다.
- 코드 보기 에서는 문서 코드가 적절한 색상 코딩 및 형식으로 표시됩니다.
환경설정에서 디자인 보기 및 코드 보기를 맞춤 설정할 수 있습니다.
1. 툴바 2. 도구 옵션 막대 3. 타임라인 4. 패널 5. 보기 막대
보기 막대
보기 막대를 사용하면 디자인 보기와 코드 보기 중 하나를 선택할 수 있으며, 브라우저에서 문서를 미리 보고 광고를 게시할 수 있습니다.
도구
툴바에는 스테이지에서 요소를 생성하고 조작하기 위한 도구가 포함되어 있으며, 텍스트와 간단한 페이지 요소를 만들기 위한 도구, 색상 선택 도구 및 3D 도구가 있습니다.
| 도구 | 설명 |
|---|---|
선택 도구 |
스테이지에서 개체를 선택하여 이동합니다. |
모션 경로 도구 |
애니메이션 요소를 위한 곡선 모션 경로를 그립니다. AMP HTML 또는 이미지 광고에는 사용할 수 없습니다. |
3D 개체 회전 도구 |
3차원에서 개체를 회전합니다. |
3D 개체 변환 도구 |
3차원에서 개체를 이동합니다. |
요소 도구 |
스테이지에서 클릭하고 드래그하여 모든 유형의 HTML 태그를 만듭니다. |
| 펜, 타원형, 직사각형 및 선 도구 |
도형 도구로 기본 도형을 만들고 펜 도구로 베지어 곡선을 만드는 등 SVG 그림을 만듭니다. |
텍스트 도구 |
텍스트를 추가하거나 수정합니다. |
직사각형, 타원형 및 다각형 마스크 |
요소에 클립 경로 마스크를 추가합니다. |
직사각형, 타원형 및 다각형 배경화면 도구 |
배경화면 필터에 div를 추가합니다. 이미지 및 동영상 문서에만 사용할 수 있습니다. |
채우기, 획 및 그래디언트 도구 |
프로젝트에서 요소의 색상을 수정합니다(요소의 채우기, 획 및 그래디언트 채우기 등). |
스포이트 도구 |
스테이지의 요소에서 색상을 선택합니다. |
3D 스테이지 회전 도구 |
프로젝트의 3D 보기를 변경합니다. |
손 도구 |
스테이지의 보기를 변경합니다. |
확대/축소 도구 |
광고 소재를 확대 및 축소합니다. |
 채우기 색상 및 획 색상 |
활성화된 채우기 및 획(테두리) 색상을 변경합니다. |
도구 옵션
상단의 도구 옵션 막대에는 현재 선택한 도구의 옵션이 표시됩니다. 예를 들어 텍스트 도구를 선택하면 도구 옵션 막대가 글꼴 및 텍스트 레이아웃 옵션을 표시합니다.
타임라인
타임라인에서 키프레임을 사용하여 애니메이션을 만들 수 있습니다. 빠른 모드에서는 장면별로 애니메이션을 만들 수 있고, 고급 모드에서는 각 요소에 개별적으로 애니메이션을 적용할 수 있습니다.
패널
패널에는 색상, 속성, 텍스트, 구성요소, CSS, CSS 효과, 반응형, 이벤트, 동적, 라이브러리, 광고 검사기, 아웃라이너 패널 등이 있습니다. 이를 통해 패널의 크기를 조절할 수 있으며, 패널을 재정렬하고 합치고 닫을 수 있습니다. 패널 정리에 대해 자세히 알아보세요.
문서 탭
여러 문서가 열려 있을 경우 파일 이름이 개별 탭에 표시됩니다 탭을 클릭하여 문서 간에 전환할 수 있습니다. Ctrl+Tab을 눌러 다음 문서로 이동하거나 Shift+Ctrl+Tab을 눌러 이전 문서로 이동할 수도 있습니다.
문서 탭이 창에서 모두 표시되지 않으면 탭 오른쪽에 있는 '더보기' 아이콘 