업무 환경서 반응형웹이 2% 부족한 이유

한가지 코드 소스로 디바이스 마다 최적화된 화면을 보여줄 수 있다는 장점을 가진 반응형웹 기술이 최근 웹개발자들에게 큰 관심을 받고 있다.

하지만 반응형웹이 만능은 아니라는 지적도 만만치 않다. 소스가 복잡해지는 등 개발상 어려움도 있지만 텍스트 중심으로 페이지를 구성하는 미국이나 유럽과 달리 유독 복잡해도 화려한 화면을 좋아하는 국내 사용자 정서상 반응형웹을 적용하기가 쉽지 않다는 얘기가 많다.

특히 반응형웹으로 만들어진 사이트로 업무를 보기엔 효율성면에서 2% 부족하다는 지적이다. 개발과 유지관리에 적은 비용만 투입하면서 스마트워크 환경까지 챙겨야하는 업무용 사이트 개발자들 입장에선 어떤 방법으로 접근해야 효율적일까?

기업용 UI UX개발 플랫폼 제공업체 인스웨이브시스템즈(이하 인스웨이브)의 김욱래 연구개발본부 이사는 “반응형웹에 비해 덜 알려졌지만 적응형웹이 브라우저와 서버 기술을 모두 사용해 보다 디바이스에 최적화된 화면을 생성할 수 있는 방법”이라고 제안했다.

반응형웹은 CSS3의 미디어쿼리, 그리드 레이아웃, 플렉서블 이미지를 사용해 디바이스 해상도에 반응하는 웹 디자인 방식을 말한다. 반면 적응형웹은 반응형웹의 부족한 점을 보안하려는 기술적 흐름을 통틀어 부르는 말이다.

김욱래 본부장은 콘텐츠 중심의 웹페이지는 반응형웹으로 충분하지만, 업무화면과 같이 표와 탭으로 구성된 복잡한 화면을 모바일로 적용하려면 적응형웹을 도입해야 원소스멀티유즈가 가능하다고 강조했다.

그는 국내 업무 화면에 많이 쓰이는 그리드를 예로 들어 설명했다. 그리드는 표형태로 대량의 데이터를 처리하는 것으로 AS접수 화면을 떠올리면 이해가 쉽가. 그리드에 항목별로 접수된 내용을 입력하고 또 필요할 때 누가 어떤 AS를 접수했는지 찾아볼 수 있는 식이다.

반응형웹으로 그리드를 구현하면 폭이 좁은 스마트폰 화면에서 좌우 스크롤이 길게 생길 수 밖에 없다. 스크롤을 이동하다 보면 맨 좌측에 있는 정보와 현재 보고 있는 정보가 매칭이 안돼, 업무 생산성이 크게 떨어진다는 것이 그의 설명이다.

반면 적응형웹을 도입하면 디바이스 크기에 따라 최적의 UI로 그리드 모양을 바꿔 줄 수 있게 된다. 반응형웹이 클라이언트단에서 디바이스를 구분한다면 적응형에서는 클라이언트는 물론 서버단에서도 디바이스를 구별하고 최적화된 화면을 보내 줄 수 있기 때문이다.

그는 인스웨이브 HTML5 UI제작툴 웹스퀘어5에 들어간 적응형웹 컴포넌트를 예로들어 설명했다. 웹스퀘어5에서는 3단계로 해상도에 따라 그리드 UI를 맞춰 준다. “먼저 화면이 일정 해상도 이하로 작아지면 중요도가 떨어지는 내용을 숨겨주고 그보다 더 작아지면 스크롤이 생긴다 그보다 더 작아지면 표의 가로축과 세로축을 바꿔 짝이 되는 정보가 세로로 노출되게 했다”고 말했다. 이를 포함해 웹스케어5에는 다른 적응형웹 옵션이 6가지 지원된다.

인스웨이브는 웹스퀘어5의 장점으로 적응형웹을 강조하고 있다. 적응형웹 기능은 지난 3월 처음 제품을 출시했을 때만 해도 없던 기능인데 7월 업그레이드 되면서 포함됐다.