6. 퍼블리셔
지금은 웹에 어플리케이션의 개념이 많이 들어오고 있지만
웹은 기본적으로 문서다. 그래서 문서나 책을 출판하는 퍼
블리시(publish)라는 단어를 생각하게 되었고, 실제로 이 단
어는 이미 여러곳에서 사용되고 있었다.
출처 : 신현석 - 웹퍼블리셔라는 말을 만든 이유
12. 디자인
Section
(문서・책 등에서) 절(節), (신문의) 난(欄)
Article
(신문・잡지의) 글, 기사
Header
머리말(문서 각 페이지의 상부에 문서의 표제, 날짜 등 동일 내용을
동일 형식으로 인쇄하는 것)
Footer
꼬리말(인쇄 때 문서의 각 페이지 아랫부분에 자동으로 첨가되는
표제, 날짜 등)
출처 : 옥스퍼드 영어사전
HTML5에서 추가된 레이아웃 태그
13.
14. 디자인
편집디자인과 웹디자인의 차이
편집디자인 => 인쇄소 => 종이에 인쇄
웹디자인 => 퍼블리싱 => 브라우저에 렌더링
23. 1. 서체의 종류
전통적인 서체는 딱 두가지다!
Serif이거나
혹은Sans-Serif이거나…
24. 1. 서체의 종류 - Serif
로마 시대에는 돌에 붓으로 글자를 쓰고 정과 망치, 끌로 글자를 새겼다.
이 도구의 특성 때문에 끝 부분의 마감을 위한 세리프가 만들어졌으며, 이것은
가독성을 높이는 요인이 되어 이후 펜글씨에도 채용되었고 지금까지 남게 되었다.
출처 : 한글디자인교과서
25. 1. 서체의 종류 - 명조체
Serif와 같은 개념의 한글서체
중국 명나라 때 만들어진 글꼴과 비슷하다는 이유로 한글에서 채용
1960년대 최정호가 만든 서체를 바탕으로 다양한 변형본이 존재
1992년 바탕체로 개칭
26. 1. 서체의 종류 – Sans-Serif
Sans는 Without의 뜻을 가진 프랑스어
Sans-Serif는 ‘Serif가 없는’ 이란 의미
27. 1. 서체의 종류 – 고딕체
한국, 일본에서 Sans-Serif 글꼴을 일컫는 단어
19세기 후반에 서양문물을 받아들인 일본 인쇄업계에서 ‘고딕’이라는 명칭을
Sans-Serif 서체를 일컫는 용어로 받아들인 후 한국에서도 정착
한국과 일본만 Sans-Serif를 고딕체라는 이름을 사용
북한에서는 표기법의 차이로 ‘고직’이라고 부름
인쇄 용어 통일 표준안에 따르면 돋움체라고 불러야 하지만 고딕으로 사용됨
※ 배경주의 : 고딕체와 고딕양식은
아무런 관계가 없습니다.
34. 2.1 시스템폰트
시스템폰트
컴퓨터 시스템에 기본으로 설치되어 있는 폰트
웹페이지의 기본폰트도 시스템폰트를 사용
한글 시스템 폰트
바탕체, 굴림체, 돋움체, 궁서체, 맑은고딕
영문 시스템 폰트
Times New Roman, Verdana, Arial, Georgia
35. 2.1 시스템폰트
돋움과 돋움체의 차이는?
‘OO’은 가변폭 글꼴형 / ‘OO’체는 고정폭 글꼴형
가변폭 글꼴형은 한글 너비에 맞추어 영문/숫자/특수문자 크기를 변형
돋움
ABCDEFGHIKJLMNOPQRSTUVWXYZ
0123456789
돋움체
ABCDEFGHIKJLMNOPQRSTUVWXYZ
0123456789
39. 2.2 웹폰트
벡터 웹폰트 선택시 고려해야할 점
1. 폰트 라이선스는 해결되었는가?
2. 힌팅폰트로 제작되었는가?
40. 2.2 웹폰트
힌팅폰트란?
크기에 따라 뭉개지거나 가로세로 획의 굵기가 일정하지 않은 문제를 해결
안티 에일리어싱이 적용되지 않아도 획의 굵기가 일정
작은 크기의 폰트에서 뭉개짐을 방지
41. 2.2 웹폰트
힌팅폰트 제작의 어려움
한글은 폰트 조합이 많고 받침이 있기 때문에 작은 사이즈에서 뭉개짐
폰트 크기 하나하나마다 수작업으로 힌팅작업을 해야함
힌팅폰트는 인쇄나 포토샵 같은 그래픽 도구에서는 의미가 없음
한글의 조합형은 완성형 2,350 + 확장완성형 8,822 = 11,172자
거기에 각 point별 크기를 고려하면…
42. 2.2 웹폰트
웹폰트로 사용할 수 있는 힌팅폰트
맑은 고딕
최초의 한글 힌팅폰트
라이선스가 마이크로소프트에 있기 때문에 별도 라이선스 구매가 필요
나눔폰트계열
가장 많이 사용되는 힌팅폰트
라이선스가 자유롭고 구글 등에서 CDN을 제공하여 널리 사용 중
Rix스마트고딕
디자이너가 가장 좋아하는 폰트 중 하나인 Rix고딕이 힌팅 웹폰트로 나옴
유료 라이선스
45. 2.2 웹폰트
유료 웹폰트의 장점
1. 다양한 폰트 사용 가능
2. 서버의 안정성(몇 달전 구글 CDN 사태…)
3. 가벼운 용량(뚫훍뒉궥을 없애서 용량을 줄임)
4. 구글에 비해서 빠른 속도
46. 2.2 웹폰트
크롬 웹폰트 렌더링 이슈
2012년 7월 업데이트 이후 윈도우에서 외부 woff파일 렌더링시 안티 에일리어싱이
적용되지 않음(woff를 불러온 후 svg 폰트를 불러오는 방식으로 우회가 가능)
구글 웹폰트는 woff만 지원하기 때문에 구글이 만든 웹 브라우저인 크롬에서
구글이 서비스하는 구글 웹폰트가 가장 나쁘게 보였음
출처 : Life is Journey – 구글 웹폰트 안티 얼라이징 문제
47. 2.2 웹폰트
크롬의 DirectWrite 기술 도입
크롬 37버전부터 기존의 GDI 방식을 버리고 향상된 폰트 렌더링 기술인
DirectWrite를 도입. Woff의 안티 에일리어싱이 가능해짐.
사진출처 : NULI – Chrome 37 폰트 렌더링 이슈
48. 2.2 웹폰트
DirectWrite란?
마이크로소프트의 폰트 렌더링 기술.
1985년에 마이크로소프트에서 개발된 GDI(Graphics Device interface) 이후
개발된 윈도우의 폰트 렌더링 기술로 윈도우 비스타부터 적용됨
기기의 GPU를 활용하기 때문에 글자를 더 선명하고 빠르게 렌더링 할 수 있음
파이어폭스 : 2011년 DirectWrite 적용
마이크로소프트 : IE9부터 적용(xp에는 DirectWrite가 없기 때문에 IE9 사용 불가)
크롬 : 2014년 DirectWrite 적용
50. 3. pt vs px
pt
하나의 글꼴을 화면, 지면에 출력할 때
사용하는 글꼴의 세로폭
px
하나의 글꼴이 화면에 출력될 때 그 글꼴이
차지하는 화면 최소 구성요소(픽셀의 수)
51. 3. pt vs px
pt
포인트(point)는 컴퓨터가 없을 때부터 있었던
타이포그래피 단위
1pt = 1/12 pica = 1/72 inch = 약 0.3527mm
72dpi(dots-per-inch)의 화면해상도를 가진 디스플레이가 표준
Apple은 72ppi를 채택
타자기의 10pt 크기의 글자가 모니터에서 10px로 보임
52. 3. pt vs px
pt
마이크로소프트는 96dpi(dots-per-inch)를 채택
모니터를 볼 때는 책보다 거리가 1/3가량 더 멀기 때문
72dpi에서는 글자가 작게 보여 가독성에 영향을 줌
53. 3. pt vs px
pt
책보다 모니터의 위치가 4/3배 거리이므로 1inch를
표현하는데 72px에서 96px로 증가
따라서 12pt의 폰트는 16px로 렌더링 됨
웹 브라우저는 모두 96dpi를 기준으로 하고 있음
CSS가 계획될 당시 96dpi를 기준으로 하였기 때문
54. 3. pt vs px
전통적으로 폰트는 1pt 단위로 제작이 되었음
pt에 속하지 않는 크기는 가로세로를 늘려서 보여주는 방식
폰트를 예쁘게 보여주려면 pt를 사용하거나 pt에 해당되는 px 등을 사용
9pt = 12px
10pt = 13.333px (13px과 동일하게 렌더링)
12pt = 16px
14pt = 18.6667px (18px보다 크게 렌더링)
18pt = 24px
24pt = 32px
55. 발표를 마치며…
디자인의 영역이지만 디자이너는 모르는 브라우저의 속성
퍼블리셔는 알고 있습니다!
이 폰트는 브라우저에서 쓸 수 있는건가요?
포토샵에서 이 크기의 폰트는 브라우저에서는 몇 픽셀?
이 브라우저에서는 폰트가 다르게 나와요!