새로운 브랜드가이드 경험에 오신 것을 환영합니다! 이 문서와 브랜드가이드 시작하기 및 CSS를 사용한 브랜드가이드 사용자 지정 에서는 콘텐츠를 새 경험으로 마이그레이션하는 방법을 안내합니다. 기존 브랜드가이드의 편집 기능은 2023년 9월 1일에 사라집니다. 2023년 12월 1일부로 기존 브랜드가이드 편집기는 더 이상 사용할 수 없습니다.
이 문서에서는 페이지, 섹션 및 블록을 사용하여 브랜드 가이드를 구축하는 방법을 안내합니다.
페이지
브랜드가이드의 최고 조직 레벨입니다. 페이지가 합쳐져 브랜드 가이드가 만들어집니다.
페이지 추가
- 사이드바에서 페이지 옵션으로 이동합니다.
- 페이지 추가 버튼을 선택합니다.
- 페이지 이름을 지정하고 슬러그를 설정합니다.
- 선택, 페이지 저장 및 생성.
페이지 삭제
페이지 및 섹션 플라이아웃에서 삭제하려는 페이지 옆의 휴지통 아이콘을 선택합니다. 페이지를 삭제하면 작업을 취소할 수 없으며 페이지에 포함된 블록과 섹션은 복구할 수 없습니다.
섹션
섹션은 페이지 내에 중첩되고 블록으로 구성된 브랜드가이드의 조직 수준입니다.
블록
블록은 섹션 내에 중첩됩니다. 왼쪽의 블록 플라이아웃에서 블록을 찾을 수 있습니다. 블록은 캔버스 영역에 콘텐츠로 표시되는 이미지, 텍스트, 색상 및 코드와 같은 브랜드 가이드 구성 요소입니다.
블록 추가하기
- 왼쪽 사이드바로 이동하여 블록 옵션<0>을 선택합니다.
- 이렇게 하면 이미지, 텍스트, 코드 및 색상에 대한 블록 옵션이 포함된 플라이아웃이 생성됩니다. 추가할 수 있는 콘텐츠에는 주위에 점선이 표시됩니다.
- 블록을 선택하고 캔버스 영역으로 드래그합니다. 캔버스의 보라색 선은 승인된 드롭 영역을 나타냅니다.
- 클릭을 해제하여 블록을 캔버스에 놓습니다.
블록 삭제
- 블록에서 휴지통 아이콘을 선택합니다. 블록을 삭제하면 복구할 수 없다는 점에 유의하세요.
블록 재배열
두 가지 옵션이 있습니다:
- 블록을 페이지의 다른 위치로 끌어다 놓습니다.
- 블록 콘텐츠 오른쪽에 있는 화살표를 사용하여 블록을 페이지 위아래로 이동합니다.
이미지 블록
이미지 블록을 사용하면 브랜드가이드에 라이브러리 콘텐츠를 원활하게 추가할 수 있습니다. 즉, 라이브러리에서 자산이 업데이트되면 브랜드가이드에서도 자동으로 자산이 업데이트됩니다. 이 환경은 CDN을 기반으로 합니다. 브랜드 일관성을 유지하기 위해 외부 이미지를 브랜드가이드에 직접 업로드할 수 없습니다. 라이브러리에서 가져와야 합니다.
지원되는 이미지 유형
- APNG
- AVIF
- GIF
- JPEG
- PNG
- SVG
- WebP
이미지 추가
- 왼쪽 플라이아웃에서 이미지 아이콘을 선택합니다.
- 라이브러리 환경과 함께 또 다른 플라이아웃이 나타납니다. 브랜드가이드와 연결된 라이브러리 또는 컬렉션이 기본으로 표시됩니다.
- 다른 라이브러리 또는 컬렉션을 선택하려면 플라이아웃 상단에 있는 검은색 화살표<0>를 선택합니다.
- 사용하려는 이미지를 찾아 다음 방법 중 하나를 사용하여 추가합니다:
- 이미지를 캔버스에 끌어다 놓습니다.
- 이미지 위로 마우스를 가져가 타원 메뉴를 선택하고 [+] 배치를 선택합니다.
- 이미지 위로 마우스를 가져가 줄임표를 선택하고 세부 정보 보기를 선택한 다음 [+] 배치를 선택합니다.
- 이미지 위로 마우스를 가져가 줄임표를 선택하고 세부 정보 보기를 선택한 다음 이미지를 끌어다 놓습니다.
이미지 크기 변경
- 이미지 위로 마우스를 오른 다음 <0>줄임표<0>를 선택합니다.
- 세부 정보 보기를 선택합니다.
- 배치 옵션을 엽니다.
- 이미지의 너비와 높이를 변경합니다.
- 장소 선택.
주석: 현재 이미지 크기를 조작할 수 있는 유일한 방법입니다.
텍스트 블록
텍스트 블록을 캔버스에 끌어다 놓으면 브랜드가이드에 텍스트를 추가할 수 있습니다.
텍스트 스타일 변경하기
글로벌 설정 수준에서 텍스트 스타일을 수정하면 브랜드가이드 수준의 모든 항목에 영향을 미칩니다. 블록 수준에서 수정하면 해당 특정 블록에만 영향을 미칩니다.
기본 텍스트
- 설정으로 이동합니다.
- 텍스트 색상 상자에 16진수 코드를 입력합니다.
이렇게 하면 텍스트 블록을 포함하여 페이지의 모든 텍스트가 영향을 받습니다.
블록 수준 텍스트
- 텍스트 블록 위로 마우스를 가져갑니다.
- 글꼴, 크기, 텍스트 색상을 변경하고 글머리 기호나 링크를 텍스트에 추가하는 등의 서식을 변경할 수 있는 WYSIWYG 편집기가 나타납니다.
- 여기에서 변경한 내용은 선택한 블록에만 영향을 줍니다.
타이포그래피
현재 사용자는 라이브러리에 있는 글꼴을 브랜드가이드에 업로드하거나 동기화할 수 없습니다. 드롭다운에서 사용할 수 있는 글꼴은 Google 웹폰트에서 제공됩니다. 고급 사용자는 CSS를 사용하여 타사 글꼴을 추가할 수 있습니다. 자세한 내용은 CSS를 사용한 브랜드 가이드 사용자 지정 문서를 참조하세요. 라이브러리 지원팀은 직접 코드를 작성하는 데 도움을 드릴 수 없습니다.
색상 블록
코드 블록
코드 블록은 표준 HTML/CSS와 함께 작동합니다. 이 블록은 CSS에 대한 고급 지식이 있는 경우에만 사용하는 것이 좋습니다. 고객 지원팀은 자체 코드를 브랜드가이드에 구현하는 경우 도움을 드릴 수 없습니다. XSS 공격을 방지하기 위해 코드가 살균 처리됩니다.
코드 블록 편집
HTML/CSS 블록이 페이지에 추가되면 브랜드가이드에 사용자 지정 코드를 추가할 수 있습니다. HTML은 페이지의 특정 위치에 추가되고 CSS는 영향을 주도록 지정된 캔버스의 모든 영역에 적용됩니다. 코드 작성을 마치면 눈 아이콘을 선택하여 변경 사항을 확인합니다.
CSS는 설정에서 글로벌 수준에서도 편집할 수 있는데, 최상위 수준에서 스타일을 설정하고 계단식으로 내려가는 것이 가장 좋기 때문입니다.
HTML을 사용하여 비디오 추가하기
플라이아웃 이미지 블록은 동영상 콘텐츠 블록 추가를 지원하지 않습니다. 그러나 비디오 임베드 코드를 사용하면 라이브러리의 사용자 지정 HTML 및 비디오 에셋을 통해 비디오를 추가할 수 있습니다. 고객 지원팀은 자체 코드를 브랜드가이드에 구현하는 경우 도움을 드릴 수 없습니다.
- 동영상의 에셋 모달을 엽니다.
- 임베드 탭으로 이동합니다.
- 동영상 임베드 코드를 찾아 링크 복사를 선택합니다.
- 코드를 HTML 블록에 붙여넣습니다.
코드 블록 살균
일부 코드와 그 안의 요소는 XSS 공격에 대한 보안을 위해 살균 처리됩니다.
코드 블록 삭제
코드 블록을 삭제하면 해당 블록과 블록 내에 작성된 모든 코드가 제거됩니다. 설정 플라이아웃에서 편집하지 않는 한 글로벌 설정 수준에서 작성된 CSS는 그대로 유지됩니다.
코드 블록 이동
HTML 및 CSS가 작성된 후 코드 블록을 이동하면 블록이 손상되거나 코드의 의도된 효과가 손상될 수 있습니다. 최상의 결과를 얻으려면 블록의 위치를 설정한 후에 코드를 작성하세요.
브랜드가이드에 색상 블록을 추가하려면 색상을 캔버스에 끌어다 놓으면 됩니다.
컬러 소스
색상 블록은 브랜드 가이드와 연결된 라이브러리 또는 컬렉션에서 가져옵니다. 브랜드 가이드에 색상이 표시되지 않으면 라이브러리 또는 컬렉션에 추가된 색상이 없다는 뜻입니다. 색상을 추가하려면 라이브러리에서 에셋으로 추가합니다.
색상 동기화
라이브러리 수준에서 색상을 변경하면 브랜드가이드에도 변경 사항이 자동으로 반영됩니다. 라이브러리에서 변경했는데 변경 사항이 브랜드가이드에 반영되지 않은 경우 색상 플라이아웃 오른쪽 상단의 원형 동기화 버튼을 선택하여 수동으로 동기화할 수 있습니다.
색상 모드
플라이아웃과 캔버스 모두에 표시되는 색상 모드를 변경할 수 있습니다.
- 색상 플라이아웃의 오른쪽 상단 모서리에 있는 설정 아이콘을 선택합니다.
- 체크박스를 선택하여 HEX, RGB 및 CMYK를 표시하고 저장을 선택합니다.
- 색상 값 옆에 복사 아이콘이 나타납니다.