한 해를 마무리하거나 시작할 때면 디지털 산업에 영향을 미치는 기술 동향이 발표되는데, 이때 빠지지 않고 등장하는 것이 IT 웹 트렌드 입니다. 올해의 웹에서는 어떤 것이 인기일까요?
2017년 주목해야 할 웹 디자인 트렌드, 포인트만 쓱 짚어드립니다.
첫 번째. 반응형 웹 그리고 적응형 웹
태블릿이나 스마트폰 등 IT 기기의 스크린 사이즈가 다양해지면서 방문자가 접속하는 스크린 화면의 해상도에 따라 반응하여 맞춤 UI를 제공하는 반응형 웹이 등장했습니다. 사용자 입장에서는 어느 기기에서 접속을 하더라도 콘텐츠를 적절한 화면으로 볼 수 있고, 개발자 입장에서는 기기별 웹 페이지를 개발하지 않아도 되므로 비용을 절감할 수 있어 세간의 주목을 받았습니다.
[그림 1] 반응형 웹으로 제작된 엔서치마케팅 홈페이지(http://nsm.co.kr/)
초기에는 N 스크린(하나의 멀티미디어 콘텐츠를 N개의 기기에서 즐길 수 있는 기술 또는 서비스. [출처: 네이버 트렌드 지식사전])의 욕구를 만족시키는 강점이 있어 관심을 받았지만, 점차 사용자 UX에는 맞지 않을 수 있다는 지적이 생겨나기 시작했습니다. 특히 모바일의 경우 작은 화면에서 많은 양의 데이터를 보여주기 힘들기 때문에 레이아웃에 제약이 있게 됩니다. 따라서 반응형 웹의 모바일 버전은 텍스트나 이미지 가독성이 낮고 로딩 속도가 길어지기도 하는데요. 최근에는 이런 단점을 보완하여 반응형 웹의 대안으로 적응형 웹이 등장했습니다.
적응형 웹은 특정 디바이스, 해상도를 정해두고 그 비율에 맞추어 웹 페이지를 구성하므로 브라우저 크기를 줄여가면서 테스트해보면 반응형인지 적응형인지 구분할 수 있는데요. 해상도 크기가 변화할 때마다 조금씩 레이아웃이 변화하면 반응형 웹, 특정 디바이스(해상도)에 도달한 이후에 레이아웃이 변화하면 적응형 웹이 적용된 것으로 이해할 수 있습니다.
적응형 웹은 사용자의 기기가 데스크톱인지 태블릿인지 스마트폰인지 서버나 클라이언트에서 체크하여 최적화된 HTML/CSS를 불러오는 방식으로, 사용자가 접속한 환경에 맞추어 적절한 레이아웃을 제공하고 필요한 정보만 노출하여 좀 더 빠른 속도로 웹사이트를 이용할 수 있습니다.
[그림 2] 적응형 웹 레이아웃
두 번째. 원 페이지 스크롤
롱 스크롤, 원 페이지 디자인은 웹사이트 자체를 길게 디자인하여 스크롤을 내려서 이동함에 따라 카테고리가 구분됩니다. 사용자들은 이미 모바일 경험을 통해서 스크롤을 내려 긴 콘텐츠를 읽어 내리는 UX에 익숙해져 있습니다. 스크롤로 이어지는 듯한 기법이기 때문에 섹션을 명확하게 구분할 필요 없이 스토리텔링으로 자연스럽게 이야기하듯 콘텐츠를 풀어나갈 수 있습니다. 그렇기 때문에 복잡한 콘텐츠를 다루거나 많은 카테고리가 존재하는 웹사이트보다는 정보를 보여주는 방식에서 유용하며, 브랜드나 회사를 소개하는 페이지에 많이 활용됩니다.
[그림 3] 롱스크롤 원페이지 예시(사이트 입장 후 스크롤링을 경험해보세요)
사이트 보러가기: http://lookbook.wedze.com/winter-2016-2017/en/free
세 번째. 카드 UI 디자인
말 그대로 사각형 카드 모양으로 구획을 나눈 디자인으로 정보를 질서 정연하게 보여주어 규칙적이고 안정감을 주는 레이아웃입니다. 가로 세로 정렬이 용이하기 때문에 반응형 홈페이지나 모바일 화면에 최적화되었으며, 사각형 면 분할 형태로 카드 색상 및 배경 색상이 확실하게 구분되어 사용자가 콘텐츠에 집중할 수 있고 정보를 쉽게 인식할 수 있습니다. 우리에게 익숙한 핀터레스트, 구글 나우 등이 카드 UI의 대표적인 사례입니다.
[그림 4] 카드 UI 사용 사이트 (좌)핀터레스트 (우)구글 나우
네 번째. 풀 스크린 배경이미지
고해상도 이미지나 동영상을 화면 전체에 가득 채워서 보여주는 방식으로 한눈에 시선을 사로잡을 수 있기 때문에 다양한 업종에서 사용됩니다. 풀 스크린 배경을 사용할 경우 처음 사이트를 로딩하는데 시간이 걸리기도 하고, 한 화면에 많은 내용을 표시해야 하는 경우에는 적절하지 않지만 큰 이미지나 동영상을 통해서 특정한 주제, 컨셉, 이미지를 전달하기에는 시각적 전달력이 우수하다는 장점이 있습니다.
‘여행은 살아보는 거야’라는 컨셉의 에어비앤비 사이트에서는 다른 도시들을 비추는 비디오를 통해서 그 가정의 부엌, 거실, 침실 등 숙소의 다양한 모습을 보여주고, 컨셉에 맞는 특별한 사용자 경험을 가능하게 합니다.
[그림 5 ] 풀스크린 이미지
사이트 보러가기: https://www.designhotels.com/
이 외에도 다양한 기법들이 웹 트렌드로 떠오르고 있지만, 결국 가장 중요한 것은 사용자에게 효과적으로 정보를 전달하고 더 나은 사용자 경험을 주는 것입니다. 그러므로 트렌드라고 무조건 따라 하기보다는 각 사이트와 사용자 특성에 맞는 전략으로 설계에서 유지 보수에 이르기까지 철저한 분석과 테스트가 필요합니다.
멋진 사용자 경험, 그것은 정보를 좀 더 쉽고 친숙하게 전달하는 것부터 시작하는 것임을 잊지 마세요!
문의전화: 1566-3265
개인정보 수집 및 이용에 대한 안내
1. 개인정보의 수집 및 이용목적
NSM(이하 “회사”라 합니다.)은 고객 문의 지원 업무를 위해 아래와 같은 개인정보를 수집하고 있으며, 고객 상담과 문의응대를 위해서만 해당 정보를 활용합니다.
2. 수집하는 개인정보 항목
- 필수 항목: 이름, 이메일, 전화번호, 홈페이지 주소
3. 개인정보의 보유 및 이용기간
회사는 원칙적으로 개인정보 수집 및 이용목적이 달성된 후, 해당 개인정보를 지체 없이 파기합니다. 단, 관계법령의 규정에 의하여 보존할 필요가 있는 경우 회사는 관계법령이 정한 일정한 기간 동안 개인정보를 보관합니다.
그 밖의 사항은 개인정보 취급방침을 준수합니다.