이노버즈 디자인실 웹진 제 7호, 이번 호 주제는 ‘꼭 기억해야 할 2014년 웹디자인 트렌드 10’ 입니다. 유용한 정보들과 링크들이 많이 있으니까 꼭 한번 씩 읽어보세요 :D 2013년에 가장 HOT했던 디자인은 반응형 웹 디자인이었는데요, 그 외에도 커다란 이미지를 배경으로 사용하는 디자인, 무한으로 떨어지는 스크롤, 심플 & 미니멀리즘한 디자인 등이 유행했습니다. 작년에 유행했던 웹 디자인 의 트렌드 중 상당부분은 2014년에도 여전히 트렌드로 이어질 것으로 예상 됩니다.

1. 7호
14/02/28
2013년에 가장 HOT했던 디자인은 *반응형 웹 디자인이었는데요, 그 외에도 커다란 이미지를 배경으로 사용하는
디자인, 무한으로 떨어지는 스크롤, 심플 & 미니멀리즘한 디자인 등이 유행했습니다. 작년에 유행했던 웹 디자인
의 트렌드 중 상당부분은 2014년에도 여전히 트렌드로 이어질 것으로 예상 됩니다.
01
개성 있는 타이포그래피
*타이포그래피는 꾸준히 언급되어오고 있는 디자인
트렌드 중 하나입니다. 단지 타이포그래피의 성향도
시대의 흐름을 따라 계속 변화하고 있다는 것이 포
인트라고 할 수 있습니다. 2014년에는 믹스 매치된
타이포그래피가 눈에 띌 것으로 예상되고 있으며,
표준 글꼴에 디자이너의 개성과 고유성을 추가하여
새로운 글꼴을 창조 해, 남용 되던 서체에서 벗어나
좀 더 크리에이티브한 전개가 될 것이라고 합니다.
디자이너의 감성과 개성을 담은 타이포그래피는 웹
디자인의 레이아웃과 전체적인 이미지나 사이트의
느낌에 큰 영향을 주기도 합니다.
▲ 그래픽 디자이너 Jordan Metcalf 작품
http://www.jordan-metcalf.com/
*반응형 웹 디자인 : 모든 브라우져와 모바일 기기에서 자동으로 크기를 변환해주는 방식의 디자인
*타이포그래피 : 활판술, 활자 서체의 배열을 말하는데 특히 문자 또는 활판적 기호를 중심으로 한 2차원적 표현
01

2. 02
플랫(Flat) 디자인
3D 입체감을 벗고 좀 더 심플한 플랫 디자인이 각광
을 받고 있습니다. 이러한 변화는 애플의 ios7 업데
이트를 보면 극명하게 나타납니다. 그라디에이션과
입체감을 과감히 없앤 심플한 아이콘, 심플한 라인
과 타이포그래피로 구성된 화면들을 보면 플랫디자
인으로 트렌드가 바뀌었다는 사실을 한 눈에 알 수
있습니다. 이전까지의 디자인은 실제질감(3D효과)
을 나타내기 위해 애썼지만 이제는 미니멀한 인터페
이스, 강렬한 컬러로 채워진 블록, 그라디언트를 거
의 없애는 등의 플랫디자인으로 트렌드가 바뀌어 가
▲ ios7 업데이트 후 Flat icon으로 변화된 화면
http://www.makeusknow.com
고 있습니다.
전체 화면을 모두 사용하는 디자인
03
와이드한 화면의 웹사이트는 별도의 클릭 없이 마우스
스크롤만으로 간편하게 모든 내용을 한 화면에서 확인
할 수 있도록 해주며 또한 다양한 브라우저와 디바이
스 환경에 대응하기 위해 Flash나 별도의 플러그인 없
이 HTML5나 CSS만으로 사이트를 구성하여 편리하게
이용할 수 있도록 합니다. 이런 전체 화면을 활용한 사
이트들은 점점 더 창의적이고 정교해질 것입니다.
▲ 와이드 모니터로 보아도 여백 없이 채워지는 메인
http://developer.skype.com/
04
데스크탑에서 모바일로
데스크탑, 랩탑, 스마트폰, 태블릿PC 등 웹에 접근하
는 기기들이 늘어나게 되면서 화면의 해상도도 점점
다양해 지고 있습니다. 다양한 기기들을 활용한 웹
사이트의 접근이 일상화 되면서, 디자이너들은 점점
더 유동적인 해상도를 고려한 디자인을 하게 될 것
입니다. 앞으로 콘텐츠를 중심으로 불필요한 기능과
형식, 꾸미기와 이동 등을 강제로 최소화 시키는 기
능을 구현한 웹 디자인이 늘어나게 될 전망입니다.
▲ 다양한 해상도에 맞춰진 반응형 웹사이트 예시
http://macsamoon.com
02

3. 텍스트 대신 영상
05
새로운 환경들은 사용자들로 하여금 텍스트 보다 동
영상을 선호하게 만들 것입니다. 다양한 소셜 미디
어의 활용과 공유는 많은 데이터를 효과적이고 신속
하게 처리할 필요성이 있으며, 이를 위해 동영상은
현재로서 가장 효과적인 커뮤니케이션 방법이 될 것
입니다. 하지만 무거운 영상을 웹에서 완벽히 활용
하기 위해서는 용량문제 등 풀어야 할 숙제들이 남
아있습니다.
▲ 동영상으로 움직이는 재미를 더한 웹사이트
http://www.diadobaralho.com.br/
06
무한스크롤
스크롤을 내림에 따라 지난 콘텐츠가 로드 되어 보여
주는 방식으로 끝이 없이 내려가는 웹 페이지 디자인
을 말합니다. 페이스북, 트위터, 핀터레스트, 텀블러 등
의 소셜 네트워크 서비스에서 주로 이용되고 있는데,
이는 소셜 네트워크 서비스의 특징상 다수의 사람들이
폭발적인 수의 콘텐츠를 업로드 하기 때문에 적정량의
콘텐츠를 불러온 후 스크롤에 따라 부가로 콘텐츠를
로드하여 로딩속도를 줄여주기 때문입니다. 따라서 웹
사이트 구축 시 콘텐츠 양에 따라 무한 스크롤 기능을
적절하게 사용한다면 매우 매력적인 사이트를 구현할
수 있습니다.
07
▲ 무한스크롤 형식으로 콘텐츠가 로드되는 핀터레스트
www.pinterest.com
단순화 된 콘텐츠
모바일의 접속 비율이 늘어나게 되면서 가독성을 고려한 디자인이 중요해지게 됨에 따라 콘텐츠가 간소화 될
것입니다. 그리고 짧아진 사용자의 집중시간을 고려하여 핵심적인 내용위주의 임팩트 있는 콘텐츠를 전달하는
것이 효율적이기 때문에 콘텐츠는 점점 더 단순화 될 것이며, 내용 게시의 주기도 트위터처럼 점점 짧아질 것
입니다.
03

4. 08
사이드바 삭제
블로그나 잡지 타입의 사이트에서 흔히 볼 수 있는 형태의 디자인으로, 요즘은 그 이외의 웹 사이트에서도 유
사한 디자인을 종종 볼 수 있습니다. 이런 형태의 디자인은 사용자의 주의를 분산시키는 것들을 줄여 편안하게
웹사이트의 내용을 숙지할 수 있도록 하기 때문에 시각적 효과와 다양한 콘텐츠 배치에 도움을 주고, 좀 더 나
은 비쥬얼 효과를 얻을 수 있습니다.
심플한 색 사용
09
간단한 색 구성, 타이포그라피의 강약 등을 이용한
심플한 디자인이 새로운 트렌드로 자리 잡고 있습니
다. 강렬한 비비드 컬러도 좋지만 한가지 색상 톤을
사용하여 차분한 느낌으로 작업하면 집중도를 높일
수 있습니다. 단조로운 색상을 활용한 디자인은 앞
서 말한 Flat design과 함께 사용될 수도 있습니다.
▲ 챕터별로 일러스트와 컬러가 다르게 표현된 웹사이트
http://www.adamhartwig.co.uk/
10
보정된 이미지 사용
2014년에도 원래 이미지를 보정하여 새로운 느낌을
창조하는 디자인이 계속 될 것으로 보입니다.
인스타그램의 이미지를 연상시키는 색상 오버레이,
흐린 이미지 등을 사용한 디자인을 더 많이 볼 수
있을 것으로 생각되며, 일상을 공유하는 콘텐츠가
많아 짐에 따라 소박한 느낌을 주는 이미지로 보정
되는 경향을 보일 것으로 예상됩니다.
▲ 따뜻한 감성이 느껴지는 필터로 보정된 이미지
http://blog.naver.com/dhj07037
▶ 감성사진 보정법 http://blog.naver.com/soul07777
본 리포트는 원문 http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/1/을
참고하여 해석된 자료를 가지고 재 편집한 글입니다.
COPYRIGHTⓒ 2014 INNOBIRDS MEDIA
기획, 편집 : 황인택, 김영은
발행처 : 디자인실