Adobe Experience Manager 대 WordPress: 저작 경험 비교

웹 페이지 작성을 위한 블록 기반 편집 표준을 만들어준 WordPress와 Gutenberg에게 감사합니다. 이 기사에서는 WordPress의 새로운 저작 경험을 블록 기반 편집도 수용하는 엔터프라이즈 콘텐츠 관리 시스템인 AEM(Adobe Experience Manager)의 경험과 비교할 것입니다. 여러 회사(예: Informatica 및 Twitter)를 위해 WordPress와 AEM을 모두 구현했으며 저작 경험이 비기술적 작성자에게 중요함에도 불구하고 개발자는 종종 이를 무시한다는 사실을 깨달았습니다.

참고 : "저작 경험"이라는 용어는 웹 사이트에서 콘텐츠를 만들고 게시하는 것이 목표인 사람들을 위한 사용자 경험을 의미합니다. 출판된 콘텐츠를 소비할 사람들을 말하는 것이 아닙니다. 이전에 저작 경험에 대해 생각해 본 적이 없다면 Smashing Book 5에도 등장한 Eileen Webb의 입문서가 있습니다.

어도비 익스피리언스 매니저는 워드프레스와 비교할 때 특히 개발자를 위한 가파른 학습 곡선이 있는 복잡한 시스템입니다. 동시에 AEM은 더 많이 확립되고 값비싼 콘텐츠 관리 솔루션보다 사용하기가 더 쉬우며 AEM은 무료 솔루션과 매우 고가의 솔루션 사이에 위치합니다.

기술적인 관점에서 AEM은 AEM을 오픈 소스와 독점 소프트웨어 사이 어딘가에 위치시키는 Adobe의 여러 손길을 거친 오픈 소스 기술의 대기업입니다. 시스템을 빛나고 유용하게 만드는 것은 Adobe의 이러한 손길입니다. 예를 들어 시각적 드래그 앤 드롭 페이지 빌더는 WordPress Gutenberg가 탄생하기 훨씬 전부터 AEM에서 페이지를 만드는 표준 방법이었습니다.

저작 경험을 평균 이상으로 높이는 몇 가지 기능을 살펴보겠습니다.

구성요소(블록)

웹 사이트에 대한 가장 중요한 아이디어 중 하나는 구성 요소(또는 WordPress 용어의 블록 ) 개념입니다. 구성 요소는 어떤 것의 얼룩이 아니라 특정 규칙을 따르는 콘텐츠를 나타냅니다. 예를 들어 작성자가 Youtube 링크에만 붙여넣고 Youtube 관련 설정을 제어할 수 있는 비디오 구성 요소를 가질 수 있습니다. 또는 작성자가 한 텍스트 필드에 인용문을 추가하고 인용되는 사람의 이름을 다른 텍스트 필드에 추가하는 인용부 구성 요소를 가질 수 있습니다. 다른 구성 요소를 포함하고 모바일 장치에서 서로 아래에 표시하는 레이아웃 구성 요소를 가질 수도 있지만 큰 화면에서는 이러한 구성 요소가 세 개의 열에 분산됩니다.

작성자는 특정 구성 요소에서 무엇을 기대해야 하는지 정확히 알고 있으며 적절한 콘텐츠로 쉽게 채울 수 있습니다. 마찬가지로 중요한 것은 지난 수십 년 동안 만연해 온 구식 "모든 내용에 맞는 하나의 텍스트 필드" 접근 방식으로는 실현 가능하지 않은 장기적인 이점과 새로운 기회입니다.

• 구성 요소에 날짜 입력이 필요한 경우 구성 요소 작성 대화 상자는 일반 텍스트 필드 대신 날짜 선택기를 표시할 수 있으므로 작성자가 올바른 형식의 날짜를 더 쉽게 선택할 수 있습니다.
• 디자이너가 인용한 사람의 이름이 인용 아래가 아닌 인용 위에 표시되기를 원하는 경우 인용과 이름이 별도로 저장되기 때문에 개발자는 코드를 쉽게 재배열할 수 있습니다. 인용문과 이름이 구식으로 저장되는 경우 개발자는 텍스트 blob에서 수동으로 이름을 추출하여 인용문 앞으로 이동해야 합니다.
• 견적서를 영어에서 독일어로 번역해야 하는 경우 번역 서비스에 견적서를 제출할 수 있습니다. 번역 서비스가 이미 이 인용문을 번역한 경우 저장된 번역을 반환할 수 있습니다. 인용문이 독립형이 아니라 긴 단락의 일부인 경우 번역이 훨씬 더 어려워지고 아마도 번역가가 필요할 것입니다.
• 비디오에 스크립트가 없어 청각 장애인이 시청할 수 없는 경우 청각 장애인이 비디오에 더 쉽게 액세스할 수 있도록 구성 요소를 요약 텍스트로 보완할 수 있습니다.

구성 요소 기반 편집은 이미 한동안 AEM 사용자에게 수용되었으며 WordPress 5.0에 Gutenberg가 도입되면서 구성 요소 기반 편집기는 이제 웹 페이지 작성을 위한 사실상의 표준이 되었습니다.

참고 : Leonardo Losoviz는 WordPress의 맥락에서 블록의 의미에 대해 자세히 설명합니다.

파편

콘텐츠 단편 과 경험 단편 은 지난 1년 동안 AEM 장면을 지배한 새로운 용어입니다. 나는 그 두 가지 개념을 단순히 단편 으로 요약할 것이다. 본질적으로 프래그먼트를 통해 작성자는 웹, 모바일, 소셜 미디어 및 기타 채널에서 사용할 수 있는 중립적인 콘텐츠를 만들 수 있습니다.

프래그먼트는 페이지 편집기 외부에서 생성되며 구성 요소와 비교하여 데이터가 사용되는 방식에 대해 덜 독단적입니다. 저자가 새로운 인용문으로 하루에 한 번 업데이트하는 "오늘의 인용문"이라는 단편을 상상해 봅시다. 이제 이 조각의 인용된 텍스트를 다양한 위치에서 사용할 수 있습니다.

• 바닥글 위젯은 모든 페이지 하단에 오늘의 인용문을 표시합니다. 작성자가 조각을 업데이트하는 즉시 바닥글도 업데이트됩니다. 프래그먼트는 표시할 내용 을 결정하는 반면 바닥글 위젯은 인용문이 표시되는 방식 을 결정합니다.
• 인용 구성 요소를 통해 작성자는 과거 "오늘의 인용"에서 인용을 가져와 블로그 게시물에 추가할 수 있습니다.
• 플러그인은 홈페이지에 "오늘의 견적 공유" ​​버튼을 추가합니다. 누군가 해당 버튼을 클릭할 때마다 플러그인은 오늘의 인용문을 가져와 Facebook, Twitter 및 이메일을 통한 공유에 대한 모범 사례를 충족하도록 형식을 지정합니다.

WordPress에서 위젯과 메뉴는 조각과 유사합니다. 작성자는 중립적인 인터페이스에서 메뉴 항목을 만들고 개발자는 테마에 맞는 방식으로 해당 항목을 테마의 일부로 표시합니다. 테마가 새 테마로 바뀌면 새 테마가 이전 테마와 매우 다르게 보일지라도 해당 메뉴 항목이 유지되고 새 테마에도 표시될 수 있습니다.

비록 개념이 다른 시스템에서 다른 이름을 가지고 있지만 조각이 더 널리 사용되기를 기대합니다. 실제로 Matt Mullenweg는 이미 그의 팀이 현재 "탐색 메뉴 블록[생성 포함] 콘텐츠 관리의 다른 측면으로 블록 인터페이스를 확장하고 모든 위젯을 블록으로 포팅"하는 데 집중하고 있다고 발표했습니다.

페이지 템플릿

페이지 템플릿은 다른 여러 구성 요소를 포함하기 때문에 상위 수준 구성 요소로 설명될 수 있습니다. AEM에서 작성자는 헤더 구성 요소와 같은 구성 요소를 고정 위치로 잠그는 템플릿을 생성하는 동시에 구성 요소를 페이지별로 추가할 수 있는 유연한 영역을 정의할 수 있습니다.

이것의 한 가지 중요한 측면은 이러한 유연한 영역이 어떤 구성 요소가 들어갈 수 있는지를 제한할 수 있다는 것입니다. 이렇게 하면 다양한 목적을 위한 페이지 템플릿을 만들 수 있습니다.

• 템플릿 #1: 기사 페이지 템플릿
  머리글, 제목, 콘텐츠 영역 및 바닥글이 고정되어 있습니다. 작성자는 제목 구성 요소를 업데이트할 수 있지만 제거할 수는 없습니다. 작성자는 텍스트, 이미지 및 비디오 구성 요소를 콘텐츠 영역에 놓을 수 있습니다.
• 템플릿 #2: 방문 페이지 템플릿
  페이지 상단의 로고와 제목 컴포넌트만 고정됩니다. 작성자는 방문자를 고객으로 전환하는 데 최적화된 일련의 방문 페이지별 구성 요소 중에서 선택할 수 있습니다.

권한 및 워크플로

대규모 팀의 모든 작성자가 기사 페이지 템플릿과 같은 중요한 템플릿을 수정할 수 있어야 하는 경우는 거의 없습니다. 사람들이 실수로 사이트를 취소할 수 없게 손상시키는 것을 방지하려면 사이트의 어느 부분을 수정할 수 있는지 정의하는 것이 중요합니다. 권한 및 워크플로 개념에 오신 것을 환영합니다. 이 개념은 새롭거나 특별하지 않지만 대규모 팀에 중요합니다.

일반적인 AEM 사이트에는 실제 프로덕션 웹 사이트와 하나 이상의 프로덕션과 유사한 사이트( 스테이징 )가 포함됩니다. 작성자는 콘텐츠를 공개 프로덕션 사이트에 게시하기 전에 비공개 스테이징 사이트에 게시할 수 있습니다. 콘텐츠를 스테이징에 게시한 후 콘텐츠를 프로덕션에 게시하는 프로세스를 워크플로라고 할 수 있습니다. 또 다른 일반적인 워크플로 유형은 콘텐츠가 프로덕션 사이트에 게시되기 전에 승인 프로세스를 거쳐야 하며 특정 사용자만 "프로덕션에 게시" 버튼을 누를 수 있다는 것입니다.

권한 및 워크플로는 소규모 팀에서는 무시할 수 있는 기능입니다. 그러나 팀이 성장함에 따라 이러한 기능은 팀의 생산성과 성공에 매우 중요해집니다. AEM에는 워크플로 생성을 위한 기본이 포함되어 있고 개발자는 AEM을 특정 요구에 맞게 만들 수 있지만 상당한 코드 변경이 필요하고 손가락 하나로 구현되지 않습니다. 이것은 WordPress의 경우 더욱 그렇습니다. 사용자 정의 워크플로를 생성하기 위한 저작 친화적인 도구가 있으면 좋을 것입니다.

편집 모드

AEM에서 작성자는 다른 모드에서 각 페이지를 빠르게 편집하고 볼 수 있습니다. 작성자는 완료해야 하는 작업에 따라 모드를 전환합니다.

• 구성 요소를 정렬하고 해당 콘텐츠를 편집하려면 편집 모드를 선택합니다.
• 구성 요소가 iPad에서 정렬되는 방식을 변경하려면 레이아웃 모드를 선택하십시오.
• 방문자인 것처럼 콘텐츠를 보려면 미리 보기 모드를 선택합니다.

사이트 설정 방법에 따라 몇 가지 모드가 더 표시됩니다. 이상적인 시나리오 중 하나는 AEM을 Adobe Target과 통합하여 A/B 테스트 및 개인화를 설정하는 것입니다. 타겟팅 모드를 사용하여 작성자는 방문자의 위치, 연령, 추천 페이지, 시간 등을 기반으로 특정 구성 요소를 표시할 시점을 정의할 수 있습니다.

AEM의 통합은 WordPress의 플러그인과 비슷하지만 AEM 통합이 더 복잡하고 일반적으로 맞춤형이라는 차이점이 있습니다. 특히 AEM Target을 통합하는 것은 영업 사원이 말하는 것보다 더 고통스러울 수 있습니다.

개발 복잡성과 비용은 제쳐두고 이러한 노력의 결과는 뛰어난 저작 경험을 얻을 수 있습니다. 편집 모드의 개념은 간단한 드롭다운을 통해 작성자가 단일 페이지에 머물면서 다양한 작업을 완료할 수 있는 기회를 만드는 방법을 보여줍니다.

시각적 단일 페이지 편집기

이 기사의 스크린샷을 보면 AEM의 페이지 편집기가 구성 요소 기반일 뿐만 아니라 시각적인 기능도 있음을 깨달았을 것입니다. 구성 요소가 업데이트되면 변경 사항이 즉시 표시되고 작성자가 미리 보기를 열 필요가 없습니다. 새창. 꽤 기능. 페이지 빌더는 WordPress 생태계에 편재하지만 WordPress 뒤에 있는 팀은 아직 시각적 편집에 대한 모범 사례를 정의하지 않았습니다. 여기서 한 걸음 더 나아가서 질문하겠습니다. 비주얼 편집기와 단일 페이지 애플리케이션(SPA)을 결합하면 어떻게 될까요?

SPA는 브라우저가 전체 페이지를 다시 로드할 필요가 없기 때문에 한 페이지에서 다른 페이지로 원활하게 이동할 수 있는 웹사이트입니다. Gmail 및 Facebook과 같은 일부 인기 있는 웹사이트는 SPA이지만 인터넷에 있는 대부분의 사이트는 SPA가 아닙니다. 채택률이 낮은 한 가지 이유는 SPA를 만드는 것이 어렵고 수천 페이지로 SPA를 유지 관리하는 것이 훨씬 더 어렵기 때문입니다. 현재 SPA에서 콘텐츠를 관리하는 두 가지 주요 방법이 있습니다.

• 사이트의 콘텐츠는 코드를 업데이트하여 업데이트됩니다. 그것은 분명히 저작 친화적이지 않습니다.
• 콘텐츠는 웹사이트의 방문자 대면 부분과 분리된 CMS에서 관리됩니다. CMS의 콘텐츠는 API(예: React 앱)를 통해 사용됩니다. 작성 인터페이스는 방문자에게 표시되는 조합된 사이트와 다르게 보입니다.

비주얼 편집기와 SPA를 각각 구현하는 것은 이미 어려운 기술 과제입니다. SPA 와 함께 작동하는 비주얼 편집기를 갖는 것은 거의 전례가 없는 일입니다. Adobe 팀은 기존 시스템의 이점을 손상시키지 않으면서 AEM에서 SPA를 지원하기 위해 노력하고 있습니다. 2018년에 AEM 커뮤니티에 유망한 첫 번째 버전이 출시되었지만 아직 해야 할 일이 많이 있습니다.

요약

Adobe Experience Manager에는 이미 인기 있는 오픈 소스 프로젝트를 만들었거나 도입할 몇 가지 유용한 기능이 포함되어 있습니다. AEM이 이 기사에서 강조된 개념을 반드시 발명한 것은 아니지만 시장에서 가장 저작하기 쉬운 시스템 중 하나로 확실히 상업화되고 있습니다.

구성 요소의 개념은 WordPress에 블록이 도입되면서 주류가 되었습니다. 조각, 페이지 템플릿, 권한 및 워크플로의 개념은 WordPress에서 적어도 부분적으로 구현되며 여러 채널에 콘텐츠를 제공하는 작성자가 많은 팀에 중요합니다.

편집 모드와 단일 페이지 응용 프로그램을 지원하는 시각적 편집기를 사용하여 저작 환경을 훨씬 더 개선할 수 있습니다. 이러한 편집기는 구현하기 어렵지만 Adobe의 노력에서 알 수 있듯이 개선된 경험은 노력할 가치가 있으며 결국 WordPress에도 포함될 수 있습니다.

추가 읽기

• "더 나은 저작 경험 구축", Eileen Webb
• "저작: 환경 및 도구", Adobe 도움말 센터
• "사용자 친화적인 웹 콘텐츠 관리 시스템 설계", Christopher Hallahan
• "저작 경험", Rick Yagodich