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

여러분 반응형 디자인 vs 적응형 디자인 <제2장> 많이 기다리셨죠?

지난 시간에 이어 이번 시간엔 반응형 디자인과 적응형 디자인 중에 어떤 것이 적합할지 고려사항들을 알아보겠습니다.

앞서 이야기한 바와 같이, 알맞게 구현되지 않는다면 반응형 사이트들은 사이트 속도의 측면에서는 어려움을 겪을 수 있습니다.

반응형 디자인은 또한 사이트에 접근하는 기기들의 모든 화면에 맞춰야 하기 때문에 코딩하는 방식에서 더 많은 것이 요구됩니다. 그러나, 적응형 디자인은 각 레이아웃에 대해 별도의 HTML 및 CSS 코드를 개발하고 유지해야 하므로 적응형 디자인에 비해 추가적인 일이 많다/적다는 아직 논란의 여지가 있습니다. 수정 후 다시 사이트를 실행할 때 모든 항목들(SEO, 콘텐츠 및 링크 등)이 사이트 전체에서 계속 작동 중인지 확인해야 하기 때문에 적응형 사이트들을 수정하는 작업은 더 복잡합니다.

물론 사용자 경험도 고려해야 합니다. 반응형 디자인은 기본적으로 콘텐츠를 섞어서 사용자 기기의 창에 유동적으로 맞추기 때문에, 여러 디자인의 시각적 계층 구조에 특히 주의를 기울여야 합니다.

닐슨 노먼 그룹에 따르면, "반응형 디자인은 더 얇고 긴 페이지에 맞게 더 큰 페이지의 요소를 재구성하는 방법이라는 퍼즐을 푸는 것으로 종종 변화합니다. 그러나 한 페이지에 요소들을 포함시키는 것만으로는 충분하지 않습니다. 반응형 디자인이 성공하기 위해서는 만든 디자인이 모든 화면 해상도와 크기에서도 사용 가능해야 합니다."

따라서 어떤 기술을 사용하기로 결정하든 기본적으로 나름의 적합한 사이트를 만들어야 한다는 점에 있어서 두 방법 모두 지름길은 없습니다. 앞으로 있을 사이트 유지보수에 많은 시간을 할애할 필요가 없다는 점에서 볼 때, 반응형 디자인이 아주 약간은 유리합니다.

결론은 어떤 디자인 기법을 채택하든 무엇보다 청중을 먼저 고려하는 것이 관건이 됩니다. 사용자가 누구인지, 사이트에 어떠한 기기로 접속하는 경향이 있는지를 정확히 알면 레이아웃, 컨텐츠 등을 염두에 두고 설계하기가 더 쉬워집니다.

또한 여러분이 기존 사이트를 이용하여 다시 작업하는지 아니면 처음부터 시작하는지 여부에 따라 어떤 디자인 형태를 사용하게 될지 크게 좌우될 것입니다. 반응형 디자인은 늘 찾는 디자인 기법이 되었고 현재 웹사이트들 중 1/8개의 웹사이트가 반응형 웹사이트를 사용하고 있는 것으로 알려져 있습니다. 다만 얼마나 많은 웹사이트가 적응형 사용인지에 대한 데이터는 거의 또는 전혀 없습니다. 적응형 디자인을 위한 채택율도 빠르게 증가하고 있으며 독립형 모바일 사이트의 숫자와 같은 수준에 도달했습니다.

이러한 모든 것을 염두에 두더라도, 적응형 디자인이 요구되는 지속적인 작업을 제외하고서, 반응형 디자인이 주로 선호되는 기술이라 말할 수 있겠습니다.

그러나, Catchpoint가 수행한 테스트에 따르면 고객이나 회사가 예산을 가지고 있는 경우에는 적응형 디자인이 더 나은 선택일 수 있습니다. 실험 팀은 워드프레스에 두 개의 사이트를 구축하였는데, 하나는 TwentyFourteen 이라는 반응형 테마로 표준 웹페이지를 구축하였고 다른 하나는 Wiziapp이라는 플러그인을 사용하였습니다.

이 플러그인은 사이트에 접속하는 기기에 따라 사용자에게 모바일 테마를 제공하며 프로세스를 더욱 간소화할 수 있도록 고급 구성 옵션도 제공합니다.

여러 항목들의 로드타임 결과 값은 다음과 같습니다.

최적화 작업이 전혀 수행되지 않았다는 점을 유념해야 하지만, 그렇다 하더라도 위의 결과 값은 반응형 사이트가 데스크톱에 필요한 모든 것을 다운로드하고 있음을 보여줍니다. 그래서 처음 시작되었을 때 반응형 테마는 전혀 좋은 퍼포먼스를 보여주지 않습니다.

이는 미디어 쿼리를 사용하여 극복할 수 있지만, 위의 내용은 반응형 디자인이 항상 모바일용으로 최선은 아닌 이유를 보여주는 좋은 예가 됩니다. 하지만 더 나은 방법이 나올 때까지, 적절하게 코딩하고 반응형 사이트를 구현하는 방법 외에 우리가 그것에 대해 무엇을 할 수 있는지 알기는 어렵습니다.

그래서 결론은?

반응형 디자인은 계속해서 인기를 끌겠지만, 이는 적응형 디자인이 요구하는 높은 유지보수에 대해 적절한 솔루션을 아직 찾지 못했기 때문일 수 있습니다. 웹이 반응형 디자인을 선호함에도 불구하고 적응형 디자인은 사라지지 않았으므로 적어도 이론적으로는 반응형 웹 디자인을 물 밖으로 끌어낼 수 있는 몇 가지 개선이 나타날 수도 있습니다.

사용자 고유의 적응형 디자인을 만들고 싶다면 UXPin을 사용하면 됩니다. 협업 플랫폼에서는 사전 설정된 중단점과 사용자 지정 중단점이 제공되며 완료되면 스펙 모드를 활성화하여 개발자에 대한 핸드오프를 자동화 할 수 있습니다.

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

그럼 다음에 더 유익한 컨텐츠로 찾아오겠습니다.

긴 글 읽어주셔서 감사합니다:)

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