기관의 로고와 색상으로 사이트를 브랜딩함으로써 신뢰할 수 있는 콘텐츠를 나타낼 수 있습니다. 또한 브랜딩을 통해 사이트가 기관의 다른 웹 콘텐츠와 효과적으로 조화를 이룰 수 있습니다. 이 항목에는 관리자와 Core team 구성원이 다음을 수행하는 방법이 나와 있습니다.
시작하려면 Portal for ArcGIS에 로그인한 다음 개요 페이지에서 사이트를 클릭하여 사이트 목록을 확인합니다.
팁:
또한 브라우저에서 사이트를 확인할 때 편집할 수 있습니다. 로그인한 상태에서 사이트 좌측에 있는 편집 버튼을 확인합니다.
머리글 스타일 선택
사이트 머리글에서 로고로 사이트를 브랜딩하고, 메뉴 링크로 다른 리소스로의 이동을 생성하고, 소셜 미디어 계정에 연결할 수 있습니다.
- 사용자 정의 패널에서 머리글을 클릭합니다.
- 모양 메뉴를 클릭하여 머리글의 스타일을 선택합니다. 다음과 같은 세 가지 옵션 중에서 선택할 수 있습니다.
- 표준 - 모든 새 사이트에 대한 기본 스타일인 이 디자인은 로고(60픽셀), 소셜 미디어, 메뉴 링크를 위한 공간으로 구성된 얇은 압축 막대 모양입니다.
- 크게 - 이 디자인은 더 큰 로고(120픽셀)와 추가 메뉴 링크를 위한 더 많은 공간이 제공됩니다.
- 사용자 정의 CSS/HTML - 구문 지원 코드 편집기를 사용하여 사용자 정의 코드로 머리글을 구성할 수 있습니다. 자세한 내용은 사용자 정의 머리글과 바닥글을 참고하세요.
비고:
로고를 추가하려면 다음 섹션에 나와 있는 단계를 따릅니다.
- 브랜딩 메뉴를 클릭합니다. 해당 메뉴에서 제공되는 모든 필드는 선택 사항입니다.
- 이름 - 사이트 머리글에 표시할 이름을 입력합니다. 해당 필드에 입력한 이름은 머리글에만 표시되며 사이트 URL이나 사이트 목록에는 반영되지 않습니다.
- 단축 이름 - 머리글에 추가한 이름의 단축 이름을 입력합니다. 해당 이름은 소형 화면(예시: 휴대폰)에서 볼 때 머리글의 기존 이름이 너무 긴 경우에만 나타납니다.
팁:
인터넷 접속을 위한 모바일 기기 사용이 점점 더 늘어나고 있습니다. 따라서 기기에서 사이트의 품질이 유지되도록 단축 이름을 추가하는 것을 적극 권장합니다.
- 레이아웃 옵션(상자 또는 와이드)을 선택합니다.
- 사용자 정의 HTML이나 CSS로 사이트 머리글에 브랜드를 적용하려면 사용자 정의 HTML/CSS 사용을 선택합니다.
비고:
HTML 헤더에는 임베드된 JavaScript가 지원되지 않습니다. 스크립트 태그가 무시됩니다.
- 측면 패널의 CSS 상자를 수정한 후 변경 사항 적용을 클릭하여 적용된 코드를 확인합니다.
- 저장을 클릭합니다.
머리글에 로고 추가
사이트 로고의 크기와 위치는 선택한 머리글 스타일에 따라 달라집니다.
- 사용자 정의 패널에서 머리글을 클릭합니다.
- 브랜딩 메뉴를 클릭하여 확장합니다.
- 로고 토글 버튼을 클릭하여 켭니다.
- 이미지 URL을 선택하거나 파일을 통해 이미지를 업로드하여 이미지를 추가합니다.
팁:
파일을 통해 이미지를 업로드하는 경우 PNG 파일로 저장된 이미지를 사용하는 것이 가장 좋습니다. 사용자 정의 패널 내 카드의 이미지 설정 섹션에서 이미지를 자르고 확대할 수 있습니다. - 크게 머리글 스타일을 사용할 경우 이미지 정렬의 설정을 선택할 수 있습니다.
- 로고 대체 텍스트에는 접근성 기준을 충족하는 텍스트를 입력합니다.
팁:
로고에 텍스트가 포함되어 있는 경우 회사 이름을 대체 텍스트로 사용할 수 있습니다. 로고마크 디자인의 로고는, 대체 텍스트의 장식과 유형“”으로 사용할 수 있습니다. - 저장을 클릭합니다.
테마 생성
사이트의 헤더, 텍스트, 버튼 색상을 선택하여 사이트의 테마를 만들 수 있습니다.
팁:
색상을 선택할 때는 기관의 브랜딩 지침을 살펴봐야 합니다. 다수의 브랜딩 지침에는 웹사이트와 로그 등 콘텐츠에 대한 정확한 색상 코드가 나와 있습니다. 브랜딩 지침이 없다면 팀 또는 이해 관계자와 상의하여 사이트의 테마가 기관을 제대로 반영하는지 확인합니다.
- 다음 옵션의 색상을 선택하려면 색상 코드를 입력하거나 색상 코드 필드 옆에 있는 색상 선택기에서 색상을 선택합니다.
- Global Nav 배경 색상은 사이트의 글로벌 탐색 모음에 색상을 적용합니다.
- Global Nav 텍스트 색상은 글로벌 탐색 모음의 텍스트에 색상을 적용합니다.
비고:
글로벌 탐색에 대한 자세한 내용은 글로벌 탐색이란?을 참고하세요.
- 머리글 배경 색상은 사이트 머리글에 색상을 적용합니다.
- 머리글 텍스트 색상은 머리글의 모든 텍스트에 색상을 적용합니다.
- 본문 배경 색상은 사이트 행에 색상을 적용합니다. 행 카드를 사용하여 첫 번째 카드 추가에 나와 있는 단계를 수행하여 각 행의 색상과 텍스트 색상도 구성할 수 있습니다.
- 본문 텍스트 색상은 사이트 전반의 텍스트에 색상을 적용합니다.
- 본문 링크 색상은 사이트에 제공된 링크에 색상을 적용합니다.
- 버튼 배경 색상은 사이트에 제공된 버튼에 색상을 적용합니다.
- 버튼 텍스트 색상은 사이트에 제공된 버튼의 텍스트에 색상을 적용합니다.
- 색상을 설정한 후에는 변경 사항 적용을 클릭합니다.
- 또한 사이트의 머리글 및 본문에 있는 텍스트에 글꼴을 적용할 수 있습니다.
- 사이트 본문의 글꼴을 선택하려면 기본 글꼴 설정 버튼을 클릭합니다.
- 사이트 머리글의 글꼴을 변경하려면 머리글 글꼴 설정 버튼을 클릭합니다.
비고:
다시 시작하거나 기본 색상으로 돌아가려면 테마 메뉴 하단에 있는 기본으로 재설정을 선택합니다.
바닥글 생성
사이트 편집기의 기본 설정에는 바닥글이 없습니다. 사이트의 모든 페이지에서 표시될 영구적인 바닥글을 생성하기 위해 사용자 정의 바닥글을 만들어야 합니다.
- 바닥글 섹션에서
사용자 정의를 선택합니다.
기본 바닥글이 페이지에 나타나며 CSS 상자가 측면 패널에 나타납니다.
- 바닥글의 우측 하단에 있는 설정 버튼을 클릭하여 HTML을 편집합니다.
- 설정 버튼을 다시 클릭하여 변경 내용을 확인합니다.
- 측면 패널의 CSS 상자를 수정한 후 변경 사항 적용을 클릭하여 HTML 결과를 확인합니다.
팁:
바닥글 HTML에는 임베드된 JavaScript가 지원되지 않습니다. 스크립트 태그가 무시됩니다.
다음 단계
더욱 다양한 브랜드가 적용된 사이트를 구성하려면 다음을 수행합니다.
- 메뉴 링크를 추가하고 글로벌 탐색이 활성화되어 있는지 확인합니다. 자세한 내용은 메뉴 링크 및 글로벌 탐색 구성을 참고하세요.
- 모든 사이트에는 URL(웹 주소)이 포함됩니다. 기관에 사용자 정의 도메인이 있는 경우 이 URL을 구성하여 사이트를 추가로 브랜딩할 수 있습니다. 자세한 내용은 사용자 정의 URL 구성을 참고하세요.