개강 임박! 서두르세요.

디자이너에게 딱 맞는

필수 코딩

더 설득력 있는 디자인을 위한
코딩 고민, 여기서 끝내세요.
현업 프로덕트 디자이너에게 배우는
디자이너를 위한 필수 코딩 지식 7주 과정.

#디자인x코딩#깃허브포트폴리오
#맞춤코딩

기간 & 일정

2019.09.28 – 11.09
매주 토요일 10:00-13:00
주 1회, 총 21시간

장소 & 준비물

패스트캠퍼스 강남강의장
강남역 4번 출구, 미왕빌딩
개인 노트북

담당자 & 문의

공정필 매니저
02-501-0588
help.camp.creative@fastcampus.co.kr

*동반 수강의 경우 담당 매니저(02-501-0588)에게 연락주시면 수강료의 25%를 할인해드립니다.

디자이너가 실무에서 마주하는 코딩 문제를 해결하는 능력을 기르고,
다른 디자이너들과 차별화될 수 있는 깃허브 포트폴리오까지 꼼꼼히 챙겨가세요.

pain3

개발자가 자꾸 안된다고
하는데 저보고 어떻게
하라는건지 모르겠어요…

pain1

직무는 디자이너가 맞는데
디자인만 할 수 있는
근무환경이 아니라구요…

pain2

그저 시키는대로
디자인하는데
내 커리어는 어디에…?

안된다는 개발자의 말에 된다고 받아칠 수 있는 디자이너가 되고 싶으신가요?
간단한 코드 수정은 직접 할 수 있는 능력있는 디자이너가 되고 싶으신가요?

이번 커리큘럼이 당신의 커리어에 터닝포인트가 될거예요.

K대학교 시각디자인 과정에
포함될만큼 중요해진 코딩.

디자인만 하는 디자이너의 입지가 점점 좁아지는 것이 현실. 이제 실무에서는 디자이너에게 개발 역량을 요구하고 있습니다. 또한, 프로젝트 개발 시스템이 변화함에 따라 개발자와의 협업이 매우 중요해지고 있습니다. 그렇기 때문에 개발 지식을 갖춘 디자이너라면, 빠르게 업무를 처리할 수 있고 팀의 협업에서 도 매우 중요한 역할을 할 수 있습니다.

사진출처: http://vcd.kookmin.ac.kr/curriculum

오직 디자이너를 위한
필수 코딩 지식

디자이너의 실무에 딱 맞게 준비한 커리큘럼. 현직 프론트엔드 개발자 겸 디자이너 강사님이 직접 구상한 7주 간의 커리큘럼으로 디자이너의 코딩 학습 고민을 끝내세요. 디자이너를 이해하는 커리큘럼을 통해 어렵게 느껴지는 코딩도 재밌게 배우실 수 있습니다. 내 디자인에 개발적/논리적 근거를 더하는 과정, 지금 바로 시작하세요.

디자이너에게 필요한 건 코딩 자체가 아닌,
코딩을 통한 디자인 문제 해결 능력이니까요!

세 가지 강의 특징을 확인해보세요.

실제 55만 원 상당의 가격으로 판매중인 홈페이지 솔루션,
본 강의를 수강한 후에는 직접 제작하고 커스텀까지 할 수 있어요!
나만의 깃허브 포트폴리오로 다른 디자이너들과 차별화된 경쟁력을 키우세요.

*본 이미지는 실제 수강생들의 실습 자료 입니다.

커리큘럼

당신이 배우게 될 것들.

디자이너를 위한 개발

1회차 강의내용 더 보기

  • “우리는 왜 개발을 배우는걸까?” – 문제상황을 고민하고 해결하기
  • 디자이너가 코딩을 어려워하는 이유
  • 서버와 클라이언트, 다양한 개발 언어 이해하기 (Backend/Frontend, Python, Node..)
  • 디자이너가 재미를 느낄 수 있는 개발 학습 방법 : 시각적 결과물에 초점을 맞춘 HTML/CSS/Javascript
    • HTML/CSS 코드 읽고 해석하기
    • Chrome 요소검사로 코드 읽어보기
  • 인스타그램 HTML/CSS 분석하고 변형해보기
  • [기초 1단계 실습] HTML로 웹 페이지 뼈대 만들기

퍼블리싱 하기

2회차 강의내용 더 보기

  • 웹/앱 퍼블리싱 실무 프로세스 알아보기
  • HTML/CSS 실습
  • 대표 속성 실습해보기
    • HTML/CSS 작성 규칙(컨벤션) 이해하기
    • 퍼블리싱 문제 해결 방법 : 검색 활용법
  • 반응형 웹 이해하기 : 미디어쿼리
  • [기초 2단계 실습] HTML/CSS로 다양한 스타일이 들어간 소개 페이지 만들기

일 잘하는 디자이너

3회차 강의내용 더 보기

  • 실무에 많이 사용되는 HTML/CSS속성 실습
  • Javascript 개념 이해하기
  • 반응형 웹 제작 : 미디어쿼리
  • 프레임워크와 라이브러리 이해하기
  • 디자인에 인사이트를 주는 오픈소스 찾고, 활용하기
  • [기초 3단계 실습]**Javascript와 미디어 쿼리를 활용한 원페이지 제작

더 나은 디자인을 위한 개발

4회차 강의내용 더 보기

  • 모두가 놓치기 쉬운 개발에 꼭 필요한 디자인 요소 – favicon, open graph, 404, status 등
  • 디자인과 실제 구현된 결과물의 차이 줄이기 – 디바이스 환경, 수치화, Data 등
  • 수치로 인터렉션 만들기
  • CSS를 활용한 애니메이션
  • 프로토타이핑 툴 이용하기(protopie)
  • HTML/CSS 프레임워크 활용하기(부트스트랩)
  • [기초 4단계 실습] 애니메이션이 들어간 웹 페이지 만들기

내 디자인에 설득력 더하기

5회차 강의내용 더 보기

  • “왜 이렇게 디자인 하셨어요?” – 코드로 내 디자인에 설득력 더하기
  • 디자인과 개발 속도를 높여주는 “디자인 시스템” 만들기
  • 디자인 구조와 규칙 만들기
  • 재사용 가능한 형태(Componenet)로 디자인하기
  • 코딩으로 프로토타이핑하기

직접 만드는 웹 포트폴리오

6회차 강의내용 더 보기

  • git 이해하고 업무에 활용하는 방법 – 버전관리/공유/협업
  • 온라인 깃 저장소 ‘깃허브’ 알아보기
  • 개발환경 셋팅하기(Ruby)
  • 나만의 깃허브 페이지 만들기(Jekyll)
  • 테마 선택/적용하기

깃허브 페이지 만들기

7회차 강의내용 더 보기

  • 깃허브 페이지 테마 변경하기
  • 깃허브 페이지 테마 HTML 커스텀하기
  • 깃허브 페이지 CSS/Javascript 커스텀하기
  • 깃허브에 내 포트폴리오 웹 페이지 만들기

강사소개

당신을 이끌어 줄 강사진

현| (주)하우스미디어 프로덕트 디자이너

정은지 강사님

전| (주) 옐로오투오 서비스개발팀/UI개발 매니저
전| UFOfactory 소셜서비스개발팀 PM/디자인 매니저
전| Rocketpunch 서비스개발팀 디자인 매니저

[주요 프로젝트]
Rocketpunch / Beanbrothers / 청년허브 / 그린피스 시민경찰 캠페인 / 월드비전 위기아동지원사업 / Pinspot / 우리펜션 / HALO / Houseapp 등

Q. 디자이너에게 딱 맞는 필수 코딩을 공부한 분들에게 예상되는 변화에는 어떤 것들이 있을까요?

첫 번째는 디자인 실무에서의 변화인데요. 디자이너는 여러 개발자들 중 특히 프론트엔드 개발자와 가장 긴밀하게 협업을 합니다. 강의에서 다루는 프론트엔드 개발에 대한 이해를 바탕으로 커뮤니케이션과 의사결정 속도를 높이고 디자인과 결과물의 차이를 최소화 할 수 있어 업무 효율을 높일 수 있어요. 아무리 좋은 디자인도 구현되지 못하면 세상에 나올 수 없습니다. 디자인에 개발적 이해를 바탕으로 한 구조적 설득력을 더하는 방법, 구현 가능한 범위에서 효율적으로 디자인할 수 있는 길을 알려드립니다.

두 번째로는 코딩에 대한 경험과 태도의 변화예요. 본 강의에서는 학문적으로 코딩을 접하는게 아니라 실제 서비스되는 페이지를 실습을 중심으로 실무에 바로 활용할 수 있는 내용을 다룹니다. 내가 직접 디자인한 웹 페이지를 만드는 경험을 통해 코딩에 대한 편견이나 거부감을 없애고, 개발에 대한 이해 영역을 확장해나가는 기반을 다지게 됩니다.

포트폴리오

강사님의 작업물을 확인해보세요

강사인터뷰

강사님을 미리 만나보세요.

인터뷰 질문입니다.

인터뷰 답변입니다. 말풍선의 색은 강의별 특징 색을 부여하되, 흰 글씨가 잘 보이도록 짙은 색으로 설정해주세요. 인터뷰 대상의 이미지는 500px*500px입니다.

*특이 사항은 이곳에 넣으세요.
*0월 0일 땡땡의 날로 인해 휴강

강의특징

본 강의는 이렇게 진행됩니다

POINT 1

줄 맞춤이 어렵다면 여기에

각 포인트 별 특징을 넣되,
상자의 크기가 같도록.

각 상자의 크기가 같도록 줄 개수를 조절하세요. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세

POINT 2

줄 맞춤이 어렵다면 여기에

각 포인트 별 특징을 넣되,
상자의 크기가 같도록.

각 상자의 크기가 같도록 줄 개수를 조절하세요. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세

POINT 3

줄 맞춤이 어렵다면 여기에

각 포인트 별 특징을 넣되,
상자의 크기가 같도록.

각 상자의 크기가 같도록 줄 개수를 조절하세요. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세

POINT 4

줄 맞춤이 어렵다면 여기에

각 포인트 별 특징을 넣되,
상자의 크기가 같도록.

각 상자의 크기가 같도록 줄 개수를 조절하세요. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세

수강대상

이런 분들에게 꼭 필요합니다

나의 테크트리에서의
차별점을 고민하는
주니어 디자이너

내 프로젝트를 위해
코딩을 직접 하고싶은
디자이너

웹 퍼블리셔로
취직을 준비하는
디자이너/디자인과 학생

자주 묻는 질문

더 궁금한 점이 있으시다면 언제든 문의주세요

스파인과 다른 툴의 차이가 무엇인가요?

  • Live2d와 스파인을 비교하며 강점을 물어보는 경우가 많은데, 사용하는 용도가 다릅니다.
    제자리에서 점프한다거나 감정 표현을 표현현하고자 한다면 live2d만으로도 표현 가능하지만,
    스파인은 이러한 정적인 표현들은 물론 동적인 움직임까지도 표현이 가능합니다.
  • 스파인은 특히 인디게임이나 소규모로 개발할 때 가성비 측면에서 더욱 추천할만한 툴입니다.
  • 원화가가 그린 그림 그대로 애니메이션에 사용할 수 있다는 장점도 가집니다.
  • 더욱 자세한 내용은 공식 홈페이지를 참고해주세요 (공식 홈페이지 바로가기)

수강후기

실제 수강생들의 생생한 후기를 들어보세요.

★★★★
1기 수강생

초보자의 눈높이에 맞춘 설명과 아끼지 않고 나눠주시는 자료들이 정말 좋았습니다.

★★★★
1기 수강생

디자이너의 눈높이에 맞춰 설명해주셔서 이해하는데 어려움이 적었습니다.

★★★★
1기 수강생

업무를 하면서 어깨 넘어로 배운 개발 지식들이 한 번에 정리되는 느낌이었습니다.

★★★★
1기 수강생

강사님께서 디자이너 출신이시라 실무에 필요한 핵심을 정확히 짚어주시는 점이 좋았습니다.

★★★★
1기 수강생

강의명처럼 실무에 바로 활용 가능한 실습과 팁을 많이 알려주셔서 좋았습니다.

★★★★
1기 수강생

강사님께서 수업에 애정을 가지시는게 느껴졌고, 강의 수강 후 개발자와의 ‘컴’능력이 상승되었습니다.

★★★★
1기 수강생

한 명 한 명 누락되는 사람 없이 다 챙겨주시고, 하나라도 더 알려주시고자 열정적으로 강의해주셔서 감사했습니다.

★★★★
1기 수강생

강사님의 열정과 직무와 연결되는 현실적인 내용들이 좋았습니다.

수강료안내

매주 목요일 할인률이 변경됩니다.

출시알림을 신청하세요!

₩ 600,000

₩ 600,000

*동반 수강의 경우 담당 매니저(02-501-0588)에게 연락주시면 수강료의 25%를 할인해드립니다.

수강신청

강의장안내

강남역 4번 출구 바로 앞에서 편하게.

{ FASTCAMPUS COMMUNITY MEMBERSHIP }

패스트캠퍼스 오프라인 강의를 수강하셨다면!
별도의 가입절차없이 패스트캠퍼스 커뮤니티 멤버쉽 회원이 됩니다.
커뮤니티 멤버쉽은 수강 후 1년 동안 유지되며,
오직 멤버들만을 위한 비공개 스터디클럽, 네트워킹행사, 세미나 등 비정기적 행사에 모실 예정입니다.