프론트엔드 개발자로서 협업하면서 디자이너들에 대해 느꼈던 내용을 공유한 발표자료입니다. SBS 아카데미 컴퓨터 아트 학원에서 초대강사로 발표한 내용입니다. 16. 9. 4.

1. 개발자가 본 웹디자
인
실무에서 웹디자이너가 겪을 일들에 대하여

2. 정 O O , 프론트엔드 개발자
C회사 재직중
G회사(스타트업)
E회사(웹에이전시)
공부만 오래 한 한량

3. 목차
웹디자인 공통
모바일 & 반응형 디자인
협업을 위한 지식
개발자의 시선

4. 웹디자인 공통

5. pixel
http://output.jsbin.com/vedekafece/

6. pixel

7. pixel

8. font

9. 자간 ( letter-spacing )
firefox

10. 자간 ( letter-spacing )
chrome

11. 행간 ( line-height )
http://dol2156.tistory.com/156

12. CSS3
rgb & rgba
font-face
text-shadow
box-shadow
border-radius
gradient
background-image
transform
transition
animation
https://html5.firejune.com/css3.html#slide13

13. animation
https://www.codeandweb.com/texturepacker/tutorials/ani
mate-sprites-in-css-with-texturepacker

14. 모바일 & 반응형 디자
인

15. resolution
http://screensiz.es/phone

16. flexible sizes
http://leipiel.tistory.com/7

17. fingertips

18. mobile first

19. 협업을 위한 지식

20. Layer Group
http://webagit.tistory.com/260

21. Crop

22. Crop

23. Design Guide
http://redgoose.me/article/Web/1300/

24. Design Guide

25. Design Guide
http://www.slideshare.net/witstudio/ps-201311

26. HEX vs. rgba
#FF0000
= #F00
= rgb(255, 0, 0)
= rgba(255, 0, 0, 1)

27. SelectBox - Default
http://output.jsbin.com/lucujegimu

28. SelectBox - designed
http://www.jqueryrain.com/?q_dPnE1B
http://cheolguso.com/preview/select/select.html

31. 개발자의 눈

35. 몰라도 되지만
알면 더 좋은 지식들

39. image compression
tinypng.com

40. Thanks