AEM Forms용 범용 편집기 인터페이스 탐색
범용 편집기는 AEM Forms with Edge Delivery Services를 만들기 위한 시각적 인터페이스를 제공합니다. 사용자에게 양식이 어떻게 표시되는지 정확하게 보여 주는 WYSIWYG(What You See Is What You Get) 경험을 제공합니다.
이 안내서는 양식을 효율적으로 작성할 수 있도록 인터페이스를 이해하는 데 도움이 됩니다. 초보자든 전문가든 이 안내서를 통해 다음과 같은 작업을 수행할 수 있습니다.
필수 기술 학습
- 자신감 있고 효율적으로 인터페이스 탐색
- 일반적인 양식 작성 작업에 적합한 도구 사용
- 키보드 단축키를 활용하여 생산성 향상
- 일반적인 인터페이스 문제 해결
마스터 키 워크플로:
- 최적의 생산성을 위해 작업 영역 설정
- 구상부터 게시까지 양식 작성
- 여러 디바이스에서 양식 테스트 및 미리보기
- 양식 프로젝트에서 팀원들과 공동 작업
빠르게 시작하기
첫 사용자: 가장 자주 사용하는 핵심 기능을 배우려면 필수 도구에서 시작해 보십시오.
숙련된 사용자: 전문 도구 및 통합을 보려면 고급 기능으로 이동합니다.
빠른 참조: 빠른 조회를 위해 인터페이스 개요 및 키보드 단축키 섹션을 사용합니다.
인터페이스 개요
범용 편집기 인터페이스는 특정 작업에 맞게 설계된 네 가지 기본 영역으로 구성됩니다.
인터페이스 플로우: 대부분의 사용자는 주로 편집기 캔버스 (D)와 속성 패널 ©에서 작업하며, 미리보기 및 게시 같은 작업을 위해 도구 모음 (B)을 사용합니다.
양식 작성을 위한 필수 도구
범용 편집기를 처음 사용하는 경우 여기에서 시작하십시오. 대부분의 양식 작성 작업에 사용되는 핵심 도구는 다음과 같습니다.
1. 편집기 캔버스 - 기본 작업 영역
편집기 캔버스 는 양식을 시각적으로 작성할 수 있는 곳입니다. 이 영역은 양식이 사용자에게 어떻게 표시되는지 정확하게 보여 줍니다.
주요 작업:
- 속성 패널에서 추가 버튼을 클릭하여 구성 요소를 추가 합니다.
- 캔버스에서 요소를 직접 클릭하여 요소를 선택 합니다.
- 구성 요소를 구성할 때 실시간 변경 사항을 확인 합니다.
- 미리보기 모드에서 상호 작용 테스트
2. 속성 패널 - 구성 요소 구성
속성 패널(오른쪽)은 선택한 구성 요소를 사용자 정의하고 양식 구조를 관리할 수 있는 곳입니다.
주요 기능:
- 속성 모드(
d단축키) - 선택한 구성 요소 설정을 구성합니다. - 콘텐츠 트리(
f단축키) - 양식 구조를 탐색합니다. - 구성 요소 추가(
a단축키) - 새 양식 필드를 삽입합니다. - 구성 요소 작업 - 선택한 요소를 복제하거나 삭제합니다.
3. 도구 모음 필수 항목 - 미리보기 및 게시
범용 편집기 도구 모음 은 양식을 테스트하고 게시하기 위한 주요 작업을 제공합니다.
알아두어야 할 도구:
- 미리보기 모드(
p단축키) - 사용자가 경험하는 것과 동일하게 양식을 테스트합니다. - 반응형 모드 - 모바일 디바이스에서 양식이 어떻게 보이는지 확인합니다.
- 페이지 열기(
o단축키) - 새 탭에서 양식을 조회합니다. - 게시 - 양식을 라이브 상태로 만들어 사용자가 액세스할 수 있도록 합니다.
4. 빠른 시작 워크플로
첫 번째 양식의 경우:
- 적응형 양식 구성 요소 추가 -
Adaptive Form구성 요소를 섹션에 삽입합니다. - 작성 시작 -
a단축키를 사용하여 추가 버튼으로 구성 요소를 추가합니다. - 필드 구성 - 구성 요소를 선택하고
d단축키를 사용하여 속성 모드 를 사용합니다. - 양식 테스트 -
p단축키를 사용하여 미리보기 모드 로 양식과 상호 작용합니다. - 모바일 보기 확인 - 모바일 테스트를 위해 반응형 모드 로 전환합니다.
- 라이브로 전환 - 준비되면 게시 를 클릭합니다.
유효성 검사 체크포인트:
- 양식 필드를 추가하고 구성할 수 있습니까?
- 미리보기 모드가 제대로 작동합니까?
- 모든 필수 필드가 올바르게 설정되었습니까?
- 양식이 모바일 디바이스에서 잘 표시됩니까?
Experience Cloud 헤더
Experience Cloud 헤더 는 탐색 및 계정 관리 도구를 제공합니다. 대부분의 양식 작성자는 Adobe 도구 간에 전환하거나 도움말에 액세스하기 위해 이 기능을 가끔 사용합니다.
핵심 요소:
가장 일반적인 용도:
- 도움말 보기 - 도움말 아이콘을 클릭하여 설명서 및 지원을 확인합니다.
- 조직 전환 - 여러 조직에 대한 액세스 권한이 있는 경우 조직 드롭다운을 사용합니다.
범용 편집기 도구 모음
범용 편집기 도구 모음 에는 기본 양식 편집 및 게시 도구가 포함되어 있습니다. 이러한 도구는 사용 빈도와 일반적인 워크플로에 따라 구성되어 있습니다.
일일 워크플로 도구
다음 도구는 대부분의 양식 작성 세션에서 사용됩니다.
미리보기 모드 (p 단축키)
용도: 사용자가 경험하는 것과 동일하게 양식을 테스트합니다.
사용 시기: 게시 전, 변경 후, 양식 기능 테스트
모범 사례: 주요 변경 후에는 항상 미리보기하여 문제를 조기에 발견합니다.
반응형 모드
용도: 모바일 디바이스에서 양식이 어떻게 표시되는지 확인합니다.
사용 시기: 양식 작성 후, 게시 전
모범 사례: 항상 모바일 보기를 테스트합니다. 많은 사용자가 휴대폰으로 양식에 액세스합니다.
페이지 열기 (o 단축키)
용도: 편집기 인터페이스 없이 새 탭에서 양식을 확인합니다.
사용 시기: 전체 화면 테스트를 위해 관련자와 공유하여 검토합니다.
게시
용도: 양식을 라이브 상태로 만들어 사용자가 액세스할 수 있도록 합니다.
사용 시기: 미리보기 및 반응형 모드에서 철저한 테스트를 거친 후
게시 전 유효성 검사 체크리스트:
- 미리보기 모드에서 양식을 테스트했습니다.
- 모바일 반응성을 확인했습니다.
- 모든 필수 필드가 구성되었습니다.
- 제출 작업이 올바르게 작동하고 있습니다.
탐색 도구
홈 버튼
용도: 범용 편집기 시작 페이지로 돌아갑니다.
사용 시기: 다른 양식으로 작업 시작 시
위치 표시줄 (l 단축키)
용도: URL을 통해 모든 양식으로 직접 이동합니다.
사용 시기: 특정 양식 간에 빠른 전환이 필요할 때 사용합니다.
고급 구성 도구
이러한 도구는 특정 시나리오 또는 고급 설정에 사용됩니다.
AEM 양식 속성
용도: 양식 데이터 모델(FDM)과 같은 양식 수준 설정을 구성하여 제출 작업 및 게시 날짜를 설정합니다.
사용 시기: 데이터 통합 설정, 게시 일정 예약
양식 속성 패널에는 다음 섹션이 포함되어 있습니다.
-
제출: 사용자가 양식을 제출한 후 발생하는 작업을 정의합니다. 이메일을 통한 데이터 전송, SharePoint에 제출, 양식 데이터 모델 사용 또는 Adobe Experience Platform 또는 Microsoft Power Automate와 같은 서비스와의 통합과 같은 여러 제출 작업 중에서 선택합니다. 지원되는 제출 작업의 전체 목록은 제출 작업 문서를 참조하십시오.
-
미리 채우기: 사용자가 양식과 상호 작용하기 전에 양식 필드가 자동으로 채워지는 방법을 구성합니다. 양식 데이터 모델(FDM)과 같은 데이터 소스에 연결하거나 URL 매개변수를 사용하여 필드를 미리 채워 사용자 경험을 향상하고 수동 입력을 줄일 수 있습니다. 자세한 내용은 미리 채우기 서비스 문서를 참조하십시오.
-
감사 페이지: 양식 제출 후 사용자가 보는 내용을 사용자 정의합니다. 확인 메시지를 표시하거나 다른 웹 페이지로 리디렉션하여 원활하고 전문적인 완료 경험을 보장할 수 있습니다. 양식에 대한 감사 메시지를 구성하는 방법에 대해 알아보려면 감사 메시지 구성 문서를 참조하십시오.
규칙 편집기 (얼리 액세스)
용도: 동적 비헤이비어, 유효성 검사 및 조건 논리를 추가합니다.
사용 시기: 복잡한 비즈니스 논리를 사용하여 대화형 양식을 만드는 경우
인증 헤더 설정
용도: 개발 테스트를 위해 사용자 정의 인증 헤더를 설정합니다.
사용 시기: 인증이 필요한 양식을 사용하여 로컬 개발을 수행하는 경우
추가 옵션 (줄임표 메뉴)
용도: 게시 취소와 같이 자주 사용되지 않는 작업에 액세스합니다.
사용 시기: 양식을 오프라인으로 전환하거나 고급 옵션에 액세스하는 경우
속성 패널
속성 패널(오른쪽)은 양식을 작성하고 구성하기 위한 제어 센터입니다. 선택하는 항목에 따라 달라지며 다양한 작업에 맞는 다양한 도구를 제공합니다.
핵심 양식 작성 도구
다음 도구는 양식을 생성하고 구성하는 데 필수적입니다.
구성 요소 추가 (a 단축키)
용도: 새로운 양식 필드 및 요소를 삽입합니다.
작동 방식: 선택한 컨테이너에 사용 가능한 구성 요소를 표시합니다.
공통 구성 요소:
- 텍스트 입력, 이메일, 전화번호 필드
- 드롭다운, 라디오 버튼, 확인란
- 파일 업로드, 날짜 선택기
- 조직을 위한 패널 및 섹션
속성 모드 (d 단축키)
용도: 선택한 구성 요소에 대한 설정을 구성합니다.
사용 시기: 구성 요소를 추가하여 동작을 사용자 정의한 후
키 설정:
- 필드 레이블 및 플레이스홀더 텍스트
- 유효성 검사 규칙 (필수, 형식, 길이)
- 기본값 및 도움말 텍스트
- 조건부 가시성 규칙
콘텐츠 트리 (f 단축키)
용도: 양식 구조를 탐색하고 구성합니다.
사용 시기: 여러 섹션이 있는 복잡한 양식, 특정 구성 요소를 찾는 경우
이점:
- 모든 구성 요소로의 빠른 탐색
- 시각적 양식 계층 구조
- 요소의 간편한 재정렬
구성 요소 작업
용도: 기존 구성 요소를 관리합니다.
사용 가능한 액션:
- 복제 - 구성 요소를 빠르게 복사
- 삭제 - 구성 요소 제거 (확인 프롬프트 없음)
고급 기능 및 통합
다음 도구는 정교한 양식 기능을 지원합니다.
데이터 소스
용도: 양식을 백엔드 데이터 시스템에 연결합니다.
사용 시기: 데이터베이스 또는 외부 서비스에 대한 읽기/쓰기가 필요한 양식에서 사용합니다.
기능:
- 양식 데이터 모델(FDM) 구성
- 동적 데이터 채우기
- 외부 시스템에 제출
베리에이션 생성
용도: AI를 사용하여 양식 콘텐츠의 다양한 버전을 만듭니다.
사용 시기: 다양한 텍스트, 레이아웃 또는 접근 방식을 실험하는 경우
| code language-none |
|---|
|
자세히 알아보기: 베리에이션 생성 안내서
콘텐츠 초안
용도: 예비 텍스트 버전을 만들고 저장합니다.
사용 시기: 양식 복사본을 반복적으로 작성하거나 대체 텍스트 옵션을 저장하는 경우
A/B 테스트
용도: 양식 변형을 비교하여 성능을 최적화합니다.
사용 시기: 전환율 최적화, 다양한 디자인 테스트
실험
용도: 양식 디자인에 대한 통제된 테스트를 실행합니다.
사용 시기: 데이터 기반 양식 최적화, 사용자 경험 테스트
| code language-none |
|---|
|
작업 관리
용도: 양식 프로젝트에 대한 팀 워크플로를 구성합니다.
사용 시기: 여러 사용자가 참여하는 양식 개발, 프로젝트 추적
개인화
용도: Adobe Experience Platform에 연결하여 맞춤형 경험을 제공합니다.
사용 시기: 사용자 데이터를 기반으로 개인화된 양식 생성
| code language-none |
|---|
|
편집기 캔버스
편집기 캔버스 는 양식을 시각적으로 작성하는 주요 작업 영역입니다. 이 기능은 양식이 사용자에게 어떻게 표시될지 정확하게 보여 주고 변경 사항을 적용할 때 실시간 피드백을 제공합니다.
주요 기능:
- WYSIWYG 편집 - 변경 사항을 즉시 확인합니다.
- 직접 상호 작용 - 구성 요소를 클릭하여 선택하고 편집합니다.
- 실시간 미리보기 - 미리보기 모드로 전환하여 기능을 테스트합니다.
- 반응형 디스플레이 - 디바이스 보기를 토글하여 모바일 호환성을 확인합니다.
모범 사례:
- 구조로 시작 - 세부 구성 요소 앞에 주요 섹션을 추가합니다.
- 정기적 테스트 - 미리보기 모드를 정기적으로 사용하여 문제를 조기에 포착합니다.
- 모바일 우선 고려 - 디자인 프로세스 전반에 걸쳐 반응형 모드를 확인합니다.
키보드 단축키
다음 단축키를 익히면 양식을 더 빠르고 효율적으로 작성할 수 있습니다.
adfpol전문가 팁: 이들 단축키를 조합하여 사용해 보십시오. 예를 들어 구성 요소를 선택하고 d를 눌러 구성한 다음 p를 눌러 변경 사항을 테스트합니다.
일반적인 워크플로
첫 번째 양식 만들기
- 구조 추가 -
a를 사용하여 양식 섹션에 대한 패널을 추가합니다. - 필드 추가 - 텍스트 입력, 이메일 및 기타 구성 요소를 삽입합니다.
- 속성 구성 - 각 필드를 선택하고
d를 눌러 레이블 및 유효성 검사를 설정합니다. - 기능 테스트 -
p를 눌러 양식을 미리보기 및 테스트합니다. - 모바일 보기 확인 - 반응형 모드를 사용하여 모바일 디스플레이를 확인합니다.
- 게시 - 라이브로 전환할 준비가 되면 게시를 클릭합니다.
기존 양식 편집
- 구조 탐색 - 콘텐츠 트리(
f)를 사용하여 구성 요소를 빠르게 찾습니다. - 선택 및 수정 - 구성 요소를 직접 클릭하거나 콘텐츠 트리를 사용합니다.
- 변경 사항 테스트 - 중요한 변경 사항 적용 후에는
p를 사용하여 미리 봅니다. - 워크플로 유효성 검사 - 다시 게시하기 전에 전체 양식 플로우를 테스트합니다.
팀과 공동 작업
- 작업 관리 사용 - 팀원들에게 특정 양식 섹션을 할당합니다.
- 검토를 위해 공유 - 페이지 열기(
o)를 사용하여 깔끔한 미리보기를 공유합니다. - 함께 테스트 - 미리보기 모드를 사용하여 공동 테스트 세션을 수행합니다.
- 진행 상황 추적 - 작업 업데이트에 대한 알림을 확인합니다.
일반적인 문제 해결
인터페이스 문제
문제: 도구 모음 버튼, 속성 패널 또는 기타 인터페이스 요소가 나타나지 않음
솔루션:
- 페이지 새로 고침 - 단순한 브라우저 새로 고침으로 로딩 문제가 해결되는 경우가 많습니다.
- 브라우저 호환성 확인 - Chrome, Firefox 또는 Safari를 사용합니다.
- 브라우저 캐시 지우기 - 오래되었을 수 있는 캐시된 파일을 제거합니다.
- 권한 확인 - 양식을 편집할 수 있는 적절한 권한이 있는지 확인합니다.
문제: 구성 요소를 선택할 수 없거나 속성 패널이 업데이트되지 않음
솔루션:
- 구성 요소를 직접 클릭 - 비어 있는 영역을 클릭하지 않습니다.
- 콘텐츠 트리 사용 -
f를 누르고 트리에서 구성 요소를 선택합니다. - 중복되는 요소 확인 - 일부 구성 요소가 다른 구성 요소를 차단할 수 있습니다.
- 양식 다시 로드 - 위치 표시줄(
l)을 사용하여 현재 양식을 다시 로드합니다.
문제: 미리보기 모드가 올바르게 작동하지 않거나 오류가 표시됨
솔루션:
- 양식 유효성 검사 확인 - 모든 필수 필드가 올바르게 구성되었는지 확인합니다.
- 편집 모드에서 먼저 테스트 - 미리보기 전에 구성 요소가 작동하는지 확인합니다.
- 브라우저 캐시 지우기 - 캐시된 스크립트가 미리보기에 방해가 될 수 있습니다.
- 구성 요소 구성 확인 - 속성 모드 설정을 검토하여 오류를 확인합니다.
효율적인 양식 작성을 위한 모범 사례
조직을 위한 팁
- 설명적인 이름 사용 - 속성 모드에서 구성 요소에 명확하게 레이블을 지정합니다.
- 관련 필드 그룹화 - 패널을 사용하여 양식 섹션을 논리적으로 구성합니다.
- 작성 전 계획 수립 - 작성을 시작하기 전에 양식 구조를 스케치합니다.
- 단순하게 유지 - 너무 많은 필드로 사용자에게 부담을 주지 마십시오.
사용자 경험
- 정기적 테스트 - 주요 변경 사항이 있을 때마다 미리보기 모드를 사용합니다.
- 사용자처럼 생각하기 - 전체 양식 작성 경험을 고려합니다.
- 명확한 레이블 제공 - 사용자가 필드 목적을 쉽게 알 수 있도록 합니다.
- 유용한 텍스트 추가 - 복잡한 필드에 도움말 텍스트를 사용합니다.
성능 최적화
- 구성 요소 최소화 - 필요한 양식 필드만 사용합니다.
- 이미지 최적화 - 양식에 사용되는 이미지를 압축합니다.
- 모바일에서 테스트 - 느린 모바일 연결에서도 좋은 성능을 보장합니다.
- 조기에 유효성 검사 - 제출 오류를 방지하기 위해 적절한 유효성 검사를 설정합니다.
다음 단계
지금까지 범용 편집기 인터페이스에 대한 다음 내용을 알아보았습니다.
- 간단한 양식으로 연습 - 기본적인 필드로 시작하여 익숙해집니다.
- 고급 기능 탐색 - 준비가 되면 AI 기반 도구 및 통합을 사용해 보십시오.
- 양식 작성 학습 - 시작 안내서를 참조하십시오.
- 규칙 편집기 마스터 - 규칙 편집기 안내서로 동적 비헤이비어를 추가합니다.
기억하십시오. 범용 편집기는 양식 작성을 직관적으로 만들기 위해 설계되었습니다. 핵심 기능부터 시작하여 필요에 따라 점진적으로 고급 기능을 탐색해 보십시오.