SlideShare a Scribd company logo
디자이너, 디자인 × 코딩을 더하다.
—
—
보이지 않던 것들이 보이는 순간 —

디자이너, 설계(Design)에 눈을 뜨다.
Front-End UI Instructor
yamoo9, 야무
프론트엔드 디자인 CAMP

JJ 첫걸음/정복/실전 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
감사합니다.

More Related Content

Similar to SEF 2017 — 디자이너, 디자인에 코딩을 더하다

사용자중심
사용자중심사용자중심
사용자중심
지현 이
 
아이패드기획강연 플루토미디어 외부_100915
아이패드기획강연 플루토미디어 외부_100915아이패드기획강연 플루토미디어 외부_100915
아이패드기획강연 플루토미디어 외부_100915
jinwook shin
 
2. 증명된 컨셉으로 게임디자인 하기
2. 증명된 컨셉으로 게임디자인 하기2. 증명된 컨셉으로 게임디자인 하기
2. 증명된 컨셉으로 게임디자인 하기
Suyeong Park
 
쿠킷제안
쿠킷제안쿠킷제안
쿠킷제안
hellogracy
 
퍼블리셔, 디자인을 퍼블리싱하다
퍼블리셔, 디자인을 퍼블리싱하다퍼블리셔, 디자인을 퍼블리싱하다
퍼블리셔, 디자인을 퍼블리싱하다
jeong seok yang
 
협업하는 디자이너 - #2 git
협업하는 디자이너 - #2 git협업하는 디자이너 - #2 git
협업하는 디자이너 - #2 git
Jinkyou Son
 
사용자중심
사용자중심사용자중심
사용자중심
지현 이
 
위키토크@착한Ict 김기봉
위키토크@착한Ict 김기봉위키토크@착한Ict 김기봉
위키토크@착한Ict 김기봉
정 우성
 
제품 서비스디자인 강의계획서 2학기 ot 수정본2
제품 서비스디자인 강의계획서 2학기 ot 수정본2제품 서비스디자인 강의계획서 2학기 ot 수정본2
제품 서비스디자인 강의계획서 2학기 ot 수정본2
Young Choi
 
14th.lecture.the.critical.view.about.ux.20180608
14th.lecture.the.critical.view.about.ux.2018060814th.lecture.the.critical.view.about.ux.20180608
14th.lecture.the.critical.view.about.ux.20180608
Jeongeun Kwon
 
13th.lecture.step5.prototyping 20190531
13th.lecture.step5.prototyping 2019053113th.lecture.step5.prototyping 20190531
13th.lecture.step5.prototyping 20190531
Jeongeun Kwon
 
디자이너를 위한, 효과적으로 프로젝트하기
디자이너를 위한, 효과적으로 프로젝트하기디자이너를 위한, 효과적으로 프로젝트하기
디자이너를 위한, 효과적으로 프로젝트하기
sunyeon lee
 
사용자경험 스케치 _ Book study 7주차 5조
사용자경험 스케치 _ Book study 7주차 5조사용자경험 스케치 _ Book study 7주차 5조
사용자경험 스케치 _ Book study 7주차 5조
홍일 김
 
EMOCON 2015 - 디자인이 뭐예요?
EMOCON 2015 - 디자인이 뭐예요?EMOCON 2015 - 디자인이 뭐예요?
EMOCON 2015 - 디자인이 뭐예요?
이상한모임
 
20150307 abcd발표_ux디자이너 실력으로 살아남기
20150307 abcd발표_ux디자이너 실력으로 살아남기20150307 abcd발표_ux디자이너 실력으로 살아남기
20150307 abcd발표_ux디자이너 실력으로 살아남기
SANGBUM HA
 
인디 게임을 개발하는 여러 가지 방법들
인디 게임을 개발하는 여러 가지 방법들인디 게임을 개발하는 여러 가지 방법들
인디 게임을 개발하는 여러 가지 방법들
springgames
 
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
Yurim Jin
 
제2회 DGMIT UI/UX 컨퍼런스 : '디자인의 드리블화'와 나의 생각
제2회 DGMIT UI/UX 컨퍼런스 : '디자인의 드리블화'와 나의 생각제2회 DGMIT UI/UX 컨퍼런스 : '디자인의 드리블화'와 나의 생각
제2회 DGMIT UI/UX 컨퍼런스 : '디자인의 드리블화'와 나의 생각
Hyuck Tae Kwon
 
서울과학기술대학교 2014 서비스디자인 강의계획서
서울과학기술대학교 2014 서비스디자인 강의계획서서울과학기술대학교 2014 서비스디자인 강의계획서
서울과학기술대학교 2014 서비스디자인 강의계획서
Young Choi
 
Social AI ‘핑퐁‘의 개발 사례를 통해 AI 디자이너 알아보기
Social AI ‘핑퐁‘의 개발 사례를 통해 AI 디자이너 알아보기Social AI ‘핑퐁‘의 개발 사례를 통해 AI 디자이너 알아보기
Social AI ‘핑퐁‘의 개발 사례를 통해 AI 디자이너 알아보기
Yejee Choi
 

Similar to SEF 2017 — 디자이너, 디자인에 코딩을 더하다 (20)

사용자중심
사용자중심사용자중심
사용자중심
 
아이패드기획강연 플루토미디어 외부_100915
아이패드기획강연 플루토미디어 외부_100915아이패드기획강연 플루토미디어 외부_100915
아이패드기획강연 플루토미디어 외부_100915
 
2. 증명된 컨셉으로 게임디자인 하기
2. 증명된 컨셉으로 게임디자인 하기2. 증명된 컨셉으로 게임디자인 하기
2. 증명된 컨셉으로 게임디자인 하기
 
쿠킷제안
쿠킷제안쿠킷제안
쿠킷제안
 
퍼블리셔, 디자인을 퍼블리싱하다
퍼블리셔, 디자인을 퍼블리싱하다퍼블리셔, 디자인을 퍼블리싱하다
퍼블리셔, 디자인을 퍼블리싱하다
 
협업하는 디자이너 - #2 git
협업하는 디자이너 - #2 git협업하는 디자이너 - #2 git
협업하는 디자이너 - #2 git
 
사용자중심
사용자중심사용자중심
사용자중심
 
위키토크@착한Ict 김기봉
위키토크@착한Ict 김기봉위키토크@착한Ict 김기봉
위키토크@착한Ict 김기봉
 
제품 서비스디자인 강의계획서 2학기 ot 수정본2
제품 서비스디자인 강의계획서 2학기 ot 수정본2제품 서비스디자인 강의계획서 2학기 ot 수정본2
제품 서비스디자인 강의계획서 2학기 ot 수정본2
 
14th.lecture.the.critical.view.about.ux.20180608
14th.lecture.the.critical.view.about.ux.2018060814th.lecture.the.critical.view.about.ux.20180608
14th.lecture.the.critical.view.about.ux.20180608
 
13th.lecture.step5.prototyping 20190531
13th.lecture.step5.prototyping 2019053113th.lecture.step5.prototyping 20190531
13th.lecture.step5.prototyping 20190531
 
디자이너를 위한, 효과적으로 프로젝트하기
디자이너를 위한, 효과적으로 프로젝트하기디자이너를 위한, 효과적으로 프로젝트하기
디자이너를 위한, 효과적으로 프로젝트하기
 
사용자경험 스케치 _ Book study 7주차 5조
사용자경험 스케치 _ Book study 7주차 5조사용자경험 스케치 _ Book study 7주차 5조
사용자경험 스케치 _ Book study 7주차 5조
 
EMOCON 2015 - 디자인이 뭐예요?
EMOCON 2015 - 디자인이 뭐예요?EMOCON 2015 - 디자인이 뭐예요?
EMOCON 2015 - 디자인이 뭐예요?
 
20150307 abcd발표_ux디자이너 실력으로 살아남기
20150307 abcd발표_ux디자이너 실력으로 살아남기20150307 abcd발표_ux디자이너 실력으로 살아남기
20150307 abcd발표_ux디자이너 실력으로 살아남기
 
인디 게임을 개발하는 여러 가지 방법들
인디 게임을 개발하는 여러 가지 방법들인디 게임을 개발하는 여러 가지 방법들
인디 게임을 개발하는 여러 가지 방법들
 
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
 
제2회 DGMIT UI/UX 컨퍼런스 : '디자인의 드리블화'와 나의 생각
제2회 DGMIT UI/UX 컨퍼런스 : '디자인의 드리블화'와 나의 생각제2회 DGMIT UI/UX 컨퍼런스 : '디자인의 드리블화'와 나의 생각
제2회 DGMIT UI/UX 컨퍼런스 : '디자인의 드리블화'와 나의 생각
 
서울과학기술대학교 2014 서비스디자인 강의계획서
서울과학기술대학교 2014 서비스디자인 강의계획서서울과학기술대학교 2014 서비스디자인 강의계획서
서울과학기술대학교 2014 서비스디자인 강의계획서
 
Social AI ‘핑퐁‘의 개발 사례를 통해 AI 디자이너 알아보기
Social AI ‘핑퐁‘의 개발 사례를 통해 AI 디자이너 알아보기Social AI ‘핑퐁‘의 개발 사례를 통해 AI 디자이너 알아보기
Social AI ‘핑퐁‘의 개발 사례를 통해 AI 디자이너 알아보기
 

More from yamoo9

질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
yamoo9
 
일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management
yamoo9
 
도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석
yamoo9
 
스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용
yamoo9
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
yamoo9
 
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
yamoo9
 
KTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDKTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PD
yamoo9
 
KTH Easing Markup DAY01
KTH Easing Markup DAY01KTH Easing Markup DAY01
KTH Easing Markup DAY01
yamoo9
 
DIK accessible technique
DIK accessible techniqueDIK accessible technique
DIK accessible technique
yamoo9
 
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
yamoo9
 
Mac seminar - 2012
Mac seminar - 2012Mac seminar - 2012
Mac seminar - 2012
yamoo9
 
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
yamoo9
 
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
yamoo9
 
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
yamoo9
 
Webinar mobile presentation_2010
Webinar mobile presentation_2010Webinar mobile presentation_2010
Webinar mobile presentation_2010
yamoo9
 
Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010
yamoo9
 

More from yamoo9 (16)

질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
 
일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management
 
도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석
 
스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
 
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
 
KTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDKTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PD
 
KTH Easing Markup DAY01
KTH Easing Markup DAY01KTH Easing Markup DAY01
KTH Easing Markup DAY01
 
DIK accessible technique
DIK accessible techniqueDIK accessible technique
DIK accessible technique
 
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
 
Mac seminar - 2012
Mac seminar - 2012Mac seminar - 2012
Mac seminar - 2012
 
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
 
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
 
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
 
Webinar mobile presentation_2010
Webinar mobile presentation_2010Webinar mobile presentation_2010
Webinar mobile presentation_2010
 
Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010
 

SEF 2017 — 디자이너, 디자인에 코딩을 더하다

  • 1. 디자이너, 디자인 × 코딩을 더하다. — —
  • 2. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다. Front-End UI Instructor yamoo9, 야무 프론트엔드 디자인 CAMP
 JJ 첫걸음/정복/실전 CAMP ECMAScript + Vue JS CAMP . . . 저서 강의 프론트엔드 개발 SCHOOL / /
  • 3. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다. 디/ 자/ 이/ 너/ 에/ 게/ / 묻/ 다
  • 4. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다. 코/ 딩/ 은/ / 개/ 발/ 자/ 만/ 한/ 다/ ?
  • 5. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다. 도대체왜?
 이것도…저것도
 안된다고만
 하는거지? 그래픽을이렇게
 만들어야코딩과정에서
 화면에표시하는데 문제가없겠군! 코딩을아는
 디자이너 코딩을모르는
 디자이너 시스템에기반한 디자인방법론을
 사용해보자! 타이포그래피와 그리드시스템,황금비를 디자인에반영하니 무척이나논리적이군! 환경이다양한만큼 각환경에대해 먼저이해해야겠어. 사용자화면을 만드는사람이
 환경분석없이무슨
 디자인을하겠어?
  • 6. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다. 디/ 자/ 인/ 은/ / 이/ 쁘/ 면/ 된/ 다/ ?
  • 7. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다.
  • 8. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다.
  • 9. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다.
  • 10. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다.
  • 11. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다.
  • 12. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(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년 전의 나와는 달라진 진짜 나를 만났으니까. 
 코딩을 공부 하면서 부터 내 삶은 달라 지기 시작했다.
  • 37. 보이지 않던 것들이 보이는 순간 —
 디자이너, 설계(Design)에 눈을 뜨다.
  • 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 감사합니다.