엉뚱상상 블로그 라이프

2013 블로그 디자인 본문 트렌드, 3가지 주요 포인트는?

IT/BLOG/SNS


안녕하세요, 추운 겨울을 이겨내고 계신 블로거 여러분 :D 

한파가 살짝 지나가고 오늘부터 날이 조금 풀린다기에 가벼운 차림으로 나왔다가 을 겪고 있는 뚱상의 디자이너입니다. 혹한을 이겨내며 작성한 오늘 포스트의 주제는 '2013 블로그 디자인 트렌드'입니다. 블로그에도 트렌드가 있었나 하고 의문을 가지시는 분들도 계실 것 같습니다.


블로그에도 트렌드는 존재합니다. 스킨에서 본문까지 혹은 그 형식과 레이아웃에도 디자인 트렌드를 따라 변화하고 있습니다. 예로 블로그 스킨을 살펴보면 몇년 전에는 '드로잉 일러스트'로 된 아기자기한 디자인의 스킨이 유행하다가, 낮은 채도와 노이즈를 동반한 콜라주 형식의 '빈티지 스타일'의 스킨으로, 다음에는 심플한 스킨으로 트렌드가 바뀌었습니다. 물론 일러스트와 빈티지 스타일이 유행하는 중에도 심플한 스킨 혹은 이미지 배경을 사용하는 분들도 많았습니다. 대략적인 디자인 추세가 그랬다는 이야기 입니다. (블로그 스킨 디자인의 트렌드도 전체적인 웹디자인 혹은 그래픽 디자인의 영향을 많이 받습니다.) 


전에는 여러가지를 넣어서 잘 꾸며진 스킨이 유행했다면 현재는 로고나 타이포그래피를 이용한 심플한 스킨이 사랑받고 있습니다. 스킨과 동시에 블로그의 메인이나 본문 영역도 디자인 추세에 맞춰 변모하고 있는데요. 뚱상 사내강의 내용 중 2013 블로그 본문 트렌드 관련 내용을 정리해 본문 영역의 디자인이나 레이아웃에 어떤 것을 더하면 좋을지 살펴보도록 하겠습니다.






올해의 블로그는 어떤 스타일일까 궁금하다 하시는 분들을 위한 포스트, [2013 Blog Article Design]입니다.




2013 블로그 본문 영역의 트렌드 중 가장 눈 여겨봐야할 첫번째 요소는 이미지 헤더입니다.


전에는 블로그에서 제공하는 글을 넣으면 보이는 제목만 있었습니다. 이후에는 약간의 오브젝트와 타이포그래피를 활용한 헤더로 주목성을 높여 왔습니다. 하지만 점차 타이포그래피의 영역을 넘어 포스트의 내용을 축약한 이미지 한 장으로 헤더를 대신하고 있습니다. 페이지를 열자마자 보이는 타이포그래피와 결합한 이미지 헤더가 눈에 띄기 시작했습니다. 


이미지 헤더는 제일 상단에 위치해 글에 대한 호기심을 유발하고 주목성을 높여주는 효과를 내고 있습니다. 또, 포스트의 대략적인 내용을 상단에서 확인하고 읽어내려 갈 수 있어 바쁜 직장인들이 이미지 헤더만 보고도 글 내용을 유추해 자신에게 필요한 글인지 아닌지 선택해서 포스트를 읽을 수 있습니다.





두 번째, 본문 디자인 트렌드에서 눈 여겨 봐야 할 것은 가로 크기를 가득 채우는 풀사이즈 이미지와 본문 내용 입니다. 


국내외 웹사이트 디자인 트렌드를 읽어보면 Big Photo, Large Image, Background Image 등의 단어를 많이 볼 수 있습니다. 몇 년째 웹디자인 트렌드로 자리잡은 큰 크기의 이미지가 블로그에서도 통용되고 있습니다. 고화질에 익숙해진 사람들이 큰 사진을 찾는 걸까요? 아니면 너도나도 들고 다니는 DSLR이나 하이엔드급 카메라의 보급률이 높아져서 일까요? 또는 점점 커지는 모니터의 크기와 해상도 때문일까요? 


인터넷이 느리다는 외국에서도 큰 사이즈의 이미지가 유행할 정도인데 인터넷이 빠르기로 유명한 국내에서는 어떻겠습니까. 본문 영역을 가득 채우는 이미지들은 이미 많은 블로그에서 찾아볼 수 있는데요. 여행이나 음식 레시피를 주로 다루는 파워블로거들 사이에서도 고화질의 큰 이미지를 제공하기 위해 본문 영역 가로사이즈와 같거나 조금 못 미치는 크기의 큰 이미지들을 업로드하고 있습니다. 풀사이즈의 이미지는 비단 웹 뿐만 아니라 작은 크기의 모바일 화면에서 블로그 포스트를 읽을 때에도 유용합니다. 출퇴근 시간을 이용해 블로깅을 하는 볼로거들을 위해, 작은 창에서도 가득 찬 사진을 볼 수 있도록 큰 사이즈의 이미지를 선호하고있습니다. 


문제는 작은 화면으로 보게 되는 모바일에서 큰 이미지를 보는 것은 좋지만 이미지의 크기가 커질수록 용량이 커져 로딩 시간이 길어진다는 단점이 생긴다는 것입니다. 이를 유념해서 적용해야 할 것 같습니다.


이미지의 풀사이즈화를 벗어나 본문으로 가 볼까요?

본문 글의 글 정렬은 왼쪽 정렬, 가운데 정렬, 양쪽 정렬 세 가지가 많이 사용됩니다. 웹에서야 화면이 넓으니 이 세가지가 별차이가 없지만 모바일에서는 사정이 달라집니다. 



왼쪽 정렬을 할 때, 웹에서는 보기 좋게 끊어서 줄바꿈을 한 것 같지만 양 옆이 좁은 모바일에서는 위에서 처럼 정렬이 엉망이 될 때가 있습니다. 왼쪽 정렬이라도 줄바꿈을 임의로 하지 않으면 괜찮지만 임의로 줄바꿈을 할 경우 모바일 화면을 채우고 넘어가는 다음 줄이 자신이 생각한 줄바꿈 포인트와 다를 때 이어지는 글임에도 불구하고 문장 중간에 글이 끊어져 다음 줄로 넘어가는 현상입니다. 


위 캡쳐 이미지는 웹을 기반으로 한 블로그이고 본문 영역이 넓은 편이라 양끝맞춤을 하면 글이 너무 길어져 왼쪽 정렬과 임의의 줄바꿈을 하고 있는 경우입니다. 모바일에서는 별로 보기 좋지 않겠죠? 다른 방법을 모색해 봐야 할 것 같습니다. 중간정렬도 왼쪽정렬과 마찬가지 입니다. 왼쪽 정렬보다는 마구잡이의 줄바꿈이 일어나진 않겠지만, 모바일 사이즈를 넘어선 문단들은 왼쪽 정렬과 마찬가지로 줄바꿈이 되겠죠. 


글을 읽고 왜 많은 블로그들이 풀사이즈의 이미지와 본문을 사용하고 있는지 눈치 채셨나요? 점점더 확대되고 있는 모바일 유입에 따른 변화입니다. 웹에서 모바일로 옮겨가고 있는 환경에 발맞춰 변화하고 있는 것입니다. 





세 번째는, 소제목의 이미지화 입니다.

글이나 이미지가 많을 경우, 글 내용이 정리가 안 되는 때가 많습니다. 소제목은 긴 글의 요점을 파악하게 해주고, 글이 주제별로 깔끔하게 자리잡을 수 있도록 해주는데요. 그런 소제목을 이미지화 해서 글에 특성을 가져다 주고 시선의 환기를 주는 디자인이 속속 선보이고 있습니다. 뚱상에서 운영하는 블로그의 대부분은 이 소제목의 이미지화를 예전부터 해오고 있었습니다. 블로그에 따라 소제목이 모두 이미지인 경우도 있고, 블로그의 아이덴티티를 느낄 수 있는 아이콘을 삽입해 이미지는 아니지만 그 블로그만의 특색있는 소제목을 삽입하는 경우도 있습니다.


몇몇 블로그에서만 행해지던 소제목의 이미지화가 이제는 더 많은 블로그에서 찾아볼 수 있게 되었습니다.

아무래도 다양해진 멀티미디어와 이미지에 묻힌 소제목을 위해 눈에 띄고, 글의 요지를 한 눈에 파악할 수 있도록 해주기 위해서인 것 같습니다. 특히 소제목의 이미지화는 뉴발란스 블로그에서 좋은 사례를 많이 찾을 수 있었는데요. 위에 보기 이미지 중 3번처럼 글 내용에 따라 맞는 디자인을 적용해, 해당 블로그만의 아이덴티티는 살짝 가려졌지만 글 내용과 특색에 맞는 디자인이 행해지고 있었습니다.  


(이미지는 각 블로그에 저작권이 있습니다. 캡쳐가 문제된다면 삭제하도록 하겠습니다.)





블로그 본문 트렌드 중 가장 강세인 세 가지 트렌드 요소를 살펴봤는데요.

어떠셨나요? 블로그의 트렌드를 눈치 챌 수 있으셨나요?? 이제 적용도 가능하시겠죠? 잊지마세요 여러분~


Image Header / Full Size / Strap Line Point