반응형 디자인

마지막 업데이트: 2025년 2월 11일

작성 대상:

  • 관리자
  • 개발자

반응형 설계를 통해 동일한 경험을 여러 방향의 여러 디바이스에서 효과적으로 표시할 수 있습니다.

TIP
이 문서에서는 개발자를 위한 반응형 디자인 및 AEM에서 기능을 구현하는 방법에 대한 개요를 제공합니다. 추가 리소스를 사용할 수 있습니다.

개요

경험이 표시되는 클라이언트 뷰포트에 맞게 조정되도록 경험을 설계합니다. 응답형 디자인을 사용하면 동일한 페이지를 두 방향에서 여러 디바이스에 효과적으로 표시할 수 있습니다. 다음 이미지는 페이지가 뷰포트 크기의 변화에 응답할 수 있는 몇 가지 방법을 보여 줍니다.

  • 레이아웃: 작은 뷰포트에는 단일 열 레이아웃을 사용하고 큰 뷰포트에는 다중 열 레이아웃을 사용합니다.
  • 텍스트 크기: 큰 뷰포트에서는 텍스트 크기(예: 제목)를 크게 사용합니다.
  • 컨텐츠: 작은 장치에 표시할 때 가장 중요한 컨텐츠만 포함합니다.
  • 탐색: 다른 페이지에 액세스하기 위해 장치별 도구가 제공됩니다.
  • 이미지: 창 차원에 따라 클라이언트 뷰포트에 적합한 이미지 렌디션을 제공합니다.

응답형 디자인의 예

다양한 창 크기와 방향에 맞는 HTML5를 생성하는 Adobe Experience Manager(AEM) 애플리케이션을 개발합니다. 예를 들어, 다음 뷰포트 너비 범위는 다양한 디바이스 유형 및 방향에 해당합니다

  • 최대 너비 480픽셀(전화, 세로)
  • 최대 너비 767픽셀(휴대폰, 가로)
  • 768픽셀에서 979픽셀 사이의 폭(태블릿, 세로)
  • 980픽셀에서 1199픽셀 사이의 폭(태블릿, 가로)
  • 너비 1200px 이상(데스크탑)

반응형 디자인 동작 구현에 대한 자세한 내용은 다음 항목을 참조하십시오.

디자인한 대로 에뮬레이터 도구 모음을 사용하여 다양한 화면 크기로 페이지를 미리 봅니다.

개발하기 전에

웹 페이지를 지원하는 AEM 애플리케이션을 개발하기 전에 몇 가지 디자인 결정을 내려야 합니다. 예를 들어 다음 정보가 필요합니다.

  • 타깃팅하는 디바이스
  • 대상 뷰포트 크기
  • 타겟팅된 각 뷰포트 크기에 대한 페이지 레이아웃

애플리케이션 구조

일반적인 AEM 애플리케이션 구조는 모든 응답형 디자인 구현을 지원합니다.

  • 페이지 구성 요소가 /apps/<application_name>/components 아래에 있음
  • 템플릿이 /apps/<application_name>/templates 아래에 있음

미디어 쿼리 사용

미디어 쿼리를 사용하면 페이지 렌더링에 CSS 스타일을 선택적으로 사용할 수 있습니다. AEM 개발 도구 및 기능을 사용하면 애플리케이션에서 미디어 쿼리를 효과적이고 효율적으로 구현할 수 있습니다.

W3C 그룹은 이 CSS3 기능 및 구문을 설명하는 미디어 쿼리 권장 사항을 제공합니다.

CSS 파일 만들기

CSS 파일에서 타겟팅하는 장치의 속성을 기반으로 미디어 쿼리를 정의합니다. 다음 구현 전략은 각 미디어 쿼리의 스타일을 관리하는 데 효과적입니다.

  • 클라이언트 라이브러리 폴더를 사용하여 페이지가 렌더링될 때 어셈블되는 CSS를 정의합니다.
  • 별도의 CSS 파일에서 각 미디어 쿼리와 관련 스타일을 정의합니다. 미디어 쿼리의 장치 기능을 나타내는 파일 이름을 사용하는 것이 유용합니다.
  • 별도의 CSS 파일에서 모든 장치에 공통되는 스타일을 정의합니다.
  • 클라이언트 라이브러리 폴더의 css.txt 파일에서 어셈블된 CSS 파일에 필요한 CSS 파일 목록을 정렬합니다.

WKND 자습서에서는 이 전략을 사용하여 사이트 디자인에 스타일을 정의합니다. WKND에서 사용하는 CSS 파일이 /apps/wknd/clientlibs/clientlib-grid/less/grid.less에 있습니다.

AEM 페이지에서 미디어 쿼리 사용

WKND 샘플 프로젝트 및 AEM Project Archetype은(는) 페이지 정책을 통해 clientlib을 포함하는 페이지 핵심 구성 요소를 사용합니다.

자체 페이지 구성 요소가 페이지 핵심 구성 요소를 기반으로 하지 않는 경우 해당 구성 요소의 HTL 또는 JSP 스크립트에 클라이언트 라이브러리 폴더를 포함할 수도 있습니다. 이렇게 하면 반응형 그리드가 작동하는 데 필요한 미디어 쿼리가 있는 CSS 파일이 생성되고 참조됩니다.

HTL 

<sly data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}">
<sly data-sly-call="${clientlib.all @ categories='apps.weretail.all'}"/>

JSP 

<ui:includeClientLib categories="apps.weretail.all"/>

JSP 스크립트는 스타일 시트를 참조하는 다음 HTML 코드를 생성합니다.

<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">

특정 장치에 대한 미리 보기

에뮬레이터를 사용하면 페이지를 다양한 뷰포트 크기로 미리 볼 수 있으므로 응답형 디자인의 동작을 테스트할 수 있습니다. 사이트 콘솔에서 페이지를 편집할 때 에뮬레이터 아이콘을 탭하거나 클릭하여 에뮬레이터를 표시할 수 있습니다.

도구 모음의 에뮬레이터 아이콘

에뮬레이터 도구 모음에서 장치 아이콘을 탭하거나 클릭하여 장치를 선택할 수 있는 드롭다운 메뉴를 표시할 수 있습니다. 장치를 선택하면 페이지가 뷰포트 크기에 맞게 변경됩니다.

에뮬레이터 도구 모음

장치 그룹 지정

장치 목록에 표시되는 장치 그룹을 지정하려면 사이트의 템플릿 페이지에 있는 jcr:content 노드에 cq:deviceGroups 속성을 추가하십시오. 속성 값은 장치 그룹 노드에 대한 경로 배열입니다.

예를 들어 WKND 사이트의 템플릿 페이지는 /conf/wknd/settings/wcm/template-types/empty-page/structure입니다. 그리고 그 아래의 jcr:content 노드에는 다음 속성이 포함됩니다.

  • 이름: cq:deviceGroups
  • 유형: String[]
  • 값: mobile/groups/responsive

장치 그룹 노드가 /etc/mobile/groups 폴더에 있습니다.

응답형 이미지

반응형 페이지는 렌더링되는 장치에 동적으로 적응하여 사용자에게 더 나은 경험을 제공합니다. 하지만 페이지 로드 시간을 최소화하기 위해 자산을 중단점 및 장치에 최적화하는 것도 중요합니다.

핵심 구성 요소 이미지 구성 요소 기능(예: 응용 이미지 선택)입니다.

  • 기본적으로 이미지 구성 요소는 적응형 이미지 서블릿을(를) 사용하여 적절한 렌디션을 전달합니다.
  • 웹에 최적화된 이미지 제공은(는) DAM의 이미지 에셋을 WebP 형식으로 제공하고 이미지의 다운로드 크기를 평균적으로 약 25% 줄일 수 있는 정책의 간단한 확인란을 통해서도 사용할 수 있습니다.

레이아웃 컨테이너

AEM의 레이아웃 컨테이너를 사용하면 응답형 레이아웃을 효율적이고 효과적으로 구현하여 페이지 차원을 클라이언트 뷰포트에 맞출 수 있습니다.

응답형 격자의 GitHub 설명서는 미래 AEM 사이트에 대한 정적 HTML mock-up을 만들 때 AEM 외부에서 AEM 격자를 사용할 수 있도록 해주는 프론트엔드 개발자에게 제공할 수 있는 참조입니다.

TIP
레이아웃 컨테이너의 작동 방식과 콘텐츠에 대한 반응형 레이아웃을 활성화하는 방법에 대한 자세한 내용은 레이아웃 컨테이너 및 레이아웃 모드 구성 문서를 참조하십시오.

중첩된 응답형 격자

프로젝트의 요구 사항을 지원하기 위해 응답형 그리드를 중첩해야 하는 경우가 있을 수 있습니다. 그러나 Adobe이 권장하는 모범 사례는 가능한 한 구조를 평평하게 유지하는 것입니다.

중첩된 응답형 격자를 사용하지 않을 수 없는 경우에는 다음을 확인하십시오.

  • 모든 컨테이너(컨테이너, 탭, 아코디언 등)에는 layout = responsiveGrid 속성이 있습니다.
  • 컨테이너 계층 구조에서 layout = simple 속성을 혼합하지 마십시오.

페이지 템플릿의 모든 구조적 컨테이너가 여기에 포함됩니다.

내부 컨테이너의 열 번호는 외부 컨테이너의 열 번호보다 커서는 안 됩니다. 다음 예제는 이 조건을 충족합니다. 기본(데스크탑) 화면의 경우 외부 컨테이너의 열 번호가 8이면 내부 컨테이너의 열 번호는 4입니다.

container
  @layout = responsiveGrid
  cq:responsive
    default
      @offset = 0
      @width = 8
  container
  @layout = responsiveGrid
    cq:responsive
      default
        @offset = 0
        @width = 4
    text
      @text =" Text Column 1"

<div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--8 aem-GridColumn--offset--default--0">
  <div id="container-c9955c233c" class="cmp-container">
    <div class="aem-Grid aem-Grid--8 aem-Grid--default--8 ">
      <div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
        <div id="container-8414e95866" class="cmp-container">
          <div class="aem-Grid aem-Grid--4 aem-Grid--default--4 ">
            <div class="text aem-GridColumn aem-GridColumn--default--4">
              <div data-cmp-data-layer="..." id="text-1234567890" class="cmp-text">
                <p>Text Column 1</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Experience Manager