본문 바로가기

타이포그래피

(9)
UI 디자인에서 영문 타이포그래피 잘 쓰는 법 이 글은 폴란드의 디지털 에이전시인 inFullMobile의 UX/UI디자이너인 Wojciech Zieliński가 작성한 "How to use typography in UI Design"을 번역하여 작성하였습니다(원저자에게 허락을 받았으며, 의역이 있습니다). 들어가며타이포그래피는 UI 디자인에서 가장 어려운 부분이라해도 과언이 아닙니다. 우리는 오랫동안 다양한 방식으로 타이포그래피 작업을 해온 결과로 여러 규칙, 이론과 실제를 경험하게 되었는데요. 이 글에서는 따로 작업이 어려운 분들을 위해 프로젝트에 사용할 수 있는 몇 가지 실용적인 팁과 비결을 알려드리겠습니다. 예시로 보여드릴게요타이포그래피는 재미있는 주제이긴 하지만, 이론적인 부분을 얘기하지는 않겠습니다. 문자 해부학이나 활자보다 바로 적용가능..
2015 슬로워크 블로그 인기글 10 2015년 슬로워크 블로그에서 어떤 글이 인기 있었을까요? 페이스북 참여 수 순으로 가장 있기 높았던 글 10개를 소개합니다. 10위: 추천! 웹디자인 스타일 가이드 7가지 (9월 2일) ➔ 더 읽기 웹사이트 스타일 가이드는 '패턴 라이브러리', 'UI 툴킷', 'UI 가이드라인' 등 여러 방식으로 소통됩니다. 웹사이트를 만드는 개발자, 디자이너, 콘텐츠 제작자에게 도움이 되는 잘 만들어진 7가지 스타일 가이드를 소개합니다. 9위: 슬로워크의 색다른 시도, '최고지속가능성책임자'를 영입했습니다! (4월 29일) ➔ 더 읽기 슬로워크는 2015년 CSR 분야의 전문가를 CSO로 영입했습니다. 최고지속가능성책임자(Chief Sustainability Officer)는 세계에서 기업의 사회적 책임을 적극적으로..
타이포그래피, 이메일에서 어떻게 활용할까? 좋은 타이포그래피는 콘텐츠를 효과적으로 전달할 수 있게 해줍니다. 웹사이트의 95%는 텍스트로 이루어져 있고, 그 텍스트를 표현하는 타이포그래피는 매우 중요합니다. 이메일도 마찬가지입니다. 이미지, 일러스트, 인포그래픽 등을 활용하기도 하지만, 텍스트 그 자체의 가독성을 높였을 때 콘텐츠를 더 효과적으로 전달할 수 있습니다. Smashing Magazine은 2013년에 진행한 웹사이트 타이포그래피 조사(Typographic Design Patterns And Current Practices (2013 Edition))에 이어 지난 8월에 이메일 타이포그래피 조사를 진행했습니다. 50개의 이메일을 무려 95개의 항목으로 분석했습니다. Helvetica VS Georgia 타이틀에 사용한 폰트 중 74%는..
타이포그래피, 웹에서 어떻게 활용할까? 웹사이트의 95%는 텍스트로 이루어져 있다고 합니다. 여러분이 읽고있는 이 글 또한 웹에 적용된 타이포그래피라고 할 수 있을텐데요, 사이트 방문자가 콘텐츠를 잘 읽고 목적지를 쉽게 찾아갈 수 있도록 하는 웹에서의 타이포그래피는 인쇄물에서의 그것보다 더 중요하다고 해도 과언이 아닐 것입니다. 웹 디자이너가 적용할 수 있는 웹 타이포그래피 요소와 디자인 팁을 소개합니다. 다양한 폰트의 선택, 미세한 활자의 조정이 가능해 디자이너의 창의성을 발휘할 수 있는 인쇄 작업과는 달리 웹에서 완벽한 타이포그래피를 구현하기에는 한계가 있습니다. 그럼에도 불구하고, 다양한 스타일의 웹폰트와 CSS의 출연으로 그래픽툴을 이용하지 않고도 웹상에서 훌륭한 타이포그래피를 구현할 수 있게 되었습니다. 웹에서 좋은 타이포그래피를 구..
모질라 재단의 아이덴티티, 피라산스를 소개합니다. 웹 기술이 발전하면서 우리는 다양한 디자인을 시도할 수 있게 되었는데요. 그중 하나가 웹 폰트라고 생각합니다. 제가 처음 웹을 접했을 때만 해도 기본 시스템 폰트인 돋움과 에어리얼(Arial)을 쓰면서 만족했던 적도 있습니다. 하지만 이제는 수많은 웹 폰트가 존재하는데요. 그만큼 프로젝트를 시작할 때마다 어떤 폰트를 쓸지 깊게 고민해봐야 합니다.세상에 나온 지 2년 가까이 되었지만, 성능과 디자인에 비해 외면받는 ‘피라산스(Fira Sans)’를 소개합니다. 브라우저 '파이어폭스'로 유명한 모질라 재단은 오랫동안 오픈소스 소프트웨어 커뮤니티의 선구자였습니다. 2012년 모질라는 파이어폭스 OS에 들어가는 새로운 타이포그래피로 ‘피라 산스(Fira Sans)’라는 폰트를 선택했습니다. FF 메타(FF Me..
걸음걸이를 타이포그래피로 구현한 <한걸음> 달력 “삶의 걸음과 인생의 시간은 나란히, 그리고 평행하게 걸어갑니다.” 한걸음 달력은 2014 하반기 슬로워크 버닝데이에 출품한 달력입니다. 누구에게나 공정한 시간, 그러나 누구에게나 같은 양의 시간이 주어지지는 않습니다. 삶의 걸음과 인생의 시간은 나란히, 그리고 평행하게 흐릅니다. 때론 빠르게, 때론 천천히. 하지만 멈추지는 않습니다. 내가 걸어가는 시간에도 변하지 않을 시간을 기록해 줄 달력, 그 걸음걸이에 힘을 주고 위로가 될 수 있는 달력으로 제작하게 되었습니다. 사전구상 달력이라는 매체의 속성을 곰곰이 생각해보았을 때, 얻은 결론은 '기능'에 충실할 것과, 그 기능을 사용함에 있어 불편하게 하지 않는 선에서 사용자에게 만족감을 주는 '콘텐츠'적인 요소, 이 두 가지에 집중하는 것이었습니다. 우리는..
뉴욕의 지도, 글자로 표현하다!!! 뉴욕에 다녀오신 적 있으신가요? 빅애플이라 불리는 뉴욕은 미국의 상업·금융·무역의 중심지로서, 또 공업도시로서 경제적 수도라 하기에 충분한 지위에 있으며, 더불어 많은 대학·연구소·박물관·극장·영화관 등 미국 문화의 중심지로도 중요한 위치를 차지하고 있지요. 구석구석마다 그 특색이 분명하고 재미가 숨어있는 도시 뉴욕. 오늘 소개해 드릴 이야기는 뉴욕을 여행한 후, 뉴욕의 지도를 타이포그래피로 표현한 Theo Inglis 의 엽서 디자인을 소개시켜드릴까 합니다. 2010년 3월, Theo Inglis 는 미국 뉴욕으로 여행을 떠났습니다. 그를 매료시킨 뉴욕의 매력은 그의 디자인 작업에도 영향을 미쳤죠. 여행에서 돌아온 그는, 뉴욕의 지도를 만들기로 결심합니다. 뉴욕 속 여러 지역의 이름을 시각적으로 표현하..
글씨로만 이루어진 지도 우리 흔히 보는 지도들에는 각종 기호들과 그림이 가득합니다. 그런 기호들과 그림들은 우리가 원하는 정보를 아주 단순명료하게 전달해줍니다. 여기, 그 흔한 지도들과는 조금 다른 지도가 있습니다. Axis Maps에서 제작한 Typographic Maps입니다. 이 지도는 선과 도형, 그리고 조금의 글씨로 이루어진 다른 지도들과 달리, 오로지 글씨만으로 이루어져있습니다. 글씨와 친하지 않다면, 조금은 어려운 지도일 수도 있겠네요. 위 그림처럼 지도 안의 글씨들을 자세히 보면, 길, 도로, 지역의 명칭들이 써져있음을 알 수 있습니다. 우리는 보통 길을 찾아가거나 어떤 장소에 대한 정보를 얻기 위해 지도를 보곤 합니다. 그런데 사실 길이나 장소에는 위치라는 단순한 정보말고도 더 많은 것들이 담겨있습니다. 바로 ..