디자이너를 위한
웹 인터랙티브 프로그래밍 CAMP

기   간 2018년 3월 7일 ~ 4월 21일
일   정 수요일 19:30 – 22:30 (3시간)
토요일 14:30 – 18:00 (3시간 30분)
장   소 패스트캠퍼스 강의장
담당자 담당 매니저 02-518-4839
주저말고 매니저에게 언제든지 문의하세요!
궁금한 부분을 시원하게 설명해드립니다

 *조기마감 되었습니다.
출시알림을 신청해주시면 공석 발생 시 순차적으로 연락드리겠습니다.

‘디자이너의/디자이너에 의한/디자이너를 위한’
디자인 중심 코딩 강의가 왔다!

어디서부터 시작하여 어떻게 적용해야할지 막막했던 코딩!
업계 일인자로 손꼽히는 풀스텍 디발자(디자이너+개발자)가 군더더기는 쏙 빼고
디자이너를 위한 핵심 스킬들만 족집게처럼 콕콕! 

[강사님 포트폴리오 _왓챠]

코딩, 한 번 배워두면
막강한 무기가 됩니다!

디자이너의 필수 역량이 되어가는 코딩,
이왕 언젠가 배울거라면

한 발 먼저 익히고 프로가 되어보세요!

디자이너의 필요를
! 아는 맞춤형 코딩

기초적인 코드 프로그래밍 스터디부터
개인 포트폴리오 웹페이지 제작까지,
디발자의 족집게 안목으로 함께합니다.

강사 포트폴리오

스스로가 원하는 것이라면
마음껏 만들어낼 수 있는 디자이너

이 시대 디자이너의 역량은 점차 그 한계가 모호해지고 있습니다. 기본적 디자인 툴을 넘어 코딩까지 해내는 디자이너에게 불가능한 작업이란 없지요! 내가 원하는 그림 그대로 직접 내어놓길 원하는 욕심많은 디자이너 여러분을 위한 코딩 강의, 놓치지 마세요! 개발자와의 협업스킬 증진은 덤!

대한민국에 몇 되지 않는
업계 최고 풀스텍 디자이너 강사!

디자이너로 시작하여 개발자의 영역까지 통달한 풀스텍 디자이너가 가르치는 코딩은 다릅니다. 한국에서 손에 꼽히는 실력을 갖춘 강사님이 디자이너의 입장에서 바라본 코딩을 명쾌하게 풀어드립니다. 디자이너로서 코딩을 향한 갈증이 있다면 주저하지 말고 함께하세요.

UI 형태 만들기부터,
완성된 웹페이지 제작까지!

커리큘럼 역시 디자이너의 필요에 쏙 맞게 구성했습니다. 기본적인 프로그래밍부터 익히기 시작하여 최종적으로는 개인 웹 포트폴리오 페이지까지 완성합니다. 여러분의 막히는 부분을 정확하게 캐치하는 강사님과 함께, 직접 인터랙티브한 웹사이트를 구현해보세요.

강사 소개

sketch_person-icon

강사
박성완 디자이너

현, 프로그램스(왓챠) 리드 UI 디자이너
전, 프로그램스(왓챠) 웹/서버 개발자
전, 디자인 스튜디오 Co-Founder

왓챠플레이 TV 앱 디자인 & 개발
왓챠플레이 iOS & Android 앱 디자인
왓챠플레이 웹 개발
왓챠 모바일 웹 디자인 & 개발

수강 대상

코드로 형태와 움직임이 어떻게 구성되는지 궁금하신 분
기존 웹 프로그래밍 강의를 듣기 힘드셨던 분
나만의 웹사이트를 만들고 싶은 디자이너 또는 기획자
재밌게 코드를 공부하고 싶은 분
동적 데이터 중심의 UI 동작 전반을 이해하고 싶으신 분

직접 개발까지
완성하고 싶어요.”

스스로가 디자인한 것을 직접 개발까지 해보고 싶은 욕심 많은 디자이너에게 추천합니다. 자신이 기획한 것을 실제로 직접 구현해보는 경험을 통해 해당 영역에 대한 남다른 인사이트를 갖추게 될 거예요.

디자인 포트폴리오를
더 풍부하게 발전시키고 싶어요

익숙한 디자인 포트폴리오를 탈피하여, 그 어떤 것에도 구애받지 않는 나만의 개성있는 개인 작업 및 포트폴리오를 완성하고 싶다면! 머리로만 그려온 인터랙션을 자신의 기획대로 구현해보세요.

개발자와 원활하게
커뮤니케이션 하고 싶어요.”

개발자와 디자이너 간의 긴밀한 소통이 그 어느때보다 중요해진 요즘. 이제 개발자의 영역까지 이해하는 디자이너가 되어 보다 명확한 커뮤니케이션을 해 보세요.

 

강의 진행 과정

Untitled-1-01

HTML / CSS 를 사용하여
정적인 UI를 구성해 봅니다.

Untitled-1-02

Javascript를 사용하여, 정적인 UI에
인터랙션과 동적 데이터를 적용합니다.

Untitled-1-03

지금까지 배운 내용을 기초로
자신만의 페이지를 만들어 봅니다.

커리큘럼

  • 디자인에서의 디지털 매체 이해의 중요성
  • html / css / javascript 의 관계
  • html 개요 & 기초 작성법
  • 문서를 만드는데 필요한 기초 html 태그
  • css 기초
  • 타이포그래피 & 여백 조절에 필요한 css 항목
  • class & id 를 사용하여 UI 요소 & 하이어라키 규정하기
  • 하이어라키가 있는 UI 를 구성하는데 필요한 html 태그, css 항목
  • 폼에 사용할 수 있는 기본 html 태그 공부,
    css 로 스타일링 해보기
  • 전통적 float 방식을 사용한 다단 레이아웃 작성법 익히기
  • flex와 css grid와 같은 현대적 레이아웃 방법론 소개
  • 미디어 쿼리를 통한 가변적 스크린 대응
  • UI CSS 프레임워크에서 배울 UI 설계 방법에 대한 리뷰
  • 다른 플랫폼(iOS, Android)의 레이아웃 구성 방식 소개
  • 복수 CSS 클래스 를 사용하여 UI 요소 형태 변환
  • CSS transition 을 통해 UI 요소 형태 변환시의 적용할 애니메이션 설정
  • 개발자 도구를 통해 설정한 애니메이션을 코드 없이 실행해보기
  • 자바 스크립트 : 변수, 문자 데이터, 숫자 데이터, 함수 호출
  • 코드를 통해 원하는 UI 요소를 선택하여, 설정한 애니메이션을 코드로 실행해보기
  • 자바스크립트 : 함수 작성하기, 기초적인 이벤트 종류, 이벤트 핸들러의 개념
  • 이벤트 핸들러를 사용하여, 특정 이벤트 실행시, 설정한 애니메이션을 작동하도록 하기
  • 자바스크립트 : 참/거짓, 조건문
  • 조건문을 활용하여 클래스를 넣거나 빼는 토글링을 구현
  • 자바스크립트 : 어레이, 오브젝트를 통한 목록 데이터 이해, 반복문
  • 서버와 클라이언트의 JSON을 통한 데이터 통신 개념 소개.
  • 기존의 서버 렌더 방식과 javascript 중심의 비동기적 UI 변경의 차이
  • 타인이 만든 코드를 활용하여 더 쉽고 품질좋은 결과물 만들기
  • 애니메이션 프레임워크 혹은 템플릿 엔진으로 진행 예정
  • ajax로 데이터를 받아 동적인 데이터를 가진 싱글 웹페이지 구현
  • ajax로 데이터를 받아 동적인 데이터를 가진 싱글 웹페이지 구현

*커리큘럼은 강사님 일정, 수강생의 진도 등에 의해 일정부분 조정 될 수 있습니다.

수강료

*최종마감 할인가(-3/1)
정가 : 99만원 –> 95만원

*조기마감 되었습니다
출시알림을 신청해주시면 공석 발생 시 순차적으로 연락드리겠습니다.