용어 색인

A   B   C   D   E   F   G   H   I   J   K   L   M   N   O   P   Q   R   S   T   U   V   W   X   Y   Z


용어 색인

A   B   C   D   E   F   G   H   I   J   K   L   M   N   O   P   Q   R   S   T   U   V   W   X   Y   Z


용어 색인

A   B   C   D   E   F   G   H   I   J   K   L   M   N   O   P   Q   R   S   T   U   V   W   X   Y   Z

용어

반응형 웹 디자인

간략한 정의

반응형 웹 디자인은 다양한 디바이스와 다양한 크기의 화면에서 일관되게 잘 작동하는 웹 페이지를 제작하는 일입니다. 

주요 내용

 

● 반응형 웹 사이트는 소비자가 어떤 디바이스를 이용하든 시각적으로 아름답고 기능적이며 사용성이 높습니다.

● 사용자는 하루에도 몇 번씩 다양한 디바이스를 오갑니다. 다양한 디바이스에서 사이트에 접속했을 때 사이트가 느려지거나 둘러보기 어렵거나 시각적으로 아름답지 않으면 소비자는 금세 관심을 잃어버립니다.

● 웹 디자이너는 각 구성 요소의 차원에서 반응형 디자인과 기능을 고민해야 하고, 반응성을 높일 수 있는 디자인 프로세스와 시스템이 필요합니다.


Q: 반응형 웹 디자인이란 무엇입니까?

 

A: 반응형 웹 디자인은 다양한 디바이스, 창, 화면 크기에서 원활하게 렌더링되는 웹 페이지를 제작하는 을 말합니다. 웹 사이트를 반응형으로 설계하면, 어떤 디바이스에서 어떤 방식으로 접속하든지 웹 사이트의 일관성을 유지할 수 있습니다. 좋은 반응형 웹 디자인은 데스크탑과 모바일이 단순히 화면 크기만 다른 것이 아니라 둘을 이용하는 소비자의 태도도 다르다는 점을 인식하고 이를 반영한 디자인입니다.

Q: 반응형 웹 디자인이 중요한 이유는 무엇입니까?

A: 웹 디자이너가 고객, 고객의 사고방식 및 플랫폼을 충분히 고려하지 않으면 웹 사이트의 사용성과 기능성이 떨어집니다. 즉, 다양한 디바이스에서 접속했을 때 사이트가 느리거나, 둘러보기 불편하거나, 시각적으로 뛰어나지 않으면 소비자는 금세 흥미를 잃을 것입니다. 예를 들어 개발자가 큰 데스크탑 화면에서만 아름다운 경험을 디자인하면, 모바일 디바이스에서는 텍스트가 들쭉날쭉해지고 사진은 끝없이 스크롤해야 할 만큼 길어질 수 있습니다. 오늘날 사용자는 다양한 디바이스로 하루 종일 콘텐츠를 소비하고 때로는 여러 디바이스를 동시에 사용하기도 합니다. 따라서 이러한 소비자 행동과 태도를 염두에 두고 웹 콘텐츠를 설계하지 않으면, 성공적인 웹 사이트를 만들 수 없습니다.

Q: 웹 사이트의 반응성을 높이려면 어떻게 해야 합니까?

A: 일부 웹 페이지나 특정한 마케팅 캠페인의 반응성을 높이기 위해 고민하는 것이 아니라, 디자인 프로세스와 시스템 전반에서 반응성을 강화해야 합니다. 일회성으로 프로젝트를 하나 수행하여 반응성을 올릴 수 있을 것으로 생각한다면, 웹 디자이너, 엔지니어, 콘텐츠 제작자의 업무가 중복되는 상황이 빚어져 이들의 업무가 세 배로 늘어날 것입니다. 과거에는 웹디자이너가 데스크탑용 웹 사이트를 먼저 디자인하고, 이후에 모바일 디바이스와 태블릿에서도 작동하도록 조정할 방법을 찾았습니다. 그러나 이러면 작업량이 너무 많아 지속적으로 민첩하게 대응하기가 어렵습니다.

따라서 웹 디자이너는 페이지의 구성 요소 단위로 반응성과 기능성을 증대해야 합니다. 즉, 제품 페이지 전체의 반응성이 아니라, 제품 페이지에 있는 마퀴(Marquee), 카드형 디자인, 회전식 보기, 클릭 유도 문안(CTA) 각각의 반응성을 높일 방안을 생각해야 합니다. 각각의 구성 요소가 다양한 뷰포트 너비와 화면 해상도에서 원활하게 작동하게끔 할 방안을 고민해야 합니다. 그래서 디자인 팀에 페이지 개발 요청이 들어오면, 이미 잘 갖추어 둔 구성 요소를 활용해 순조롭게 작업할 수 있어야 합니다. 특정 페이지의 특정 콘텐츠를 더 정교하게 다듬어 사용자 경험을 완성할 수 있어야 합니다.

이렇게 콘텐츠 수준에서, 다양한 디바이스를 이용하는 고객의 성향을 고려해 콘텐츠 디자인을 최적화할 수 있습니다. 즉, 모바일 사용자의 구매를 유도하는 구매 CTA는 다운로드 가능한 자사의 앱으로 바로 연결하고, 데스크탑의 CTA는 데스크탑 앱을 다운로드할 수 있는 곳으로 연결하여 그곳에서 모바일이나 태블릿용 앱을 다운로드할 수 있는 CTA를 이차적으로 제시할 수 있습니다.

Q: 반응형 웹 디자인과 적응형 웹 디자인의 차이점은 무엇입니까?

A: 반응형 웹 디자인은 다양한 디바이스의 다양한 화면 크기에 유연하게 적응합니다. 반응형 웹 디자인은 사용자가 뷰포트에서 선택한 모든 치수에 맞게 달라지고, CSS 미디어 쿼리를 사용하여 다양한 스타일에 맞춰 조정합니다.

반면 적응형 디자인은 중단점을 바탕으로 정적 레이아웃을 사용합니다. 중단점이란 최상의 경험을 제공하기 위해 웹 사이트 콘텐츠 및 디자인을 조정하는 지점으로서 일반적으로 창 또는 화면 치수에 따라 달라집니다. 중단점은 사용자 디바이스의 현재 화면 크기를 감지하여 가장 일반적인 화면 너비에 맞게 미리 디자인된 레이아웃을 로드합니다. 그러나 사용자가 브라우저 창 크기를 조정하는 등 화면 크기를 변경하면 적응하지 못합니다.

반응형 웹 디자인은 적응형 웹 디자인이 고려하지 않는 모든 크기를 다양하게 고려합니다. 그래서 더 유연하지만, 구현하기가 더 어렵습니다. 반면 적응형 디자인은 웹 사이트를 세 가지 버전으로 구축하는 것과 같고, 이들 버전은 사용자의 선택에 따라 부적절해지기도 합니다.

Q: 반응형 웹 디자인의 주요 구성 요소는 무엇입니까?

A: 가장 먼저 고려해야 하는 요소는 여러분이 염두에 둔 다양한 반응형 디자인입니다 그다음 어떤 기술을 사용하여 디자인을 구현할지 결정합니다. Flexbox 컨테이너나 CSS 그리드 컨테이너와 같은 툴을 활용할 수 있습니다. 요새 온라인 사용자들은 업계의 표준 중단점에서 벗어나는 경향이 있으므로 디자이너는 이러한 새로운 흐름에 적응해야 합니다.

두 번째 구성 요소는 데이터입니다. 정량 데이터와 정성 데이터를 모두 수집해야 합니다. 정량 데이터는 사이트 방문자수, 방문자의 제품 및 서비스 구매 금액 등으로서 비즈니스 결정을 내릴 때 유용하고, 정성 데이터는 고객과의 대화를 통해 수집하는 데이터로서 고객의 행동과 기대를 파악하는 데 유용합니다.

세 번째 구성 요소는 각 웹 페이지에 넣을 창의적인 콘텐츠입니다. 성숙도가 높은 많은 기업이 웹디자인에 반응형 콘텐츠를 넣고 있습니다. 예를 들어 모바일 디바이스에서 웹 페이지를 볼 때 페이지의 텍스트가 변한다거나 페이지를 편하게 스크롤할 수 있도록 텍스트가 적은 콘텐츠를 사용합니다.

Q: 반응형 웹 디자인의 이점은 무엇입니까?

A: 반응형 웹 사이트는 고객 경험을 최적화하고 사이트 성능을 높이는 기회가 됩니다. 사이트의 반응성이 증가하면, 이탈률이 감소합니다. 그리고 다양한 뷰포인트와 다양한 고객의 사용 패턴에 맞게 최적화할 수 있어 고객의 참여가 증가합니다.

반응형 웹디자인은 고객에게도 혜택을 가져다줍니다. 브랜드가 고객의 디바이스와 니즈를 고려하기 때문입니다. 예를 들어 직장에서 데스크탑 컴퓨터로 풍부한 인터랙티브 경험을 즐기고, 이후 모바일 디바이스로 빠른 페이지 로드와 작은 화면에 최적화된 터치 인터페이스를 누릴 수 있습니다.

Q: 반응형 웹 디자인을 설계하는 데 어떤 툴을 사용할 수 있습니까?

A: Adobe Experience Manager는 반응형 웹 시스템을 구축할 수 있는 최신 툴을 제공합니다. 툴을 이용해 디자이너가 반응형 경험 조각을 만들 수 있고, 그러면 마케터와 콘텐츠 제작자가 반응형 디자인을 전혀 고민할 필요 없이 적절한 경험 조각을 간단히 선택하여 콘텐츠를 게시할 수 있습니다. 또한 이미지 최적화 기능도 이용할 수 있습니다.

Adobe XD는 반응형 웹 경험의 프로토타입을 제작하고 경험을 구축하는 데 좋은 툴입니다. 또한 이해관계자에게 구축한 경험의 장점을 시연하기에도 좋습니다. 디자이너는 Adobe XD의 API(Application Programming Interface)를 사용하여 스마트폰에서 프로토타입을 확인할 수 있고, 고객처럼 상호작용할 수도 있습니다. 또한 Adobe XD에서 Experience Manager로 자산을 바로 내보낼 수 있습니다.

Adobe Target 역시 마케터가 다양한 디바이스에서 소프트웨어를 테스트하고 최적화할 수 있는 여러 툴을 제공합니다.

Q: 반응형 웹 디자인은 앞으로 어떻게 발전할까요?

A: 헤드리스 콘텐츠 관리 시스템(CMS) 분야의 혁신이 일어날 것으로 기대됩니다. 신기술을 사용하여 마케터가 콘텐츠 제작자에게서 콘텐츠를 직접 가져오고, 반응형 스타일을 적용하여 반응형 웹 사이트를 완성할 수 있게 되어 프런트 엔지니어, 퍼블리셔 등 중개자를 거칠 필요가 없어질 것입니다.

Adobe가 도와드리겠습니다

Adobe Experience Cloud를 통해 지식을 행동으로 전환하십시오.