2. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
Front-End UI Instructor
yamoo9, 야무
프론트엔드 디자인 CAMP
JJ 첫걸음/정복/실전 CAMP
ECMAScript + Vue JS CAMP
.
.
.
저서
강의
프론트엔드 개발 SCHOOL
/
/
3. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
디/
자/
이/
너/
에/
게/ /
묻/
다
4. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
코/
딩/
은/ /
개/
발/
자/
만/
한/
다/
?
5. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
도대체왜?
이것도…저것도
안된다고만
하는거지?
그래픽을이렇게
만들어야코딩과정에서
화면에표시하는데
문제가없겠군!
코딩을아는
디자이너
코딩을모르는
디자이너
시스템에기반한
디자인방법론을
사용해보자!
타이포그래피와
그리드시스템,황금비를
디자인에반영하니
무척이나논리적이군!
환경이다양한만큼
각환경에대해
먼저이해해야겠어.
사용자화면을
만드는사람이
환경분석없이무슨
디자인을하겠어?
6. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
디/
자/
인/
은/ /
이/
쁘/
면/
된/
다/
?
13. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
디/
자/
인/
은/ /
자/
기/
만/
족/
일/
까/
?
14. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
— 큐드럼 (Q Drum) —
1993년 남아공 헨드릭스 형제가 가뭄에 고통 받는 아프리카를 돕기 위해 고안하였습니다.
물통의 모양에서 Q드럼이라고 이름 지었습니다. 많은 아이들이 큐드럼을 가지면 50리터를 넣고
즐겁게 물을 운반합니다. 물 운반시간이 줄어들어 아이들은 학교에 갈 수 있게 되었습니다.
15. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
— 생명의 빨대 (Life Straw) —
아프리카에서 오염된 물을 마시고 병에 걸리는 사람이 많습니다. 생명의 빨대는 휴대가 가능한
개인용 정수기이며 지표수를 먹을 수 있도록 만들어주는 도구입니다. 활성탄을 이용한 필터를 사용하여
어떤 물을 마셔도 정수가 되어 마실 수 있습니다.
16. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
— 인간을 위한 디자인 —
17. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
편/
견/
을/
버/
려/
라
울/
타/
리/
를/
만/
들/
지/
마/
라
18. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
설/
계/
하/
는/
디/
자/
이/
너
— 실무 현장 이야기
19. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
m.cmiscm.com
20. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
fff.cmiscm.com
21. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
mon.cmiscm.com
22. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
lp.anzi.kr
23. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
httpster.net
24. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
anzi.kr
25. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
medium.com/anzi-posts
26. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
github.com/yeun
27. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
yeun.github.io/open-color
28. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
yeun.github.io/open-arrow
29. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
spoqa.github.io/spoqa-han-sans
30. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
dribbble.com/heeyeun
31. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
설/
계/
하/
는/
디/
자/
이/
너
/
양/
성
— 교육 현장 이야기
32. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
— 프로덕트 UI 디자이너, 정예연 —
내가 뉴욕에 있을 때, 나는 디자이너라는 생각으로 그곳에서 멈췄다면, 분명 성장에 한계가 있었을 것이다.
이대로는 성장에 한계가 있을 것이라는 걸 깨달았을 때, 프로그래밍 공부를 하겠다고 결심했다.
33. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
goo.gl/JHlnLw
34. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
— 데이터 시각화 디자이너, 김한웅 —
시간이 갈수록 아쉬움이 생겼다. UX는 디자인이기에 시작의 구성은 제안할 수 있지만
그것을 실제로 만드는 역할은 아니었다. 자꾸 직접 구현해보고 싶은 생각이 들었다.
2년 동안 UX 디자이너로 일하면서 어떤 구성과 디자인이 좋을지 생각하는 법을 배웠으니,
직접 개발을 한다면 더 만족스러운 결과물을 낼 수 있을 것 같았다.
35. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
goo.gl/f74EHW
36. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
— UX/UI 디자이너, 노지승 —
혼란스러웠다. 대학교에 가서 배웠던 것들은 기대와는 너무 달랐다.
한 때는 좌절 하기도 했지만... 지금은 다르다. 2년 전의 나와는 달라진 진짜 나를 만났으니까.
코딩을 공부 하면서 부터 내 삶은 달라 지기 시작했다.
38. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
— 코딩 공부 중인 디자이너, 박의태 —
디자이너가 개발을 배우면 생각의 깊이가 깊어지고,
개발자가 디자인을 배우면 생각의 넓이가 넓어지는거 같습니다.
39. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
fastcampus.co.kr/dev_school_fds
40. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
디/
자/
인/
시/
작/
은
어/
떻/
게/
할/
까/
?
41. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
현장에서일하다보면경험으로기술을익힌사람들(실기)이
규칙(이론)을 무시하는 경우를 종종 봅니다. 또 후배에게 일을
가르치다 보면 지루한 이론은 제쳐두고 막바로 실기를 배우고
싶어하는친구들이있습니다.
드럼을배우려는사람이음악이론은무시하고곧바로채를
들고드럼을두드리고싶어하는것처럼말입니다.어깨너머
로프로그램을배워편집일을하는분이계신데,아무리감각
이뛰어나도자신의경험치,그이상은나오지않습니다.
규칙을 전부 마스터하면 뭐든지 할 수 있다.
심지어 규칙을 파괴할 수도 있다. 하지만...
체계가 아예 없으면 시작조차 할 수 없다.
42. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
현장에서일하다보면경험으로기술을익힌사람들(실기)이
규칙(이론)을 무시하는 경우를 종종 봅니다. 또 후배에게 일을
가르치다 보면 지루한 이론은 제쳐두고 막바로 실기를 배우고
싶어하는친구들이있습니다.
드럼을배우려는사람이음악이론은무시하고곧바로채를
들고드럼을두드리고싶어하는것처럼말입니다.어깨너머
로프로그램을배워편집일을하는분이계신데,아무리감각
이뛰어나도자신의경험치,그이상은나오지않습니다.
규칙을 전부 마스터하면 뭐든지 할 수 있다.
심지어 규칙을 파괴할 수도 있다. 하지만...
체계가 아예 없으면 시작조차 할 수 없다.
이론 규칙을 모르면 아무 것도
시작할 수 없어요.
실습 이론을 알아도 몸으로 익히지
않으면 소용없죠.
노력 마술은 하루 아침에 만들어지
는 것이 아니겠죠?
43. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
demo.yamoo9.net/grid-system-psd
44. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
github.com/yamoo9/PSD2HTML-CSS/wiki
45. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
디자이너
디자인 × 코딩을 더하다
46. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
실/
습
Learn by Doing
47. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
url.yamoo9.net/sef
48. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
url.yamoo9.net/sef
url.yamoo9.net/sef
49. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
url.yamoo9.net/sefex
50. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
url.yamoo9.net/sefex
url.yamoo9.net/sefex
51. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
github.com/yamoo9/JS/blob/master/SEF-2017.md
52. 보이지 않던 것들이 보이는 순간 —
디자이너, 설계(Design)에 눈을 뜨다.
END
감사합니다.