Brand: 콜로소 - 당신을 위한 실무교육 No.1. | Coloso.
Availability: InStock

소개 영상
개발자/디자이너 1분코딩

“20개의 커리큘럼을 통해서
코딩의 기초 개념들을 정리하고
이를 포트폴리오에 그대로 적용해 볼 수 있도록
인터랙티브 웹과 시각 구현에 관련된
예제 위주로 직접 실습하게 될 것입니다.”

코딩은 1도 모른다고요?
1분코딩과 함께라면,
나도 어엿한 '개발하는 웹 디자이너'!

웹 코딩! 선택이 아닌 필수라는 말에도,
몸값을 올릴 수 있다는 이야기에도
'어렵다'는 이유로 포기했었나요?

19년차 개발자이자 디자이너,
'1분코딩' 유준모 연사의
온라인 클래스와 함께라면 다릅니다!

코딩 언어인 HTML, CSS,
Java Script의 기본 문법부터
당장에 포트폴리오로 사용해도
손색없는 웹페이지 예제 제작,
Canvas와 3D 고급 기능까지
쉽고 재미있게 알려주는 강의!

여러분의 능력과 커리어를 동시에
높여줄 웹 디자인 클래스를
지금 바로 확인해보세요.

개발자/디자이너
1분코딩의 포트폴리오

1분코딩의 인터랙티브
포트폴리오 둘러보기 >

개발자/디자이너 1분코딩의
클래스가 특별한 이유

코딩 입문부터 포트폴리오까지 담아낸
국내 유일무이 웹 디자인 올인원 클래스

지금까지의 웹 디자인 강의는
코딩 문법만 알려주는 기초 강의,
혹은 사전 지식이 있어야만
수강할 수 있는 고급 예제 제작
커리큘럼이 대부분이었습니다.

이번 클래스는
코딩을 전혀 모르는 입문자도
웹 개발에 입문할 수 있도록
기본 문법부터 고급 기능,
포트폴리오 제작까지 모두 포함된
20개의 알짜배기 커리큘럼으로 구성했습니다.

툴과 코딩 문법에 대한 이해부터
다양한 실전 예제 구현과 응용까지
모두 담아낸 웹 디자인 온라인 클래스,
콜로소가 유일합니다.

이번 클래스에서는 총 3가지의
실전 웹페이지 예제를 직접 제작해 봅니다.

01. 디자이너 포트폴리오 웹페이지

02. 온라인 서점 웹페이지

03. Canvas를 활용한 로고 파티클

1분코딩
개발자/디자이너

안녕하세요, 1분코딩입니다.

저는 콘텐츠 크리에이터, 개발자,
디자이너로 활동하고 있고

특히 유튜브, 페이스북 채널
'1분코딩'을 운영하며 누구나
쉽게 배울 수 있는 인터랙티브 웹 코딩,
개발 관련 콘텐츠를 만들고 있습니다.

지금까지 제가 진행했던 코딩 강의들이
섹션 별 스킬 위주였다면,
이번 클래스는 기초부터 응용포인트,
웹사이트 포트폴리오 제작까지의
전 과정을 녹여냈는데요.

수업을 모두 듣고 나면, 여러분도
'나는 코딩할 줄 아는 디자이너다!'라고
당당하게 말할 수 있게 될 거예요.

개발자/디자이너 1분코딩

현) 콘텐츠제작/웹개발 1인 기업 스튜디오밀 운영

이력 더보기

현) 유튜브/페이스북 1분코딩 운영
전) 웹 에이전시 디자이너 재직
전) 한글과컴퓨터 개발자 겸 디자이너 재직

국민대/제주대 웹 개발 특강
오프라인 강의 경력
다수 기업체 출강

유튜브

클래스 특징

쉽고 빠르게 습득하는
웹 페이지 제작의 기본기

웹 개발 공부를 이어나감과 동시에 원하는 웹페이지를 스스로 제작할 수 있도록, 최신 문법의 HTML, CSS, JavaScript 기본기를 습득해봅니다.

정적인 디자인을 넘어,
멋진 인터랙티브 효과를 만드는 방법

좌표 측정, 옵저버, Canvas 활용법 등 멋진 인터랙티브 웹 사이트를 만들 수 있는 다양한 기능을 탄탄하게 익혀봅니다.

개발하는 디자이너, 디자인하는 개발자가 되기 위한 실무 노하우

유니크한 작업물로 특별한 커리어를 쌓기 위한 19년차 베테랑 개발자/디자이너의 실전 꿀팁을 알려드립니다.

클래스 구성
이런 것을 배웁니다

웹 개발 3종 세트
기초 익히기

HTML, CSS, JavaScript의 기초를 최신 문법과 기술들을 바탕으로 재미있게 배워봅니다.
내 디자인 컨셉을
디지털 작품으로 녹여내기

기존에 가지고 있던 디자인 작품을 디지털 작품으로 변환하는 코드 작업을 진행해봅니다.
남의 코드 없이,
스스로 원리를 이해하고 구현하기

코딩의 기본 문법, 태그, 논리 구조 등을 익혀서 첫 줄 부터 직접 짠 코드로 작품을 만들어 봅니다.

포트폴리오 사이트 만들기

기본 골격과 레이아웃을 바탕으로 얼마든지 새로운 디자인으로 응용 가능한 디자이너 용 포트폴리오 웹사이트를 제작해봅니다.
페이지에 3D 효과 적용하기

앞 부분에서 배운 내용들을 응용해서, 유니크하고 재미있는 3D 효과를 직접 구현해봅니다.
일반 웹의 한계를 뛰어넘는 Canvas 활용법

놀라운 그래픽 효과를 연출할 수 있는 Canvas의 기초 활용법을 익힌 후, 활용 가능한 예제까지 제작해봅니다.

커리큘럼
커리큘럼을 보여드려요

SECTION 01. 오리엔테이션

01. 강의 소개

강사 및 강의 소개
코딩하는 디자이너가 되면 좋은 이유
앞으로 배울 내용
개발 환경 세팅

SECTION 02. 웹페이지 골격을 만들자: HTML 기본기 익히기

02. HTML 기초 정리

HTML이란
주요 태그 정리
논리적인 콘텐츠 구조 만들기

03. 웹페이지 구성하기

주요 태그를 이용해 페이지 만들기
3단 컬럼 페이지 내용 구성

SECTION 03. 웹페이지 디자인을 입히자: CSS 기본기 익히기

04. CSS 기초 정리

CSS란
CSS 기본 문법
문자 다루기

05. 레이아웃의 기본 원리

display, float, position 이해하기

06. 모바일부터 데스크탑까지

유연한 레이아웃, 유체 그리드 (Fluid Layout)
미디어 쿼리와 반응형 웹

07. Flex로 레이아웃 다루기

Flex의 주요 속성들
Flex로 UI 만들기

08. Grid로 레이아웃 다루기

Grid의 주요 속성들
그리드 기반 디자인 포스터 만들기

09. Flex와 Grid로 레이아웃 만들기

3단 컬럼 페이지 레이아웃 제작
반응형 웹 적용하기

SECTION 04. 생동감을 불어넣자: 변환, 애니메이션, 3D

10. 변환과 애니메이션

크기, 위치, 회전 조정하기
Transition과 Animation

11. CSS 3D

3D 씬 만들기
UI에 3D 효과 응용하기

SECTION 05. JavaScript를 이용한 인터랙티브 웹

12. JavaScript 기초 정리

JavaScript 기초 문법
이벤트 기초
HTML 요소 제어하기

13. 자주 쓰는 인터랙션 기법들

마우스/스크롤/터치를 이용한 인터랙션

SECTION 06. 디자이너 포트폴리오 페이지 만들기

14. 포트폴리오 페이지 레이아웃 구성하기

HTML 골격 만들기
CSS Flex와 Grid로 레이아웃 만들기
3D 패널 만들기

15. 포트폴리오 페이지 인터랙션 구현하기

스크롤을 활용한 인터랙션
IntersectionObserver 활용하기

SECTION 07. 온라인 서점 페이지 만들기

16. 온라인 서점 페이지 레이아웃 구성하기

HTML 골격 만들기
CSS Flex와 Grid로 레이아웃 제작

17. 온라인 서점 페이지 인터랙션 구현하기

정확한 위치로 이동시키기
마우스 좌표에 따라 움직이는 3D 책장/클릭하면 펼쳐지는 3D 책 만들기

SECTION 08. 웹 그래픽의 한계를 넘어서: Canvas

18. Canvas 기초 정리

Canvas 드로잉 기초
애니메이션
이미지 처리하기

19. 스크롤에 반응하는 이미지 파티클

이미지 데이터 이용하기
스크롤을 이용한 Canvas 인터랙션

SECTION 09. 에필로그

20. 마무리, 전하는 이야기

코딩을 계속 공부하고 싶은 디자이너들을 위한 학습 가이드

* 커리큘럼 세부 내용은 영상 공개 전후로 변경될 수 있습니다.

인터뷰
개발자/디자이너 1분코딩이
하고 싶은 이야기

Question.01
개발자이자 디자이너로서
연사님의 강점은 무엇인가요?

디자인과 개발을 동시에 하는 만큼, 시각적으로 임팩트가 있는 인터랙티브 웹 개발에 강점을 가지고 있습니다. 그래서 이번 커리큘럼도 디자이너분들이 코딩을 통해 실제로 동작하는 결과물을 만들 수 있도록 하는 것에 중점을 둘 수 있었습니다.

Question.02
이번 클래스의
주요 포인트는 무엇인가요?

시각 구현에 관련된 코딩을 배우는 데에 필수적으로 필요한 부분들을 지치지 않고 효과적으로 공부할 수 있도록 하는 것에 중점을 두었습니다. 해당 개념을 확실하게 이해한 후 이를 응용하는 예제들을 이어서 지도함으로써, 입문 수업이지만 수강 후 바로 실제 작업물 제작에 응용할 수 있도록 커리큘럼을 구성했습니다.

Question.03
어떤 분들에게
이번 클래스를 추천하시나요?

코딩을 공부해서 자신의 작업물을 만들고 싶어하는 예비/현직 디자이너를 생각하며 클래스를 준비했습니다. 코딩의 기초 개념들을 정리하고 이를 이용해 실제 디자이너 자신의 작업물에 적용해볼 수 있도록, 인터랙티브 웹과 시각 구현에 관련된 예제들 위주로 준비했습니다.

Question.04
수강생 분들에게
하고 싶은 말이 있나요?

중반 이후에 등장하는 다양한 응용 예제들은 수강생 분들의 이해도에 따라서 난이도가 꽤 어렵게 느껴질 수 있습니다. 이번 온라인 클래스는 평생 시청하며 무제한으로 시청할 수 있는 만큼, 순서대로 공부하다가 어려움이 느껴진다면 앞부분으로 돌아가 반복 학습 후에 다시 보시는 것을 추천드립니다. 시간은 조금 더 걸릴지 몰라도, 내 것으로 만들어서 응용하는 데에는 훨씬 수월할 것입니다.

사용 프로그램
안내드립니다.

본 클래스는 Visual Studio Code와 Google Chrome 웹 브라우저에서 진행됩니다. 원활한 수강을 위해 해당 버전의 프로그램을 별도로 설치해주시길 바랍니다.

* Adobe Photoshop 2021이 일부 강의에서 사용되나 구버전도 상관이 없으며, 수강 필수 준비물은 아닙니다.
* 프로그램 및 준비물은 별도로 제공되지 않습니다.

* Visual Studio Code 다운로드 링크 (무료)

추천 클래스
당신이 놓치지 말아야 할
추천 클래스

Q. 한 계정으로 클래스를 구매해
지인과 함께 나눠 수강해도 될까요?

Coloso는, 구매된 클래스영상을 구매자 한 사람에게만 제공하는 것을 원칙으로 하고 있으며, 이를 어길 시 법적으로 책임을 물을 수 있습니다.
클래스 수강 중 다중사용으로 적발되면 계정이 자동 차단되며 영구적으로 사용 제한이 될 수 있으니 각별히 유의 바랍니다.

+ 더 알아보기

Search Input