gabiadesign | 가비아닷컴 반응형 웹 리뉴얼
34868
single,single-post,postid-34868,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-3.1,wpb-js-composer js-comp-ver-4.3.5,vc_responsive
designgabia_layout_2019

가비아닷컴 반응형 웹 리뉴얼

지난 2019년도 하반기에 진행하여 2019년 10월에 오픈한 가비아닷컴 반응형웹 리뉴얼 작업을 소개합니다.

가비아닷컴은 모든 상품들을 가비아라는 하나의 브랜드 아래에서 노출시키고 있는 사이트입니다. 웹과 모바일 2가지 환경에 맞춘 적응형웹으로 운영해오면서 모바일 페이지는 신규 기능 및 기능 개선 업데이트 같은 사이트 관리가 누락되거나, 디자인이 PC에서는 최적화되어있지만 모바일이나 태블릿 등 디바이스에서의 콘텐츠 가독성이 높지 않았습니다. 그리고 이벤트 페이지도 PC형으로만 되어 있어 모바일에서 유입시 PC화면이 뜨는 등 마케팅 활동에 제한이 있었습니다. 이러한 단점을 보완하여 고객들이 다양한 디바이스에서도 가비아닷컴에 접속하여 원하는 서비스를 제공받을 수 있도록 반응형웹 작업을 진행하였습니다.

 

반응형웹 디자인이란?

01

반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다.

웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있습니다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있습니다. 또한 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영됩니다. 반응형 웹의 핵심 기술은 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)입니다. 반대말은 디바이스별로 별도의 웹사이트를 제작하는 적응형 웹(adaptive web)입니다.

 

Multi-Device Layout Patterns

반응형 웹에 사용되는 레이아웃은 5가지 패턴으로 요약할 수 있습니다. 한가지 패턴만을 사용하는 것이 아닌 조합하여 사용하기도 합니다.

Mostly Fluid

가장 보편적으로 쓰이는 심플한 패턴입니다. 큰 화면에서 작은 화면까지 폭에 맞춰 비율이 줄어들면서 아래로 흐르듯 내려가 정렬이 되면서 가장 좁을 때에는 수직으로 기둥을 쌓은 모습이 됩니다.

14

Column Drop

또 다르게 많이 쓰이는 패턴은 다중 기둥 레이아웃에서 시작하여 하나의 기둥 레이아웃으로 끝나며, 화면 크기가 좁아질수록 열을 떨어뜨립니다. 다른 패턴과 달리 이 레이아웃은 주요 콘텐츠의 전체 크기를 일관성있게 유지하는 경향이 있습니다.

13

 

Layout Shifter

화면 해상도마다 콘텐츠를 표현하기 최적화 시키기 위해 Breakpoint를 기준으로 차이점이 심한 레이아웃입니다. 그 만큼 쓰임이 적습니다.

15

 

Tiny Tweaks

화면 사이즈에 맞추어 내용의 크기만을 조절하는 방식입니다.

16

 

Off Canvas

화면 사이즈가 좁을 때 화면 바깥으로 내용을 숨겼다가 다시 숨겨져 있던 내용을 화면으로 보여주는 방식입니다.

18

 

1.breakpoint

Responsive Layout (horizontal grid)

가비아사이트는 12컬럼 구조의 그리드를 사용하고 있습니다. 이를 퍼센테이지 비율로 변환시켜 유동적인 그리드를 구축하여 이 위에서 콘텐츠들이 최적화되었습니다.

Breakpoint

반응형 웹은 논리적 해상도 기준 360~767, 768~1023, 1024~의 세가지로 구분하였습니다.

그리고 IE 8이하부터 지원하지 않게 되었습니다.

17

 

기본적으로 기존 사이트와 동일한 디자인이지만 다양한 디바이스에 최적화시키기 위하여 몇 가지 디자인개선사항이 추가되었습니다.

2.GNB

GNB는 사이트에서 내가 지금 어디로 가야 하는지 알려주는 나침반 역할을 합니다. 1200이상 해상도에서의 기존 디자인은 그대로 두되 그 외 디바이스 해상도에서도 충분히 GNB역할을 하게끔  Rgnb(반응형 gnb) 디자인이 추가되었습니다.

Type 1. 2depth가 1depth를 덮는 형태 (적용안)

03

 

Type 2. 아코디언 형태

04

Type2는 1에 비해 페이지스크롤이 길어져 메뉴가 한 눈에 보이지 않는 불편함이 있었습니다. 적용안은 Type1으로 선택되어 메뉴 선택에 대한 집중도를 높여 가독성을 주었습니다.

 

 

3.Plan

가장 큰 변화가 있던 리뉴얼은 Plan영역입니다. 여러가지 상품들이 한 영역에 모여있어 고객들이 자신에게 맞는 서비스가 무엇인지 각 상품들을 즉각적으로 비교할 수 있게끔 만들어 주는 Plan영역은 콘텐츠 중 가장 상단 쪽에 위치 할 정도로 중요한 영역입니다.

Before

05

 

After

06

 

사이트에서 상품의 가격을 적나라하게 보여주는 디스플레이 역할을 하고 있는데요, 기존 디자인은 어디서나 흔히 볼 수 있는 테이블형식이였습니다. 활용 할 수 있는 잉여공간이 많았고 상품소개영역이 디자인되어있다는 느낌이 덜 했습니다.

리뉴얼된 plan은 5가지 유형으로 이루어져 있으며 각 상품이 하나의 카드로 사양 레이블도 카드속으로 넣어 각 각의 상품의 내용에 좀 더 집중할 수 있도록 하였습니다. 카드에 마우스오버 시 띄워지는 효과로 인터랙션을 넣어 고객이 액션을 취하고 있다는 느낌을 주려 했습니다.

총 5가지의 카드 모듈형식을 디자인하여 각 상품성격에 맞는 디스플레이 형식을 취했습니다.

~767이하의 해상도에서는 상품 사양의 내용이 많아 스크롤이 길어질 수 있어 2가지 타입인 확장형, 스와이프형으로 사양노출형식을 디자인하였습다.

07

08

 

4.그라데이션이 가미된 bg color & icon

전체적으로 사이트에 풍부한 분위기를 주기 위해 콘텐츠 브릭 중 부가서비스 blue,orange 브릭 그리고 3depth 상단영역에 기존 컬러에 그라데이션을 더 해 분위기를 환기시켰습니다. 기존 라인 아이콘에도 변화가 있습니다. 그라데이션을 넣어 단순 플랫하고 딱딱한 느낌의 아이콘에서 좀 더 세련된 아이콘으로 변화하였습니다. 아이콘 외 콘텐츠의 이미지들은 SVG로 변환하는 과정을 거쳐 이미지최적화 작업이 이루어졌습니다.

위(before)->아래(after) 입니다.

 

-Blue 톤의 변화, 아이콘 컬러감 변화

09

 

-라인아이콘과 정렬의 변화

11

 

-그래픽 스타일 플랫에서 입체로 변화

10

 

5.사양 자세히 보기

3depth에 해당되는 사양 자세히 보기 페이지는 상품소개영역에서 하단에 위치한 사양 자세히 보기 버튼을 눌러서 볼 수 있는 페이지입니다. 상품들의 상세한 정보들이 나열되어 있는 텍스트 위주의 복잡한 콘텐츠이기도 하지만 그만큼 빼놓을 수 없는 콘텐츠입니다. 점점 좁아지고 작아지는 해상도에서도 정보를 모두 효율적으로 보여줄 수 있게끔 다양한 유형으로 콘텐츠 내용 특성에 맞게끔 선택하여 적용시켰습니다.

Type1. Accordion 형

767이하부터 특정 행이 고정 및 재배치 되면서 상세 내용을 펼쳤을 시 좌우 스크롤이 됩니다.

Type2. Scroll-X형

좌우스크롤이 생기게 됩니다.

Type 3. sub-title형

테이블의 레프트 타이틀이 서브 타이틀로 각각 추가되고 좌우 스크롤하며 정보를 살필 수 있습니다.

Type 4. 상단 고정 & scroll형

비율로 줄어들다가 1023~768까지는 최상단 특정행이 고정되어 다운스크롤시 항상 상단에 보여지게 됩니다. 767이하부터는 최상단 특정행이 고정되는 동시 좌우스크롤이 생기게 됩니다.

 

5.Rounding

Button 디자인 중에 각 모서리 끝에 round값을 주는 것을 많이 보셨을텐데요, 심리적으로 뾰족한 것보다는 둥근 것 에 친근감을 느낀다고 합니다. 그리고 신선이 분산되어 시선처리가 편하다는 장점이 있습니다. 가비아 사이트는 콘텐츠브릭들이 모여 스크롤을 내리며 페이지를 볼 수 있는데 많은 양의 정보를 보면서 눈이 피로 할 수 있습니다. 테이블, 버튼, 사각형의 뾰족한 부분들의 모서리를 어느정도 둥글게 해주며 그러한 점을 조금 덜어낼 수 있지 않을까 합니다.

12

 

6. UI Component

gabia design system을 만들어 표준이 되는 가비아만의 UI component를 만들어 협업부서도 함께 활용하면서 작업효율성을 이끌게 되었습니다. 앞으로도 디자인 작업 시 디자이너들이 Ui component로 인해 좀 더 편리하게 작업을 할 수 있도록 바래봅니다.

http://design.gabia.com/designsystem/index.html

 

가비아 반응형 웹 리뉴얼 작업을 하며 느낀 점은 반응형 웹만이 사이트에 딱 알맞은 유형이라고 할 수 없다는 것 이었습니다. 콘텐츠양이 많은 만큼 모바일에서는 정보들을 작은 화면에 억지로 넣는 느낌도 있어서 오히려 효율성이 떨어질지도 모른다는 생각이 들었습니다. 앞으로도 가비아와 그에 따른 서브 브랜드들이 각 각의 사이트를 운영할 때에 반응형 웹의 장점을 조화롭게 이용하여 사용자들이 편리하게 사용할 수 있는 훌륭한 사이트가 많이 만들어졌으면 합니다.

 

가비아사이트 바로가기 ▶

 

 

 

 

 

 

 

 

<출처 : https://www.lukew.com/ff/entry.asp?1514>

<출처 : https://ko.wikipedia.org/wiki>

 

Author.

Trudy / Gabia UI Designer

No Comments

Sorry, the comment form is closed at this time.