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