Fluid 웹 디자인, 반응형 웹 디자인과 무엇이 다를까?

스마트폰과 태블릿이 보급되며 웹 디자이너들은 어려움을 겪고 있습니다. 표준 크기의 윈도우 브라우저뿐만 아니라 다양한 크기의 스크린에 알맞은 온라인 경험을 만들어야 하기 때문입니다. 

“그냥 단순히 크기만 줄이면 되는 거 아닌가요?” 아직 잘 몰랐던 신입 시절에는 이렇게 생각했습니다. 

“데스크톱 버전으로 우선 만들고, 이걸 작게 만들면 될 것 같은데요. 문제 해결!” 이런 식이었다면 정말 단순했을 겁니다.

실제로 성공을 거둔 모든 웹사이트는 모바일 사용자를 염두에 두고 기획되어야 합니다. 모바일 인터페이스의 우선순위를 할당하는 웹 개발 프레임워크가 나올 정도이죠. 대부분의 온라인 비즈니스는 열악한 디자인과 사용성으로 잃을 모바일 사용자조차 없는 경우도 있습니다.

하지만 걱정해야 할 건 작아진 화면뿐만이 아닙니다. 더 넓어진 화면이나 스마트 TV 때문에 뷰포트(viewport, 웹페이지를 표시하는 스크린 내 영역)가 여러 방향으로 확장되는 경우까지 고려해야 합니다. 그렇다면 이토록 다양한 스크린 모양과 크기를 수용하려면 어떤 솔루션이 필요할까요?

이번 포스트에서는 위와 같은 상황의 솔루션이 될 수 있는 Fluid 웹 디자인에 대해 살펴보겠습니다. Fluid 디자인이란 무엇이며, 어떻게 움직이는지 그리고 다른 디자인과 어떤 차이가 있는지 정리했습니다. 이 글을 다 읽고 나면 웹페이지와 그 안의 엘리먼트(element, 요소)를 확장하는 최고의 방법이 무엇인지 결정할 수 있을 겁니다.

세 개의 엘리먼트가 인접한 웹사이트를 상상해보겠습니다. 하나에는 50%의 너비를 주었고, 나머지 둘에는 20%의 너비를 주었습니다. (아래의 예시에서 높이는 중요하지 않습니다.) 또한, 각 엘리먼트 사이에는 약간의 마진(margin)을 두었습니다. 

1,000px짜리 너비를 지닌 윈도우 브라우저 창에 뜬다고 가정하면, 위의 웹사이트는 아래와 같이 보일 겁니다.

각 요소의 너비는 1,000픽셀의 너비를 지닌 뷰포트를 기준으로 계산한 수치입니다.

이때 브라우저의 창을 600픽셀로 줄여봅시다. Fluid 디자인은 이 엘리먼트들을 화면 크기에 비례하게 조정합니다.

Fluid 디자인은 스크린과 관계없이 웹사이트의 레이아웃이 언제나 비슷하게 보이게끔 해줍니다. 일관된 레이아웃은 가능한 많은 방문자에게 사용성을 보장해주면서, 사용자 경험이 향상되도록 돕습니다.

웹디자인의 가변 그리드(Fluid Grids)

‘가변 그리드’는 Fluid 디자인에서 자주 사용하는 구현기술입니다. ‘가변 그리드’는 페이지의 너비를 같은 크기와 간격을 지닌 복수의 열로 나눕니다. 그리고 페이지 내 콘텐츠는 복수의 열에 맞추어 배치됩니다.

뷰포트가 수평으로 확장되면 각각의 열도 이에 맞추어 확장되고, 해당 열 안에 배치된 콘텐츠 역시 확장되는 방식입니다.

그리드는 페이지의 콘텐츠를 소화 가능한 방식으로 구조화하기 위한 레이아웃입니다. 여기에 반응형 원칙(fluid principles)을 적용한 ‘가변 그리드’는 다양한 화면에서도 그리드를 적절하게 보여주는 방법입니다.

그러나 가변 그리드가 유일한 해결책은 아닙니다. 일반적으로 널리 사용되는 세 가지 레이아웃 디자인, fixed 디자인, adaptive 디자인 그리고 responsive 디자인을 살펴보겠습니다.

Fixed 디자인 vs. Fluid 디자인

Fixed 디자인을 따르는 레이아웃은 뷰포트 크기를 따르지 않습니다. Fluid 디자인의 가변 그리드와 다르게 fixed 레이아웃의 엘리먼트들은 정해진 픽셀만큼 너비가 정해집니다. 이러한 너비는 기종이나 화면 크기에 상관없이 언제나 같습니다.

디자이너들은 Fixed 디자인을 선호하지 않습니다. 여러 장치에서 유연성과 사용자 친화성이 떨어졌기 때문입니다. 아마 지금은 Fixed 디자인이 적용된 비즈니스용 웹사이트를 찾기도 어려울 겁니다. 현재 대부분의 디자이너는 Fluid나 adaptive 그리고/혹은 responsive 디자인의 웹사이트를 선호합니다. 실제로 Fixed 디자인보다 더 유용한 경우가 많습니다.

Adaptive 디자인 vs. Fluid 디자인

Fluid 레이아웃은 웹사이트를 더 유용하게 만들어줍니다. 하지만 adaptive 디자인 하에서는 미세한 조정이나 제어가 어려운 편입니다. adaptive 디자인은 특정한 복수의 디바이스에 맞추기 위해 디자이너가 각각의 화면 너비에 맞춘 웹사이트 레이아웃을 여러 개 만들어야 합니다. 따라서 웹 사이트는 데스크톱, 태블릿 혹은 스마트 폰에서 보기 위한 별개의 레이아웃 디자인을 지녀야 합니다.

웹 디자이너는 사용자 장치의 정보(특히 기기의 화면 크기 등)를 감지하는 CSS의 미디어 쿼리 기능을 활용하여 adaptive 디자인을 구현할 수 있습니다. 미디어 쿼리는 스크린 사이즈를 읽어 들이고, 사전에 준비된 여러 개의 fixed 레이아웃 중에서 가장 적합한 레이아웃을 선택합니다.

Fluid 디자인은 매우 크거나 매우 작은 화면에서는 투박해 보일 수도 있는 반면에 adaptive 디자인은 특정 장치에서 더 정밀한 레이아웃을 만들 수 있도록 돕습니다. 이 세상의 모든 디바이스에 맞게 설계할 수 있다면 ‘나쁜 UX’란 단어는 사전에서 지워버려도 될 정도입니다.

하지만 이런 장점을 상쇄하는 단점이 있습니다. 아마도 Fluid 디자인보다 훨씬 더 많은 시간이 소요될 것이라는 점입니다. 기본적으로 하나의 동적인 레이아웃이 아닌 여러 개의 레이아웃을 만들어야 하므로 개인이 관리하는 웹사이트가 소화하기에는 적합하지 않습니다. 새로운 기기가 출시될 때에는 더더욱 그렇습니다.

Responsive 디자인 vs. Fluid 디자인

“responsive”라는 용어도 많이 들어보셨을 터입니다. “서로 다른 장치에서도 레이아웃이 알맞게 조정되는 웹사이트”를 설명하면서 많이 사용하는 단어입니다. 이러한 맥락에서 살펴본다면 fluid 디자인 그리고 adaptive 디자인 역시 기술적으로는 “responsive”라고 할 수 있습니다.

하지만 “responsive”라는 단어는 위와 같은 조정을 취하는 특정 디자인 기법이 될 수도 있습니다. (바로 이 부분에서 용어사용의 혼란이 올 수도 있습니다.) 이번 글에서는 후자의 의미에 초점을 맞추어 responsive 디자인을 설명하겠습니다.

responsive 디자인의 레이아웃은 브레이크 포인트(breakpoint, 구획점)를 기반으로 웹 페이지 내 엘리먼트의 크기를 조정하거나 재구성하는 데에 적용되는 싱글 레이아웃입니다. 브레이크 포인트는 특정한 뷰포트의 (픽셀) 너비 값임과 동시에 웹 사이트의 레이아웃이 변경되도록 만드는 트리거 역할을 맡습니다. 브레이크 포인트는 CSS의 미디어 쿼리를 통해 설정할 수 있습니다.

Fluid 디자인과 다르게 responsive 웹사이트는 브레이크 포인트를 단순히 리사이징에만 사용하는 대신 엘리먼트의 재배치나 제거에 사용합니다. 따라서 responsive 레이아웃은 데스크톱과 태블릿, 스마트폰 등에서 상당히 다르게 보일 수 있습니다.

아래의 사례는 의류 브랜드 Kotn의 responsive 웹사이트입니다. 웹사이트의 브레이크 포인트는 960px 그리고 560px로 설정되어 있습니다. 브라우저 창을 축소해보면서 브레이크 포인트의 효과를 확인해보세요. 

여기에서는 그저 엘리먼트의 너비를 줄이는 작업보다 더 많은 일이 일어나고 있습니다. 또한, 콘텐츠 그 자체도 변하고 있습니다.

Responsive 디자인은 매우 인터렉티브하며 콘텐츠가 풍부한 비즈니스 웹사이트의 지향점입니다. 순수한 fluid 페이지보다 해야 할 작업은 더 많지만, Responsive 디자인은 텍스트, 미디어 그리고 엘리먼트의 인터렉션을 모든 화면에서 훌륭하게 보여줍니다. 특히 단순히 페이지 엘리먼트의 크기를 줄이는 것만으로는 사용성이나 미학을 보장할 수 없는 경우에 더더욱 빛을 발합니다.

그렇다면 언제 Fluid 디자인을 사용할까요?

Fluid 디자인은 만능 솔루션이 아닙니다. responsive 디자인이나 adaptive 디자인과도 다릅니다. 위의 방법들을 한 번에 하나씩만 사용해야 할 필요는 없습니다. 둘 중 하나를 선택하고 결합하여 사용자의 모바일 경험을 향상할 수 있습니다. 

Fluid 디자인을 고려할 때, 생각해봐야 할 점은 아래와 같습니다.

• 잠재 고객 관련 지표 : 구글 애널리틱스와 같은 트레킹 툴로 자사의 트래픽을 데스크탑, 태블릿, 모바일별로 나눌 수 있습니다. 그리고 자사의 디자인 인력이나 리소스를 어디에 투입할지 결정할 수 있습니다.
• 사이트 콘텐츠 : 사이트에 텍스트, 미디어 그리고 인터렉션이 상대적으로 덜 들어갔다면, 일부 페이지 혹은 모든 페이지에서 순수한 fluid 디자인이 들어가는 건 피할 수 있습니다. 이 단계에서는 레이아웃을 와이어 프레임으로 매핑하는 편이 좋습니다.
• 리소스: 상대적으로 단순하기 때문에, fluid 디자인은 일반적으로 시간이나 비용이 덜 들어갑니다. 제로 베이스부터 통합하는 작업에도 (상대적으로) 적은 인력만 투입할 수 있습니다. 최근에는 즉시 사용 가능한 responsive 페이지 템플릿을 갖춘 웹사이트 빌더 서비스가 여럿 등장하면서 디자인 인력이 부족한 회사에서도 복합한 responsive 페이지를 더 쉽게 구축할 수 있게 되었습니다.

마지막으로 페이지에 fluid 엘리먼트를 통합하는 경우라면, 자사의 사이트를 스마트폰에서부터 대형 데스크톱 브라우저 창까지 다양한 크기의 스크린에서 테스트해보세요. 특정한 사이즈에서 어떻게 작동해야 할지 구체적인 지시가 없다면 fluid 디자인은 자사의 UX에서 제대로 돌아가지 않을 수도 있습니다. 하지만 궁극적으로는 자사가 바라는 웹사이트의 지향점에 도달할 수 있도록 도울 겁니다. 

그 외의 UX 관련 콘텐츠가 궁금하다면 헬로디지털 뉴스레터를 구독하고 누구보다 빠르게 디자인 인사이트를 얻어가세요.