지난  ‘웹페이지에 굴림체만 보이는 이유, 웹폰트 이해하기’에서는 웹의 매체 특성 때문에 OS에 설치되지 않은 글꼴을 사용하려면 웹폰트를 사용해야 한다고 말씀드렸습니다. 그리고 웹폰트의 아름다움과 그 가능성에 대해 함께 알아보았는데요. 이번에는 이런 웹폰트를 어떻게 하면 잘 활용할 수 있는지, 기초부터 차근차근 알아보도록 하겠습니다.


웹폰트 불러와 사용하기


웹페이지는 많은 정보로 이루어져 있습니다. 아주 기본적인 텍스트 정보부터 사진, 그림과 같은 이미지 정보는 물론 동영상 정보도 불러올 수도 있습니다. 이 모든 것들은 웹페이지에서 HTML 태그와 몇 가지 기술로 ‘불러오는’ 것들입니다. 호출한다고 표현하기도 하는데, 영어로는 loading으로 쓰곤 합니다. 웹폰트도 다르지 않습니다. 웹페이에서 ‘불러와(loading)’ 사용하는 것일 뿐입니다. 그럼 웹폰트는 어떻게 불러올까요? 

가장 먼저 웹페이지에서 사용하고 있는 CSS파일 안에서 불러오기(import) 할 수 있습니다. 만약 index.html 에서 style.css를 사용하고 있습니다. 그럼 style.css의 상담에 다음과 같은 코드를 넣어 웹폰트를 불러올 수 있습니다. 


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


또는 html 페이지에 <link>태그로 바로 적용할 수도 있습니다.


<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">



위와 같은 구조로 html페이지에서 ‘나눔고딕’ 웹폰트를 사용할 수 있습니다. 주소(URL)를 보면 googleapis.com이라는 주소가 보입니다. 구글에서 온라인에 폰트를 올려두고 우리에게 무료로 웹폰트를 서비스해 주고 있는 것이죠. 간편하게 웹폰트를 사용할 수 있는 이유입니다. 사용 방법은 아래와 같습니다. 


  1. https://fonts.google.com/ 에 접속합니다.

  2. 마음에 드는 웹폰트를 찾습니다. 

  3. 우측 상단의 +버튼을 눌러 ‘Family selected’에 담습니다

  4.  ‘Family selected’를 열어보면 <link> 또는 @import방법이 나옵니다.

  5. 내 웹페이지에 적용합니다.

  6. fonts.google.com에서는 영문 폰트만 볼 수 있습니다. 한글은 https://www.google.com/fonts/earlyaccess 를 방문하여 찾아봅시다.




웹폰트 직접 만들어 사용하기


google fonts의 수많은 지원 웹폰트에도 불구하고 마음에 드는 글꼴이 없을 때는? 웹폰트를 직접 만들어서 쓸 수 있습니다. 물론 사용하려는 웹폰트의 저작권 문제가 해결되어야 합니다. 웹폰트를 만드는 가장 손쉬운 방법은 온라인 생성기를 이용하는 방법입니다. 대표적인 생성기인 Web font generator를  사용하는 방법을 알아보겠습니다. 


  1. Web font generator 에 접속합니다.
  2. 가지고 있는 폰트 파일(주로 TTF파일)을 선택하고, 하단의 저작권 관련 내용을 확인합니다.
  3. 웹폰트가 생성되었습니다.
  4. 웹폰트 세트가 묶인 압축 파일을 다운로드합니다.




생성기를 통해 만들어진 웹폰트와 CSS파일을 가지고 있는 서버에 올리고 웹페이지에서 불러와 사용할 수 있습니다. 여기서 잠깐 style.css파일을 살펴보겠습니다.



@import처럼 @로 시작하는 몇 줄의 코드가 보입니다. 2행의 font-family는 앞으로 쓸 폰트의 이름입니다. 기본적으로 업로드한 폰트명으로 설정되지만 다른 것으로 바꾸어도 무관합니다. 그리고 이어 나오는 src는 폰트파일의 경로입니다. 생성된 폰트 파일의 경로를 한 줄 씩 보여주고 있는데요. 폰트는 하나인데 이렇게 복잡한 코드가 필요한 이유는 사용자들이 쓰는 브라우저가 각기 다르기 때문입니다. 브라우저마다 필요한 글꼴의 형식이 달라 이렇게 여러 줄로 안전하게 사용하는 것이죠. 

style.css안의 내용을 우리가 사용 중인 CSS파일 상단에 넣으면 지정한 font-family로 웹폰트를 사용할 수 있습니다. 


웹폰트 서비스 이용하기


웹폰트를 사용하고 싶지만 만드는 과정이 쉽지 않고, 저작권 문제가 걱정되는 것이 사실입니다. 웹폰트 생성기를 통해 상용 폰트를 웹폰트로 만들어 사용할 수도 있지만 그에 따른 저작권 책임은 온전히 사용자의 몫이기 때문입니다. 그럴 때는 유료 웹폰트 서비스를 사용해볼 수 있습니다. 저작권을 가진 웹폰트를 회원가입을 통해 나의 웹사이트에 사용하고 그에 따른 사용료를 지불하는 방식입니다. 


국내에는 아직 많이 사용되고 있지 않지만, 영미권에서는 유료 웹폰트 사용이 매우 활발합니다. Adobe에서 운영하는 Typekit이나  Monotype에서 운영하는 fonts.com이 대표적입니다. Helvetica, Futura 등 알만한 상용 폰트들을 웹에서 서비스하고 있습니다. 단순히 같은 폰트를 온라인에 올려놓은 것이 아니고, 종이가 아닌 스크린 환경에 최적화된 버전들을 서비스하고 있습니다. 


하지만 아직 한글 웹폰트를 서비스하는 곳은 많지 않습니다. 타입스퀘어를 통해 웹폰트 서비스의 사용 방법을 알아보도록 하겠습니다. 


  1. 회원가입 후, 로그인합니다.

  2. 이용 중인 플랜 중 ‘무료 플랜’을 선택합니다.

  3. 이용 범위를 확인합니다.

  4. 이용사이트를 등록합니다.

  5. 다시 위로 올라와 전용 태그를 복사하여 웹페이지에 추가합니다. 

  6. font-family 를 설정합니다.



이용 방법이 무료 서비스에 비해 다소 복잡합니다. 회원이 등록한 사이트에만 제한적으로 웹폰트를 서비스하기 때문입니다. 


마치며


웹폰트는 참 매력적인 도구입니다. 굴림과 바탕으로 밋밋하고 못난 웹페이지를 고급스러운 디자인으로 보이도록 해주기 때문입니다. 화면 밖의 타이포그래피는 참 화려합니다. 수많은 디자이너가 좋은 서체를 활용하여 더욱 아름답고 멋진 디자인을 위해 노력하고 있습니다. 하지만 웹에서는 아직 사용할 수 있는 자원이 많지 않습니다. 특히 한글 글꼴 지원은 아직 걸음마 수준입니다. 웹폰트에 대한 관심이 차츰 성장하고, 다양한 웹폰트 사용이 꾸준히 늘어나 웹페이지에서도 아름다운 타이포그래피를 볼 수 있길 바랍니다. 


작성자: 스티비 개발 문윤기

Posted by slowalk





아름다운 페이지를 위한 웹폰트


우리가 흔하게 보는 웹사이트는 대부분 글(text)로 이루어져 있습니다. 사진이나 동영상을 통해 정보를 전달 받기도 하지만 아직 대부분 글을 눈으로 읽는 과정을 통해 정보를 얻고 있습니다. 책이나 잡지같은 인쇄물에서도 글꼴(font)이 중요하듯이 웹사이트에서도 내용을 잘 전달하기 위해서, 매력적으로 보이기 위해서 글꼴은 매우 중요합니다. 


웹폰트란


왠지 웹사이트의 글꼴은 거의가 비슷해 보이지 않나요? 디자이너가 공들인 이미지 위의 글꼴에 비해 투박하게 보일 때도 많고, 대부분 같은 글꼴을 쓰고 있다고 생각되지 않나요? 이미 익숙해져서 눈치채지 못하고 있을 수도 있습니다. 


웹폰트란 문자 그대로 웹+폰트. 웹에서 쓰이는 폰트입니다. 웹에서 볼 수 있는 ‘맑은고딕’이나 ‘굴림’은 웹폰트라고 부르지 않고 아닌 다른 프로그램에서도 쓰고 있는데 왜 굳이 웹폰트라는 단어를 쓰는 걸까요? 웹폰트는 일반 폰트와 조금 다른 점이 있습니다. 


웹폰트 무엇이 다른가 1 : 온라인에서 다운로드


웹폰트는 온라인에서 다운로드 됩니다. 나는 폰트같은 걸 다운받은 적 없는데 폰트가 다운로드 된다니 더욱 혼란스럽습니다. 이를 이해하기 위해서는 웹페이지 구성 방식을 조금 살펴볼 필요가 있습니다.


웹페이지 안의 글은 단순해 보여도 여러가지 정보를 담고 있습니다. 크기, 색상, 굵기 등과 함께 font-family라는 글꼴의 정보도 가지고 있습니다. 웹브라우저가 이 정보를 만나면 크기, 색상, 굵기는 이미 정해진 방법대로 표현해주면 되는데, 글꼴 정보는 스스로 표현할 수가 없습니다. 그래서 사용자가 이미 윈도우즈나 맥에 설치해 놓은 글꼴 중 설정된 것과 같은 것을 찾아서 해당 글꼴로 보여주게 됩니다. 


여기서 이미 설치된 글꼴은 ‘시스템폰트’라고 합니다. 이미 가지고 있기 때문에 자연스럽게 보여줄 수 있습니다. 설정된 글꼴이 내 PC에 없다면? 유사한 것 중 적당한 것을 골라 보여주게 됩니다. 그러면 만든이가 디자인한대로 표현되지는 않습니다.


그래서 웹페이지 안의 글은 대부분 비슷하게 보이는 겁니다. 사용자 PC에 어떤 글꼴이 설치되어 있는지 알 수 없으니 가장 기본적인 글꼴들로 ‘안전하게’ 설정하는 것이죠. 윈도우는 맑은 고딕, 굴림, 돋움, 바탕, 궁서라는 기본 한글 글꼴을 가지고 있습니다. 



다양한 속성을 가지고 있는 텍스트



다시 웹폰트로 돌아가 봅시다. 사용자 PC에 없는 글꼴을 꼭 보여주고 싶을 때, 사용자에게 따로 어떤 폰트를 설치하라고 강요할 수 없을 때, 이 웹폰트를 사용합니다. 온라인의 어떤 공간에 폰트 파일을 올려두고서 사용자가 웹페이지를 볼 때, 브라우저에게 글꼴 정보를 전달해 줍니다. 그러면 PC에 글꼴이 없어도 볼 수 있는 것이죠. 


다만 글꼴은 용량이 클 수 있습니다. 특히 완성형 글꼴이 매우 많은 한글 글꼴은 더더욱 큽니다. 간혹 웹페이지가 번쩍 하면서 글꼴이 바뀌는 경험을 해보셨을텐데요. 이 시차가 바로 웹폰트가 다운로드되는 시간입니다. 






웹폰트 무엇이 다른가 2 : 가벼운 웹폰트

그래서 웹폰트는 가벼워야 합니다. 사용자가 기다리지 않고, 웹페이지를 아름답게 보여주려면 용량이 큰 웹폰트를 가볍게 해야 합니다. 보통 경량화는 완성형 글꼴 중 사용 빈도가 낮은 문자들을 지워버리는 방식으로 진행됩니다. 꼭 포함될 필요가 없는 한자나 일본어가 포함되어 있다면 삭제합니다. 한글 중 사용 빈도가 낮은 문자들도 삭제합니다.


KS X 1001이라는 표준이 있습니다. 많이 쓰이는 8,836자의 한글 문자 모음인데요. 이걸 기준으로 문자를 줄입니다. 이렇게 다이어트 시킨 폰트 파일을 웹에서 사용할 수 있도록 포맷을 변환하여 서버에 올리면 사용할 수 있습니다.




사용 빈도가 낮은 문자는 삭제한다.



웹폰트로 무얼 할 수 있을까 1 : 아름다운 텍스트


그럼 웹폰트로는 무얼 할 수 있을까요? 당연히 웹페이지를 매력적으로 만드는 데 사용합니다. 굴림체 일색이던 웹페이지에 생명을 불어 넣을 수 있습니다. 개성 있는 웹페이지를 만들 수 있고 사용자에게 정보가 잘 전달되도록 가독성을 높이는 역할도 합니다. 



가독성의 차이



웹폰트로 무얼 할 수 있을까 2 : 아이콘


웹폰트의 중요한 용도가 하나 더 있습니다. 바로 웹페이지의 아이콘을 표현하는 일입니다. 웹페이지에는 많은 아이콘이 사용됩니다. 사용자가 UI를 쉽게 조작할 수 있도록 안내하는 역할을 합니다. 이런 아이콘은 하나의 웹페이지에도 꽤 많이, 자주 사용되기 때문에 이를 모두 이미지로 만들고 하나하나 html 태그로 넣는 것은 효율적이지 않습니다.


그래서 웹폰트를 사용합니다. 아이콘 폰트는 ㄱ, ㄴ, ㄷ, a, b, c와 같은 문자 있던 자리에 기호와 그림을 배치하여 해당 문자가 웹페이지에 보일 때, 한글이나 영문이 아닌 그림으로 보이게 하는 겁니다. 

이미 만들어진 아이콘 모음이 많습니다. 그 중 Font awesome, Material icon이 유명하고 국내에는 Xeicon이라는 서비스도 있습니다. 


자기만의 아이콘 모음을 만들 수 있는 icomoon같은 서비스도 있습니다. 이런 아이콘 폰트를 사용하면 따로 아이콘을 그리거나 이미지로 만들지 않고도 쉽게 웹페이지에 원하는 아이콘을 넣을 수 있습니다. 





마치며


웹사이트를 만드는 기술은 나날이 발전하고 있습니다. 화려하고 멋진 웹사이트가 하루가 멀다하고 등장하고 있으며, 구글드라이브처럼 PC용 프로그램에 버금가는 복잡한 도구도 웹을 통해 서비스되고 있습니다. 그만큼 웹에서의 글꼴, 웹폰트도 발전하고 있습니다. 한글은 영문 알파벳에 비해 필요한 문자 수가 많아 그 발전 속도가 느리지만, 멋진 오픈소스 웹폰트들이 등장하고, 다양한 유료 서비스도 등장하고 있습니다. 아이콘 폰트를 사용하면 고품질의 웹사이트를 쉽게 만들 수도 있습니다. 웹폰트를 적극 활용해서 멋진 웹사이트를 만들어 보는 것은 어떨까요. 


- 참조: 한글 웹 폰트 경량화해 사용하기


by 북극곰 발자국


Posted by slowalk

웹사이트의 95%는 텍스트로 이루어져 있다고 합니다. 여러분이 읽고있는 이 글 또한 웹에 적용된 타이포그래피라고 할 수 있을텐데요, 사이트 방문자가 콘텐츠를 잘 읽고 목적지를 쉽게 찾아갈 수 있도록 하는 웹에서의 타이포그래피는 인쇄물에서의 그것보다 더 중요하다고 해도 과언이 아닐 것입니다. 웹 디자이너가 적용할 수 있는 웹 타이포그래피 요소와 디자인 팁을 소개합니다.





다양한 폰트의 선택, 미세한 활자의 조정이 가능해 디자이너의 창의성을 발휘할 수 있는 인쇄 작업과는 달리 웹에서 완벽한 타이포그래피를 구현하기에는 한계가 있습니다. 그럼에도 불구하고, 다양한 스타일의 웹폰트와 CSS의 출연으로 그래픽툴을 이용하지 않고도 웹상에서 훌륭한 타이포그래피를 구현할 수 있게 되었습니다. 웹에서 좋은 타이포그래피를 구현하는 방법을 디자인의 원리와 요소를 통해 알아보겠습니다.


타이포그래피의 요소, 웹에 적용하기 

Hierarchy(계층)

신문이나 잡지 등의 인쇄 매체에서 텍스트를 보여줄 때는 일련의 계층 구조가 필요합니다. 웹도 마찬가지입니다. 가독성이 좋은 웹페이지는 중요도에 따라 헤더와 서브타이틀, 본문, 링크 등이 시각적으로 구조화되어 시각적으로 안정감을 줍니다. 웹에서의 텍스트 계층은 글꼴의 크기 차이를 두는 것 외에도 굵기, 컬러, 기울임, 폰트 선택 등으로 적용할 수 있습니다. 타이틀과 본문을 구분지어주는 기본적인 역할부터 중요도에 따라 콘텐츠를 나누어 사용자들이 잘 읽을 수 있도록 도와줍니다. 



계층이 명확한 컨텐츠 구조는 사용자가 어디에서부터 어떠한 방식으로 글을 읽어가야 하는지 안내해 줍니다.


 

Contrast(대비)

흰 배경에는 블랙 계열의 컬러를 사용하고 헤드라인과 본문의 텍스트 크기의 차이를 두는 것 모두 대비라는 요소를 적용한 것입니다. 일반적으로 배경과 텍스트 색상의 강한 대비는 가독성을 높여줍니다. 




크기와 컬러의 '대비'는 컨텐츠의 가독성을 높여줍니다.



하지만 지나친 대비는 오히려 사이트의 분위기를 해치고 텍스트 요소간의 결합을 흩뜨리며 가독성을 떨어뜨립니다. 흔히 블랙과 화이트의 강렬한 대비가 가독성을 높여준다고 생각하기 쉽지만, 빛을 내는 스크린에서의 이러한 강한 대비는 오히려 눈에 피로감을 줄 수 있습니다. 때문에 본문의 컬러는 완전한 블랙이 아닌 진한 회색 계열의 컬러를 사용하는 것이 좋습니다. 


컬러 

웹에서의 컬러는 시선을 유도하고 사용자들이 콘텐츠를 그룹화 해 읽을 수 있도록 도와주는 중요한 요소입니다. 전체 사이트의 분위기와 사용자의 행동까지 유도하는 웹에서의 컬러 선택은 그만큼 중요하다고 할 수 있을텐데요, 그렇다면 웹에서의 글꼴 컬러 선택은 어떻게 하는 것이 좋을까요?


1. 텍스트의 가독성을 위해 배경과 글꼴 요소간의 충분한 컬러의 대비를 부여합니다.

2. Less is more - 제한된 컬러의 사용은 콘텐츠를 더욱 돋보이게 해 줍니다.

3. 온,오프라인 컬러 시스템 통일 - 브랜드 로고 및 아이덴티티 컬러를 적용하면 사용자들에게 일관된 시각적 메시지와 통일감을 줄 수 있습니다. 때문에 브랜드에 사용된 컬러 시스템을 토대로 Main, Sub, Point컬러를 텍스트에 조화롭게 적용하는 것이 좋습니다. 



브랜드의 컬러 시스템을 적용한 웹사이트 (http://www.heungkuklife.co.kr/)




크기

텍스트의 역할과 중요도에 따라 달라지는 크기는 어떠한 요소를 강조하거나 그 반대의 경우를 위해 사용됩니다. 강조를 위한 너무 큰 크기의 사이즈도, 너무 작은 사이즈도 시각적인 균형을 깨트립니다. 때문에 보기 좋은 헤드라인과 본문 글꼴의 적당한 크기 차이를 두어 구성하면 시각적 안정감을 돕습니다. 일반적으로 타이틀에 사용되는 글꼴의 크기는18px ~ 32px, 본문에 사용되는 사이즈는 12px~16px 정도이며, 웹에서 잘 읽을 수 있는 최소 폰트의 사이즈는 13px, 0.813em라고 합니다. 



비율(Scale)

우리가 보는 웹페이지에는 다양한 크기의 텍스트가 적용되어 있습니다. 타이틀과 본문 등을 적당한 비율의 크기로 배치한다면 콘텐츠를 더욱 짜임새 있게 구성할 수 있습니다. typescale은 1.618이라는 황금비율을 포함한 다양한 비율을 적용해 폰트 크기를 비교해 볼 수 있는 사이트입니다.

 


http://type-scale.com/



행간(line-height), 자간(letter-spacing)

인쇄물과 마찬가지로 웹에서의 행간과 자간은 본문의 가독성에 중요한 역할을 합니다. 어느 정도의 줄간격은 가독성을 더욱 높여줍니다. 특히 폰트의 크기가 작을수록 자간을, 내용이 많은 문단일수록 행간을 늘여주는 것이 좋습니다. 너무 좁은 줄간격도, 넓은 줄간격도 좋지 않으며 폰트 사이즈의 150%이상의 행간은 읽기 좋은 본문을 만들어줍니다. 

참고글 - 웹디자인에서의 자간과 행간에 관한 고찰 



어떠한 폰트를 선택할까?

Less is More

모든 종류의 시스템폰트를 웹에 적용할 수는 없지만 '돋움체, 굴림체' 등 웹상에서의 폰트 선택이 제한적이었던 과거에 비해 다양한 웹폰트를 사용할 수 있게 되었는데요, 과연 웹페이지에서 많은 웹폰트를 적용한 화려한 디자인이 과연 좋은 디자인일까요? 좋은 웹사이트는 한 가지 폰트로도 위에 언급한 '대비'요소를 통해 크기와 두께, 색상의 변화만으로 사이트 전체에는 시각적 통일성과 안정감을 주고, 사이트의 무게는 더욱 가볍게 만듭니다.



이미 검증받은 폰트 선택, 절반은 성공!

오랜 역사와 대중성 있는 폰트는 그 자체로 가독성과 조형성을 갖추고 있습니다. 명조, 고딕이 들어간 웹폰트가 널리 사용되는 이유 또한 가독성이 높기 때문입니다. 다양한 굵기의 서체를 지원하는 Adobe의 본고딕 또한 깔끔하고 뛰어난 가독성 때문에 많은 사이트에서 이용되고 있습니다.



타이틀과 본문에 어울리는 폰트 선택.

같은 크기에서 가독성이 더 우수한 폰트가 있을까요? 헤더와 본문 등 각 영역에 어울리는 폰트는 따로 있습니다. 일반적으로 세리프(Serif)글꼴은 본문에 작은 크기로 적용되었을 때 뭉개지는 현상이 있는데요,(예외로, Georgia같은 폰트는 크기가 작을 때 더 좋은 가독성을 보입니다.) 때문에 폰트가 어떤 영역에 적용되는지에 따라 적합한 폰트를 선택해야 합니다.



'명조(Serif)는 본문이 아닌 타이틀에 크게 적용되었을 때 웹에서 더 우수한 가독성을 보입니다.



영문과 한글의 조화 

한글 웹폰트에 비해 영문 웹폰트는 선택 폭이 넓습니다. 한글과 영문을 함께 사용할 때, 한글 웹폰트로도 영문을 쓸 수는 있지만, 사이트의 심미적인 부분을 좀 더 고려한다면 영문 웹폰트를 독립적으로 사용하기도 합니다. 적용 명조체에는 세리프 서체, 고딕체에는 산세리프 서체가 잘 어울립니다. 사이트의 성격과 분위기에 맞는 한글과 영문의 조합은 시각적 통일성을 높입니다.



나눔고딕 + Lato 


나눔명조 + PT Serif 



좋은 타이포그래피는 웹사이트가 전달하는 메시지를 돋보이게 해 주며 명확하게 내용을 전달 해 줍니다. 웹에서의 타이포그
피 활용를 통해 방문자들이 더 머물고 싶은, 즐겨찾는 사이트를 디자인 하는 데 도움이 되길 바랍니다.


출처 : Smashing Magazine, tutsplus, typecast


by 소금쟁이 발자국

 

Posted by slowalk




웹 기술이 발전하면서 우리는 다양한 디자인을 시도할 수 있게 되었는데요. 그중 하나가 웹 폰트라고 생각합니다.

제가 처음 웹을 접했을 때만 해도 기본 시스템 폰트인 돋움과 에어리얼(Arial)을 쓰면서 만족했던 적도 있습니다. 하지만 이제는 수많은 웹 폰트가 존재하는데요. 그만큼 프로젝트를 시작할 때마다 어떤 폰트를 쓸지 깊게 고민해봐야 합니다.

세상에 나온 지 2년 가까이 되었지만, 성능과 디자인에 비해 외면받는 ‘피라산스(Fira Sans)’를 소개합니다.





브라우저 '파이어폭스'로 유명한 모질라 재단은 오랫동안 오픈소스 소프트웨어 커뮤니티의 선구자였습니다. 2012년 모질라는 파이어폭스 OS에 들어가는 새로운 타이포그래피로 ‘피라 산스(Fira Sans)’라는 폰트를 선택했습니다.


FF 메타(FF Meta) 디자이너로 유명한 에릭 스피커만(erik spiekermann) 씨와 랄프 두 카로이스(Ralph du Carrois) 씨는 모질라 재단으로부터 타이포그래피 제작을 의뢰받았습니다. 모질라재단은 그들의 아이덴티티를 해치지 않으면서 모바일과 같은 작은 화면에도 적합한 디자인을 요구했습니다. 예전에 스피커만 씨가 디자인했던 FF 메타(FF Meta)는 모질라 재단의 핵심 아이덴티티 였으며, 메타를 발전시키는 방향으로 작업했습니다.





FF 메타와 매우 비슷하면서도, 다른 점이 많이 보이는데요. 작은 화면에서도 가독성을 높이기 위해 엑스 하이트(x-height:소문자 x의 높이)가 높아지고, 자간이 조금 넓어졌습니다. FF 메타의 터미널(획의 끝맺음)이 비슷하지만, 좀 더 직선적이며 조형성을 갖췄습니다.





디자이너 스피커만 씨는 자신의 블로그에 헬베티카의 가독성에 대해 논한 적이 있습니다. 1, i, l(소문자 L)이나 I(대문자 i)가 작은 화면에서 보기에는 구분이 잘 안된다는 내용이었는데요. 그는 이러한 문제점을 잘 해결해서 피라산스에 반영했습니다.




모질라 재단는 피라산스를 무료로 배포하고 있습니다. 모질라재단 깃허브, 구글 웹폰트, 타입키트, 폰트스퀴럴 등에서는 웹 폰트로 배포하고 있는데요. 피라산스는 정말 많은 패밀리를 가지고 있으며, 용량도 가벼운 편이라 오픈산스(Open Sans)를 대체할 수 있는 좋은 웹폰트라고 생각합니다.


타이포그래피의 중요성은 웹에서도 말할 것 없이 중요합니다. 특히 웹 폰트는 렌더링 방식에 따라 천차만별이기 때문에 디자이너, 개발자도 공부가 필요한 부분이라고 생각합니다. 영문 폰트를 먼저 소개하게 되어서 아쉽지만 다음에는 아름다운 한글폰트도 소개할 수 있었으면 좋겠습니다.



출처: 어도비 타입키트 블로그, 에릭 스피커만 블로그 


by 원숭이발자국




Posted by slowalk



반응형 웹디자인이 무엇일까요? 얘기는 많이 들었지만 잘 모르고 그냥 넘겼을지도 모릅니다. 하지만 이 분야에 종사하시는 분이라면 이 개념을 확실히 알고 넘어갈 필요가 있습니다.


디자이너 산디스 씨(Sandijs Ruluks)블로그에 반응형 웹디자인을 gif로 쉽게 설명했습니다. 그는 프린트 기반의 디자인을 하다가 웹디자인을 시작해서 좀 더 일반적인 관점에서 잘 설명했는데요.

 

반응형 웹디자인은 다양한 스크린 크기에 대응할 수 있는 훌륭한 해결책입니다. 하지만 이것을 단순히 프린트 기반의 디자인과 같은 개념으로 이해한다면 당연히 어렵습니다. 정해진 페이지 크기가 없으며, 인치(inches)나 밀리미터(mm)의 단위를 쓰지 않습니다. 그렇다고 픽셀만으로 웹과 모바일 디자인한다는 것도 구시대 발상이 되었는데요. 우리는 다양한 스크린 크기에 맞춰 유동적으로 레이아웃을 만들 수 있는 반응형 웹디자인을 정확하게 알 필요가 있습니다.


1. 반응형 웹디자인 vs 적응형 웹디자인 (Responsive vs Adaptive web design)

비슷한 말이지만 같지 않습니다. 적응형 웹디자인이라는 단어는 생소할 수도 있는데요. 반응형 웹디자인은 모든 스크린 크기 맞춰 유동적으로 작동합니다. 하지만 이 블로그에서 말하는 적응형 웹디자인은 아래 gif과 같이 특정 크기에서만 반응하는 방식입니다. 더 좋고, 안 좋은 방식은 없으며, 콘텐츠에 맞춰 방향을 정하시면 됩니다.




2. 플로우 (Flow)

스크린이 작아졌을 때, 콘텐츠들은 수직 공간을 더 차지합니다. 그리고 그것 아래 요소들은 아래 첫 번째 gif처럼 밀려나게 되죠. 그것을 플로우(Flow)라고 합니다.




3. 상대적인 요소들 (Relative units)

사용자는 다양한 사이즈의 기기를 쓰기때문에, 유연하고 어디서나 작동하는 유연한 레이아웃이 필요합니다. 예를 들어 아래의 gif처럼 50% 단위를 쓰면 데스크톱은 물론이고 모바일에서도 50%의 크기를 유지하겠죠. 저는 개인적으로 반응형 웹사이트를 만드는 데 핵심이라고 생각하는 부분입니다.

 



4. 분기점(Breakpoints)

분기점을 이용하면 특정 크기에 맞는 코딩으로 바꿀 수 있습니다. 예를 들어 데스크톱에서는 3단의 레이아웃을 쓰고 싶은데, 모바일에서 3단을 유지하면 너무 작게 보이는 경우가 있습니다. 이럴 때 분기점을 이용해, 특정 넓이 이하에서는 3단을 1단으로 바꿀 수 있습니다.




디자이너분들이 이걸 잘 사용한다면 모바일웹에서도 본인이 원하는 디자인으로 맞출 수 있습니다. 하지만 레이아웃을 바꿔서 다른 요소들에 영향을 주는지 주의하세요. 웹사이트를 순식간에 망가트릴 수 있습니다.

 


5. 최댓값과 최솟값 (Max and Min values)

가끔 모바일 웹사이트를 열었는데 이미지가 화면에 꽉 차면서 깨지는 경우가 있습니다. 그것은 이미지가 브라우저 넓이보다 작은 데 억지로 늘려놓았기 때문이죠. 이미지 넓이에 최댓값을 설정해준다면 브라우저 크기가 이미지를 크기를 훨씬 넘어가도 더 이상 커지거나 깨지지도 않을 것입니다.




6. 그룹 지은 요소들 (Nested objects)

요소들이 많아 통제하기 힘들 때, 그 요소들을 그룹으로 만들어 한꺼번에 통제할 수 있습니다. 이 방식은 로고나 버튼 같은 크기의 변경이 필요없는 요소들에 유용합니다.




7. 모바일 혹은 데스크톱 우선 작업 (Mobile or Desktop first)

모바일에서 데스크톱으로 프로젝트가 반응형 작업을 할 때와 데스크톱에서 모바일로 진행될 때 기술적으로 큰 차이는 없습니다. 하지만 모바일에서 먼저 시작할 때 제한이 적고, 콘텐츠 배치를 결정할 때 수월하게 할 수 있습니다. 그래도 프로젝트별로 다를 수 있으니 프로젝트에 맞춰서 해보시길 권합니다.  




8. 웹폰트와 시스템 폰트 (Webfonts vs System fonts)

반응형 웹디자인에서 유동적인 레이아웃을 위해 이미지보다 폰트를 많이 쓰는데요. 폰트는 접속 시 내려받아 설치하는 웹폰트와 사용자 기기에 원래 설치된 시스템폰트가 있습니다. 웹폰트를 사용하면 웹사이트를 예쁘게 만들 수 있는 것은 사실입니다. 하지만 웹폰트를 다양하게 쓰는 것은 그만큼 페이지를 느리게 할 수 있습니다. 개인적으로 제목이나 디스플레이를 위한 폰트는 웹폰트로 하고 본문은 시스템폰트를 사용하는 것을 제안합니다.




9. 비트맵 방식과 벡터 방식 (Bitmap images vs Vectors)

여러분이 만든 아이콘이 스큐어모픽 스타일처럼 화려하고 디테일하다면 비트맵 방식(jpg, png, gif등등)을 사용하는 것이 맞습니다. 하지만 이런 스타일이 아니라면 벡터방식(svg)을 써보세요. 해상도가 높은 기기에서도 선명하게 보일 것입니다. (예시)



Svg는 가볍고 선명하지만 구형 브라우저에서 지원하지 않아 분기해서 써야 하는 불편함이 있습니다. 또한 굴곡이 많다면 비트맵보다 무거울 수도 있으니 주의해서 써주세요.

 


저는 퍼블리셔로 일하면서도 반응형 웹디자인의 개념만 대충 알고 있었습니다. 하지만 클라이언트와 미팅 중에 반응형 웹디자인에 대해 설명해야 되는 상황이 있었는데요. 저도 모르게 전문용어를 남발해서 클라이언트를 난감하게 만들었습니다.

전문성은 자신이 가진 지식이나 업무능력이 전부가 아니라고 생각합니다. 클라이언트 혹은 사용자들에게 이런 개념을 잘 전달하는 소통능력도 중요하지 않을까요? :)



by 숭이발자국


출처: FroontBlog





Posted by slowalk