장식용 이중 나선

AEM Edge Delivery 서비스에서 페이지를 추가하는 방법

엣지 딜리버리 서비스(이하 EDS) 공식 시작 튜토리얼을 방금 완료했다면 방금 만든 웹사이트를 확장하는 방법이 궁금할 것입니다. 이 문서에서는 AEM 웹사이트에 새 페이지를 작성하고 게시하는 방법을 설명합니다. 이 문서에서는 원본 튜토리얼을 완료하고 브라우저에 AEM Sidekick 확장 기능이 설치된 웹 사이트가 실행 중이라고 가정합니다.

먼저 Google 드라이브에 새 파일을 만듭니다.

새 파일을 만들면 공식 튜토리얼에서 이미 [email protected] 으로 폴더를 공유했으므로 '만들고 공유'라는 메시지가 표시됩니다. 폴더를 공유하고 그 안에 있는 문서를 공유하면 EDS가 Google 드라이브의 콘텐츠를 보고 웹사이트로 가져올 수 있습니다. '만들기 및 공유'를 클릭하고 새 문서 편집을 시작합니다.

EDS 프로젝트에서 문서를 편집할 때 가장 먼저 주의해야 할 것은 문서 이름입니다. 이 이름은 페이지가 있는 URL을 만드는 데 사용됩니다.

예를 들어, 이 블로그의 스크린샷에 표시된 프로젝트의 기본 URL은 https://main--drews-franklin-demo--drew-cummings.hlx.live/ 입니다.

'새 페이지'라는 새 문서를 만들면 해당 페이지가 게시될 때 해당 페이지가 존재하는 URL은 https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page 입니다. 문서 이름이 대문자로 되어 있어도 생성된 모든 URL은 소문자로 표시된다는 점에 유의하세요. 가독성과 탐색을 위해 문서 이름을 짧고 관련성 있게 만드세요.

문서 제목을 "새 페이지"로 업데이트합니다.

이제 문서 상단에 제목을 추가해 보겠습니다. 텍스트를 '제목 1'로 설정하고 제목을 입력합니다.

웹사이트에서는 어떤 모습인지 살펴봅시다. 생성된 URL(제 경우에는 https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page)로 이동하여 어떻게 작동하는지 확인하세요.

오, 안 돼! 이 메시지가 표시되더라도 당황하지 마세요. 기본 EDS 데모에서 '페이지를 찾을 수 없음' 오류는 다음과 같이 표시됩니다. 아직 미리 보고 게시하지 않았기 때문에 현재 웹사이트에서 페이지를 찾을 수 없습니다. 문서로 돌아가서 아래 스크린샷에서 가장 왼쪽에 있는 아이콘인 AEM Sidekick 확장 프로그램을 클릭합니다.

잠시 후 도우미 도구 모음이 나타납니다. 왼쪽에 빨간색 점으로 표시된 '미리보기' 버튼이 보일 것입니다. 이 빨간색 점은 웹사이트에 준비하여 푸시할 새 콘텐츠가 있음을 나타냅니다. 해당 버튼을 클릭하고 로드되는 페이지를 살펴보세요.

새 페이지의 미리보기입니다. 페이지를 게시한 후 '라이브' 사이트에서 페이지가 표시되는 모습은 다음과 같습니다. 콘텐츠가 게시되지 않은 상태에서는 라이브 페이지에 표시되지 않으며, 게시되지 않은 페이지는 라이브 웹사이트에 표시되지 않는다는 점에 유의하세요. 이를 통해 콘텐츠를 게시할 준비가 될 때까지 사이트 사용자가 볼 수 없는 상태에서 콘텐츠를 실험하고 원하는 대로 조정할 수 있습니다. 지금은 이 페이지를 게시하지 않은 상태로 두고 Google 문서 도구로 돌아가 콘텐츠를 더 추가해 보겠습니다.

현재 페이지의 모습은 다소 평범합니다. 이미지로 색상을 추가해 보겠습니다. 간단하게 설명하기 위해 샘플 페이지의 파란색 DNA 그림을 사용하겠습니다.

미리 보기를 누르고 어떤 모습인지 확인하세요.

보기 좋네요! 그림 위에 텍스트가 오버레이되는 것을 원하지 않는 경우 문서에서 제목 텍스트 위가 아닌 아래에 그림을 배치하면 다음과 같은 페이지가 표시됩니다.

텍스트 오버레이는 글의 첫 번째 이미지에 대해서만 발생하며, 처음에 표시된 대로 서식이 지정되고 이미지 바로 아래에 제목 또는 제목 1 스타일의 텍스트가 있는 경우에만 발생합니다.

이제 이 문서에 텍스트 콘텐츠를 추가해 보겠습니다. 출판 업계에서 텍스트 레이아웃을 실험할 때 전통적으로 사용되는 라틴어 텍스트인 로렘 입섬을 사용하겠습니다. 로룸 입섬을 사용하면 아랍어 알파벳 콘텐츠가 페이지에서 어떻게 보이는지 실수로 읽다가 산만해지지 않고 확인할 수 있습니다. 대신 원하는 텍스트 콘텐츠를 자유롭게 추가하세요. 제 Google 문서에는 이렇게 표시되어 있습니다:

미리보기 페이지의 모습은 다음과 같습니다:

마지막으로 페이지의 콘텐츠와 나란히 배치했을 때 이미지가 어떻게 보이는지 살펴봅시다. 첫 번째 단락 뒤에 데모 페이지의 사진 중 하나를 추가하여 아래 사이트에서 어떻게 표시되는지 보여드리겠습니다:

EDS는 Google 문서에서 콘텐츠를 가져와서 웹사이트를 만드는 HTML 파일을 생성하는 데 사용한다는 점에 주목할 필요가 있습니다. 따라서 Google 문서 도구의 이미지 크기는 미리 보기/라이브 페이지의 이미지 크기와 상관관계가 없습니다. 사이트에서 이미지 크기를 조정하려면 이미지의 기본 해상도를 조정해야 합니다.

이제 세상에 보여줄 수 있는 만족스러운 페이지가 완성되었으므로 게시하기 전에 마지막으로 완료해야 할 단계가 하나 남았습니다. 글 제목을 변경하지 않고 메타데이터에서 이 페이지의 제목을 '나의 새 페이지'에서 '데모 페이지'로 변경하고 싶습니다. 또한 검색 엔진이 페이지를 더 쉽게 찾을 수 있도록 메타데이터에 설명을 추가하고 싶습니다. 이렇게 하려면 메타데이터 블록을 추가해야 합니다.

메타데이터 블록을 추가하는 가장 쉬운 방법은 데모 홈페이지에 있는 것을 복사하여 붙여넣는 것이지만, 처음부터 새로 만드는 데 관심이 있다면 그 과정을 안내해 드리겠습니다.

먼저 문서 끝에 2X3 표를 삽입합니다. 첫 번째 행의 셀을 강조 표시하고 마우스 오른쪽 버튼으로 클릭한 다음 "셀 병합"을 선택합니다.

맨 위 행에 "메타데이터"를 입력한 다음 다음 두 행의 왼쪽 셀에 "제목"과 "설명"을 입력합니다. '제목' 셀의 오른쪽에 제목을, '설명' 셀의 오른쪽에 설명을 입력합니다. 최종 결과는 다음과 같은 모습이어야 합니다:

지금 바로 페이지를 미리 보세요. 페이지의 콘텐츠는 전혀 변경되지 않았지만 Chrome에서 탭을 보면 이전에 사용하던 기본 제목 대신 새 제목이 표시됩니다.

웹페이지의 HTML 파일을 살펴보면 제목과 설명이 모두 웹페이지의 속성으로 존재하는 것을 확인할 수 있습니다.

게시할 준비가 되었습니다! 미리 보기 페이지에 표시되는 AEM Sidekick 확장 프로그램의 왼쪽에 있는 "게시" 버튼을 클릭하면 웹 사이트에서 새 라이브 웹 페이지를 확인할 수 있습니다.

웹사이트에 페이지를 추가한 것을 축하합니다! 게시하기 전에 이전에 이 페이지의 URL을 방문했다가 404 페이지를 찾을 수 없음 오류가 표시된 경우 게시 후에도 해당 오류가 표시될 수 있습니다. 여러 가지 이유로 인해 이러한 문제가 발생할 수 있지만, AEM Sidekick 확장 프로그램에서 오류 메시지가 표시되지 않는 한 콘텐츠가 실제로 통과했을 가능성은 낮습니다. 1~2분 정도 기다렸다가 페이지를 새로고침하면 게시된 페이지를 볼 수 있습니다.

이 튜토리얼이 재미있었고 AEM 제품에 대해 자세히 알아보려면 여기에서 AEM에 대한 문서를 확인하세요.