해시넷
적응형웹
적응형웹(adaptive web)이란 정해진 해상도에 맞춰서 제작한 내용에 따라 화면이 구성되는 기술로 브라우저가 미리 정해놓은 범위 사이즈에 속하여 그에 따라 레이아웃이 맞춰져서 보이는 것을 말한다.
개요[편집]
'적응형웹'이라는 용어는 아론 구스파프슨(Aaron Gustafson)이 2011년 출간한 그의 책 Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement를 통해 처음 알려졌다.[1] 그는 반응형웹 개념을 포함하는 포괄적인 개념으로 적응형웹을 설명했으나, 국내에서는 두 개념의 기술적인 부분에 초점이 맞춰져 통용되고 있다.
해외에서 사용되는 적응형웹에 대한 개념은 국내의 의미와는 좀 다르다. 말 그대로 각 타겟 기기별로 "Adaptive(적응)"된 해상도의 웹을 지원하는데, 320px, 480px, 760px, 960px, 1200px, 1600px에 따른 홈페이지 레이아웃을 제공한다고 한다. HTML을 여섯 벌 제공한다는 의미가 아니다. 브라우저 창의 폭이 점점 줄어들 때 디자인의 유동적으로, fluent(능수능란)하게 함께 변하는 게 아니라 딱 딱 끊어지면서 변경되는 걸 말하고 있다. 즉, responsive(반응)와 adaptive web design(적응형 웹 디자인)의 차이는 몇 벌의 html 파일을 가지고 있는지, 또는 모바일 전용 도메인을 가지고 있는지의 개발 방식의 대한 이야기가 아니라 디자인과 그 구형 방식에 대한 구분에 좀 더 가깝다.[2]
특징[편집]
기존의 사이트를 재구축할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있지만, 웹 분리 개발에 따른 비용 문제가 있을 수 있다. 결국 디바이스에 적절한 페이지 혹은 시스템을 각각 제작해야 하므로, 그 비용에 대한 효용성을 고려해야 한다. 또한 분리 개발한 웹에 수정사항이 발생하면 다른 환경에 최적화된 나머지 웹페이지도 수정·변경해야 하므로 개발자로선 다소 번거로워질 수 있다. 이러한 단점에도 적응형을 쓰는 이유 중 하나는 콘텐츠의 양과 형식이다. 콘텐츠 양이 많을 경우에는 국내 시스템은 많은 정보를 압축해 한 화면에 표현하는 것을 선호한다. 단순한 웹페이지나 홈페이지의 경우, 그나마 콘텐츠가 단순하지만 소셜커머스나 기업 업무시스템들은 콘텐츠 양이 많고 복잡한 화면들이 대부분이다. 따라서 미디어 쿼리 등을 이용한 단순한 레이아웃 변경 방식인 반응형웹으로 콘텐츠의 배치와 배열을 정리하는 것은 쉽지 않은 반면, 적응형웹은 기획 첫 단계부터 기기에 알맞는 해상도를 고려한다. 화면에 담길 콘텐츠의 양을 조절하고 기기에 최적화된 디자인을 함으로써 가독성을 높이는데 상대적으로 자유롭다. 그리드 형태의 데이터 표현이 빈번한 경우에는 반응형웹은 그리드(Grid)형태로 데이터를 표현하는 것이 쉽지 않다. 행(row)과 열(clum)을 표현하는 그리드에서 행의 개수는 비교적 익숙하게 사용하는 상하 스크롤로 표현하지만, 해상도에 따라 열의 데이터가 안보이는 경우도 발생하고 가로축으로도 스크롤이 생겨서 정보를 확인하는데 불편함을 야기한다. 하지만 적응형웹은 디바이스 화면 사이즈에 맞는 열의 개수를 감안한 디자인할 수 있으므로 상하좌우로 스크롤바가 생기는 불편함을 없앨 수 있다. 시스템 성능이 중요한 경우에는 반응형웹은 기기별 CSS스타일과 개발 소스들을 전부 로딩하기 때문에 시스템 로딩 속도나 성능에 영향을 주는데 비해 적응형웹은 제작한 기기에 해당하는 CSS스타일과 개발 소스만 로드하기 때문에 상대적으로 성능 이슈가 적다. 이처럼 적응형웹은 기기별 맞춤형 기획을 진행하고 및 개발하는 방식을 택해 반응형웹의 아쉬운 부분들을 보완한다. 대형 포털 사이트 네이버나 다음 역시 PC와 모바일 페이지의 URL 주소를 별개로 두고 기기에 따라 높은 만족도의 사용자경험을 제공하고 있는 것이다.
필요성[편집]
- 레거시 시스템
레거시 시스템(Legacy System)은 현재까지 쓰이고 있거나 영향을 주고 있는 낡은 기술이나 방법론, 컴퓨터 시스템, 소프트웨어 등을 말한다. 기업의 레거시 시스템을 짧게 수년간, 길게는 몇십 년간 사용돼온 PC 위주 시스템으로, PC에 최적화 된 디자인과 기능으로 구성되어 있다. 따라서 단순하게 콘텐츠의 배치와 크기 조절을 통해 모바일 시스템을 구축하는 것은 현실적으로 어렵다. 이 때문에 레거시 시스템을 활용하고 있는 기업에서는 적응형웹 구현방식으로 새롭게 모바일 시스템을 구축하는 경향이 있다.
- 특수한 목적성을 띤 시스템
일반적인 홈페이지나 이벤트성 페이지 등 대고객 서비스를 지향하는 웹은 처음부터 반응형웹을 검토해 적용하는 것이 편할 수 있다. 하지만 예를 들어 택배, A/S 기사 처럼 특정 목적을 위해 시스템을 사용하는 사용자들은 본인이 활용하는 디바이스에 최적화된 시스템을 사용하길 원한다. 따라서 이들이 효율적으로 시스템을 활용할 수 있도록 적응형웹을 통해 디바이스에 최적화된 시스템을 구현하는 것이 좋다.
- 유지 및 보수 편의를 우선시하는 시스템
한 번의 개발 또는 하나의 소스로 모든 환경에 알맞은 시스템을 설계하고 구현하는 것이 이상적이긴 하나, 그 실현을 위한 고려사항이 생각보다 많고 원하는 성능을 낼 수 있을지 장담할 수 없다. 그래서 처음부터 각 사용자 환경을 별도로 분리해 처리한다. 또한 기간제 업무 시스템처럼 상대적으로 오랜 기간 동안 유지보수를 지속적으로 진행하는 시스템은 기기에 따라 비즈니스 로직이 달라지고, 그에 따라 화면이 달라진다. 그러므로 적응형웹을 고려하는 것이 현명할 수 있다.
활용[편집]
- 에스케이(SK)
- 데브.오페라(Dev.Opera)
- 삼성전기(Samsung electro-mechanics)
- 네이버(Naver)
- 다음(Daum)
- 아마존(Amazon)
- USA 투데이(USA Today)
- 애플(Apple)
- 닷대시(Dotdash)
- 웹스퀘어5(Websquare5)[3]
- 숭실사이버대, 모바일 LMS[4]
평가[편집]
새로운 디바이스가 시장에 나오면 이에 대한 고려를 해야 하는데 특히, 대고객 서비스의 경우 검색엔진최적화(SEO) 측면도 신경 쓰이는 부분이다. 여전히 반응형 웹이 N스크린(N-Screen) 대응을 위한 대표적인 방법론으로 거론되고 있는 것은 적응형웹이 성공사례를 축적해 나가며 극복해야 할 중요한 과제 중 하나다. 적응형웹의 성공사례를 통해 사용자 경험을 고려하지 않은 채 구현된 반응형 웹이 'N스크린이 양산해내는 문제점들을 근본적으로 해결했다고 봐야 하는 것인지'에 대해 지속적으로 의문을 제기하고, 많은 사람들의 인식 속에 뿌리내린 '반응형 웹에 대한 환상들'을 바로잡아 나가야 할 것이다.[5]
각주[편집]
- ↑ 〈Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement〉, 《구글도서》
- ↑ 마룬마로, 〈적응형 웹은 반응형 웹의 반대말일까?〉
- ↑ 고수연 기자, 〈인스웨이브 '웹스퀘어5', 적응형 웹(Adaptive Web) 기능 적용〉, 《아이티데일리》, 2014-07-22
- ↑ 온라인뉴스팀, 〈숭실사이버대, 모바일 LMS 하이브리드 앱/웹 제공〉, 《매일방송》, 2019-02-13
- ↑ 김차영,조신애 기자 〈(기고) 반응형 웹의 진실: 트렌드 따라가다 내실 놓친다〉, 《아이티데일리》, 2016-05-02
참고자료[편집]
- 조신애 기자, 〈적응형 웹 전성시대: 반응형 웹의 대안이 될 수 있나)〉, 《아이티데일리》, 2016-06-01
- AD CLIP, 〈(식후 30분 마케팅 상식) 반응형 웹과 적응형 웹, 그 차이점은?〉
- 인디스카이, 〈반응형웹, 적응형웹 각 특징과 장단점〉
- 마룬마로, 〈적응형 웹은 반응형 웹의 반대말일까?〉
- 김국배 기자, 〈인스웨이브, 적응형 웹 기술 특허 획득〉, 《아이뉴스24》, 2017-02-23
- 제프 그레이엄〈반응 형 디자인과 적응 형 디자인의 차이점〉, 《씨에스에스-트릭》, 2015-11-17
- JiGyeong, 〈반응형 웹(feat.미디어 쿼리)/적응형 웹〉, 2019-03
- 〈14 9월 2017 웹 디자인 트렌드 분석과 2018 트렌드 전망〉, 《브랜드웨이브》, 2017-09
- ozlog, 〈반응형 웹과 적응형 웹〉, 《위즈》, 2016-01-05
같이 보기[편집]
| ||||||||||||||||||||||
