사이트 편집 기본 정보

사이트를 생성하면 사이트 편집기와 사이드 패널을 사용하여 사이트 설정을 구성하고 레이아웃을 디자인하고 페이지를 추가할 수 있습니다.

이 항목에는 다음을 수행하는 방법을 알아보겠습니다.

• 사이트 편집기에서 편집 세션을 시작하고 작업을 저장하고 변경 사항을 확인합니다.
• 행과 카드를 사용하여 사이트 또는 페이지 레이아웃을 디자인합니다.
• 배경 색상, 텍스트 색상, 글꼴을 설정합니다.
• 머리글과 바닥글을 구성합니다.

편집 모드로 사이트 열기

시작하려면 사이트를 편집 모드로 엽니다. 편집 모드로 페이지 열기에 대한 자세한 내용은 편집 모드로 페이지 열기를 참고하세요.

브라우저 창에서

브라우저 창에서 편집 모드로 사이트를 열려면 다음 단계를 완료합니다.

1. 새 브라우저 창에서 사이트의 URL을 열고 글로벌 탐색 모음에서 로그인을 클릭합니다.
2. 편집 버튼 을 클릭하여 사이트 편집기를 엽니다.

   비고:

   사이트에 로그인하고 편집하려면 글로벌 탐색이 활성화되어 있어야 하며, 사용자가 사이트의 핵심 팀에 속하거나 관리 권한이 있거나 사이트의 기존 소유자여야 합니다.

사이트 응용프로그램에서

응용프로그램의 오버뷰 페이지에서 사이트를 엽니다.

1. 기관의 ArcGIS Enterprise 웹사이트 URL을 엽니다.

   비고:

   URL(https://webadaptorhost.domain.com/webadaptorname/apps/sites/admin)을 통해서도 사이트 관리 앱에 접속할 수 있습니다.

2. 포털 웹사이트 홈페이지 상단에 있는 로그인을 클릭하고 계정 자격 증명을 입력합니다.
3. 사용자 프로필 옆에 있는 앱 전환기 버튼 을 클릭하고 사이트를 선택합니다.
4. 오버뷰 페이지의 사이트 카드에서 관리를 클릭하고 해당 제목을 클릭하여 사이트를 엽니다.

ArcGIS Enterprise에서

ArcGIS Enterprise에서 편집 모드로 사이트를 열려면 다음 단계를 수행합니다.

1. ArcGIS Enterprise에 로그인합니다.
2. 콘텐츠에서 사이트의 사이트 응용프로그램 항목을 찾습니다.
3. 항목을 클릭하여 항목 세부정보를 열고 앱 구성을 클릭합니다.

편집 내용 저장

사이트를 편집할 때 변경 사항을 정기적으로 저장하세요. 저장 버튼은 편집 탐색 모음의 오른쪽 상단에 있습니다. 다른 사용자가 검토할 수 있도록 선택적으로 사이트를 초안으로 발행할 수 있습니다. 자세한 내용은 사이트 또는 페이지 발행을 참고하세요.

비고:

핵심 팀 구성원이 사이트를 동시에 편집하거나 사이트가 여러 탭에 열려 있는 경우, 마지막으로 사이트를 저장하고 닫은 사용자가 편집한 내용이 적용됩니다. 열린 탭은 새로운 변경 사항을 표시하기 위해 자동으로 새로 고침되지 않으므로 한 번에 한 명의 핵심 팀 구성원이 사이트를 편집하는 것이 가장 좋습니다.

측면 패널 작업 및 탐색 모음 편집

대부분의 사이트 편집 워크플로에서는 사이트의 측면 패널을 사용합니다. 해당 패널에는  설정, 머리글, 테마, 레이아웃, 바닥글 메뉴가 포함되어 있습니다.

측면 패널을 열려면 측면 패널 토글 버튼 을 클릭합니다. 패널 상단의 사용자 정의 옆에 있는 뒤로 버튼을 클릭하면 루트 메뉴로 돌아갑니다.

또한 사이트 편집기에는 팀, 피드백, 콘텐츠 라이브러리와 같은 추가 기능에 접근할 수 있는 레이아웃 편집기 상단에 편집 탐색 모음이 포함되어 있습니다. 또한 이 모음에서 사이트를 저장하고 ArcGIS Enterprise 사이트의 항목 세부 정보 페이지에 접근할 수 있습니다. 더 보기 버튼 을 클릭하고 ArcGIS Enterprise에서 편집을 선택합니다.

사이트의 레이아웃 디자인

사이트의 레이이웃 디자인을 시작하려면 측면 패널의 레이아웃 메뉴를 열어 이미지, 텍스트, 앱, 미디어, 기타 구성 요소를 사이트에 추가할 수 있는 카드 선택에 접근합니다.

사이트의 기본 레이아웃은 콘텐츠를 소개하기 전에 컨텍스트를 제공하는 데 초점을 맞춘 일관된 이야기를 구성하도록 카드를 결합하는 방법을 보여주기 위해 디자인되었습니다. 이 형식을 그대로 채택하거나, 색상과 콘텐츠를 업데이트하거나, 모든 카드를 제거하고 빈 레이아웃으로 시작할 수 있습니다.

사이트 레이아웃 편집에 익숙해지려면 다음 단계에 따라 새 행 카드를 추가하세요.

1. 측면 패널에서 레이아웃을 클릭합니다.
2. 행 카드를 측면 패널에서 레이아웃으로 드래그하고 원하는 위치에 행을 배치합니다.

   비고:

   행은 레이아웃의 구성 요소이며 텍스트, 앱, 이미지 카드와 같이 카드를 삽입하려는 모든 곳에 필요합니다.

3. 텍스트 카드와 같은 카드를 측면 패널에서 새 행으로 드래그하고 원하는 위치에 카드를 배치합니다.

   팁:

   연속으로 카드의 위치를 변경하려면 카드의 우측 상단 위에 마우스를 놓은 후 배치 버튼 을 사용하여 카드를 이동합니다. 카드의 좌우에 있는 화살표를 사용하여 크기를 조정할 수도 있습니다.

4. 필요에 따라 연속으로 행 위치를 변경하려면 행의 우측 상단 위에 마우스를 놓은 후 배치 버튼 을 사용하여 행을 이동합니다.

   포함된 모든 카드를 비롯해 행을 레이아웃의 새 위치로 이동할 수 있습니다.

5. 저장을 클릭합니다.
6. 카드 또는 행을 제거하려면 삭제 버튼 을 클릭합니다.

사이트 설정

각 사이트에는 URL 구성, 사이트 이름, 요약과 같은 특정 요소와 비공개 다운로드 및 글로벌 탐색과 같은 상호작용을 제어할 수 있는 자체 설정이 있습니다.

팁:

사이트의 URL은 초기에 구성해야 하는 중요한 설정입니다. 사용자 설정 도메인으로 URL을 구성하거나 사이트 이름을 바꾸려면 지금 사이트 URL 구성을 고려하세요.

자세한 내용은 사이트 설정 구성을 참고하세요.

머리글, 바닥글 및 글로벌 탐색

머리글과 바닥글은 사이트 레이아웃을 완성하는 데 중요합니다. 머리글에서 브랜드를 추가하고 방문자가 콘텐츠, 페이지, 외부 웹사이트를 찾는 데 도움이 되는 메뉴를 만들어 사이트를 소개할 수 있습니다. 바닥글은 사이트의 끝을 알리고 기관의 저작권 정보, 위치, 연락처 정보와 같은 유용한 정보를 위한 공간을 제공합니다.

또한 모든 새 사이트는 머리글 위에 얇고 컴팩트한 막대를 배치하는 기능인 글로벌 탐색 기능을 통해 활성화됩니다. 방문자는 이 막대를 통해 키워드와 구문을 사용하여 사이트의 콘텐츠를 검색하고, 사용자 프로필에 접근하고, 알림을 볼 수 있습니다.

비고:

휴대폰과 같은 소형 기기에서는 헤더가 드롭다운 메뉴로 축소되고 글로벌 탐색 요소를 측면 패널에서 사용할 수 있으므로 방문자가 어떤 화면 크기로든 콘텐츠를 탐색할 수 있습니다.

머리글, 바닥글 및 글로벌 탐색 모음은 방문자가 다른 페이지 링크를 따라갈 때 기존 페이지로 다시 이동할 수 있도록 사이트와 해당 페이지에서 일관성을 유지합니다.

머리글과 바닥글에서 사용자 설정 코드를 사용할 수 있습니다. 측면 패널의 머리글 메뉴에 있는 옵션을 사용하여 다음을 구성할 수도 있습니다(코딩 필요 없음).

• 로고
• 머리글 배경 및 텍스트 색상
• 방문자를 소셜 미디어 플랫폼과 연결하는 소셜 아이콘
• 사이트 탐색을 만들기 위한 페이지 및 추가 리소스에 대한 메뉴 링크

자세한 내용은 머리글 및 테마 옵션으로 사이트 브랜딩 및 글로벌 탐색 및 메뉴 링크 구성을 참고하세요.

색상 및 글꼴

측면 패널의 테마 메뉴를 사용하여 머리글, 글로벌 탐색 모음, 버튼, 텍스트, 배경의 색상을 지정할 수 있습니다. 선택한 색상과 글꼴은 전체 사이트 레이아웃과 사이트에 연결된 모든 페이지에 적용됩니다.

개별 행의 테마 색상을 재정의하여 레이아웃 색상을 더욱 세부적으로 제어할 수 있습니다. 각 행에는 텍스트 및 배경 색상을 설정하고 이미지를 배경으로 적용할 수 있는 자체 설정이 있습니다.

시작하려면 행의 우측 상단 위에 마우스를 놓은 후 설정 버튼 을 클릭하여 다음을 수정합니다.

• 넓은 또는 상자형 레이아웃 선택 - 넓은은 전체 레이아웃에서 행을 확장합니다. 상자형을 선택하면 콘텐츠가 행 내 고정 너비로 표시됩니다.

  팁:

  상자형은 주로 모바일 기기에서 볼 수 있는 발행 사이트에 권장되는 설정입니다.

• 16진수 색상 코드 또는 색상 슬라이더를 사용하여 텍스트 및 배경 색상 변경 - 행에 나타나는 텍스트는이 설정에서 정의한 색상으로 나타납니다. 여기에는 카드를 사용하여 행에 표시되는 텍스트가 포함됩니다. 행의 배경에 색상을 적용 할 수도 있습니다.

  팁:

  행 텍스트 색상과 배경 색상 간의 색상 대비가 일반 텍스트의 경우 4.5:1, 큰 텍스트 또는 심볼의 경우 3:1의 접근성 비율을 충족하거나 초과하는지 확인합니다. WebAIM와 같이 색상 대비를 확인하는 데 사용할 수 있는 많은 웹사이트가 있습니다.

• 배경 이미지 설정 - 선택적으로 이미지를 업로드하거나 호스팅 이미지 파일에 링크를 붙여넣어 이미지를 행의 배경으로 설정할 수 있습니다.

  팁:

  배경 이미지를 사용할 때, 특히 텍스트와 기타 콘텐츠를 오버레이하려는 경우 단순한 패턴이나 주제가있는 이미지를 선택합니다.

행 형식 지정에 대한 자세한 내용은 텍스트 및 이미지 추가 및 테마 생성을 참고하세요.

페이지

페이지는 사이트에 추가 웹페이지로, 사이트의 머리글, 바닥글, 사용자 설정 도메인을 채택하는 사이트에 첨부할 수 있습니다. 사이트 머리글의 메뉴 링크를 사용하여 추가 페이지에 연결할 수 있습니다.

비고:

iframes 및 맵 카드(웹 맵, 웹 씬)를 사용하여 다양한 정보를 다루거나 여러 항목을 표시하려는 경우, 페이지를 사용하여 테마 또는 주제별로 콘텐츠를 분리하는 것이 좋습니다. 이렇게 하면 사이트의 불러오기 및 성능이 유지되고 사이트 방문자가 각자의 속도에 맞게 콘텐츠를 탐색할 수 있습니다.

사이트에 추가된 모든 페이지에는 사이트 편집기에 포함된 동일한 레이아웃 메뉴가 있는 측면 패널이 있습니다. 즉, 사이트를 디자인하는 것과 동일한 방식으로 카드를 사용하여 페이지 레이아웃을 디자인할 수 있습니다.

페이지에 대한 자세한 내용은 사이트에 페이지 추가를 참고하세요.