'플랫디자인'에 해당되는 글 2건

  1. 2016.12.22 2016 슬로워크 블로그 올해의 인기글 5
  2. 2015.01.22 짤방으로 이해하는 웹 디자인의 역사



2016년 슬로워크 블로그에서는 어떤 글이 가장 인기 있었을까요? 주로 실용적인 정보나 트렌드를 다룬 콘텐츠가 많은 사랑을 받았는데요. 지난 1년간 가장 페이지뷰가 높았던 베스트 글 5를 소개합니다. 특별히 각 콘텐츠 글쓴이의 소감 및 코멘트도 받아두었으니 함께 살펴보세요!



5위. 비디자이너의 얕은 지식 쌓기: 디자인 용어 20


디자이너에게는 너무나도 기본적인 개념들. 디자이너가 아니면 모릅니다. 디자이너와 함께 일하는 기획자, 에디터, 마케터라면 한 번 정리해보세요.


글 바로가기(링크)


"제 글이 5위라니, 영광입니다! 실제로 디자이너와 작업하면서 ‘커닝(kerning)'이라는, 전혀 모르는 말을 듣고 이 주제를 생각했어요. 많은 분들이 봐주신 걸 보니 ‘내가 모르는 건 다른 사람들도 잘 모를 거다’ 라는 막연한 추측이 맞았던 것 같네요. 비디자이너 여러분 힘내시고요. 앞으로도 디자이너와 즐겁게 신나게 프로답게 협업하시길 바랍니다."

- 오수희, UU팀 에디터



4위. 인쇄 후가공, 어떤 것들이 있을까?


친구와 찍던 스티커 사진에 입힌 무광/유광/반짝이 코팅도 ‘후가공’의 일종입니다. 본 적은 있지만 이름은 모르는 후가공, 이 글을 통해 마스터해보세요.


글 바로가기(링크)


"좋아해주셔서 감사합니다(금박). 저는 작업하면서 많이 접하는 용어이지만 고객들에게는 생소할 수 있다고 생각해서 작성했는데요. 디자이너가 아닌 분들 입장에서는 특이한 인쇄물에 대해 쉽게 이해할 수 있었던 것 같습니다. 특히 말로만 들어 궁금했던 후가공을 예시 사진으로 직접 이해하는 것이 포인트입니다. 인쇄물은 목적과 특성에 맞는 후가공으로 더 좋은 결과물을 낼 수 있습니다. 돈값하는 후가공, 적극 이용해봅시다. ^^"

- 김영희, X-O팀 디자이너



3위. 슬랙봇으로 슬랙 200% 활용하기


업무용 메신저로 Slack을 사용하고 있나요? 나의 일을 슬랙봇에게 맡기고 중요한 업무에 더 많은 시간을 사용하세요.


글 바로가기(링크)


"브랜드관리위원회 위원장으로서 체면이 서네요. 다른 협업 메신저와 슬랙이 가장 차별화되는 지점이 다양한 슬랙봇이라고 봅니다. 슬랙을 처음 사용할 때부터 여러 봇을 사용해 봤고, 그 경험으로 글을 쓴 것이기 때문에 많은 분들이 좋아해주신 것 같습니다. 다만 마지막에 “여러분이 사용하는 유용한 슬랙봇이 있다면 제보해주세요!”라고 적었는데 아무도 제보를 해주지 않으셔서 약간 마음에 상처를 입었습니다."

- 조성도, 스티비 총괄



2위. 디자이너가 알아야 할 플랫 디자인 개론


플랫 디자인은 2012년부터 유행하기 시작했습니다. 그리고 지난 몇 년 간, 디자이너들은 플랫 디자인의 장단점을 파악하여 적절하게 스타일을 발전시켜 왔습니다. 플랫 디자인의 장단점과 미래에 대한 단서를 찾아보세요.


글 바로가기(링크)


"이 영광은 원작자인 제니(Janie Kliever)에게 돌립니다. 아무래도 플랫디자인의 트렌드가 계속되고 있기도 하고 마침 구글 머티리얼 디자인이 등장한 것도 글의 인기에 한 몫을 한 것 같습니다('개론'이라는 제목에 낚이신 것 같기도…). 실제 예시로 나오는 장단점과 디자이너들의 실수가 설명을 상당 부분 도우니 놓치지 마세요(잔인한 제니…). 저도 배우는 입장입니다. 앞으로도 같이 배워요."

- 최선주, 뭐든지 스튜디오 기획자



1위. 2016 꼭 알아야 할 웹 디자인 트렌드


대망의 1위는! 2016년 꼭 알아야 할 웹디자인 트렌드를 소개한 글입니다. 사용자에게 최선이 무엇인지 먼저 생각해보고 트렌드를 따를지 결정하는 게 중요하다고 하는군요.


글 바로가기(링크)


"부족함이 넘치는 글인데 클릭해주셔서 감사합니다. 최근엔 트렌드라는 것이 작년과 올해가 확연히 다르지는 않다고 생각합니다. 그냥 흐름에 몸을 맡기고 흐름의 파악을 잃지 않는 정도로 참고해주시면 좋겠습니다. 분발하여 내년에도 양질의 글로 찾아뵙겠습니다."

- 오예슬, 01팀 개발자



한 해 동안 슬로워크 블로그에 보내주신 관심과 성원에 감사합니다. 2017년에도 더욱 풍성하고 다양한 콘텐츠로 찾아뵙겠습니다!

Posted by slowalk





웹 디자인의 역사는 어떻게 발전해왔을까요? 전에 반응형 웹 디자인을 짤방으로 설명했던 산디스 씨(Sandijs Ruluks), 이번에는 웹 디자인의 역사를 짤방으로 간단하게 정리했는데요. 그는 웹 디자이너들이 '디자이너가 개발을 배워야 하는가?' 논하기 전에, 웹 디자인의 역사에 대해 알 필요가 있다고 생각해서 이 글을 썼습니다.


1. 웹 디자인의 암흑기


웹 디자인의 역사


웹 디자인의 초창기는 매우 어두웠습니다. 검은색화면에 단색의 글씨만 존재했지요. 디자인이라고 할 수 있는 것은 특수문자와 탭키를 이용한 것이 전부였습니다.

 


2. 테이블 - 웹 디자인의 시작


웹 디자인의 역사


브라우저가 생기고 이미지를 올릴 수 있으면서웹 디자인이 시작되었습니다. 그리고 테이블을 통해 정보를 구성할 수 있었는데요. 하지만 사람들은 레이아웃을 잡기 위해 테이블을 사용했습니다. 수직 정렬이나 그리드를 맞추기가 편하다는 장점을 가지고 있었는데요. 하지만 이 방식은 테이블 본연의 기능이 아니고, 유동적이지 못했습니다.



3.자바스크립트의 구원

 

웹 디자인의 역사


자바스크립트가 html의 한계를 극복하기 시작했습니다. 예를 들어 팝업창이 필요하거나, 빠르게 코드를 수정하고 싶을 때, 자바스크립트를 사용했습니다. 웹사이트에 동적인 요소가 추가되면서 웹사이트는 한층 다채로워졌습니다. 요즘은 css가 좋아져서 자바스크립트를 대체하고 있지만, 그래도 여전히 강력한 재료입니다.

 



4. 표현력의 황금시대 - 플래시


웹 디자인의 역사


플래시가 보급되면서 웹 디자인의 표현력은 황금시대를 맞이합니다. 디자이너는 모양, 레이아웃, 애니메이션, 인터랙션, 그리고 어떠한 폰트도 사용할 수 있었습니다. 플래시는 사용자 컴퓨터에 최신 버전이 설치되어 있고, 약간의 로딩시간을 기다리면 마법처럼 현란하게 작동했습니다.


하지만 검색에 최적화 되지 않았으며, 높은 CPU 점유율 때문에 아이폰에서 제외됩니다. (그러면서 웹 디자인에서 플래시는 몰락하게 되죠.)

 



5. CSS


웹 디자인의 역사


플래시와 비슷하게 나온 css는 기술적으로 더 좋은 방식으로 접근하는데요. 플래시와 달리 기존 html로 구조를 유지하면서 css로 꾸미는 방법입니다. html을 뼈와 살이라면, css는 옷이라고 할 수 있겠네요.


css의 첫 번째 버전은 유연하지 않았습니다. 가장 큰 문제는 당시 구형 브라우저들이 css를 지원하지 않았는데요. 이 브라우저들이 css를 완전히 지원하기까지 오랜 시간이 걸렸습니다. 어느 정도의 표준이 생기고 css3까지 나오면서, 자바스크립트를 대체할 수 있을 정도로 발전했습니다.


이 글의 필자 산디스 씨는 css가 개발 언어라기보다 서술문에 가깝고, 디자이너들은 반드시 알아야 한다고 강조했습니다. 저처럼 영어가 익숙하지 않은 사람은 서술문이라는 표현은 동의 못하겠지만 디자이너가 반드시 알아야 한다는 사실은 동의할 것입니다.

 



6. 모바일 시대의 도래 : (column)을 이용한 디자인

 


웹 디자인의 역사


모바일로 웹사이트를 브라우징 하는 것은 대단한 도전이었습니다. 속도가 매우 느리고, 기기에 따라 디자인이 전부 달랐습니다. 또한, 잘 못 쓰면 폭탄 요금을 맞을 수 있었기 때문에 인터넷 버튼을 누르는 것조차 두려워했습니다.


하지만 스마트폰이 보급되고, 모바일 인터넷 환경이 좋아지면서 모바일 웹 디자인도 발전하기 시작합니다처음에는 단(column)을 이용하는 디자인으로 모바일에 대응했습니다. 대표적으로 960 그리드 시스템을 12단으로 나눠서 사용했습니다.


그다음으로는 자주 쓰이는 서식, 메뉴, 버튼 등 일반적인 UI를 쉽게 사용할 수 있는 라이브러리가 등장했습니다. 부트스트랩(Bootstrap)과 파운데이션(Foundation)이 대표적인데요. 모바일도 대응할 수 있는 웹 사이트를 빠르고 쉽게 만들 수 있게 되었습니다. 하지만 그만큼 디자인이 비슷한 사이트들이 많아졌으며, 디자이너들이 사용하기에는 코드가 어려웠습니다.

 



7. 반응형 웹 디자인

 

웹 디자인의 역사


디자이너 겸 개발자 에단 마콧 씨(Ethan Marcotte)는 같은 콘텐츠로 화면 넓이에 따라 디자인을 바꿀 수 있는 '반응형 웹 디자인'이라는 용어를 만들고 제안했습니다. 반응형 웹 디자인은 html 수정없이 css 수정으로 모든 크기의 화면에 대응할 수 있습니다. 모바일 웹사이트를 따로 만들 필요도 없어 효율적이며, 어디서나 같은 콘텐츠를 보여줄 수 있습니다.

하지만 반응형 웹 디자인에도 몇 가지 문제가 있는데요. 디자이너들은 반응형 웹 디자인을 위해 여러 가지 화면에 맞는 디자인을 각각 만들어야 합니다. 또한,개발자들은 이미지를 어떻게 사용할지, 데스크톱 혹은 모바일 우선인지 신경 써야 할 것이 많습니다.

 



8.플랫 디자인의 시대


웹 디자인의 역사


수 많은 기기에 맞춰 디자인하는 것은 시간이 오래 걸립니다. 이에 사람들은 정교하지만 오랜 시간이 걸리는 스큐어모픽 디자인을 버리기 시작합니다. 그리고 단순하고 콘텐츠가 돋보이는 플랫디자인을 선호하기 시작하는데요. 형태는 기능을 따른다는 말처럼, 이미 오래전부터 플랫디자인의 시대가 예견되었을지도 모릅니다.




9. 웹 디자인의 미래는?

 

웹 디자인의 역사


우리가 디자인한 이미지파일이 바로 브라우저에서 작동한다면 어떨까요? 거기에 웹 표준과 접근성까지 준수하면서 모든 환경에 대응한다면 어떨까요? 디자이너들은 디자인에 집중하고, 개발자들은 브라우저 호환을 걱정할 필요 없이, 실질적인 개발에 집중할 수 있을 것입니다. 물론 저 같은 웹 퍼블리셔는 일자리를 잃을 수도 있겠지만, 기술의 발전에 뿌듯할 것 같네요. 어쩌면 미래에 기술력보다 더 중요한 것은 좋은 웹사이트를 만들수 있는 기획과 창의력이 아닐까 생각해봅니다.



by 숭이발자국



출처: FroontBlog



 

Posted by slowalk