09.25
뉴스홈 > 칼럼
[강좌] 적응형 웹 디자인원소스 멀티유즈를 위한 새로운 전략

   
▲ 김욱래 인스웨이브 SW본부 본부장
[컴퓨터월드]

모바일웹의 현재

2009년 스마트폰이 국내에 처음 소개되면서 모바일 브라우저를 지원하는 웹사이트의 제공은 인터넷 서비스 기업의 주요 업무 중 하나가 되었다. 이후 스마트폰과 태블릿이 확산되면서 모바일 우선주의(Mobile First)가 웹사이트 기획의 핵심 지침이 되었고 모바일 환경을 지원해야 하는 니즈는 더욱 증가하게 되었다. 현재 네이버와 같은 포털이나 인터넷쇼핑 사이트와 같이 고객을 대상으로 하는 웹 서비스의 대부분은 모바일 브라우저에서 서비스가 원활하게 동작하는 웹사이트를 제공하고 있다.

이러한 모바일 브라우저용 웹서비스를 제공하는 방법은 모바일 전용 웹사이트와 반응형 웹사이트로 나뉜다. 모바일 전용 웹사이트는 기존 데스크톱 PC용 웹사이트와 별도로 모바일 브라우저에 최적화된 웹사이트를 추가 개발하는 전략으로 최적의 사용자 경험을 제공할 수 있다는 장점을 가지고 있지만 두 개의 웹사이트를 개발하고 관리해야 하는 것에서 오는 비용 증가 및 서비스 대응 시간 증가의 문제점을 가지고 있다. 게다가 태블릿이 확산되면서 스마트폰과 다른 새로운 해상도의 기기를 지원해야 하는 이슈가 발생하였다.

이러한 문제점을 해결하고 하나의 소스를 여러 가지 디바이스를 지원하는 원소스멀티유즈(OSMU:One Source Multi Use) 방안에 대한 기업의 관심이 증가하게 되었다. 2010년 반응형 웹 디자인이 국내에 처음 소개가 되면서 반응형 웹 디자인은 모바일과 데스크톱을 동시에 지원하고자 하는 기업의 주요한 해결방안이 되었다.

 

반응형 웹 디자인 개념 및 한계

위키피디아에 의하면 반응형 웹 디자인(Responsive web design)은 모바일폰부터 데스크톱 컴퓨터까지 다양한 종류의 기기에서 읽기 쉽고 사용하기 쉬운 환경을 제공하여 최적의 사용자 경험을 제공하는 사이트를 만드는 웹 디자인 방법을 말한다.

반응형 웹 디자인은 Ethan Marcotte가 2010년 5월 A List Apart에 쓴 Responsive Web Design을 통해서 처음 소개가 되었다. Ethan은 그의 글에서 CSS3 미디어쿼리, 유동형 그리드 레이아웃(fluid grid), 유연한 이미지(flexible images) 기법을 이용하여 페이지 레이아웃, 이미지 및 타이틀의 크기가 디바이스의 화면 크기에 반응하는 웹사이트 개발하는 방법을 설명하였다. 이후 다양한 기법들이 소개되었지만 그 기술의 핵심은 큰 차이가 있지 않았다.

이러한 반응형 웹 디자인은 다양한 디바이스를 지원하고자 하는 기업의 핵심 해결방안이 되었고 성공사례도 다수 확인되었지만 다수의 기업은 여전히 반응형 웹을 적용하는데 어려움을 겪고 있는 것이 엄연한 현실이다.

반응형 웹 디자인을 적용할 때 당면하는 주요한 어려움은 경험이 풍부한 개발자 확보의 어려움, 인터넷익스플로러 7,8과 같은 구형 브라우저의 사용률이 높은 환경 및 미국과 다르게 하나의 화면에 많은 콘텐츠를 표현하는 것을 선호하는 문화이다.

첫 번째 어려움인 반응형 웹 디자인에 대한 경험이 풍부한 개발자 확보의 어려움은 모바일 웹 환경이 확산되고 관련 프로젝트가 다수 진행되면서 자연스럽게 해결되었고 두 번째 어려움인 구형 브라우저의 높은 사용률은 윈도우 XP에 대한 마이크로소프트 지원종료 및 사용자 PC 환경의 개선에 따라 점진적으로 해결되어 가고 있다.

하지만 많은 정보를 압축하여 한 화면에 표현하는 것을 선호하는 문화는 쉽게 바뀔만한 성격의 문제가 아니다. 특히 기업 업무용 웹사이트의 경우 이러한 문화적인 차이가 더욱 두드러지게 나타나서 반응형 웹 디자인을 적용하여 모바일폰, 태블릿, 데스크톱 PC를 동시에 지원한 국내 기업의 업무용 웹사이트는 찾아보기 어려운 상황이다.

국내 기업의 일반적인 업무 페이지는 각종 테이블, 그리드, 트리가 복잡하게 구성되어 있고 하나의 화면에 보다 많은 내용을 표현하기 위하여 여러 개의 탭을 사용하는 것도 드물지 않은 상황이다. 이러한 복잡한 화면 보완하고 반응형 기술을 도입하여 태블릿 환경을 지원하는 것은 크게 어렵지 않지만, 화면의 크기가 데스크톱과 비교하여 5분의 1 정도인 스마트폰을 지원하는 것은 상당히 도전적인 작업이다.

   
▲ 반응형 웹을 활용한 홈페이지

 

문화적 차이 극복하고 원소스 멀티유즈 적용키 위한 방안

그렇다고 화면 구성을 스마트폰에 최적화하여 구성하게 되면 업무 처리 시 주로 사용되는 데스크톱 PC 환경에서의 사용성이 떨어지는 문제점이 있어서 선택이 어려운 상황이다.

적응형 웹 디자인은 이러한 문화적인 차이를 극복하고 원소스 멀티유즈를 적용하기 위한 가장 현실적인 방안이다. 적응형 웹 디자인(Adaptive Web Design)은 반응형 웹 디자인과 클라이언트나 서버 기술을 이용하여 디바이스 해상도에 최적화된 마크업을 생성하는 방식이 결합된 기술로 Aaron Gustofson가 2011년 처음 개념을 소개하였고 모바일 우선주의(Mobile First)로 유명한 Luke Wroblewski가 RESS(Responsive Design + Server Side Components)에 대한 글을 쓰면서 널리 확산되었다.

이러한 적응형 웹 디자인의 경우 브라우저 기술과 서버 기술을 모두 사용하여 디바이스에 보다 최적화된 화면을 생성하는 것이 가능하여 특히 표와 탭으로 구성된 복잡한 업무 화면을 모바일로 적용하는 것도 가능하다.

국내 기업의 업무 페이지를 원소스 멀티유즈(OSMU - One Source Multi Use)가 가능한 적응형 웹 디자인을 적용하기 위해서는 유동형 테이블, 크로스탭 그리드와 같이 복잡한 화면을 선호하는 문화를 고려한 적응형 웹 기술이 필요하다. 각각의 주요한 기술 특징은 다음과 같다.

1. 유동형 테이블(Fluid Table)

   
 

여러 개의 열이 표현되는 표 형태의 화면 구성은 한 화면에 많은 정보를 표현할 수 있지만 가로 해상도가 극단적으로 줄어드는 스마트폰 환경에서는 가독성이 떨어지는 문제가 있다. 유동형 테이블은 여러 개의 열로 구성된 테이블을 기기의 종류에 따라 레이블과 값 두 개의 열로 재구성하여 표현하는 적응형 웹 디자인 기술로 표 형태의 화면 구성이 일상적인 국내에서는 반드시 필요한 기술이다.

2. 크로스탭 그리드(Crosstab Grid)

   
 

그리드는 대량의 데이터 표시를 위하여 가장 선호되는 컴포넌트로 각 열에 반복적인 데이터를 표현하여 데스크톱 PC와 같이 넓은 화면에 최적화된 화면 표시 방식이다. 크로스탭 그리드는 세로 해상도가 가로 해상도보다 큰 스마트폰과 같은 기기 환경에서는 행과 열을 반대로 표현하여 한번에 보면 좋은 각 열의 데이터를 가로로 배치하여 다수의 열을 가로 스크롤을 이용하여 사용이 가능하도록 하는 방식으로 스마트폰 화면에서 최적화된 적응형 웹 디자인 기술이다.

3. 점진적 컬럼 숨김 그리드(Progressive Hide Grid)

   
 

점진적 컬럼 숨김 그리드는 화면해상도에 따라 중요성이 떨어지는 컬럼을 숨기는 기능을 제공하는 적응형 웹디자인 기술이다. 일반적으로 데스크톱 PC에서는 넓은 화면에서 다양한 그리드 정보를 모두 표현하기 위해 다수의 컬럼 정보를 보여주지만, 모바일 기기 등에서는 다양한 정보가 우선이 아닌 정확한 정보를 전달하기 위하여 핵심 정보 위주로 표현할 때 매우 적합한 기술이라고 할 수 있다.

4. 반응형 스크롤 그리드(Responsive Scroll Grid)

   
 

반응형 스크롤 그리드는 일정 크기 이하의 화면에서는 중요 컬럼은 틀 고정되고 나머지 컬럼에 가로 스크롤이 생기는 적응형 웹디자인 기술이다. 점진적 컬럼 숨김 그리드와 유사한 면이 있을 수 있지만, 대체로 태블릿 등의 모바일 기기에서 사용되어 적지 않은 너비의 폭에서 그리드의 정보를 전달할 때 사용되며 중요한 컬럼 정보는 항상 보이도록 유지시키고 선택적인 정보들은 스크롤을 이용하여 확인할 수 있도록 하여 정보 전달을 효율적으로 각인시킬 수 있는 기술이다. 또한, 점진적 컬럼 숨김 그리드 기술과 병행하여 사용하면 더욱 유용하게 사용이 가능하다.

5. 아코디언 탭(Accordion Tab)

   
 

데스크톱 PC와 같이 마우스를 이용하여 탭 콘텐츠를 사용할 때는 화면 사이즈와 무관하게 각각의 개별 탭을 선택하여 콘텐츠를 전환하는데 큰 불편이 없다. 하지만, 태블릿이나 스마트폰과 같은 터치 방식을 사용하는 환경에서의 탭 콘텐츠를 전환할 때는 적잖은 불편을 감수해야 하는 경우가 있다. 이런 경우 콘텐츠 간 전환 방식을 좀 더 쉽게 선택하기 위한 방법으로 아코디언 기술을 많이 사용하는 편이다. 이와 같이 아코디언 탭 기술은 데스크톱에서는 기존 방식의 탭 콘텐츠 사용 방식을 사용하며 터치 방식의 모바일 기기에서는 아코디언 탭 방식으로 전환시켜 주며, 세로 스크롤을 이용하여 콘텐츠를 유연하게 확인할 수 있도록 도와주는 유용한 적응형 웹디자인 기술이라고 할 수 있다. 각각의 개별 콘텐츠 레이어 내부의 콘텐츠들은 위의 열거한 기술들을 병행하여 사용하면 최적의 적응형 웹디자인 기술이 적용된 웹페이지를 제작할 수 있다.

   
▲ 적응형 웹을 적용 사례

 

적응형 웹 디자인 도입 전략

그럼 기업이 적응형 웹 디자인을 도입할 때 어떠한 전략을 가져가는 것이 좋을까?

스마트폰과 태블릿의 성능이 데스크톱 PC에 근접하고 있지만 여전히 기기별 성능차이로 인한 부분을 고려하여야 한다. 또한 항상 표준기술 중심으로 사고하는 습관을 가져야 한다. 적응형 웹 디자인 도입의 목적이 원소스 멀티유즈를 넘어 원소스 롱유즈(One Source Long Use)를 위한 것임을 잊지 않는다면, 새로운 시스템의 도입 시 발생하는 기업의 시행착오와 손실을 최소화할 수 있을 것이다.

인기기사 순위
(우)08503 서울특별시 금천구 가산디지털1로 181 (가산 W CENTER) 1713~1715호
TEL : 02-2039-6160  FAX : 02-2039-6163  사업자등록번호:106-86-40304
개인정보/청소년보호책임자:김선오  등록번호:서울 아 00418  등록일자:2007.08  발행인:김용석  편집인:김선오