star

#Ludens

#social #IT #web #iPad #fashion #psychology #responsive

CDN으로 바로 사용가능한 한글 웹폰트 총정리

2015.10.08 08:30 in Web/Coding

작년 글에서 구글 Early Access에서 제공하는 웹폰트를 살펴보았다면, 이번에는 한글날 기념으로(?) CDN 사이트인 jsDelivr에 올라온 웹폰트를 소개해보려고 합니다.

jsDelivr에 올라와 있는 웹폰트들은 woff와 woff2형식으로만 제공되기 때문에(나눔바른고딕은 제외) 인터넷 익스플로러는 IE9 이상부터 적용됩니다.

구글과 겹치는 폰트와 저작권 문제가 있을것이라고 판단한 몇가지는 제외했습니다.


나눔바른고딕

제가 최근에 가장 많이 사용하는 웹폰트입니다. 전 특히 얇은 버전을 좋아합니다 :)

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

본고딕 (Noto Sans)

구글과 어도비에서 만든 폰트입니다. 漢子도 지원된다고 하네요.

  • normal 250:
  • normal 300:
  • normal 350:
  • normal 400:
  • normal 500:
  • normal 700:
  • normal 900:

코드보기(클릭)

스포카 한 산스

어제 공개된 따끈따끈한 새 폰트입니다. 위의 Noto Sans를 수정해서 만들어진 폰트라네요!

  • normal 300:
  • normal 400:
  • normal 700:

사용방법은 폰트 소개 페이지를 참고해주세요 :)

다음체

다음이 사망(ㅠㅠ)하고 배포페이지도 사라졌네요

  • normal 400:
  • normal 700:

코드보기(클릭)

고도체

고도몰로 유명한 고도소프트에서 배포하는 폰트입니다.

  • normal 400:
  • normal 700:

코드보기(클릭)

한겨레결체

2005년에 한겨레에서 배포한 폰트였죠. 모르는 사람이 많더군요ㅎㅎ

  • normal 400:

코드보기(클릭)

롯데마트 드림체

롯데마트에서 배포하는 폰트 중에 '통큰체'도 있었는데, 저작권 문제로 배포가 중단되었더군요. 여기에는 드림체와 행복체만 가져왔습니다.

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

롯데마트 행복체

이 폰트 처음 써보는데 이쁘군요 +_+

  • normal 400:
  • normal 700:

코드보기(클릭)

정음체

북한과 합작해서 만들었다고 합니다.

  • normal 400:

코드보기(클릭)

대한체

  • normal 400:
  • normal 700:

코드보기(클릭)

부산체

  • normal 400:

코드보기(클릭)

성동고딕체

신기하게 '광역시'나 '도'가 아닌 구청에서 제작한 폰트네요.

  • normal 700:
  • normal 800:

코드보기(클릭)

성동명조체

  • normal 400:
  • normal 700:

코드보기(클릭)

바른바탕체

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

바른돋움체

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

청소년체

한국청소년활동진흥원(길다;;)에서 배포하는 폰트입니다.

  • normal 400:

코드보기(클릭)

덧) 구글에서 제공하는 폰트까지 합치면 총 24가지 한글 웹폰트를 쓸 수 있군요.

신고
tagAdobe, Code, css, Google, jsDelivr, Lotte Mart, Noto Sans, Spoqa, webfont, 가독성, 고도소프트, 고도체, 나눔바른고딕, 다음커뮤니케이션, 대한인쇄문화협회, 대한체, 드림체, 바른돋움체, 바른바탕체, 본고딕, 부산, 부산체, 북한, 성동고딕체, 성동구청, 성동명조체, 신문사, 여성가족부, 정음체, 청소년체, 한겨레, 한겨레결체, 한글날, 행복체
받은 트랙백이 없고 , 댓글이 없습니다.

원노트, 전자책으로 만들기

2013.02.20 09:10 in IT/Tip

현재 노트작성 쪽에서 가장 핫한 건, 에버노트죠. 그 다음이 바로 원노트입니다. 개인적으로 원노트는 설치되더라도 거의 사용을 안하고 있었는데, 이번에 뉴오피스 리더 프로그램을 통해 원노트를 활용해보고 있습니다. 그런데, 저번에 에버노트를 전자책(epub)형식으로 변환했던 게 생각나더군요. 그래서 '원노트도 에버노트처럼 전자책으로 변환할 수 있을까?'하는 생각이 들어 방법을 찾아보았습니다.

시작하기 전에: 2차원 원노트 VS 1차원 에버노트

사실 원노트랑 에버노트는 노트작성을 한다는 점을 제외하면 다른 점이 꽤 많습니다. 그 중에서도 굳이 하나만 꼽자면 원노트는 2차원 공간이고, 에버노트는 1차원 공간이라는 점이죠.

잘 알고 계시겠지만 1차원은 직선이고, 2차원은 평면이죠. 에버노트는 정해진대로 쭉 작성할 수밖에 없습니다. 물론 줄바꿈은 가능하지만, 원하는 곳에 마음대로 이미지를 배치한다거나 하는 것은 제한적이죠. 반면에 원노트는 이와 달리, 펼쳐진 평면 이곳저곳에 글을 쓰거나 이미지를 넣을 수 있습니다. 그래서 제가 주변 사람들에게 에버노트와 원노트를 설명할 때는 이렇게 말합니다.

에버노트: 메모장에 약간의 서식기능과 동기화 기능이 추가된 것
원노트: 실제 공책에 작성하듯 적을 수 있는 디지털 노트

이런 차이가 있기 때문에 저는 전자책으로 변환한다면 에버노트는 epub형식을, 원노트는 PDF를 추천합니다.

원노트를 PDF로 변환하기

작성한 원노트를 PDF로 변환하기 위해서는 원노트 데스크탑 프로그램이 필요합니다. PDF로 만드는 과정은 클릭 몇번으로 해결될 만큼 쉽습니다.

'파일'을 클릭

내보내기 > 섹션 이나 노트 또는 전자 필기장을 선택 > PDF를 선택 > 내보내기

PDF로는 위와 같이 간단하게 변환하실 수 있습니다. 참 쉽죠?:)

원노트를 epub로 변환하기

PDF로 끝내면 너무 싱거워하실까봐... 이 방법도 공유해봅니다. 물론 원노트는 epub는 권장하지는 않습니다.

준비물은 원노트 데스크탑 프로그램, 인터넷 익스플로러, epub 편집기인 Sigil입니다.

'파일 > 내보내기'를 가신 후 섹션이나 노트를 선택하고 '단일 파일 웹 페이지'로 저장

위에서 저장할 때 단점이 mht파일로 저장된다는 점인데요, 이 파일을 html형식으로 변환하기 위해 에버노트 때와는 달리 한가지 과정이 더 추가됩니다.

저장한 mht파일을 IE로 실행 후 '파일 > 다른 이름으로 저장' 클릭

파일 형식을 '모든 웹 페이지'로 바꿔 적당한 곳에 저장

이렇게 html파일로 바꾸는 것까지 오셨다면, 이제 마지막으로 Sigil에 넣기만 하면 됩니다.

Sigil에서 Text에 '마우스 오른쪽 버튼 > 기존 파일 추가' 클릭하여 html파일 불러오기

위의 빈 파일에 마우스 오른쪽 버튼 > 지우기

파일 > 저장 클릭

깔끔한 과정은 아니지만 그래도 epub 만들기는 이렇게 하시면 성공입니다.

가독성 비교: 원노트 앱, PDF, Epub

아이패드 앱iBooks로 비교해 보았습니다. 가독성은 앱이랑 PDF가 괜찮고, 예상대로 epub는 완전 꽝이군요. 원노트는 왠만하면 epub로 변환하지 마세요-_-;;

덧) 차원이 높다고 무조건 좋은 건 아니라고 생각합니다. 각각의 장단점이 있어요!
덧2) 사실 글상자(?)가 하나만 있으면 epub도 이쁘게 나오긴 합니다만 그래도 추천하지는 않습니다;;

신고
tag1차원, 2차원, Application, epub, EVERNOTE, html, Internet Explorer, iPad, mht, Microsoft, New Office Leader Program, Note, Office 2013, onenote, pdf, Sigil, 가독성, 변환, 전자책, 직선, 차이점, 평면
받은 트랙백이 없고 , 댓글이 없습니다.

에버노트, 간단하게 전자책(epub)으로 만들기

2012.10.22 09:00 in IT/Tip


요새 에버노트 많이들 쓰시는 것으로 알고있습니다. 저도 요즘 아이패드에서 문서작성할때나 공부할때 많이 활용하고 있습니다. 저는 에버노트에 이것저것 정리한 내용이 많아 전자책으로 만들수 없을까 하다가 쉽게 만들 수 있다는 사실을 알게되었습니다.

준비물

에버노트 데스크탑 프로그램
‘내보내기’기능을 사용하기 위해 필요합니다.

Sigil
오픈소스 전자책 제작툴입니다.

에버노트 내보내기

에버노트 데스크탑 프로그램에서 ‘노트 내보내기’를 할 수 있습니다.


에버노트 데스크탑 프로그램을 실행하시고 원하는 노트를 클릭하신 후 마우스 오른쪽버튼 메뉴에서 ‘내보내기’를 누르면 됩니다. 여러노트도 가능합니다.

내보내기를 하실때 ‘단일 HTML 웹페이지’형식으로 하시고 ‘설정’에서 ‘노트 제목’을 체크해주시기 바랍니다.

정상적으로 내보내기가 완료된 것을 볼 수 있습니다. 이미지가 있다면, 같은 이름의 폴더가 하나 만들어지고 그곳에 이미지가 저장됩니다.

전자책 만들기

Sigil을 이용하면 간단하게 epub형식으로 만들 수 있습니다.


Sigil 실행 후 왼쪽 패널의 ‘Text’마우스 오른쪽 메뉴에서 ‘Add Existing Files’를 눌러 아까 내보내기 했던 HTML파일을 선택합니다.

신기하게도 이미지는 물론이고 노트별로 목차도 알아서 들어가는 모습을 볼 수 있습니다.

빈 화면인 ‘Section0001’은 삭제합니다.

‘Edit → Meta Editor’를 실행하여 제목과 저자명, 언어를 설정해줍니다. 그리고 ‘File → Save’로 저장해주시면 epub파일 완성입니다.

가독성비교: 에버노트 앱 VS 전자책(iBooks)

에버노트 앱은 읽는 쪽 보다는 노트의 작성이나 편집에 초점이 맞춰져있다보니 읽기 편한 구조는 아닙니다.

하지만 iBooks로 보면 훨씬 읽기가 편해집니다. 이 차이는 직접 확인해보시면 크게 느끼실겁니다.


다행히 에버노트를 HTML형식으로 쉽게 내보내기가 가능해서, 전자책으로도 쉽게 만들 수 있는 장점이 있네요.
저처럼 에버노트에 이것저것 열심히(?) 정리하시는 분들에게 좋은 팁이 되리라 생각합니다:)

덧) 이런 팁 올린다고 geek한건 아닌거죠? 그런거죠?(…)
덧2) Sigil에 대해서는 구글링하시면 참고할만한 글이 많습니다~

신고
tagApplication, Desktop, epub, EVERNOTE, html, iBooks, IMAGE, Open Source, program, Sigil, tip, 가독성, 내보내기, 목차, 언어, 저자, 전자책, 제목
받은 트랙백이 없고 , 댓글이 없습니다.

명함디자인시 꼭 알아야할 7가지 주의사항들

2012.06.17 10:00 in Inspiration

제가 최근에 본의아니게(ㅠㅠ) 명함을 세개정도 디자인했습니다.
그동안 명함디자인에 대해 거의 무지했는데, 막상 해보니 시행착오도 좀 있었죠.

마침 HONGKIAT에서 명함디자인과 관련된 글이 올라와서 번역해보았습니다.


이 글은 Business Card Design: 7 Essentials to Consider의 번역입니다.

색상과 크기의 문제

여러분들이 디자인작업을 시작하기 전에 먼저 명함프린터를 결정해야합니다. 그러면 명함의 크기와 지원되는 파일형식을 알 수 있습니다. 가장 평범한 명함크기는 "84mm x 55mm"이고 작업시에 가장 알맞은 문서크기는 "1039픽셀 x 697픽셀"입니다. 여기서 기억해야할 점은 재단영역이 필요하다는 점이죠. 또한 이미지를 확실히 하기 위해 300dpi이상의 고해상도로 결과물이 나와야합니다.

작업할때에는 RGB모드보다는 CMYK모드에서 하는게 좋습니다. CMYK는 Cyan, Magenta, Yellow, Black(Key)의 약자로, 칼라인쇄에 사용됩니다. CMYK는 감산혼합을 하는 칼라모드입니다.

원본글에서는 명함프린터를 먼저 결정하라고 했는데, 이 부분은 명함인쇄를 의뢰할 업체를 정한다고 하는게 맞는것 같습니다.
우리나라의 경우 명함크기는 "86mm x 52mm"또는 "90mm x 50mm"가 많은걸로 알고있습니다.

재단되는 영역을 준비하기

명함을 만들때 배경을 흰색으로 하지않는다면, 재단영역을 준비해야합니다. 일반적으로 명함의 배경색과 같게 3mm(인쇄회사마다 다릅니다)의 두께를 가집니다. 이것은 잘못된 테두리를 방지합니다.

테두리사용은 자제하기

모든 명함디자인에서 테두리는 피하는게 좋습니다. 물론 좋아보일수 있겠지만, 재단되었을때 한쪽으로 쏠린 모습을 볼 가능성이 높습니다. 모든 프린터들은 명함을 약간의 재단오차가 발생할 수 있기때문입니다. 몇 밀리미터의 오차가 명함의 차이를 만듭니다.

좋은 색상 선택하기

미적으로 좋은 색상을 고르세요. 프로페셔널한 이미지를 위해 명함뿐 아니라 여러분들의 미디어(웹사이트, 트위터, 이메일서명 등)들과 맞는 색상으로 제작하는게 좋습니다.
웹상에는 여러분들의 색상조합을 도와줄 많은 도구들이 있습니다. 그 중 COLOURlovers는 커뮤니티스타일의 사이트로 많은 사람들이 색상조합을 하고 그것들에 대해 투표나 댓글을 달기도 합니다. 영감을 주는 훌륭한 소스들이기때문에 잘 살펴보면 무언가 시작하기에 매우 좋습니다.

텍스트가 확실히 보이도록 만들기

텍스트의 가독성은 명함디자인에서 상당히 중요한(때로 간과되기도하는) 요소입니다. 여러분들의 고객들이 웹사이트의 주소나 이메일주소를 알기위해 명함내에서 어렵게 찾게하고싶진 않을겁니다. 글자크기는 최소 8pt로 하고 읽기 좋은 글자체로 눈에띄는 색상이 좋습니다. 8pt보다 작은 글자는 모니터에서는 잘 보이지만, 인쇄하면 흐릿하고 외곽선이 얼룩진것처럼 보일겁니다. 또한 이름과 중요한 정보를 강조하기위해서는 다른정보보다 약간 크게하거나 진하게하면 됩니다.

중요한 정보 포함시키기

모든 정보는 고객들이 찾기 쉽도록 명함에 확실히 넣어야 합니다. 아래 간단 체크리스트를 참고해보세요. 물론 다른 정보도 필요하다면 넣어도 좋습니다.

  • 이름: 연락이 가능하도록 이름을 넣습니다.
  • 무슨일을 하는지: 여러분이 무엇을 하는지에 대해 꼭 넣으세요. 현재 속해있는 회사(단체)를 넣는것도 좋습니다.
  • 연락정보: 핸드폰번호, 이메일주소, 사무실주소, 소셜미디어 프로필 등등
  • QR코드: QR코드는 시각적으로 웹사이트 주소, 핸드폰번호, vCard를 보여줄 수 있는 좋은 방법입니다. 웹상에는 여러분들을 도와줄 많은 무료 QR코드 생성기가 있습니다.

저장하기

저장도 고생하면서 만든 작품을 확실하게 최종적으로 생산하기위한 꽤 중요한 과정입니다.

  • 모든 텍스트가 embeded와 outlined되어있는지 확인하기
  • 모든 가이드라인과 색상기획안이 제거되었는지 확인하기
  • 더 좋은 결과물을 위해 벡터기반의 가진 PDF로 저장합니다.
  • JPEG나 PNG로 저장하면 테두리와 글자가 흐려보이는 결과가 나올 수 있습니다.

위의 7가지 내용은 명함디자인을 해서 파일을 인쇄소에 넘기는 부분까지 해 보았다면 다 느꼈을 부분이라 생각합니다. 저는 내공이 없어서그런지 색상고르기가 특히 어렵더군요.

명함디자인을 하신다면 저처럼 시행착오를 겪지 않고 한번에 성공하시기 바랍니다:)

저작자 표시 비영리 변경 금지
신고
tag300dpi, CMYK, design, e-mail, embeded, guide line, hongkiat, JPEG, outlined, pdf, png, QR Code, RGB, vector, website, 가독성, 글자, 명함, 번역, 색상, 시행착오, 연락정보, 이름, 재단, 저장, 제거, 주소, 주의사항, 직업, 크기, 테두리, 해상도
받은 트랙백이 없고 , 댓글2개가 달렸습니다.

티스토리 툴바