안녕하세요. UXPin 총판 단군소프트입니다.

IT 관련 업종에서 일하신다면 한번쯤 반응형, 적응형 디자인을 들어 보셨을 것 입니다.

경우에 따라 반응형 디자인이 좋을지 적응형 디자인이 좋을지 각각의 장단점을 알아보겠습니다.

구글은 항상 반응형 웹 디자인(RWD)을 추천해왔습니다. 특히 모바일 친화적인 사이트를 더 높게 평가한 15년도 4월 21에 있던 큰 업데이트를 발표한 후부터는 더욱더 그렇습니다.

해당 업데이트 내용 안에서 정확하게 반응형 디자인을 써야 한다는 업데이트 내용은 없었습니다만, 사이트가 모바일에서도 뛰어난 UX와 퍼포먼스를 가능하게 된 것을 보여줌으로써 간접적으로 말한 것이죠.

이러한 생각에 이어서, 오늘은 UX와 퍼포먼스의 측면에서의 적응형 디자인과 반응형 디자인 각각의 장단점을 알아보도록 하겠습니다. 모바일 시장의 성장 이후 나타난 큰 논쟁 중 하나는 적응형, 반응형 웹디자인을 개발해야 하는가, 아니면 모바일 독립형의 사이트를 개발해야 하는 것이었습니다.

먼저, 적응형 디자인과 반응형 디자인의 주요 차이점은 무엇이 있을까요?

간단하게 말해서, 반응형 디자인은 유동적이며 대상 장치에 관계없이 화면 크기에 적응합니다. 반응형은 CSS 미디어 쿼리를 사용하여 디스플레이 유형, 너비, 높이 등과 같은 대상 장치를 기반으로 스타일을 변경하며, 이 중 하나만 사용하면 사이트가 다른 화면에 적응할 수 있습니다. 반면, 적응형 디자인은 처음 사이트가 불러올 때 응답하지 않는 브레이크 포인트를 기반으로 한 정적 레이아웃을 사용합니다.

적응형 기능은 화면 크기를 감지하고 이에 대해 적절한 레이아웃을 불러옵니다. 일반적으로 6개의 일반적인 화면 너비에 맞게 적응형 사이트를 디자인합니다.

• 320

• 480

• 760

• 960

• 1200

• 1600

표면적으로 보았을 때 최소 6개의 너비에 대한 레이아웃을 디자인해야 하므로 적응형 디자인의 경우가 작업이 더 필요한 것으로 보입니다. 그러나 만약 미디어 쿼리를 부적절하게 사용하거나 아예 사용하지 않을 경우 디스플레이 및 성능 문제가 발생할 수 있음으로 이 경우에는 반응형 디자인이 더 복잡해질 수 있습니다.

글쓴이 메모: UXPin에서는 여러 브레이크포인트를 사용하실 수 있습니다. 한번 사용해보고 싶으시면 무료 트라이얼로 시작해보세요.

특히 반응형 디자인은 모바일 기기에서 열리지 않더라도 사이트 속도가 상당히 느려지는 전체 데스크톱 모델을 제공하는 사이트가 많다는 점에서 지난 몇 년 동안 많은 논의가 있었습니다. 이 문제를 해결하기 위해서 미디어 쿼리를 사용할 수 있지만, 반응형 사이트가 모바일용 웹 사이트만큼 빠르지는 않기 때문에 몇 가지 감수해야 하는 부분들이 있습니다.

적응형 디자인은 기존에 있는 사이트를 모바일 친화적으로 만들기 위해 사이트를 개조할 때 유용합니다. 적응형 디자인을 통해 특별히 선택된 다수의 뷰포트들의 디자인 및 개발을 관리할 수 있게 됩니다. 디자인 작업을 할 뷰포트의 수는 전적으로 여러분 개인, 회사, 그리고 전체 예산에 따라 달려 있습니다. 그러나 사용할 필요가 없는 반응형 디자인들에 대한 일정 수준의 관리(예: 컨텐츠 및 레이아웃)가 필요합니다.

일반적으로, 여러분들은 낮은 해상도의 뷰포트 디자인 작업으로 시작해서 점차적으로 고 해상도로 올려는 방식을 택하여 디자인이 컨텐츠에 의해서 강요받지 않도록 합니다.

앞에서 언급한 바와 같이, 6가지 해상도를 설계하는 것이 일반적입니다. 그러나 가장 많이 사용되는 장치에 대한 웹 분석을 살펴본 다음 이러한 뷰포트를 설계함으로써 보다 정확한 결정을 내리기도 합니다.

적응형 사이트를 밑바닥부터 디자인하려는 방법도 나쁘지 않습니다. 가장 낮은 해상도로 디자인하는 것으로 다시 시작하여 더 높은 해상도로 작업해보세요. 그런 다음 미디어 쿼리를 사용하여 고해상도 뷰포트를 위한 레이아웃을 확장할 수 있습니다. 다만, 여러 해상도에 대한 디자인을 하실 경우 사용자가 창의 크기를 조정할 때 레이아웃이 갑자기 '점프'될 수 있습니다.

이것은 다중 뷰포트를 위한 적응형 사이트를 개발하는 추가적인 디자인 업무가 될 수 있기 때문에 개선 작업에서 주로 사용되고 있습니다.

대다수의 새로 만들어지는 사이트들은 WordPress, Joomla, Drupal과 같은 CMS 시스템을 통해 접근하는 여러 테마의 유용성 덕분에 경험이 적은 디자이너와 개발자들이 보다 쉽게 반응형 디자인으로 만들어지고 있습니다.

반응형 디자인은 적응형 디자인만큼 많은 제어력을 제공하지는 않지만 구축 및 유지 보수에 훨씬 적은 작업만 소요됩니다. 반응형 디자인의 레이아웃도 유동적이며, 적응형 디자인의 레이아웃은 스케일링 시 보다 유동적인 느낌을 주기 위해 사용할 수 있고 실제로 사용할 수 있는 비율을 제공하지만, 윈도우 크기를 조정할 때 앞서 말한 ‘점프’를 유발할 수 있습니다. 예를 들어, 유동적인 레이아웃을 보여주는 아래 이미지에서 디자이너는 각 사용자들마다 보기가 조정되도록 아래의 백분율 너비를 사용하고 있습니다.

반응형 디자인에서는, 모든 레이아웃을 염두에 두고 설계하게 될 것입니다. 물론, 이것은 프로세스를 혼란스럽게 하고 상당히 복잡하게 만들 수 있습니다. 다시 말해 중간 해상도용 뷰포트를 만드는 데 초점을 맞춘 다음 나중에 미디어 쿼리를 사용하여 낮은 해상도와 높은 해상도에 맞게 조정할 수 있습니다.

따라서 본질적으로, 새로운 프로젝트에는 반응형 디자인을 사용하고 고도화할 때는 적응형 디자인을 사용하는 것이 좋습니다.

여기까지 반응형 디자인과 적응형 디자인의 설명이였습니다.

다음 시간에는 이어서 반응형 디자인 VS 적응형 디자인 <제2장>을 준비중이니 많은 기대와 관심 부탁드립니다.

그럼 다음 시간에 만나요~:)

이 글은 UXPin의 Responsive Design vs. Adaptive Design를 번역한 글입니다.