반응형 웹과 적응형 웹이란 무엇일까요?

적응형 웹과 반응형웹 두 가지 방법 모두 근본적으로는 웹 사이트가 모바일 기기와 다양한 화면 크기에서 원활한 정보를 제공하여 더 나은 모바일 사용자 경험을 제공하기 위한 방법입니다.
하지만 적응형 웹과 반응형 웹은 사이트의 설계부터 구동까지 많은 차이가 있는데요. 국내의 검색엔진에는 '적응형 웹'에 대한 정보도 많지 않을 뿐더러 잘못된 정보도 많아, 해외 검색엔진을 통해 얻은 정보들을 참고하여 정리해봤습니다.

참고링크1 (http://visual.ly/adaptive-web-design-vs-responsive-web-design)
'적응형 웹'은 서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 디바이스에 최적화된 마크업을 호출합니다. 여기에서 최적화된 마크업은, 꼭 필요한 정보만을 노출시키며 디바이스에 최적화된 이미지를 사용하고 플래시를 사용하지 않고 자바스크립트를 이용하여 장치를 분석하고 그에 맞는 동작을 적용합니다. 이렇게하여 보다 빠른 속도로 모바일에서 웹사이트를 이용할 수 있습니다.

이렇게 적응형 웹의 특징으론 기존의 사이트를 재구축할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있습니다.반면 '반응형 웹'은 미디어 쿼리를 사용하여 화면의 크기를 확인하고 유연한 이미지와 그리드로 화면 크기의 변화에 따라 그에 맞은 크기가 됩니다. 모든 디바이스에 대한 정보를 가지고 있으며 사용 여부에 따라 다운로드되어 사용됩니다. 하나의 템플릿만을 사용하며 사용자는 하나의 디바이스를 사용하고 있지만 모든 디바이스를 위한 페이지가 모두 로드 될때까지 기다려야 합니다. 기존에 운영중인 사이트가 있다면 재구축을 해야 하고 사용이 가능한 모든 장치에 대한 사용자 정의를 해야 하기에 디자인하고 테스트하는 것이 어려울 수 있습니다.

반응형 웹의 특징으론 새로운 웹 빌드를 추가하기 쉬우며 사이트를 재 구축해야하고 디바이스에 따라 성능이 저하될 수 있습니다.

참고링크2 (http://despreneur.com/responsive-web-design-vs-adaptive-web-design-whats-the-difference/)
「 If you’ve designed your website using adaptive web design, then to do a single change you’ll have to redo SEO (search engine optimization), content and linking for the entire website. Unlike this, if you’ve chosen responsive web design (RWD) performing a single change will be as simple as ABC because the SEO, links and content settings get carried over via the in-tact HTML/CSS3 and Javascript. 」

- 적응형 웹으로 설계된 사이트의 경우 하나의 변경에 따른 SEO(검색 엔진 최적화)를 위해 내용과 링크를 다시 실행해야 한다? 정확하게 이해하지 못했으나, 참고링크5를 참고해봤을 때 PC기반의 웹사이트와 모바일 기반의 웹사이트 예를 들어 yoursite.com / m.yoursite.com에서 동일한 내용을 가진 URL이 존재하게 되고 이는 대부분의 검색 엔진이 중복으로 인정하여 SEO에 친화적이지 못하다라는 이야기 같습니다.
하지만 이 부분을 참고링크5에서는 다르게 이야기 하고 있습니다.

참고링크3 (http://torquemag.io/responsive-design-vs-adaptive-design/)
「 Adaptive web design may probably hurt your terms with search engines. For example, an article that is available at yoursite.com/nice-article will also be available at m.yoursite.com/nice-article. Most search engines do not appreciate identical content across multiple URLs, so it can be argued that adaptive design is not as SEO-friendly as responsive design. However, I feel that this might just be a matter of perception—the identical-content-across-multiple-URLs-is-evil rule generally applies to sites that copy content from other sites. Maybe search engine bots are smart enough to figure out that m.yoursite.com is an mobile-friendly variant of yoursite.com—in any case, as already mentioned earlier in this article, Google has often professed its appreciation for responsive web design, so adaptive design does lag a bit behind in terms of SEO. 」

참고링크4 – 코멘트
「 Dmitriy February 7, 2014 at 09:40「 Adaptive design is much more harder to maintain… My weapon of choice is twitter bootstrap and html5+css3 magic. 」
- 적응형 웹이 더 유지하기가 어렵다. 나의 무기는 부트스트랩과 HTML5, CSS3의 마술이다. 2> Bientang February 9, 2014 at 08:44

「 AWD is much harder for web developer, but i think, if, AWD has separated HTML & CSS that optimized for each device/gadget, AWD is more mobile friendly, you know, fast load on mobile browser. RWD, i think, it’ll load the same HTML & CSS as desktop version. 」
- 적응형 웹은 개발자로서 더 어렵다, 하지만 디바이스에 최적화된 html, css는 모바일에서 빠르게 로드되어 적응형 웹이 모바일 더 친화적이라 생각한다. 3> JTech Communications February 14, 2014 at 16:03

「 This is a good article, I think that it highlights the differences between AWD and RWD quite nicely. There are two things that I would like to mention.

1) There is a raging ongoing debate about how to make RWD faster. I think that the slow load times that are associated with RWD are likely just a passing thing; while RWD will always take a little bit longer to load I think that issue will diminish as time goes on. Also with the huge move toward mobile the speed of mobile devices will likely increase, especially in North America and Europe.
- 반응형 웹을 빠르게 하는 방법에 대해 지속적이고 많은 논쟁이 있다. 반응형 웹이 느린 문제는 시간이 지날수록 줄어들 것이다.

2) The second thing is that we are a web development firm, and we recommend to almost all of our clients that are building a new site that it be responsive. As you said RWD requires an entirely new website, so I think that it is likely that AWD will be a passing trend as the web switches over to RWD to accommodate the shift to mobile. 」
- 우리는 웹을 개발하는 회사입니다. 우리는 거의 모든 클라이언트에게 반응할 새 사이트를 구축하는 것을 추천한다. 당신이 말했듯이 반응형웹은 완전히 새로운 사이트가 필요하므로 나는 웹이 모바일에 변화에 수용할 수 있는 반응형 웹으로 전환한다. 적응형 웹은 지나가는 트렌드가 될 가능성이 있다고 생각한다.

참고링크5 (http://en.wikipedia.org/wiki/Adaptive_web_design)
위키백과의 내용을 참고하자면,
「 Adaptive web design is basically the same as responsive design and shares many of the same ideals and goals. The main difference however is that the changes are made on the server side rather than the client side.
With adaptive delivery, the most significant difference is that the server hosting the website detects the devices making requests to it, and uses this information to deliver different batches of HTML and CSS code based on the characteristics of the device that have been detected. 」
- ‘적응형 웹’과 ‘반응형 웹’의 가장 주된 차이를 적응형 웹은 클라이언트 쪽이 아닌 서버측에서 사용자의 디바이스를 확인하고 그 디바이스를 기초로 하여 HTML 및 CSS코드의 다른 배치를 제공한다.
이 부분에서는 ‘적응형 웹’이란 정의의 범위가 참고링크1에서의 이야기와 약간 다릅니다.

[※ 모든 번역에는 큰 오역이 있을 수 있습니다.]
해외 검색엔진을 통해서도 '적응형 웹'에 관한 정보가 그리 많지 않았고, 큰 틀은 비슷하지만 세부적인 부분에서 약간의 차이가 있었습니다. 지금까지 얻은 정보로는 명확하게 '적응형 웹'과 '반응형 웹'을 구분할 수는 없었지만 짧게나마 생각해본 '적응형 웹'이라는 것은 뭔가 새롭게 생겨났다기보다는 기술의 성장(html5, css3를 비롯하여 부트스트랩 등..) 이전, '반응형 웹' 이전에 이미 사용하던 방법이고 지금 많이 이야기가 되고 있는 반응형 웹의 속도에 관한 문제의 임시적 해결을 위한 트랜드 정도가 아닐까 생각이 듭니다.

Reference

- http://visual.ly/adaptive-web-design-vs-responsive-web-design
- http://despreneur.com/responsive-web-design-vs-adaptive-web-design-whats-the-difference/
- http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/
- http://en.wikipedia.org/wiki/Adaptive_web_design
- http://torquemag.io/responsive-design-vs-adaptive-design/