디자이너, 디자인 × 코딩을 더하다.—

—

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

Front-End UI Instructor

yamoo9, 야무

프론트엔드 디자인 CAMPJJ 첫걸음/정복/실전 CAMP

ECMAScript + Vue JS CAMP

.

.

.

저서

강의

프론트엔드 개발 SCHOOL

/

/

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

디/자/이/너/에/게/ /묻/다

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

코/딩/은/ /개/발/자/만/한/다/?

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

도대체 왜?이것도 … 저것도

안된다고만하는거지?

그래픽을 이렇게 만들어야 코딩 과정에서화면에 표시하는데 문제가 없겠군!

코딩을 아는디자이너

코딩을 모르는디자이너

시스템에 기반한 디자인 방법론을 사용해보자!

타이포그래피와 그리드 시스템, 황금비를 디자인에 반영하니

무척이나 논리적 이군!

환경이 다양한 만큼 각 환경에 대해

먼저 이해 해야겠어.

사용자 화면을 만드는 사람이

환경분석 없이 무슨디자인을 하겠어?

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

디/자/인/은/ /이/쁘/면/된/다/?

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

디/자/인/은/ /자/기/만/족/일/까/?

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

— 큐드럼 (Q Drum) —

1993년 남아공 헨드릭스 형제가 가뭄에 고통 받는 아프리카를 돕기 위해 고안하였습니다. 물통의 모양에서 Q드럼이라고 이름 지었습니다. 많은 아이들이 큐드럼을 가지면 50리터를 넣고

즐겁게 물을 운반합니다. 물 운반시간이 줄어들어 아이들은 학교에 갈 수 있게 되었습니다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

— 생명의 빨대 (Life Straw) —

아프리카에서 오염된 물을 마시고 병에 걸리는 사람이 많습니다. 생명의 빨대는 휴대가 가능한 개인용 정수기이며 지표수를 먹을 수 있도록 만들어주는 도구입니다. 활성탄을 이용한 필터를 사용하여

어떤 물을 마셔도 정수가 되어 마실 수 있습니다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

— 인간을 위한 디자인 —

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

편/견/을/버/려/라울/타/리/를/만/들/지/마/라

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

설/계/하/는/디/자/이/너— 실무 현장 이야기

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

m.cmiscm.com

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

fff.cmiscm.com

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

mon.cmiscm.com

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

lp.anzi.kr

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

httpster.net

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

anzi.kr

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

medium.com/anzi-posts

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

github.com/yeun

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

yeun.github.io/open-color

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

yeun.github.io/open-arrow

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

spoqa.github.io/spoqa-han-sans

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

dribbble.com/heeyeun

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

설/계/하/는/디/자/이/너/양/성

— 교육 현장 이야기

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

— 프로덕트 UI 디자이너, 정예연 —

내가 뉴욕에 있을 때, 나는 디자이너라는 생각으로 그곳에서 멈췄다면, 분명 성장에 한계가 있었을 것이다.

이대로는 성장에 한계가 있을 것이라는 걸 깨달았을 때, 프로그래밍 공부를 하겠다고 결심했다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

goo.gl/JHlnLw

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

— 데이터 시각화 디자이너, 김한웅 —

시간이 갈수록 아쉬움이 생겼다. UX는 디자인이기에 시작의 구성은 제안할 수 있지만 그것을 실제로 만드는 역할은 아니었다. 자꾸 직접 구현해보고 싶은 생각이 들었다.

2년 동안 UX 디자이너로 일하면서 어떤 구성과 디자인이 좋을지 생각하는 법을 배웠으니, 직접 개발을 한다면 더 만족스러운 결과물을 낼 수 있을 것 같았다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

goo.gl/f74EHW

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

— UX/UI 디자이너, 노지승 —

혼란스러웠다. 대학교에 가서 배웠던 것들은 기대와는 너무 달랐다.한 때는 좌절 하기도 했지만... 지금은 다르다. 2년 전의 나와는 달라진 진짜 나를 만났으니까.

코딩을 공부 하면서 부터 내 삶은 달라 지기 시작했다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

— 코딩 공부 중인 디자이너, 박의태 —

디자이너가 개발을 배우면 생각의 깊이가 깊어지고, 개발자가 디자인을 배우면 생각의 넓이가 넓어지는거 같습니다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

fastcampus.co.kr/dev_school_fds

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

디/자/인/시/작/은

어/떻/게/할/까/?

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

현장에서 일하다 보면 경험으로 기술을 익힌 사람들(실기)이

규칙(이론)을 무시하는 경우를 종종 봅니다. 또 후배에게 일을

가르치다 보면 지루한 이론은 제쳐두고 막바로 실기를 배우고

싶어하는 친구들이 있습니다.

드럼을 배우려는 사람이 음악 이론은 무시하고 곧바로 채를

들고 드럼을 두드리고 싶어하는 것처럼 말입니다. 어깨 너머

로 프로그램을 배워 편집 일을 하는 분이 계신데, 아무리 감각

이 뛰어나도 자신의 경험치, 그 이상은 나오지 않습니다.

규칙을 전부 마스터하면 뭐든지 할 수 있다.

심지어 규칙을 파괴할 수도 있다. 하지만... 체계가 아예 없으면 시작조차 할 수 없다.

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

현장에서 일하다 보면 경험으로 기술을 익힌 사람들(실기)이

규칙(이론)을 무시하는 경우를 종종 봅니다. 또 후배에게 일을

가르치다 보면 지루한 이론은 제쳐두고 막바로 실기를 배우고

싶어하는 친구들이 있습니다.

드럼을 배우려는 사람이 음악 이론은 무시하고 곧바로 채를

들고 드럼을 두드리고 싶어하는 것처럼 말입니다. 어깨 너머

로 프로그램을 배워 편집 일을 하는 분이 계신데, 아무리 감각

이 뛰어나도 자신의 경험치, 그 이상은 나오지 않습니다.

규칙을 전부 마스터하면 뭐든지 할 수 있다.

심지어 규칙을 파괴할 수도 있다. 하지만... 체계가 아예 없으면 시작조차 할 수 없다.

이론 규칙을 모르면 아무 것도 시작할 수 없어요.

실습 이론을 알아도 몸으로 익히지 않으면 소용없죠.

노력 마술은 하루 아침에 만들어지는 것이 아니겠죠?

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

demo.yamoo9.net/grid-system-psd

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

github.com/yamoo9/PSD2HTML-CSS/wiki

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

디자이너디자인 × 코딩을 더하다

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

실/습Learn by Doing

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

url.yamoo9.net/sef

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

url.yamoo9.net/sef

url.yamoo9.net/sef

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

url.yamoo9.net/sefex

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

url.yamoo9.net/sefex

url.yamoo9.net/sefex

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

github.com/yamoo9/JS/blob/master/SEF-2017.md

보이지 않던 것들이 보이는 순간 —디자이너, 설계(Design)에 눈을 뜨다.

END감사합니다.