네이버 커뮤니티 하드코딩하는사람들의 빼로님의 2014년 12월 발표자료 . 퍼블리셔 디자인을 퍼블리싱하다.

1. 퍼블리셔, 디자인을 퍼블리싱하다
퍼블리셔가 알면 좋을 디자인 이야기
Typography 편
2014.12.06
하드코딩하는 사람들 빼로

2. About 빼로
1) 빼빼로 데이에 태어남
2) 마이다스아이티에서 근무 중
3) 웹 관련 교육에 관심이 많음
4) 다양한 웹 솔루션 개발 중

3. 주제선정이유

4. 퍼블리셔, 디자인을 퍼블리싱하다

5. 퍼블리셔, 디자인을 퍼블리싱하다

6. 퍼블리셔
지금은 웹에 어플리케이션의 개념이 많이 들어오고 있지만
웹은 기본적으로 문서다. 그래서 문서나 책을 출판하는 퍼
블리시(publish)라는 단어를 생각하게 되었고, 실제로 이 단
어는 이미 여러곳에서 사용되고 있었다.
출처 : 신현석 - 웹퍼블리셔라는 말을 만든 이유

7. 퍼블리셔
퍼블리셔 = 문서를 만드는 사람

8. 퍼블리셔
퍼블리셔에게 웹 표준, 웹 접근성은 지켜야 할 가치
HTML 마크업은 웹 표준, 웹 접근성이란 날개를 달고
형태를 중요시하는 언어로 계속 발전
그렇다면 퍼블리셔에게 디자인이란?

9. 퍼블리셔, 디자인을 퍼블리싱하다

10. 퍼블리셔, 디자인을 퍼블리싱하다

11. 디자인
초창기 웹디자인의 모티브는
편집디자인

12. 디자인
Section
(문서・책 등에서) 절(節), (신문의) 난(欄)
Article
(신문・잡지의) 글, 기사
Header
머리말(문서 각 페이지의 상부에 문서의 표제, 날짜 등 동일 내용을
동일 형식으로 인쇄하는 것)
Footer
꼬리말(인쇄 때 문서의 각 페이지 아랫부분에 자동으로 첨가되는
표제, 날짜 등)
출처 : 옥스퍼드 영어사전
HTML5에서 추가된 레이아웃 태그

14. 디자인
편집디자인과 웹디자인의 차이
편집디자인 => 인쇄소 => 종이에 인쇄
웹디자인 => 퍼블리싱 => 브라우저에 렌더링

15. 디자인
퍼블리셔는…
디자인의 영역이지만
디자이너는 모르는
브라우저의 속성을 알고 있어야 한다.

16. 퍼블리셔, 디자인을 퍼블리싱하다

17. 퍼블리셔, 디자인을 퍼블리싱하다

18. 퍼블리싱
마크업된 문서에
디자인을 입혀
브라우저에 렌더링

19. 퍼블리셔
문서로 보았을 때의 웹은 워드프로세서와 크게 다르지 않다.

20. 퍼블리셔
퍼블리싱에 디자인 요소를 입힌다면
이런 시각에서 보는건 어떨까?

21. 목차
1.서체의 종류
2.시스템폰트 / 웹폰트
3.pt vs px

22. 1. 서체의 종류

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를 고딕체라는 이름을 사용
북한에서는 표기법의 차이로 ‘고직’이라고 부름
인쇄 용어 통일 표준안에 따르면 돋움체라고 불러야 하지만 고딕으로 사용됨
※ 배경주의 : 고딕체와 고딕양식은
아무런 관계가 없습니다.

28. 1. 서체의 종류 – 굴림은???
그렇다면 굴림은???

29. 1. 서체의 종류 – 굴림체
마이크로소프트에서 일본서체를 기반으로 윈도우 3.1의 기본서체로 제작
한글은 모서리가 꺾이고 둥글지 않지만 굴림체의 모서리가 둥근 이유는
일본서체를 변형하여 제작하였기 때문
출처 : 페이퍼북 – 굴림체와 네이버 나눔고딕, 슬픈 한글 폰트의 향연

30. 1. 서체의 종류 – 나눔고딕 논란
나눔고딕은 굴림을 기반으로 만든 폰트
굴림 폰트를 고딕이라고 부르는 것에 대한 논란으로
네이버에서는 2013년 한글날 나눔바른고딕을 만들어 배포

31. 1. 서체의 종류 - 족보정리
Serif = 명조체 = 바탕, 나눔 명조…
Sans-Serif = 고딕체 = 돋움, 맑은 고딕…

32. 1. 서체의 종류
서체 선택의 기준
기본적으로 명조체가 가독성이 더 높음
대부분의 인쇄물에서 본문용 서체로 명조체를 사용
모니터에서는 픽셀로 표현하기 때문에 글자의 섬세한 부분을
깔끔하게 표현하지 못해 가독성이 떨어짐
따라서 웹에서는 고딕체를 더 많이 사용함

33. 2. 시스템폰트/웹폰트

34. 2.1 시스템폰트
시스템폰트
컴퓨터 시스템에 기본으로 설치되어 있는 폰트
웹페이지의 기본폰트도 시스템폰트를 사용
한글 시스템 폰트
바탕체, 굴림체, 돋움체, 궁서체, 맑은고딕
영문 시스템 폰트
Times New Roman, Verdana, Arial, Georgia

35. 2.1 시스템폰트
돋움과 돋움체의 차이는?
‘OO’은 가변폭 글꼴형 / ‘OO’체는 고정폭 글꼴형
가변폭 글꼴형은 한글 너비에 맞추어 영문/숫자/특수문자 크기를 변형
돋움
ABCDEFGHIKJLMNOPQRSTUVWXYZ
0123456789
돋움체
ABCDEFGHIKJLMNOPQRSTUVWXYZ
0123456789

36. 2.2 웹폰트
벡터(아웃라인)폰트 비트맵(점지도)폰트

37. 2.2 웹폰트
초창기 웹폰트는 비트맵 폰트
폰트명+최적pt로 폰트이름 구성
한 가지 크기, KS 완성형 2350자만 제작하면 되었기 때문에
상대적으로 빠른 폰트제작 가능(뚫훍뚫훍뒙퉥퀙쀅 등은 지원되지 않음)

38. 2.2 웹폰트
현재 웹폰트의 대세는 벡터폰트

39. 2.2 웹폰트
벡터 웹폰트 선택시 고려해야할 점
1. 폰트 라이선스는 해결되었는가?
2. 힌팅폰트로 제작되었는가?

40. 2.2 웹폰트
힌팅폰트란?
크기에 따라 뭉개지거나 가로세로 획의 굵기가 일정하지 않은 문제를 해결
안티 에일리어싱이 적용되지 않아도 획의 굵기가 일정
작은 크기의 폰트에서 뭉개짐을 방지

41. 2.2 웹폰트
힌팅폰트 제작의 어려움
한글은 폰트 조합이 많고 받침이 있기 때문에 작은 사이즈에서 뭉개짐
폰트 크기 하나하나마다 수작업으로 힌팅작업을 해야함
힌팅폰트는 인쇄나 포토샵 같은 그래픽 도구에서는 의미가 없음
한글의 조합형은 완성형 2,350 + 확장완성형 8,822 = 11,172자
거기에 각 point별 크기를 고려하면…

42. 2.2 웹폰트
웹폰트로 사용할 수 있는 힌팅폰트
맑은 고딕
최초의 한글 힌팅폰트
라이선스가 마이크로소프트에 있기 때문에 별도 라이선스 구매가 필요
나눔폰트계열
가장 많이 사용되는 힌팅폰트
라이선스가 자유롭고 구글 등에서 CDN을 제공하여 널리 사용 중
Rix스마트고딕
디자이너가 가장 좋아하는 폰트 중 하나인 Rix고딕이 힌팅 웹폰트로 나옴
유료 라이선스

43. 2.2 웹폰트
유료 웹폰트를 사용해보자

44. 2.2 웹폰트
유료 웹폰트를 사용해보자

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 적용

49. 3. pt vs px
영원한 라이벌 pt와 px
과연 어떤 단위를 써야 하는가!?

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. 발표를 마치며…
디자인의 영역이지만 디자이너는 모르는 브라우저의 속성
퍼블리셔는 알고 있습니다!
이 폰트는 브라우저에서 쓸 수 있는건가요?
포토샵에서 이 크기의 폰트는 브라우저에서는 몇 픽셀?
이 브라우저에서는 폰트가 다르게 나와요!

56. 감사합니다!