Universal Editor로 콘텐츠 작성

콘텐츠 작성자가 Universal Editor를 사용하여 얼마나 쉽고 직관적으로 콘텐츠를 만들 수 있는지 알아봅니다.

소개

Universal Editor를 사용하면 모든 구현에서 콘텐츠의 모든 측면을 편집할 수 있기 때문에 뛰어난 경험을 제공하고, 콘텐츠 속도를 높이고, 최신 개발자 경험을 제공할 수 있습니다.

이를 위해 제공되는 Universal Editor는 콘텐츠 작성자가 최소한의 교육만 받으면 사용할 수 있어 바로 부담 없이 콘텐츠 편집을 시작할 수 있습니다. 이 문서에서는 Universal Editor의 작성 환경에 대해 설명합니다.

앱 준비

Universal Editor로 앱의 콘텐츠를 작성하려면 개발자가 앱을 계측하여 편집기를 지원해야 합니다.

로그인

앱이 유니버설 편집기에서 작동하도록 계측되면 유니버설 편집기에 로그인합니다. 로그인하려면 Adobe ID이 필요합니다. 유니버설 편집기에 액세스할 수 있습니다.

로그인한 후에 위치 표시줄에 편집하려는 페이지의 URL을 입력하여 텍스트 콘텐츠 또는 미디어 콘텐츠와 같은 콘텐츠를 편집할 수 있습니다.

UI 이해

UI는 크게 다섯 가지 영역으로 나뉩니다.

• Experience Cloud 헤더
• Universal Editor 헤더
• 모드 레일
• 편집기
• 속성 레일

Experience Cloud 헤더

Experience Cloud 헤더는 항상 화면 상단에 있습니다. Experience Cloud 내의 위치를 알려 주고 다른 Experience Cloud 앱으로 이동할 수 있도록 도와주는 앵커입니다.

Experience Manager

헤더 왼쪽에 있는 Adobe Experience Cloud 링크를 선택해 Experience Manager 솔루션의 루트로 이동하여 Cloud Manager, Cloud Acceleration Manager, Software Distribution 등의 도구에 액세스합니다.

조직

현재 로그인되어 있는 조직이 표시됩니다. Adobe ID이 여러 조직과 연결되어 있는 경우 다른 조직으로 전환하려면 선택합니다.

솔루션

솔루션 전환기를 탭하거나 클릭하면 다른 Experience Cloud 솔루션으로 빠르게 이동할 수 있습니다.

도움말

도움말 아이콘은 학습 및 지원 리소스에 대한 바로 가기를 제공합니다.

알림

이 아이콘에는 현재 할당된 불완전 알림 수가 배지로 지정됩니다.

사용자 속성

사용자를 나타내는 아이콘을 선택하여 사용자 설정에 액세스합니다. 사용자 사진을 구성하지 않은 경우, 아이콘이 임의로 할당됩니다.

Universal Editor 헤더

Universal Editor 헤더는 항상 화면 상단의 Experience Cloud 헤더 바로 아래에 있습니다. 현재 페이지를 게시하고 편집할 다른 페이지에 바로 갈 수 있습니다.

홈 버튼

홈 버튼을 누르면 유니버설 편집기의 시작 페이지로 돌아갑니다

시작 페이지에서 범용 편집기로 편집할 사이트의 URL을 입력할 수 있습니다.

위치 표시줄

위치 표시줄에 편집 중인 페이지의 주소가 표시됩니다. 편집할 다른 페이지의 주소를 입력하려면 선택하십시오.

인증 헤더 설정

인증 암호를 설정해야 하는 경우 인증 헤더 설정 아이콘을 선택합니다.

에뮬레이터 설정

에뮬레이션 아이콘을 선택하여 범용 편집기에서 페이지를 렌더링하는 방법을 정의합니다.

에뮬레이션 아이콘을 탭하거나 클릭하면 옵션이 표시됩니다.

기본적으로 편집기는 브라우저에서 높이와 너비를 자동으로 정의하는 데스크탑 레이아웃으로 열립니다.

Universal Editor에서 모바일 디바이스를 에뮬레이션할 수도 있습니다.

• 방향 정의
• 폭과 높이 정의
• 방향 변경

앱 미리보기 열기

앱 미리 보기 열기 아이콘을 선택하여 편집기에서 벗어난 자체 브라우저 탭에서 현재 편집 중인 페이지를 열고 콘텐츠를 미리 봅니다.

게시

독자가 사용할 수 있도록 콘텐츠 라이브에 변경 사항을 게시할 수 있도록 게시 버튼을 선택합니다.

모드 레일

모드 레일은 홈 버튼 바로 아래에 있으며 항상 편집기의 왼쪽에 표시됩니다. 다양한 사용 모드 간에 편집기를 쉽게 전환할 수 있습니다.

미리보기 모드

미리보기 모드의 페이지는 게시된 서비스에 표시되는 것처럼 편집기에서 렌더링된 페이지입니다. 이렇게 하면 콘텐츠 작성자는 링크 등을 클릭하여 콘텐츠를 탐색할 수 있습니다.

구성 요소 모드

구성 요소 모드에서 콘텐츠 작성자는 다음을 포함하여 편집할 구성 요소를 선택할 수 있습니다.

• 즉시 일반 텍스트 편집.
• 리치 텍스트 편집 속성 레일에 표시되는 추가적인 형식 옵션과 함께 배치됩니다.
• 미디어 콘텐츠 편집
• 콘텐츠 조각 편집

구성 요소를 선택하면 해당 컨텐츠의 세부 사항이 속성 레일입니다. 콘텐츠 유형에 따라 즉석 또는 속성 레일에서 편집할 수 있습니다.

편집기

편집기는 창의 대부분을 차지하며 위치 표시줄에 지정된 페이지가 렌더링되는 곳입니다.

• 편집기가 인 경우 구성 요소 모드, 컨텐츠는 편집할 수 있지만 링크를 따라갈 수는 없습니다.
• 편집기가 미리보기 모드에 있는 경우 콘텐츠를 탐색하고 링크를 따라갈 수 있지만, 콘텐츠를 편집할 수 없습니다.

속성 레일

속성 레일은 항상 편집기의 오른쪽에 표시됩니다. 해당 모드에 따라 콘텐츠 또는 페이지 콘텐츠의 계층 구조에서 선택한 구성 요소에 대한 세부 정보를 표시할 수 있습니다.

속성 모드

속성 모드의 레일에 편집기에서 현재 선택한 구성 요소의 속성이 표시됩니다. 페이지가 로드될 때 속성 레일의 기본 모드입니다.

선택한 구성 요소 유형에 따라 속성 레일에 세부 정보가 표시될 수 있으며 여기에서 해당 세부 정보를 수정할 수 있습니다.

일부 구성 요소에는 표시 및/또는 편집할 수 있는 세부 정보가 포함되지 않습니다.

콘텐츠 트리 모드

콘텐츠 트리 모드의 경우 레일에 페이지 콘텐츠의 계층 구조가 표시됩니다.

콘텐츠 트리의 항목을 선택하면 편집기는 해당 콘텐츠를 스크롤하여 선택합니다.

편집

다음 시기 구성 요소 모드, 선택한 구성 요소에 대한 편집 옵션이 속성 레일에 나타납니다. 속성 레일에서 선택한 구성 요소를 편집할 수 있습니다. 선택한 구성 요소가 콘텐츠 조각인 경우 편집 버튼을 선택할 수도 있습니다.

편집 버튼을 탭하거나 클릭하면 새 탭에 콘텐츠 조각 편집기가 열립니다. 이를 통해 콘텐츠 조각 편집기의 모든 기능에 액세스하여 연결된 콘텐츠 조각을 편집할 수 있습니다.

워크플로우의 필요에 따라 범용 편집기에서 또는 콘텐츠 조각 편집기에서 직접 콘텐츠 조각을 편집할 수 있습니다.

추가

콘텐츠 트리 또는 편집기에서 컨테이너 구성 요소를 선택하면 속성 레일에 추가 옵션이 표시됩니다.

추가 버튼을 탭하거나 클릭하면 선택한 컨테이너에 추가할 수 있는 구성 요소의 드롭다운 메뉴가 열립니다.

삭제

콘텐츠 트리 또는 편집기에서 컨테이너 구성 요소 내의 구성 요소를 선택하면 속성 레일에 삭제 옵션이 표시됩니다.

삭제 버튼을 탭하거나 클릭하면 구성 요소가 삭제됩니다.

콘텐츠 편집

콘텐츠 편집은 간단하고 직관적입니다. 위치 구성 요소 모드를 클릭하고 편집기의 콘텐츠 위로 마우스를 가져가면 편집 가능한 콘텐츠가 파란색 상자로 강조 표시됩니다.

선택한 콘텐츠에 따라 즉석 편집 옵션이 다를 수 있으며, 의 콘텐츠에 대한 추가 정보 및 옵션이 있을 수 있습니다. 속성 레일입니다.

일반 텍스트 편집

에 있는 경우 구성 요소 모드 일반 텍스트 구성 요소를 선택하고 구성 요소를 두 번 클릭하거나 두 번 탭하여 텍스트를 편집할 수 있습니다.

Enter/Return 키를 누르거나 텍스트 상자 바깥쪽을 선택하여 변경 내용을 저장합니다.

텍스트 구성 요소를 선택하기로 선택하면 해당 세부 사항이 속성 레일에 표시됩니다. 레일에서 텍스트를 편집할 수도 있습니다.

텍스트에 대한 자세한 내용은 속성 레일에서 확인할 수 있습니다. 포커스가 속성 레일의 편집된 필드를 떠나면 변경 사항이 자동으로 저장됩니다.

리치 텍스트 편집

에 있는 경우 구성 요소 모드 리치 텍스트 구성 요소를 선택하고 구성 요소를 두 번 클릭하거나 두 번 탭하여 텍스트를 편집할 수 있습니다.

Enter/Return 키를 누르거나 텍스트 상자 바깥쪽을 선택하여 변경 내용을 저장합니다.

서식 옵션 및 텍스트에 대한 세부 정보도 속성 레일에서 사용할 수 있습니다. 포커스가 속성 레일의 편집된 필드를 떠나면 변경 사항이 자동으로 저장됩니다.

미디어 편집

에 있는 경우 구성 요소 모드 이미지를 선택하면 속성 레일에서 세부 정보를 볼 수 있습니다.

다음 항목 선택 바꾸기 속성 레일에서 선택한 이미지의 미리 보기 아래에 있는 단추를 클릭하여 이미지를 자산 라이브러리의 다른 이미지로 바꿉니다.

1. 자산을 선택할 수 있는 자산 선택기 창이 열립니다.
2. 새 자산을 선택하려면 를 선택합니다.
3. 선택 선택 에셋이 교체된 속성 레일로 돌아갑니다.

변경 사항은 콘텐츠에 자동으로 저장됩니다.

콘텐츠 조각 편집

에 있는 경우 구성 요소 모드 다음 중 하나를 선택합니다. 컨텐츠 조각, 속성 레일에서 세부 사항을 편집할 수 있습니다.

선택한 콘텐츠 조각의 콘텐츠 모델에 정의된 필드가 속성 레일에 표시되고 편집할 수 있습니다.

콘텐츠 조각과 관련된 필드를 선택하면 구성 요소 레일에 콘텐츠 조각이 로드되어 필드가 자동으로 스크롤됩니다.

포커스가 속성 레일의 편집된 필드를 떠나면 변경 사항이 자동으로 저장됩니다.

에서 콘텐츠 조각을 편집하려면 다음을 수행하십시오. 콘텐츠 조각 편집기 대신 편집 단추 모드 레일에서 을 클릭합니다.

워크플로우의 필요에 따라 범용 편집기에서 또는 콘텐츠 조각 편집기에서 직접 콘텐츠 조각을 편집할 수 있습니다.

컨테이너에 구성 요소 추가

1. 콘텐츠 트리 또는 편집기에서 컨테이너 구성 요소를 선택합니다.

2. 그런 다음 속성 레일에서 추가 아이콘을 선택합니다.

   

구성 요소가 컨테이너에 삽입되며 편집기에서 편집할 수 있습니다.

컨테이너에서 구성 요소 삭제

1. 콘텐츠 트리 또는 편집기에서 컨테이너 구성 요소를 선택합니다.

2. 컨테이너의 V자형 아이콘을 선택하여 콘텐츠 트리에서 해당 콘텐츠를 확장합니다.

3. 그런 다음 콘텐츠 트리에서 컨테이너 내의 구성 요소를 선택합니다.

4. 속성 레일에서 삭제 아이콘을 선택합니다.

   

선택한 구성 요소가 삭제되었습니다.

컨테이너의 구성 요소 재정렬

1. 콘텐츠 트리 또는 편집기에서 컨테이너 구성 요소를 선택합니다.

2. 아직 콘텐츠 트리 모드가 아닌 경우 전환합니다.

3. 컨테이너의 V자형 아이콘을 선택하여 콘텐츠 트리에서 해당 콘텐츠를 확장합니다.

4. 컨테이너 내의 구성 요소 옆에 있는 드래그 핸들 아이콘은 구성 요소를 재정렬할 수 있음을 나타냅니다. 구성 요소를 드래그하여 컨테이너 내에서 재정렬합니다.

   

5. 끌어온 구성 요소는 구성 요소 트리에서 회색으로 바뀌고 삽입 지점은 파란색 선으로 표시됩니다. 구성 요소를 놓아 새 위치에 배치합니다.

구성 요소는 콘텐츠 트리와 편집기 모두에서 재정렬됩니다.

콘텐츠 미리보기

콘텐츠 편집을 마치면 콘텐츠를 탐색하여 다른 페이지의 콘텐츠에서 어떻게 보이는지 확인하고 싶은 경우가 많습니다. 미리보기 모드에서 링크를 클릭하여 독자처럼 콘텐츠를 탐색할 수 있습니다. 콘텐츠는 게시될 때 편집기에서 렌더링됩니다.

미리보기 모드에서 콘텐츠를 탭하거나 클릭하면 콘텐츠 독자에게 반응하는 것처럼 반응합니다. 편집할 내용을 선택하려면 다음으로 전환합니다. 구성 요소 모드.

추가 리소스

Universal Editor에 대해 자세히 알아보려면 다음 문서를 참조하십시오.

• Universal Editor 소개 - Universal Editor를 통해 모든 구현에서 콘텐츠의 모든 측면을 편집하여 뛰어난 경험을 제공하고, 콘텐츠 속도를 높이고, 최신 개발자 경험을 제공하는 방법에 대해 알아봅니다.
• Universal Editor로 콘텐츠 게시 - Universal Editor에서 콘텐츠를 게시하는 방법과 앱에서 게시된 콘텐츠를 처리하는 방법에 대해 알아봅니다.
• AEM에서 Universal Editor 시작하기 - Universal Editor에 액세스하는 방법과 이를 사용하기 위해 첫 번째 AEM 앱 계측을 시작하는 방법을 알아봅니다.
• Universal Editor 아키텍처 - Universal Editor의 아키텍처 및 해당 서비스와 계층 간에 데이터가 흐르는 방식에 대해 알아봅니다.
• 속성 및 유형 - Universal Editor에 필요한 데이터 속성 및 유형에 대해 알아봅니다.
• Universal Editor 인증 - Universal Editor의 인증 방법에 대해 알아봅니다.