범용 편집기를 사용하여 반응형 양식 만들기 - 전체 안내서
현대 웹 환경에서는 끊임없이 확장되는 다양한 디바이스 및 화면 크기에서 원활하게 작동하는 양식이 필요합니다. 대형 데스크탑 모니터부터 소형 스마트폰 화면에 이르기까지, 사용자는 선택한 디바이스에 관계없이 일관되고 직관적인 경험을 기대합니다. 반응형 양식을 만드는 것은 더 이상 선택 사항이 아닌 전문가 수준의 접근 가능하고 전환에 최적화된 디지털 경험을 제공하기 위한 기본적인 요구 사항입니다.
범용 편집기는 다양한 화면 크기, 입력 방법 및 사용자 컨텍스트에 지능적으로 적응하는 반응형 양식을 개발하기 위한 포괄적인 도구와 방법론을 제공합니다. 이 안내서에서는 사용성, 접근성 및 시각적 매력을 유지하면서 모든 디바이스에서 탁월하게 수행되는 양식을 만드는 데 필요한 기술적 토대, 구현 전략 및 최적화 기술을 살펴봅니다.
반응형 양식 생성에는 두 가지 주요 활동이 포함됩니다.
- 반응형 테스트: 디바이스 에뮬레이터를 사용하여 다양한 화면 크기에서 양식을 미리 보고 테스트합니다.
- 반응형 디자인: 다양한 디바이스에 원활하게 적응하는 레이아웃 패턴을 선택하고 구현합니다.
이 안내서에서는 다음 방법을 배우게 됩니다.
- 데스크탑, 태블릿 및 모바일 디바이스에서 양식 테스트
- 콘텐츠에 적합한 레이아웃 패턴 선택
- 반응형 디자인 모범 사례 적용
- 일반적인 반응형 양식 문제 해결
- 모바일 성능을 위한 양식 최적화
1부: 여러 디바이스에서 양식 테스트
여러 디바이스에서 양식을 테스트하면 사용자가 반응형 문제를 겪기 전에 문제를 식별하고 해결할 수 있습니다. 범용 편집기는 다양한 화면 크기 및 방향을 시뮬레이션하는 에뮬레이터 모드를 제공합니다.
양식을 테스트하는 방법
1단계: 디바이스 에뮬레이터 열기
- 범용 편집기에서 양식을 엽니다.
- 도구 모음에서
- 디바이스 선택기 메뉴가 나타납니다.
2단계: 테스트할 디바이스 선택
- 데스크탑(폭 1200px 이상): 기본 편집 보기
- 태블릿(768px–1199px 폭): 중간 화면 테스트
- 모바일(320px–767px 폭): 작은 화면 테스트
- 사용자 정의: 특정 디바이스에 대한 정확한 차원 지정
3단계: 디바이스 방향 테스트
화면 회전 아이콘을 사용하여 다음 두 가지를 모두 테스트합니다.
- 세로 모드: 표준 모바일 방향
- 가로 모드: 회전된 태블릿 또는 휴대폰 보기
디바이스 테스트 결과
각 디바이스 유형은 고유한 반응형 비헤이비어를 나타냅니다.
디바이스별 시각적 예시
데스크탑 보기(1200px 이상):
나란히 있는 양식 필드가 포함된 전체 폭 레이아웃
태블릿 보기(768px–1199px):
구성 요소 간격이 조정된 중간 폭 레이아웃
모바일 보기(320px–767px):
겹쳐진 구성 요소가 있는 단일 열 레이아웃
사용자 정의 디바이스 보기:
타기팅된 테스트에 대해 사용자가 지정한 차원
테스트 워크플로
새 양식의 경우:
- 데스크탑 보기에서 빌드: 전체 기능으로 시작합니다.
- 태블릿에서 테스트: 중간 화면에 대한 적응성을 확인합니다.
- 모바일에서 유효성 검사: 작은 화면에서도 사용성을 보장합니다.
- 반응형 문제 해결: 필요에 따라 레이아웃을 조정합니다.
- 모든 디바이스 다시 테스트: 모든 크기에서 수정 사항을 확인합니다.
기존 양식의 경우:
- 빠른 모바일 확인: 양식이 휴대폰에서 작동합니까?
- 문제 영역 식별: 레이아웃 및 사용성 문제를 기록해 두십시오.
- 체계적인 테스트: 각 디바이스 크기를 철저히 테스트합니다.
- 문제 문서화: 해결해야 할 사항을 추적합니다.
- 수정 사항 구현 체계적으로 문제를 해결합니다.
2부: 반응형 레이아웃 패턴 선택
레이아웃 패턴은 양식 콘텐츠가 다양한 화면 크기에 맞게 조정되는 방법을 결정합니다. 올바른 패턴은 사용자 경험과 모바일 성능을 모두 향상시킵니다.
레이아웃 패턴 개요
빠른 결정 안내서
다음과 같은 경우 패널 레이아웃을 사용합니다.
- 콘텐츠가 뚜렷한 카테고리로 나뉘어 있습니다.
- 사용자가 여러 섹션을 한 번에 봐야 합니다.
- 콘텐츠가 비교적 단순합니다.
다음과 같은 경우 마법사 레이아웃을 사용합니다.
- 양식에 여러 논리적 단계가 있습니다.
- 인지 부하를 줄이고자 합니다.
- 모바일 사용자가 주요 대상자입니다.
다음과 같은 경우 아코디언 레이아웃을 사용합니다.
- 양식에 선택 사항 또는 보조 콘텐츠가 포함되어 있습니다.
- 공간 절약이 중요합니다.
- 콘텐츠를 논리적으로 그룹화할 수 있습니다.
패널 레이아웃
패널 레이아웃은 관련 콘텐츠를 시각적으로 구별되는 섹션으로 구성하여 사용자가 여러 섹션을 한 번에 볼 수 있도록 합니다. 이 레이아웃은 대형 화면에서 나란히 표시하면 유용한 분류된 정보가 포함된 양식에 이상적입니다.
반응적 비헤이비어
- 데스크탑(1200px 이상): 패널이 최대 가시성을 위해 나란히 또는 그리드로 표시됩니다.
- 태블릿(768px–1199px): 명확성을 유지하기 위해 패널이 적절한 간격으로 세로로 쌓입니다.
- 모바일(320px–767px): 패널이 단일 열 레이아웃으로 표시되며, 섹션 간에 명확한 구분으로 손쉬운 탐색이 가능합니다.
구현 방법
- 양식에 패널 구성 요소를 추가합니다.
- 논리적 구성을 유지하도록 각 패널 내에 관련 필드를 그룹화합니다.
- 각 패널 섹션에 명확하고 설명적인 제목을 할당합니다.
- 시각적 혼란을 방지하기 위해 패널 간에 충분한 간격을 두도록 합니다.
모범 사례
- 사용자의 부담을 줄이기 위해 데스크탑에서 패널 수를 3개 또는 4개로 제한합니다.
- 사용자 이해를 돕기 위해 각 패널에 대해 간결하고 설명적인 제목을 사용합니다.
- 인지 부하를 최소화하도록 패널 내에서 필드를 논리적으로 구성합니다.
- 모든 플랫폼에서 사용성을 보장하도록 터치 디바이스에서 패널 탐색을 테스트합니다.
일반적인 사용 사례
- 구직 신청서: 개인 정보, 교육, 경력 및 참고 자료 섹션으로 구성합니다.
- 제품 등록: 기본 세부 사항, 기술 사양 및 보증 정보에 대한 패널로 구성합니다.
- 설문 조사 양식: 인구 통계, 선호 사항, 피드백 및 연락처 정보에 대한 그룹으로 구성합니다.
마법사 레이아웃
마법사 레이아웃은 한 번에 한 섹션씩 표시하여 다단계 프로세스를 통해 사용자를 안내합니다. 이 레이아웃은 프로세스를 관리 가능한 단계로 나누어 인지 부하를 줄이고 완료율을 높이므로 복잡한 양식에 특히 효과적입니다.
반응적 비헤이비어
- 모든 디바이스: 단일 단계 초점을 유지하며, 이는 모바일 사용자에 최적화되어 있습니다.
- 단계 콘텐츠: 각 단계는 반응형으로 조정되며, 화면 크기에 따라 필드를 쌓거나 나란히 배열합니다.
- 탐색: 손쉬운 상호 작용을 위해 적절한 간격의 터치 친화적인 버튼이 포함됩니다.
- 진행률 표시기: 진행률 막대 또는 단계 표시기가 다양한 디바이스에 맞게 적절히 확장되어 완료 상태에 대한 명확한 피드백을 제공합니다.
구현 방법
- 양식에 마법사 구성 요소를 삽입합니다.
- 각 단계를 집중적이고 관리하기 쉽게 유지하기 위해 양식을 논리적인 단계로 나눌 수 있습니다. 3~7개 단계가 이상적입니다.
- 사용자가 프로세스 내 위치를 이해하도록 진행률 표시기를 추가합니다.
- 다음, 뒤로, 저장 버튼과 같은 명확한 탐색 컨트롤을 제공합니다.
모바일 최적화 팁
- 접근성을 높이기 위해 탐색 컨트롤에 대해 대형 터치 대상(높이 44px 이상)을 사용합니다.
- 작은 화면에서도 단계 표시기가 명확하게 표시되고 읽기 쉬운지 확인합니다.
- 단계당 필드 수를 제한하여 스크롤을 최소화하고 초점을 개선합니다.
- 사용자가 양식을 종료할 경우 데이터 손실을 방지하기 위해 자동 저장 기능을 활성화합니다.
모범 사례
- 각 단계가 이전 단계를 기반으로 논리적 진행률을 따르도록 단계를 설계합니다.
- 각 단계에 대해 명확하고 설명적인 제목을 사용하여 사용자 기대치를 설정합니다.
- 각 단계에서 사용자 입력을 검증하여 오류를 조기에 파악하고 어려움을 줄입니다.
- 사용자가 데이터를 잃지 않고 이전 정보를 검토하거나 편집할 수 있도록 뒤로 탐색할 수 있도록 합니다.
일반적인 사용 사례
- 보험 청구: 사고 세부 정보, 증거 제출, 개인 정보 및 검토 단계를 포함합니다.
- 계정 설정: 기본 정보, 환경 설정, 보안 설정 및 확인 단계를 포함합니다.
- 주문 프로세스: 제품 선택, 배송 정보, 결제 세부 사항 및 주문 요약 단계를 포함합니다.
아코디언 레이아웃
아코디언 레이아웃은 콘텐츠를 축소 가능한 섹션으로 구성하여 공간을 절약하므로 선택 사항 또는 보조 정보에 적합합니다. 이 레이아웃은 논리적으로 그룹화할 수 있고 한 번에 모두 표시할 필요가 없는 콘텐츠가 포함된 양식에 특히 효과적입니다.
반응적 비헤이비어
- 모바일 성능: 관련 섹션만 확장되므로 스크롤 필요성이 줄고 로드 시간이 개선됩니다.
- 터치에 최적화된 헤더: 섹션 헤더를 쉽게 탭하고 확장하여 모바일 디바이스에서 자연스러운 제스처를 지원합니다.
- 부드러운 애니메이션: 섹션 확장 및 축소를 통해 사용자 상호 작용에 대한 시각적 피드백을 제공합니다.
- 공간 효율성: 축소된 섹션은 수직 공간을 최소화하여 모든 디바이스에서 양식을 탐색하기 쉽게 만듭니다.
구현 방법
- 양식에 아코디언 구성 요소를 추가합니다.
- 각 아코디언 섹션 내에 관련된 선택 사항 또는 보조 콘텐츠를 그룹화합니다.
- 각 섹션에 대해 명확하고 설명적인 헤더를 사용하여 사용자가 포함된 정보를 이해하도록 돕습니다.
- 중요도 및 사용자 요구 사항에 따라 각 섹션에 적절한 기본 열기 또는 닫기 상태를 설정합니다.
모바일의 이점
- 사용되지 않는 섹션을 축소하여 스크롤을 줄여 사용자가 한 번에 한 섹션에 집중할 수 있도록 합니다.
- 터치 친화적인 상호 작용이 자연스러운 확장/축소 제스처를 지원합니다.
- 활성 콘텐츠만 표시되므로 더 빠르게 로드됩니다.
- 사용자는 특정 시점에 필요한 정보만 볼 수 있으므로 집중도가 향상됩니다.
모범 사례
- 사용자가 섹션을 확장하기 전에 무엇을 기대해야 하는지 알 수 있도록 명확한 섹션 헤더를 사용합니다.
- 이해를 돕기 위해 각 섹션 내에 관련 콘텐츠를 논리적으로 그룹화합니다.
- 즉각적인 주의가 필요한 경우 중요한 섹션을 확장된 상태로 시작하도록 설정합니다.
- 사용자가 확장할 섹션을 결정하는 데 도움이 되도록 간결한 섹션 미리보기 또는 요약을 제공합니다.
일반적인 사용 사례
- 제품 구성: 기본 옵션, 고급 설정, 액세서리 및 지원에 대한 섹션으로 구성합니다.
- FAQ 양식: 계정, 청구, 기술 및 일반 질문에 대한 그룹으로 구성합니다.
- 설정 양식: 개인 정보, 알림, 모양 및 고급 옵션에 대한 섹션으로 구성합니다.
3부: 반응형 디자인 모범 사례
디바이스 유형별 모범 사례
레이아웃 및 상호 작용:
- 모든 양식 콘텐츠에 단일 열 레이아웃을 사용하여 가독성과 사용 편의성을 극대화합니다.
- 안정적인 터치 상호 작용을 위해 모든 버튼 및 대화형 요소의 높이가 44px 이상인지 확인합니다.
- 뒤로 및 다음 버튼이 표시되도록 하여 명확하고 간단한 탐색을 제공합니다.
- 긴 양식을 분할하여 각 섹션 내에서 스크롤 필요성을 최소화합니다.
- 모바일 키보드를 표시하도록 첫 번째 입력 필드에 자동으로 초점을 맞춥니다.
필드 지침:
- 텍스트 필드는 터치 입력에 충분한 여백을 두고 화면의 전체 폭을 차지해야 합니다.
- 최적의 모바일 사용성을 위해 기본 드롭다운/선택 요소를 사용합니다.
- 일관된 모바일 경험을 위해 기본 날짜 선택기를 구현합니다.
- 쉽게 액세스할 수 있도록 파일 업로드 영역을 크게 만들고 명확하게 레이블을 지정합니다.
레이아웃 및 사용성:
- 관련 필드에 2열 레이아웃을 사용하면 화면 공간을 더 넓게 활용할 수 있습니다.
- 세로 및 가로 방향 모두에서 양식 모양 및 사용성을 테스트합니다.
- 모든 컨트롤에 쉽게 액세스할 수 있도록 터치 및 마우스 입력을 고려하여 디자인합니다.
- 명확한 시각적 계층 및 가독성을 유지하면서 콘텐츠 영역 크기를 늘립니다.
고급 기능 및 레이아웃:
- 여러 열 레이아웃을 사용하여 수평 공간을 효율적으로 사용하고 수직 스크롤을 줄입니다.
- 고급 사용자를 지원하기 위해 자주 사용되는 작업에 대한 키보드 단축키를 제공합니다.
- 대화형 요소에 대한 호버 상태 및 시각적 피드백을 구현합니다.
- 복잡한 양식에 대한 명확하고 상세한 오류 메시지로 고급 유효성 검사를 제공합니다.
미디어 쿼리 중단점을 사용하여 사용자 정의 레이아웃 구성
범용 편집기 를 사용하여 적응형 양식에서 구성 요소에 대한 사용자 정의 레이아웃을 빌드할 때 CSS 미디어 쿼리 중단점 을 사용하여 반응형 동작을 정의해야 합니다. 이렇게 하면 서로 다른 디바이스와 화면 크기에서 양식이 올바르게 렌더링됩니다.
권장 중단점(AEM 핵심 구성 요소 기반)
min-width: 1200pxmin-width: 768px and max-width: 1199pxmax-width: 767px핵심 사항
- 이러한 중단점을 사용하여 서로 다른 디바이스에서 구성 요소의 크기를 조정하거나 쌓거나 숨기는 방법을 제어할 수 있습니다.
- 일관된 UX를 위해 조직의 반응형 디자인 지침을 따르십시오.
- 유용성과 접근성을 보장하기 위해 여러 디바이스 및 방향에서 레이아웃을 테스트하십시오.
/* Example: Stack form fields on smaller screens */
@media (max-width: 767px) {
.custom-form-container {
display: flex;
flex-direction: column;
}
}
문제 해결
레이아웃 문제
가능한 원인:
- 작은 화면에 적응하지 않는 고정 폭 요소
- 모바일 스타일을 재정의하는 데스크탑 중심 CSS
- 컨테이너를 오버플로하는 이미지 또는 콘텐츠
수정 방법:
- 모든 이미지 및 컨테이너가 상대적 또는 백분율 기반 크기 조정을 사용하도록 합니다.
- 모바일 중심 CSS 접근 방식으로 시작하고 더 큰 화면에 대한 개선 사항을 추가합니다.
- 디바이스 에뮬레이터 및 실제 디바이스를 모두 사용하여 양식을 테스트합니다.
- 고정된 차원 사용을 피하고 유연한 레이아웃을 사용합니다.
가능한 원인:
- 44px x 44px보다 작은 버튼 또는 링크
- 대화형 요소가 너무 가깝게 배치됨
- 기본 터치 대상 크기를 줄이는 사용자 정의 CSS
수정 방법:
- 모든 대화형 요소가 44px x 44px 이상인지 확인합니다.
- 버튼, 링크 및 기타 컨트롤 사이에 적절한 간격을 추가합니다.
- 마우스뿐만 아니라 실제 터치 디바이스로 테스트합니다.
- 접근성을 위해 필요에 따라 터치 대상 영역을 확장합니다.
가능한 원인:
- 줄바꿈되지 않는 긴 텍스트 또는 레이블
- 고정 폭 컨테이너
- 반응형으로 크기가 조정되지 않는 이미지
수정 방법:
- 모든 레이블 및 콘텐츠에 대해 텍스트 줄바꿈을 활성화합니다.
- 컨테이너에 맞게 크기가 조정되는 반응형 이미지를 사용합니다.
- 다양한 콘텐츠 길이에 맞게 조정되는 유연한 레이아웃을 디자인합니다.
- 짧은 콘텐츠와 긴 콘텐츠를 모두 사용하여 적응성을 테스트합니다.
성능 문제
가능한 원인:
- 크고 최적화되지 않은 이미지
- 무겁거나 과도한 JavaScript
- 동시에 너무 많은 양식 필드가 로드됨
수정 방법:
- 모바일에 맞게 이미지를 최적화하고 적절한 파일 형식을 사용합니다.
- 중요하지 않은 콘텐츠를 지연시키거나 지연 로드합니다.
- 서드파티 스크립트 및 위젯 사용을 최소화합니다.
- 필요한 필드만 로드하도록 양식 필드를 간소화합니다.
테스트 및 유효성 검사 문제
가능한 원인:
- 브라우저 렌더링 엔진의 차이점
- 마우스로 정확하게 시뮬레이션되지 않는 터치 상호 작용
- 네트워크 속도 불일치
수정 방법:
- 에뮬레이터 외에도 항상 실제 디바이스에서 테스트합니다.
- 포괄적인 테스트를 위해 여러 브라우저 및 디바이스를 사용합니다.
- 다양한 네트워크 속도를 시뮬레이션하여 성능 병목 현상을 식별합니다.
- 타깃 대상자 중 실제 사용자로부터 피드백을 수집합니다.
반응형 양식의 성공 지표
사용자 경험:
- 양식 완료율: 모바일 디바이스에서 85% 이상을 목표로 합니다.
- 완료 시간: 모바일 사용자는 데스크탑 완료 시간의 20% 이내에 양식을 완료해야 합니다.
- 오류율: 유효성 검사 오류를 5% 미만으로 유지합니다.
- 이탈 지점: 사용자가 이탈하는 단계를 식별하고 해결합니다.
기술 성능:
- 페이지 로드 시간: 3G 연결에서 3초 미만입니다.
- 핵심 웹 바이탈: Google의 권장 임계값을 충족하거나 초과합니다.
- 접근성 점수: WCAG 2.1 AA 규정 준수를 달성합니다.
- 브라우저 호환성: 모든 주요 브라우저에서 98% 이상의 기능을 보장합니다.
게시 전 체크리스트:
- 실제 모바일 디바이스(에뮬레이터에서만 테스트하는 것이 아님)에서 양식을 테스트합니다.
- 모든 터치 대상의 크기가 44px × 44px 이상인지 확인합니다.
- 지원되는 모든 화면 크기에서 텍스트 가독성을 확인합니다.
- 디바이스 및 브라우저 전반에 걸쳐 양식 유효성 검사가 일관되게 작동하는지 확인합니다.
- 모바일 로드 시간이 3초 미만인지 확인합니다.
- 모든 대화형 요소가 키보드 및 화면 판독기를 통해 접근 가능한지 확인합니다.
- 지원되는 모든 디바이스에서 양식 제출을 테스트합니다.
다음 단계
즉각적인 조치:
- 현재 양식 감사: 디바이스 에뮬레이터를 사용하여 기존 양식을 테스트합니다.
- 빠른 성공 식별: 명백한 모바일 사용성 문제를 먼저 해결합니다.
- 트래픽이 많은 양식의 우선순위 지정: 사용자에게 가장 큰 영향을 미치는 양식에 집중합니다.
- 모바일 중심 접근 방식 구현: 가장 작은 화면 디자인부터 시작합니다.
고급 최적화:
- 성능 모니터링: 분석을 설정하여 양식 지표를 추적합니다.
- A/B 테스트: 다양한 레이아웃과 접근 방식을 실험합니다.
- 사용자 피드백 수집: 실제 사용자로부터 인사이트를 수집합니다.
- 지속적인 개선: 양식을 정기적으로 검토하고 최적화합니다.