Skip to content

Posts 안전망으로써의 반응형 웹 디자인 #
Find similar titles

다양한 기기에 대응하고자 할때 반응형 웹 디자인(이하 RWD)을 적용하는 것이 ROI 측면에서 유리하지만, 최적의 사용자 경험을 생각한다면 여기에서 그칠게 아니라 RWD를 최소한의 안전망 또는 출발점으로 생각하면 좋겠다.

다양한 기기에 대응하기 위한 방법들 #

회사에서 하는 거의 모든 일은 결국 돈(ROI)과 관련이 있으므로 RWD에 대해서도 이 관점에서 이야기를 해보자. 인터넷에 접속하는 기기의 종류가 점점 다양해지는 상황에서 웹 사이트를 어떻게 제작/관리해야 가장 비용효과적일까?

  1. 기기별로 별도의 웹사이트를 제작하는 방법
  2. 기기를 몇 개의 묶음으로 분류하고(이를테면 폰, 타블릿, 데스크탑) 각각의 묶음에 최적화된 별도의 웹사이트를 제작하는 방법
  3. 모든 기기에 대응할 수 있는 범용적인 디자인을 하는 방법

대충 위와 같은 방법들이 떠오른다. 하나씩 따져보자.

기기별 웹 사이트 #

기기별로 별도의 웹사이트를 제작하는 방법에 대해 생각해보자.

이 방법은 기기의 종류가 다양해질수록 만들어야할 웹사이트가 많아지므로 비용(I)이 늘어난다는 단점이 있다. 게다가 종류가 다양해짐에 따라 개별 기기의 시장 점유율은 점점 낮아질테니 회수(R)는 줄어들기 때문에 그다지 효과적인 방법이 아니다.

대안으로는 시장 점유율이 가장 높은 몇 개의 기기를 선정하여 해당 기기들에 대해서만 각각에 최적화된 별도의 웹사이트를 제작하는 방법이 있을 수 있다. 하지만 이 안도 기기가 다양해질수록 "시장 점유율이 높은 몇 개"를 선정할 때 골라야할 "몇 개"의 수가 커지고, 이 "몇 개"의 기기가 커버하는 점유율은 점점 낮아지게 마련이므로 ROI가 높지 않다.

기기를 몇 개의 묶음으로 분류하기 #

기기를 몇 개의 묶음으로 분류하고(이를테면 폰, 타블릿, 데스크탑) 각각의 묶음에 최적화된 별도의 웹사이트를 제작하는 방법을 생각해보자.

이게 잘 되려면 기기를 분류할 수 있는 명확한 기준이 존재해야 한다. 하지만 그런 기준이 존재하나? 예를 들어 화면 크기를 기준으로 현재 출시된 기기들을 나열해보면 3인치에서 10인치 사이를 거의 소수점 첫째 자리까지 빈틈없이 꽉 채울 수 있을 지경이다보니 폰, 타블릿, 데스크탑이라는 분류는 더이상 유용하지 않다. 5인치는 폰인가 타블릿인가? 페블릿(Phone + Tablet) 같은 용어를 추가해봤자 모호한 지점이 사라지지는 않는다.

(다양한 화면 크기에 대한 논의는 이 사이트는 1024x768 크기에 최적화되어 있습니다를 참고)

게다가 다양한 기기에 대응하는 웹 사이트를 디자인하고자 할 때 화면의 크기는 다양한 기준 중 하나일 뿐이다. 그 밖에도 여러가지 기준이 있고 하나같이 모호하다. 예를 들어 조작 방식을 기준으로 따져보자. 가장 흔하게는 터치 방식과 키보드+마우스 방식으로 나눌 수 있을 것 같지만 블루투스 키보드에 연결된 아이패드, 키보드와 분리되는 타블릿 PC류, 터치스크린을 지원하는 데스크탑 등은 뭘로 분류하는 것이 좋을까?

기기를 몇 개의 묶음으로 분류하고 각 묶음에 대해 최적화된 디자인을 할 수 있을 것이라는 가정은 현실적이지 못하고, 설사 그런 묶음이 가능하다고 하더라도 묶는 기준이 장기적으로 안정적으로 유지된다고 생각하기 어렵다. 소프트웨어 디자인에서의 교훈을 웹 디자인 분야에 전용해서 말하자면 안정적이지 못한 요소에 의존하는 설계는 좋지 않다(Stable dependencies principle).

모든 기기에 대응되는 범용적인 디자인 #

마지막으로 모든 기기에 대응할 수 있는 범용적인 디자인을 하는 방법이 남는다.

그런데 여기에서 말하는 "모든 기기에서 작동하는 범용적 디자인"이라는 것은 필연적으로 어떤 기기에도 최적화되지 않은 디자인을 의미한다.

제작 비용 측면에서는 싸겠지만 사용자 경험 측면을 생각하자면 그다지 좋은 방법이 아니다. 사용자 경험의 향상은 고객 충성도의 향상 등으로 이어지기 때문에 ROI 측면에서도 중요한 요소이다.

안전망으로써의 반응형 웹 디자인 #

따라서 올바른 접근은 "범용적인 디자인"을 먼저 한 후 시장 점유율이 높은 기기에 맞는(정확히 말하자면 시장 점유율이 높은 기기들이 가지고 있는 특성(features)에 맞는) 디자인을 추가하는 것이다.

즉, RWD를 통해 모든 기기에서 그럭저럭 작동하는 범용적 웹사이트를 "깔아놓은 후에", 시장 점유율이 높은 몇몇 기기에 대해 추가적인 지원을 고려하는 순서로 접근하는 것이다. 이 접근에서 RWD는 그 자체로 끝이 아니라, 기기별/상황별로 최적화된 사용자 경험을 제공하기 전에 선행되어야하는 안전망 혹은 출발점 같은 개념으로 보아야 한다.

이렇게 하면 미래에 어떠한 기기가 추가되더라도 일단 적어도 사이트가 작동은 되므로, 그야말로 효과적인 안전망이 깔린 것과 같다.

어디서 많이 들어본 소리라는 생각이 든다면 그건 기분탓...이 아니라 실제로 어디서 들어본 소리이기 때문이다. 안전망으로써의 RWD라는 개념은 사람들이 옛날부터 얘기하던 Progressive enhancement 개념과 같고, 모든 웹 디자이너들이 원래 따랐어야 하는 방식인 것이다.

Incoming Links #

Related Articles #

Suggested Pages #

Other Posts #

0.0.1_20140628_0