2015년 슬로워크 블로그에서 어떤 글이 인기 있었을까요? 

페이스북 참여 수 순으로 가장 있기 높았던 글 10개를 소개합니다.




10위: 추천! 웹디자인 스타일 가이드 7가지 (9월 2일) ➔ 더 읽기



웹사이트 스타일 가이드는 '패턴 라이브러리', 'UI 툴킷', 'UI 가이드라인' 등 여러 방식으로 소통됩니다. 웹사이트를 만드는 개발자, 디자이너, 콘텐츠 제작자에게 도움이 되는 잘 만들어진 7가지 스타일 가이드를 소개합니다.




9위: 슬로워크의 색다른 시도, '최고지속가능성책임자'를 영입했습니다! (4월 29일) ➔ 더 읽기



슬로워크는 2015년 CSR 분야의 전문가를 CSO로 영입했습니다. 최고지속가능성책임자(Chief Sustainability Officer)는 세계에서 기업의 사회적 책임을 적극적으로 실행하는 글로벌 기업에서만 찾아볼 수 있는 직책인데요, 슬로워크의 지속가능성을 위한 CSO의 고민을 들어봅니다.




8위: 화장을 지운 인형, Tree Change Dolls! ➔ 더 읽기 



아이들이 가장 좋아하는 장난감은 아마 인형이 아닐까요? 화려한 화장을 한 인형은 비현실적인 미에 대한 선입견을 심어줄 수 있습니다. 호주의 한 아티스트는 아이들에게 각자의 개성과 매력이 진정한 아름다움임을 가르쳐주는 화장을 지운 인형을 만듭니다. 작가의 텀블러 페이지에서 화장을 지우기 전과 후의 모습을 확인해보세요.




7위: 출력과 인쇄, 무엇이 다를까? ➔ 더 읽기 



'출력하다'와 '인쇄하다'의 차이를 아시나요? 두 용어의 차이를 정의했습니다. '출력', '인쇄' 두 과정과 장단점을 인포그래픽을 제작했습니다. 인쇄물이 필요한 프로젝트 담당자라면 '출력'과 '인쇄' 중 어떤 방법이 더 적합한지 알 수 있습니다.




6위: 디자이너 부럽지 않은 인포그래픽 만들기 ➔ 더 읽기 



일러스트레이터나 포토샵과 같은 디자인 툴을 사용할 수 없어도 쉽게 인포그래픽을 제작할 수 있는 사이트를 소개합니다. 소개된 사이트를 통해 잘 만들어진 인포그래픽의 색상 구성, 차트 형태 등을 공부해보는 것도 더 좋은 인포그래픽 만들기 위한 하나의 방법입니다.




5위: 도시의 동물들을 위한 작은 표지판, #TINYROADSIGN ➔ 더 읽기 



도시는 사람 외에도 여러 생물이 공존하는 공간입니다. 우리가 여러 생물과 도시 공간을 공유함을 상기시키는 동물들을 위한 표지판을 소개합니다.




4위: 비영리단체를 위한 10가지 뉴스레터 팁 ➔ 더 읽기 



이메일 뉴스레터는 비영리 단체의 소식을 알리고 참여를 유도하는 매우 중요한 도구인데요, 그저 '하던 대로'가 아닌, 마케팅 효과를 얻을 수 있는 10가지 뉴스레터 제작 팁을 공유합니다.




3위: 리플릿, 어떻게 접는게 좋을까? ➔ 더 읽기 



디지털 마케팅이 증가하면서 종이로 만들어진 홍보물은 점차 줄어들고 있습니다. 두꺼운 제본 형식의 인쇄물보다는 한 장으로 이루어진 리플릿의 비중이 높아진다고 하는데요, 리플릿 기획 과정에서부터 반드시 고려해야 할 기본적인 접지 방법을 소개합니다. 디자이너가 아니더라도 리플릿을 의뢰하는 경우가 종종 있다면 꼭 읽어보세요. 더 효과적으로 정보를 전달할 수 있습니다.




2위: 웹디자인에서 자간, 행간에 대한 고찰 ➔ 더 읽기 



웹디자인에서 행간과 자간을 어떻게 다뤄야 할까요? CSS와 포토샵의 단위 차이를 이해하고 디자이너와 개발자 모두 만족하는 방법을 알아보세요.




1위: 디자이너가 아니어도 괜찮아! 글꼴 다루기 ➔ 더 읽기 



보고서, 기획서, 프레젠테이션 등 우리는 일상에서 수많은 문서를 만듭니다. 보기 좋은 문서와 그렇지 않은 문서의 차이를 만드는 데는 여러 요소가 있는데요, 그 중 중요한 것은 글꼴입니다. 김은영 디자이너의 책 '좋은 문서디자인 기본 원리 29는' 비디자이너도 보기 좋은 문서를 만들 수 있는 원리를 쉽게 설명하는데요, 몇 가지 유용한 팁을 공유합니다.




Posted by slowalk

보고서, 이력서, 기획서, 안내문, 초대장, 프레젠테이션…. 우리는 일상 속에서 수많은 문서를 만듭니다. 보기 좋은 문서와 그렇지 않은 문서의 차이를 만드는 데는 여러 요소가 있을 텐데요, 그 중 중요한 것이 바로 글꼴이라는 것을 아시나요?





김은영 디자이너의 책 '좋은 문서디자인 기본 원리 29'는 디자이너가 아닌 사람들도 보기 좋은 문서를 만들 수 있도록 문서디자인의 원리를 이해하기 쉽게 설명합니다. 그중 글꼴을 고르고 다루는 방법은 디자인을 전공한 저에게도 기본기를 확인하게 하는 유익한 내용이었는데요, 지금부터 몇 가지를 공유합니다.




첫째, 문서의 내용과 분위기를 고려하여 글꼴을 선택한다.



같은 내용, 같은 색상이지만 글꼴을 바꾼 것만으로 글의 인상이 바뀝니다. ①과 ②는 공식적이며 개인적 감정이 느껴지지 않는 중립적인 인상을, ③, ④, ⑤는 보다 더 개성적이며 친근하고 자유로운 인상을 줍니다.

글자의 생김새를 말하는 글꼴은 글의 첫인상을 결정하는 중요한 요소이므로 글의 내용과 작업자의 의도에 맞게 적절하게 선택하는 것이 중요합니다. 보고서와 이력서, 논문 등 공식적인 문서에는 ①, ②가, 친근하고 자유로운 인상이 필요한 초대장과 포스터 등에는 ③, ④, ⑤와 같은 글꼴이 더 잘 어울립니다.



여기서 한 걸음 더 나아가면 같은 고딕 계열이라도 다양한 종류의 글꼴이 있다는 것을 알 수 있습니다. 위의 다섯 가지 글꼴은 언뜻 보면 크게 다를 것이 없어 보이지만, 자세히 보면 글꼴의 끝 모양과 길이, 자음과 모음 사이의 간격 등 미세한 차이가 각각의 특징을 드러냅니다. 작은 부분으로도 글꼴의 표정을 읽을 수 있게 된다면 그때부터 문서디자인이 재미있어집니다.



글꼴 자체와 더불어 글꼴의 굵기와 크기에 변화를 주어 문서에 비언어적인 표현을 담을 수 있습니다.(내용의 강약 조절, 문단 정리 등)




둘째, 글자의 굵기와 기울기, 너비를 강제로 변형하지 않는다.



변형 기능은 우리가 자주 사용하는 프로그램(한글, 워드프로세서, 파워포인트, 일러스트레이터, 인디자인 등)에 기본으로 포함되어 있고, 적절하게 사용하면 내용 전달에 효과적입니다. 그러나 지나친 변형은 가독성을 떨어뜨리고 문단의 균형을 깨뜨립니다.

① 획을 변형할 때는 볼드(B)버튼으로 글자 주위에 강제로 획을 덧씌우기 보다 처음부터 글꼴 가족으로 개발된 본래의 굵은 서체를 사용하는 것이 바람직합니다. ② 낱자를 나열해서 쓰는 로마자와는 달리 모아쓰기를 하는 한글은 글자를 지나치게 기울일 경우 균형감이 쉽게 무너지므로 많은 양의 글을 한꺼번에 기울이는 것은 자제합니다. ③ 글자 너비를 조정하면 한정된 공간 안에 많은 양의 글을 넣을 수 있다는 장점이 있지만, 글꼴의 본래 인상이 훼손되므로 신중하게 적용해야 합니다.




셋째, 찬찬히 읽어야 하는 긴 글에는 고딕보다는 명조를 사용한다.



명조는 획의 시작과 끝에 부리와 맺음이 있어 글자 간 실루엣 차이가 크고, 이런 특징 덕분에 많은 글자가 나열되어 있더라도 글자를 쉽게 구분할 수 있어 고딕보다 가독성이 높습니다. 반면에 같은 크기에서 명조는 고딕보다 0.5-1pt 작아 보이므로, 크기 수치를 높일 수 없는 상황에서 더 또렷하게 보이길 원한다면 명조가 아닌 고딕을 사용합니다. 일반적으로 제목이나 소제목에는 굵은 획의 고딕을, 본문에는 명조를 사용하면 무난하게 잘 읽히는 문서가 됩니다.




넷째, 자간<어간<행간<단락 사이가 명확히 드러나야 한다. 자간을 조절하기 어렵다면 이렇게!



글자와 글자 간 여백은 자간(=글자 사이), 낱말과 낱말 간 여백은 어간(=낱말 사이, 띄어쓰기 공간), 글줄과 글줄 간 여백은 행간(=글줄 사이)이라고 말합니다. 문서 작업을 할 때는 자간<어간<행간<단락 사이 순으로 면적을 조정해야 보기 좋은 문서가 됩니다. 자간이 너무 붙어 있으면 글자를 알아보기 어렵고, 행간이 너무 떨어져 있으면 전체 내용을 파악하는 데 오랜 시간이 걸립니다. 이는 사람들이 글을 읽을 때 글자 자체뿐만 아니라 글자 사이의 공간을 인지하여 내용을 파악하기 때문입니다.



글자의 세밀한 조정이 낯설 때는 자간을 어느 선까지 줄여야 할지 모릅니다. 그럴 때는 글 끝에 '으으'를 적어보고 두 글자가 서로 붙지 않는 선에서 멈추면 됩니다.




다섯째, 복잡하거나 선명한 이미지 위에는 글자를 올리지 않는다.


언어정보를 배제하고 보면 글자는 여러 개의 가는 선으로 이루어진 복잡한 이미지와 같습니다. 이 때문에 이런 개체가 제대로 보이기 위해서는 개체와 배경 간에 대비가 있어야 합니다. 개체가 복잡하면 배경은 단순하게, 개체가 선명하면 배경은 흐리게, 개체가 밝다면 배경은 어둡게, 개체가 어둡다면 배경은 밝게 해야 가독성이 높아집니다.



기본에 충실한 문서디자인은 보는 사람에게 안정감과 신뢰감을 줍니다. 이 밖에도 글의 분량이 많다면 매 글줄의 시작점을 통일할 것, 단락의 첫 줄은 최소 한 글자 반을 들여쓰기할 것, 표와 가운데 맞추기를 습관적으로 사용하지 말 것 등의 원리가 있지만, 일단 오늘 소개된 몇 가지만 기억한다면 누구나 보기 좋은 문서를 만들 수 있을 것입니다.




참고도서 : 좋은 문서디자인 기본 원리 29, 김은영

by 두루미 발자국




Posted by slowalk



디자이너와 개발자는 너무 다릅니다. 여러 가지 이유가 있겠지만, 작업 방식부터 다르기 때문이라고 생각합니다. 실제로 웹 개발실에서 일하면서도 많이 경험할 수 있었는데요. 그중 가장 문제가 많이 생기는 부분이 폰트라고 생각합니다.


서체의 경우, OS, 브라우저의 렌더링 스타일이나 유료폰트 구매 문제로 귀결됩니다. 하지만 자간과 행간은 맞출 수 있음에도, 디자이너분들과 소통하지 못했습니다. 저는 디자인을 전공했지만, 디자인을 정확하게 구현하고 싶은 마음에 개발을 시작했습니다. 하지만 초심과 다르게, 효율을 중시한 나머지 자간과 행간을 간과하는 경우가 많았습니다.


이 부분이 문제 제기되어 방법을 모색하게 되었는데요. 그 내용을 공유합니다.


여담이지만 디자인과 출신인 저도 자간, 행간에 대한 감각이 형편 없습니다.


자간과 행간의 기준은 디자이너들 사이에서도 많은 차이가 납니다. 모바일에서 잘 안 보인다고 만지지 않는 분이 있지만, 편집디자인처럼 세세하게 다 보시는 분도 있습니다.


다양한 디자인 의도를 정확하게 표현하기 위해, 가이드를 넘어 포토샵에 대한 이해가 필요합니다.



자간

포토샵에 자간을 작업하는 방식은 다음과 같습니다.




단위가.. 없네요


퍼블리싱 작업을 할 때 저 알 수 없는 단위를 어떻게 환산해야 할지 고뇌한 적이 많습니다. 솔직하게 말씀드리면 자간이 좁다고 생각되면 -1px로 처리했던 적이 많습니다. (디자이너분들에게 죄송합니다...)


저 단위 없는 자간의 정체는 무엇일까요? 어도비 공식사이트에는 다음과 같이 명세 되어 있는데요.


자간과 커닝은 모두 현재 문자 크기에 상대적인 측정 단위인 1/1000em으로 측정됩니다. 6포인트 글꼴에서 1em은 6포인트에 해당하고, 10포인트 글꼴에서 1em은 10포인트에 해당합니다. 커닝 및 자간은 현재 문자 크기에 정확하게 비례합니다.


쉽게 말씀드리면, 포토샵의 1000이 CSS의 1em(현재 폰트크기)과 일치합니다. (링크)



파이어폭스에서 구현된 자간. 거의 일치합니다.



가장 정확하게 렌더링하는 파이어폭스 기준으로 거의 일치하는데요.이제는 픽셀로 어설프게 맞추지 않아도 되겠네요. 

(*IE9 이하 등 구형브라우저에서는 소수점을 정수화 처리하기 때문에 정확하게 작동하지 않을 수도 있습니다. 링크)



행간

포토샵에서 행간을 넣는 방법은 이렇습니다.




자간과 비교하면 단위가 있어서 다행이네요.

하지만 포토샵과 CSS의 line-height의 방식은 다릅니다.




이처럼 포토샵은 글자의 가장 윗부분을 기준으로,

css의 line-height는 글자의 수직중앙을 기준으로 작동합니다.




결국, 이런 오차가 생길 수밖에 없는데요. 이 오차 때문에 가끔 글씨 위 아래로 애매한 여백이 생깁니다. 이 여백을 계산하는 공식((행간 - 폰트사이즈) / 2)을 사용하면 좀 더 정확하게 퍼블리싱 할 수 있습니다.  



행간과 자간을 디자이너의 의도와 비슷하게 맞추는 방법에 대해 알아봤습니다. 하지만 위와 같은 방법으로 해도, 아래의 예시와 같이 OS와 브라우저의 렌더링 방식에 따라 1~2px정도 오차가 있을 수 있습니다.


크롬에서 구현된 자간. 미세하게 오차가 있습니다.



웹디자인에서 자간과 행간의 문제는 개발자의 실력도 원인이 될 수도 있겠지만, 디자이너들과의 의사소통으로 간단히 해결할 수 있다고 생각합니다. 이런 소통을 통해 모두가 만족할 수 있는 프로젝트를 진행할 수 있었으면 좋겠습니다.




출처: Justin Marsan, 어도비 공식사이트


더 읽기 > 올바른 웹, 모바일 폰트 사용하기


by 원숭이발자국



Posted by slowalk