적응형 웹은 반응형 웹의 반대말일까?

슬프게도 현재 재직중인 회사에서 홈페이지 개발 정책을 적응형으로 선택하고야 말았다.

PC/모바일 분리해서 보여줄 데이터가 많고, 취급하는 상품이 다양하고 많은 경우 보통 적응형을 선택한다고 하는데 취급하는 건 딱 하나 미술품이고 그마저도 레이아웃 다 동일한데 왜 적응형인지 정말 알다가도 모르겠지만 대표가 까라면 까야지...

지금 회사 홈페이지의 정책은 반응형인데, 적응형으로 바뀌게 되면 당장 GA 코드를 어떻게 적용해야 하며 지금까지 쌓아온 데이터는 어떻게 처리하는지에 대한 케이스, 그리고 두 개 URL에 대해 동일한 GA 코드를 적용하는 케이스에 대해서도 찾아봐야겠는데 이건 이 다음에 별도로 포스팅을 하겠다. 우선 이 포스팅에서는 적응형 웹과 반응형 웹에 대한 개념을 정리해보기로 한다.

반응형 웹을 responsibility web design(RWD) 이라고 하는데, 적응형 웹은 뭐라고 부르는지조차 몰라서 (왜냐면 적응형을 쓰는 홈페이지 운영을 딱 한번 해봤으니까...) 이것부터 찾아봤다.

적응형 웹은 adaptive web design이라고 부른다고 한다. 다만 국내에서 쓰는 적응형 웹의 개념과 해외에서 쓰는 적응형 웹에 대한 개념이 좀 달랐다.

국내에서 사용하는 적응형 웹(adaptive web design, AWD)의 의미

국내에서는 반응형 웹에 대한 반대 개념으로 적응형 웹이라는 용어를 쓴다.

국내에서 사용하는 적응형 웹에 대한 정의는, PC/Mobile 별로 (필요하면 tablet까지) 각 1벌씩의 html, css, js를 가지며

html 파일 자체가 분리되니까 각 타겟 디바이스 별로 필요한 리소스만 불러올 수 있어서 사용자 입장에서 데이터를 많이 잡아먹을 부담도 덜고, 운영이 잘 된다면 각 페이지별로 사용되는 이미지나 pdf 파일 등도 용량을 경량화해서 서비스할 수 있다.

타겟 디바이스별로 제공하는 서비스도 달리 설정할 수 있다.

그러니까 쉽게 말하면 전혀 다른 홈페이지 2개를 운영할 수 있다는게 장점이자 단점이며, 보통 제공하는 서비스의 양이 많은 홈페이지에 적합하다. 모바일용 도메인을 별도로 가지고 있는 것이 특징이다.

대표적인 국내 홈페이지 중 적응형 웹은 네이버/다음/g마켓 등이 있다.

해외에서 사용하는 적응형 웹의 의미

Adaptive Web Design

Adaptive Web Design was introduced in 2011 by web designer Aaron Gustafson in his book, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement. It is also known as progressive enhancement of a website.

Where responsive design relies on changing the design pattern to fit the real estate available to it, adaptive design has multiple fixed layout sizes. When the site detects the available space, it selects the layout most appropriate for the screen. So, when you open a browser on the desktop, the site chooses the best layout for that desktop screen; resizing the browser has no impact on the design.

해외에서 사용하는 adaptive web design에 대한 개념은 국내의 의미와는 좀 다르다.

말 그대로 각 타겟 기기별로 "Adaptive" 된 해상도의 웹을 지원하는데, 320px, 480px, 760px, 960px, 1200px, 1600px에 따른 홈페이지 레이아웃을 제공한다고 한다.(!!) HTML을 여섯 벌 제공한다는 의미가 아니다. 브라우저 창의 폭이 점점 줄어들 때 디자인이 유동적으로, fluent하게 함께 변화하는 게 아니라 딱 딱 끊어지면서 변경되는 걸 말하고 있었다.

Responsive on top, Adaptive on bottom

(출처 : https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/)

즉, responsive와 adaptive web design의 차이는 몇 벌의 html 파일을 가지냐, 또는 모바일 전용 도메인을 가지냐의 개발 방식에 대한 이야기가 아니라 디자인과 그 구현 방식에 대한 구분에 좀 더 가까웠다.

아마도 이 방식은 modernizr 등을 사용해 접속 기기를 확인하고 그에 맞는 리소스를 적용하는 방법으로 구현될 것이라 생각한다.

Standalone mobile design

Standalone Mobile Design

There is also the option to create a mobile-only website (these are usually denoted in the URL bar of a browser using the “m.” prefix). This option was once an excellent approach. Designers would create sites for mobile devices, attuning the elements and layout for a dedicated format. Google delivered search engine rankings to mobile sites, but today the same preferences are given to adaptive and responsive sites.

The big drawback of creating a separate site (rather than using different designs or employing a changeable design) is that it requires an awful lot more maintenance in order to keep the two versions of a website homogenous. With no particular incentive to do this, the mobile-only design has fallen out of favor in recent times. It seems unlikely that it will make a comeback anytime soon.

그렇다면 국내에서 사용하는 적응형 웹과 유사한 개념은 뭐였을까. 바로 Standalone Mobile Design이었다.

http://m.blablabla***.com 처럼 www가 들어갈 자리에 m이 들어가는 경우의 사이트들, 즉 국내에서 적응형 웹으로 불리는 사이트들이 standalone mobile design이라 생각하면 된다.

(구글이 한때 모바일 프렌들리한 사이트들을 검색결과 상단에 올려줬었던 것 같은데, 이제는 그런 움직임도 사라졌다고 하는데... 그래서 곧 사장될 디자인 유형이라고 하는데... 왜 홈페이지 방향성이 이걸로 결정됐는지 정말 모르겠다.... )

적응형? 반응형? 뭘 선택해야 할까

국내와 해외에서의 개념의 차이는 알겠다. 그래서 뭘 사용해야 할까?

정답은 케바케다.

모바일 유입이 많고 홈페이지 내에 들어갈 컨텐츠의 양이 많지 않은 회사의 홈페이지라면 단연 적응형 웹이 유리하다. 디자인도 모바일 버전부터 해 나가면 된다. 어떤 디바이스에서 유입이 많은지는 GA를 통해서도 쉽게 알 수 있다.

왜 컨텐츠의 양에 대한 이야기도 하냐면, 윗 참조글에서도 말하는 것 처럼 국내에서 사용하는 적응형 웹은 간단한 텍스트 수정이나 메뉴 추가에도 공수가 많이 든다. 분리된 html 파일별로 수정사항을 모두 적용해야 하니까. 게다가 영문 사이트도 운영중이라면 수정할 양은 *2가 된다.

대신에 반응형 웹은 간단하지 않은 수정일 경우에는 고려할 사항이 많아진다.

개편해야 할 홈페이지가 툭하면 뜯어 고쳐야 하는 홈페이지인지, 아니면 안정화되어 간단한 수정만 있는 편인지를 고려해보면 될 것 같다.

다만 조금 걱정되는 부분은, 적응형을 사용해 HTML을 두 벌로 제작하면 SEO는 어떻게 되느냐이다.

접속 기기별로 다른 컨텐츠를 보여준다면 SEO도 별도로 관리를 해야 하지 않을까?

이 부분에 대해서는 좀 더 파봐야겠다.

※ 본 포스팅은 아래 article을 참고하여 작성되었습니다.

The Interaction Design Foundation - https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design

CSS TRICKS - https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/