반응형 웹 디자인

여러 디바이스에서 콘텐츠를 간소화하고 재사용할 수 있습니다. 레이아웃, 텍스트 크기, 콘텐츠, 내비게이션, 이미지와 같은 요소가 고객이 선호하는 디바이스에 맞게 자동으로 조정됩니다.


다양한 디바이스에 일관된 웹 경험 전달

데스크탑과 달리 모바일에서는 웹 페이지가 깔끔하게 표시되지 않을 수 있습니다. 웹 사이트가 모든 플랫폼과 모바일을 비롯한 여러 디바이스에 최적화되지 않으면 일관되지 않은 온라인 경험을 제공하게 되고, 결국 고객의 기대에 부응할 수 없게 됩니다. 그렇게 되면 고객은 클릭 한 번으로 더 나은 고객 경험을 찾아 떠나게 될 것입니다.

반응형 웹 디자인 기능을 사용하면 모든 디바이스에서 매끄럽게 반응하는 웹 페이지를 디자인할 수 있습니다. 즉, 모든 플랫폼에서 일관되게 고객의 참여를 유도할 수 있습니다. 반응형 웹 디자인은 다양한 화면 크기와 기능에 맞게 레이아웃, 텍스트 크기, 콘텐츠 탐색 툴을 재구성합니다. 게시하기 전에 여러 디바이스에서 미리 보고 성과를 최적화할 수 있으며, 여러 디바이스에서 크기 조정을 자동화하여 콘텐츠 제작 속도를 높이고 시간을 절약할 수 있습니다.

기능 보기

유동 격자 제작
콘텐츠가 깔끔하게 배치될 수 있도록 유동 격자를 만들 수 있습니다. 유동 격자는 디바이스의 화면 크기에 맞게 매끄럽게 크기를 조정합니다.

특정 디바이스용 미리 보기
태블릿, 스마트폰 등 디바이스를 미리 선택하여 해당 디바이스에 표시될 페이지 모양을 확인할 수 있습니다.

모든 콘텐츠의 크기 조정
작성한 콘텐츠가 전달될 모든 채널에 맞게 반응하도록 할 수 있을 뿐만 아니라 이미지의 크기를 콘텐츠에 맞게 표시되도록 조정할 수 있습니다.

이미지 최적화
대역폭, 화면 크기, DPI를 기반으로 제작할 경험에 맞게 최적의 이미지 크기를 적용할 수 있습니다.

Adobe Experience Manager Sites의 반응형 웹 디자인에 대해 자세히 살펴보십시오.

모바일 웹 디자인 살펴보기

미디어 쿼리, 반응형 이미지, 유동 격자를 사용하여 일관된 웹 경험을 제작하는 방법은 Adobe 설명서를 참조하십시오. 

자세한 내용

계속해서 변화하는 화면 크기에 대응하는 방법

화면 크기가 계속해서 변화함에도 불구하고 경쟁력을 확보하는 방법은 Adobe 블로그를 참조하십시오.

자세한 내용

관련 기능

반응형 웹 디자인

고객이 선호하는 디바이스에 맞게 자동으로 조정되는 레이아웃, 텍스트 크기, 콘텐츠, 내비게이션, 이미지와 같은 요소를 사용하여 여러 디바이스에서 콘텐츠를 간소화하고 재사용할 수 있습니다.

스타일 시스템

백엔드 개발 없이도 구성 요소나 페이지 전체에서 스타일과 디자인을 표준화할 수 있습니다. 사전 정의된 스타일 목록에서 다양한 변형을 선택하여 글꼴, 색상, 서식을 즉시 적용할 수 있습니다.

즉시 사용 가능한 구성 요소

브레드 크럼, 양식, 페이지 내비게이션, 검색 티저, 검색과 같이 이전 버전과 호환되는 즉시 사용 가능한 구성 요소로 페이지를 제작할 수 있으므로, 저작자와 개발자 모두 시간을 절약할 수 있습니다.

Adobe Experience Manager Sites를 통해 얻을 수 있는 이점을 확인해 보십시오.

Adobe Experience Manager Sites를 통해 얻을 수 있는 이점을 확인해 보십시오.