설명서TargetTarget 안내서

반응형 경험을 위한 모바일 뷰포트

Last update: Sun Aug 25 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 주제:

모바일 뷰포트를 사용하면 사용자의 Adobe Target 활동을 다양한 크기의 화면에서 미리 볼 수 있습니다.

모바일 뷰포트 미리보기 기능은 다양한 장치, 창 및 화면 크기에서 잘 렌더링되는 반응형 사이트를 위해 설계되었습니다. 반응형 사이트는 데스크탑, 노트북, 태블릿 또는 휴대폰을 포함하여 모든 화면 크기를 자동으로 조정하고 적응합니다.

NOTE

  • 사이트가 응답하고 데스크탑 페이지에 있는 것과 동일한 요소가 다른 구성으로 모바일 페이지에서 사용되는 경우 모바일 뷰포트를 사용하십시오. m.mysite.com과 같이 별도의 구조로 구성된 별도의 모바일 사이트가 있는 경우 여러 페이지 활동을 대신 사용하십시오.

  • 리디렉션 오퍼 오버레이와 겹칠 경우에는 모바일 뷰포트를 사용할 수 없습니다.

뷰포트는 화면의 웹 페이지에 의해 채워진 사각형의 크기로 정의됩니다. 뷰포트는 스크롤 막대 및 도구 모음을 제외한 브라우저 창의 크기입니다. 브라우저는 "CSS 픽셀"을 사용합니다. Retina 화면을 사용하는 장치와 같이 많은 장치의 경우, 뷰포트는 광고된 장치 해상도보다 작습니다.

다음은 자주 찾는 장치에 대한 뷰포트 및 해상도입니다. Target의 뷰포트 크기를 사용하십시오.

NOTE
다양한 웹 사이트에서 많이 사용되는 장치에 대한 뷰포트 크기 목록을 제공합니다. (예: https://viewportsizer.com/devices/) 가장 정확한 최신 정보를 확인하려면 장치 제조업체의 웹 사이트를 참조하십시오.
디바이스
뷰포트 크기(폭 x 높이)
디바이스 해상도(폭 x 높이)
iPhone 12
390 x 844
1170 x 2532
iPhone 12 Mini
360 x 780
1080 x 2340
iPhone 12 Pro
390 x 844
1170 x 2532
iPhone 12 Pro Max
428 x 926
1248 x 2778
iPhone SE
214 x 379
640 x 1136
iPhone 11 Pro Max
414 x 896
1242 x 2688
iPhone 11 Xs Max
414 x 896
1242 x 2688
iPhone 11
414 x 896
828 x 1792
iPhone 11 Xr
414 x 896
828 x 1792
iPhone 11 Pro
375 x 812
1125 x 2436
iPhone 11 X
375 x 812
1125 x 2436
iPhone 11 Xs
375 x 812
1125 x 2436
iPhone X
375 x 812
1125 x 2436
iPhone 8 Plus
414 x 736
1080 x 1920
iPhone 8
375 x 667
750 x 1334
iPhone 7 Plus
414 x 736
1080 x 1920
iPhone 7
375 x 667
750 x 1334
iPhone 6s Plus
414 x 736
1080 x 1920
iPhone 6s
375 x 667
750 x 1334
iPhone 6 Plus
414 x 736
1080 x 1920
iPhone 6
375 x 667
750 x 1334
iPad Pro
1024 x 1366
2048 x 2732
iPad 3세대 및 4세대
768 x 1024
1536 x 2048
iPad Air 1 및 2
768 x 1024
1536 x 2048
iPad Mini
768 x 1024
768 x 1024
iPad Mini 2 및 3
768 x 1024
1536 x 2048
Nexus 6P
411 x 731
1440 x 2560
Nexus 5X
411 x 731
1080 x 1920
Google Pixel
411 x 731
1080 x 1920
Google Pixel XL
411 x 731
1440 x 2560
Google Pixel 2
411 x 731
1080 x 1920
Google Pixel 2 XL
411 x 823
1440 x 2880
Samsung Galaxy Note 5
480 x 853
1440 x 2560
LG G5
360w x 640
1440 x 2560
LG G4
360w x 640
1440 x 2560
LG G3
360w x 640
1440 x 2560
One Plus 3
480 x 853
1080 x 1920
Samsung Galaxy S9
360 x 740
1440 x 2960
Samsung Galaxy S9+
360 x 740
1440 x 2960
Samsung Galaxy S8
360 x 740
1440 x 2960
Samsung Galaxy S8+
360 x 740
1440 x 2960
Samsung Galaxy S7
360 x 640
1440 x 2560
Samsung Galaxy S7 Edge
360 x 640
1440 x 2560
Nexus 7 (2013)
600 x 960
1200 x 1920
Nexus 9
768 x 1024
1536 x 2048
Samsung Galaxy Tab 10
800 x 1280
800 x 1280
Chromebook Pixel
1280 x 850
2560 x 1700

특정 장치에서 방문자에게 활동을 전달하려면 활동 다이어그램에서 해당 장치에 적합한 대상자를 선택하십시오. 모바일 웹 작성기를 사용하여 해당 장치용 활동의 페이지를 편집하십시오. 디지털 환경 전체에서 활동을 실행하여 모든 장치에서 잘 보이도록 하려면 타기팅을 적용하지 마십시오. 대신 모바일 뷰포트를 사용하여 각 화면 크기에서 활동을 미리 볼 수 있습니다.

반응형 사이트의 경우 일반적으로 특정 화면 크기의 장치로 액세스할 때 다른 보기에서 사이트가 열릴 수 있도록 설계되어 있습니다. 새 보기를 트리거하는 이러한 화면 크기는 CSS 중단점으로 알려져 있습니다. CSS 중단점은 방문자에게 최적의 레이아웃을 표시하기 위해 웹 사이트 콘텐츠가 장치 폭에 따라 다르게 반응하는 지점입니다. CSS 중단점은 미디어 쿼리라고도 합니다.

Target에서 CSS 중단점을 저장하여 정의하는 각각의 보기에 대한 경험을 미리 볼 수 있도록 하십시오. 이러한 각 경험은 Target 인터페이스의 모바일 뷰포트에 표시됩니다. 디스플레이 상단에 있는 해당 뷰포트를 클릭하여 각 화면 크기에 대한 보기를 여십시오.

사이트가 반응형이 아니라면 활동이 특정 장치에 타기팅된 경우 모바일 웹 작성기를 사용하여 사이트를 볼 수 있습니다.

IMPORTANT
모바일 뷰포트 내에서 경험을 편집할 수 있습니다. 단, 이러한 변경 내용은 작업 중인 뷰포트뿐만 아니라 모든 뷰포트 및 장치에 적용됩니다. 마찬가지로, 일반 데스크탑 보기에서 경험을 편집하면 페이지가 데스크탑 보기뿐만 아니라 모든 화면 크기용으로 변경됩니다. 현재 Target은 뷰포트별 페이지 변경을 지원하지 않습니다.

모바일 뷰포트 구성 task_B4B161499DC0470584ED922A4D20FCAB

경험을 작성하는 동시에 사용하고자 하는 모바일 뷰포트를 구성할 수 있습니다.

  1. Administration > Visual Experience Composer ​을(를) 클릭합니다.

  2. Mobile viewports configuration 섹션에서 Add ​을(를) 클릭합니다.

    뷰포트 추가

    또는

    기존 모바일 뷰포트의 구성을 변경하려면 해당 뷰포트를 선택한 다음 Edit (연필) 아이콘을 클릭합니다.

  3. 모바일 뷰포트의 이름을 입력합니다.

    모바일 뷰포트에 쉽게 인식할 수 있는 수사적 이름을 지정합니다. 이름은 최대 36자까지 사용할 수 있습니다.

  4. 모바일 장치의 화면 크기(폭 및 높이)를 지정합니다.

    지정할 수 있는 폭의 범위는 150~968픽셀입니다. 지정할 수 있는 높이의 범위는 150~1280픽셀입니다.

  5. (선택 사항) 장치의 운영 체제를 선택합니다.

    옵션:

    • Android
    • iOS
    • Windows
    • Symbian
    • Blackberry

    향상된 경험 작성기를 사용하고 운영 체제를 선택하는 경우 Target은 사용자가 페이지를 볼 때 해당 장치를 에뮬레이트합니다. 예를 들어 반응형 사이트에 Android가 iOS와 다른 모양과 느낌이 있는 경우 Target은 그 비헤이비어를 모방합니다.

  6. Save 아이콘을 클릭합니다.

NOTE
사용 중인 모바일 뷰포트를 삭제하려고 하면 다음과 같은 메시지가 표시됩니다. "이 뷰포트가 현재 하나 이상의 활동과 연결되어 있습니다. 뷰포트를 삭제하려면 먼저 해당 활동에서 뷰포트를 제거해야 합니다."

반응형 경험 작성 task_D6332438B5EE48CCA8AF199270F1CAEF

모바일 뷰포트를 Target 활동에 추가하여 모바일 화면용 반응형 경험을 작성할 수 있습니다.

  1. 원하는 활동을 만듭니다.

  2. Visual Experience Composer (VEC)에서 Settings 톱니바퀴 아이콘을 클릭한 다음 Add Mobile Viewports ​을(를) 선택합니다.

    모바일 뷰포트 옵션 추가

  3. Devices 아이콘을 클릭한 다음 모바일 뷰포트가 필요한 각 장치를 활성화합니다.

    모바일 뷰포트 활성화

    모바일 뷰포트는 너비가 가장 좁은 것부터 가장 넓은 순으로 표시됩니다.

  4. 원하는 대로 모바일 뷰포트를 편집합니다.

    경험에 대해 수행한 모든 변경 내용은 모든 장치의 경험에 적용됩니다. 예: 제목 텍스트를 변경하는 경우

    뷰포트의 이름 위로 마우스를 가져가 뷰포트의 크기를 볼 수 있습니다.

    iPhone 11 Pro Max 반응형 경험

  5. 원하는 경우 원하는 방향 아이콘을 클릭하여 세로 및 가로 모드 사이를 전환할 수 있습니다.

    방향 옵션

교육 비디오

다음 비디오에는 이 문서에서 설명한 개념에 대한 자세한 정보가 포함되어 있습니다.

시각적 경험 작성기(2/2) (7:29) 개요 배지

다음 데모 비디오에는 시각적 경험 작성기에서 모바일 뷰포트로 작업하는 방법에 대한 정보가 포함되어 있습니다.

  • 경험 이름 변경 및 경험 복제
  • 리디렉션 경험 만들기
  • 활동을 단일 URL 또는 URL 그룹에 타기팅
  • 다중 페이지 활동 만들기
  • 반응형 웹 사이트용 경험 미리보기 및 빌드
  • 오버레이를 사용하여 요소 유형을 강조 표시

https://video.tv.adobe.com/v/30526?captions=kor

Adobe Target 개요 배지 의 계정 환경 설정

이 비디오에는 모바일 뷰포트 설정에 대한 정보(4:40)가 포함되어 있습니다.

https://video.tv.adobe.com/v/17379

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654