Only ideas worth spreading

더 좋은 웹을 위한
우리의 고민

2016 웹디자인 트렌드
인터뷰 준비

WRITE윈드디자인 DATE2016.01.13 CATEGORY웹 디자인

안녕하세요. 

윈드디자인 이성호입니다.

최근 2016 웹디자인 트렌드에 대한 인터뷰가 있었습니다.

인터뷰 자료를 준비하면서 

웹 디자인 종사자로서 디자인, 기능, 이슈별 이야기를 솔직하게 담아내려 합니다.

2016 웹디자인 트렌드
1. 디자인
2. 기능
3. 이슈


 

1. 모바일 UI 패턴 정형화

 

 

 

 

 

 

 

 

 

워드프레스와 테마(스킨)시장 확대로 인하여, 
대부분의 UI는 어느 정도 정형화된 패턴이 될 것입니다.
(ex: 햄버거 메뉴 아이콘, 롤링 스크롤 등)

또한, *구글 머티리얼 디자인과 *네이버 스퀘어 디자인 등 여러 이슈들로 인해,
UI 패턴의 정형화는 더욱 가속화될 것입니다. 

(* 모바일 UI의 기본 정의 및 최소 표준화 작업) 


 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

- 찰스퍼니처 모바일 시안 -

현재 제작하는 모바일 사이트의 경우도, 위와 같은 요소들을 무시하지 못한 채 제작됩니다.
하지만, 차별성을 위해서 몇 가지 규칙의 변수는 있겠지요. 



(저는 햄버거에 햄이 많아야 합니다.!! ) 

2. 원 페이지

롱 스크린 & 패럴랙스 스크롤
 

 

- 기본 원페이지 - 

일명 길고 애니메이션이 많은 페이지입니다. 
모바일 사용자에게 편리한 수직적인 디자인은 초기부터 지금까지도 유행입니다. 

pc/태블릿/모바일 환경에서 최적화된 화면을 제공하는 반응형 디자인과 맞물려
현재 PC 디자인까지도 원페이지로 진행이 되고 있습니다.
원페이지는 역시 브랜드, 제품 소개 등의 스토리텔링에 적합합니다.


긴 스크롤을 보다 부드럽게 하는 애니메이트가 중요하겠죠.
이러한 원페이지가 단순하게 디자인되는 것이 아닌,
각 휠 or 높이마다 각기 표현하는 애니메이션 효과를 주면 바로
패럴랙스 스크롤링(Parallax Scrolling)이 됩니다.



패럴랙스 스크롤링 (Parallax Scrolling) - 국내 제작 사례

국내에도 이제 서서히 등장하기 시작하지요. 
최근 스타벅스 글로벌 페이지가 개편되었고, 관공서로는 KT&G도 괜찮았지요.
( 개인적으로는 번잡했... ㅜ) 

패럴랙스 스크롤링 (Parallax Scrolling) - 외국 제작 사례 

국내의 보수적인 웹 디자인에 반해, 크리에이티브 한 요소들을 많이 넣었습니다. 

국내는 IE8의 문제점 등으로 아직까지는 보수적인 환경이지만, 
결국은 국내도 서서히 도입이 되겠네요. 


서버 용량이 너무 작거나, 대형 사이트의 경우
 원페이지의 패럴렉스는 엄청난 트래픽을 잡아먹기 때문에 추천드리지 않습니다.









 

3. SNS 융합

카드 인터페이스 / 소셜 로그인 
 

카드 인터페이스


 

 

 

 

SNS가 대중화가 된지 오래되면서, 모바일 UI의 최적화인 카드 인터페이스가 증가하고 있습니다.
(자사 기준, 15년도 하반기 제작물 중에 카드 인터페이스 사용률이 무려 80%)

또한 헤더와 같은 상단부분은 이제 고화질 이미지뿐만 아니라, 영상까지 확대되고 있습니다.

SNS 로그인 / 결제 


 

 

 

 

 

 

 

 

 

가입을 간소화 시키는,
네.아.로(네이버 아이디로 로그인하기), 페북 로그인들과
간편결제 시스템이 상용화, SNS 공유 등

이제 그에 따른 사이트도 변화되었고, 아직 더 필요하겠지요.
(이번 심플렉스인터넷의 카페24에서 지원하기 때문에 쇼핑몰에서 더욱 확산될 예정입니다.)

이러한 이유로 보았을 때, 2016 웹디자인 트렌드에서 절대 빠질 수 없는 부분입니다. 

 

4. 플랫 디자인


 

 




구글의 머티리얼 디자인과 플랫 디자인과 같이
이제 UX 중심의 미니멀한 디자인이 중요시되고 있습니다. 

물론 구글의 머티리얼 디자인을 무조건 따라가지는 않겠습니다만, 
대부분은 차용하고 몇 가지 부분을 각색하는 디자인이 강세입니다.
현재 네이버도 스퀘어 디자인을 진행하면서 구글과 비슷하지만, 다른 디자인을 강조합니다.

심플과 혁신.... 매번 미팅에서 나오는 단어지요.
효율적이며, 단순한 디자인이라면, 
플랫 디자인이겠지요.

플랫 디자인의 트렌드는
- 블러 or 그림자
- 밝은 컬러 톤
- 타이포그래픽
- 고스트 버튼
정도가 있겠네요.

5. 반응형 디자인

 

envato와 github, awwward 등에서 
가장 활발하게 준비하던 반응형 디자인입니다.

벌써 반응형 디자인을 공부하고 실제 제작한지 언 5년 가까이 됩니다.
그럼에도 매년 웹디자인 트렌드에 나타나는 건 그만큼 필수적이기 때문이지요.
(모바일 인터넷 증가)

모든 기능에, 친화적 사이트, 생각보다 간단한 작업이지만,
반대로 제대로 하지 않는다면, 퍼포먼스 이슈가 상당하지요.










인터뷰를 준비하면서, 어떤 것에 대해 이야기를 나눌까 고민하다 보니, 
어느덧 대략적인 트렌드가 보입니다. 

전 세계적으로 특별한 이슈는 현재 예상되는 것이 없으나,
윈도우 10의 국내 현지화의 가능성 정도를 추측하고 있습니다.
(제발 IE8 좀 없애주세요... 더 멋진 디자인하고 싶습니다. ㅜ)

이상 국내 2016 웹디자인 트렌드에 대해 알아봤습니다.

이 모든 글은 제가 직접 작성하였으며, 해당 영상 저작권

LEADER MINE Co., Ltd