2016년 5월 21일 하드코딩하는사람들 빼로님의 발표자료 입니다.

1. 퍼블리셔, 디자인을 퍼블리싱하다
디자이너에게 사랑받는 퍼블리셔 되기
2016. 05. 21
하드코딩하는사람들 빼로

2. 디자이너와 왜 충돌이 생길까?
퍼블리셔의 고민

3. 디자인을 공부해야 할 것 같은데
뭘 해야 할지 모르겠어...
퍼블리셔의 고민

4. 너 자신을 알라
- 소크라테스 -
퍼블리셔의 고민

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

6. 퍼블리셔
HTML, CSS, JavaScript를 이용하여 브라우저 상에
디자인 된 화면을 구현하는 직업

7. 퍼블리셔
HTML, CSS, JavaScript를 이용하여 브라우저 상에
디자인 된 화면을 구현하는 직업

8. 퍼블리셔
퍼블리셔는 왜
HTML, CSS, JavaScript를 사용할까?

9. 퍼블리셔
브라우저에서 지원하는
대중적인 언어

10. 퍼블리셔
퍼블리셔의 기반 = 브라우저

11. 퍼블리셔
퍼블리셔는 디자인만 구현할까?

12. 퍼블리셔
웹표준 마크업, 웹 접근성 준수,
UI 개발...

13. 퍼블리셔
이러한 작업으로 퍼블리셔가
다루는 것은 무엇일까?

14. 퍼블리셔
글, 이미지, 비디오, 오디오,
인터랙티브, 모션 등의 컨텐츠

15. 퍼블리셔
컨텐츠를 어떻게 하지?

16. 퍼블리셔
웹 표준, 웹 접근성으로
기기 및 사용자 접근성을 높임

17. 브라우저 지원 언어를 이용하여
브라우저 플랫폼 상에서 구현 가능한 컨텐츠를
환경에 구애 받지 않고 누구나 이용할 수 있도록
제작하는 직업
퍼블리셔

18. 정말? 너무 거창한거 아닌가요?
퍼블리셔

19. 이런 상황을
가정해보면 어떨까요?
퍼블리셔

20. 이 비디오 파일을 mp4, ogg, webm으로 인코딩하세요
퍼블리셔

21. 왜 비디오 인코딩은 어색하고
이미지 자르는 것은 당연할까요?
퍼블리셔

22. 브라우저 환경에 맞게
최적의 컨텐츠를 제공할 수
있어야 한다
퍼블리셔

23. 퍼블리셔
=
브라우저 컨텐츠 전문가
퍼블리셔

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

25. 디자인
글 이미지 비디오 오디오모션
사이트 디자인
웹 디자이너의 디자인 영역
컨텐츠의 종류

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

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

28. 디자인

29. 디자인
출처 : 웹 여행을 시작하는 퍼블리셔를 위한 가이드

30. 디자인
디자이너에게 퍼블리셔는
디자인을 사용할 수 있게 구현해주는 기술자이며,
최적의 결과물을 낼 수 있게 도움을 주는 전문가다

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

32. 퍼블리싱
디자인의 두 속성
균형 색상

33. 퍼블리싱
디자인에서
균형이란?

34. 퍼블리싱
그냥 딱! 봤을 때 안정감 있고 정갈한 느낌
사이트로 보여주고 싶은데 마음에 드는 사이트를 못찾겠음 ㅠ_ㅠ

35. 퍼블리싱
왜 디자이너는 1px에 집착할까?
바로 균형에 그 해답이 있다.

36. 퍼블리싱
글자의 배치, 요소간 간격, 박스의 크기 등이 균형에
영향을 주며 이 모든 것을 결정하는 요소가 바로
그리드(Grid)

41. 퍼블리싱
반응형 웹에서의 그리드 변화는 두 가지로 나뉨
첫째, 컨텐츠 박스모델 그리드의 변화

42. 퍼블리싱
둘째, 전체 가로크기에 맞춘 기둥형 그리드 간격의 조절

43. 퍼블리싱
Bootstrap의 12 Column Gird System

44. 퍼블리싱
디자인에서 정말 중요한 부분을 캐치하여
잘 구현했다면 디자이너는 더 이상
픽셀 단위로 체크하지 않는다.
Pre Ing Post

45. 퍼블리싱
디자이너에게
색상이란...
절대 지적하면
아니되는
금단의 영역
Pre Ing Post

46. 퍼블리싱
단, 웹 접근성 프로젝트에서
텍스트와 배경간의 명도대비 이슈는 언급 가능
Pre Ing Post

47. 퍼블리싱
배경과 선 색상에
투명도가 들어가는 경우
포토샵과 브라우저의
렌더링에 차이가 있음
포토샵의 Opacity 수치대로
구현하면 안됨
Pre Ing Post

48. 퍼블리싱 Pre Ing Post
투명도 작업시
디자이너가 Multiply로
작업을 하면 구현이 불가능
Opacity로 작업해 달라고
미리 이야기 하면 좋음

49. 퍼블리싱 Pre Ing Post
원본 Multiply Opacity

50. 퍼블리싱
디자이너에게 Multiply는
굉장히 매력적인 기능이기 때문에
디자인 하기 전에 미리 꼭 이야기하기!
Pre Ing Post

51. 퍼블리싱
그리고 마지막으로
폰트

52. 퍼블리싱
웹디자인에서 폰트는 디자인의 전부다
컨텐츠의 기본이며 전부이기 때문이다

53. 퍼블리싱
그렇기 때문에
디자인에 부합하는 폰트 렌더링은
퍼블리셔가 디자이너에게 줄 수 있는
최고의 선물이다

54. 퍼블리싱
디자이너가 디자인을 시작하기 전에,
사용가능한 웹폰트를 미리 공유하기
Pre Ing Post

55. 퍼블리싱
퍼블리셔, 디자인을 퍼블리싱하다
Typography 편
2014.12.06 발표
바로가기

56. 발표를 정리하며...

58. 감사합니다