Search Input

디자이너를 위한 코딩: 입문부터 포트폴리오 응용까지

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

클래스 상세 정보

‌
‌
‌

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

클래스 소개
프로모션 배너 이미지

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

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

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

1분코딩 UX/UI 이미지

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

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

1분코딩 UX/UI 이미지

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

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

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

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

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

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


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

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

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

배경 이미지

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

01. 디자이너 포트폴리오 웹페이지
02. 온라인 서점 웹페이지
03. Canvas를 활용한 로고 파티클
연사소개

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


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

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

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

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

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

배경 이미지
콜로소 1분코딩
개발자/디자이너 1분코딩

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

이력 더보기

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

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

유튜브
클래스 특징

클래스 특징

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

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

콜로소 1분코딩 강의 소개

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

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

콜로소 1분코딩 강의 소개

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

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

콜로소 1분코딩 강의 소개

나의 부족함을 채워주는
연사의 1:1 코칭

개인 프로젝트에 대한 평가와 QnA를 동시에 진행함으로써,
나의 실력을 몇 단계 이상 업그레이드할 수 있습니다.

– 코칭권 구매 후 개인 포트폴리오와 클래스 관련 질문 3개를 보내주시면 연사님이 직접 피드백을 해 드립니다.
– 질문 접수일 기준 2주 1회, 순차적으로 답변됩니다. 최대 영업일 기준 21일 정도 소요될 수 있으니 참고하시기 바랍니다.

* 1:1 코칭권은 클래스 + 코칭권 패키지를 구매한 분들에 한해 적용됩니다.

콜로소 피드백권

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

  • 콜로소 UX/UI 클래스 구성
    웹 개발 3종 세트
    기초 익히기
    HTML, CSS, JavaScript의 기초를 최신 문법과 기술들을 바탕으로 재미있게 배워봅니다.
  • 콜로소 UX/UI 클래스 구성
    내 디자인 컨셉을
    디지털 작품으로 녹여내기
    기존에 가지고 있던 디자인 작품을 디지털 작품으로 변환하는 코드 작업을 진행해봅니다.
  • 콜로소 UX/UI 클래스 구성
    남의 코드 없이,
    스스로 원리를 이해하고 구현하기
    코딩의 기본 문법, 태그, 논리 구조 등을 익혀서 첫 줄 부터 직접 짠 코드로 작품을 만들어 봅니다.
  • 콜로소 UX/UI 클래스 구성
    포트폴리오 사이트 만들기
    기본 골격과 레이아웃을 바탕으로 얼마든지 새로운 디자인으로 응용 가능한 디자이너 용 포트폴리오 웹사이트를 제작해봅니다.
  • 콜로소 UX/UI 클래스 구성
    페이지에 3D 효과 적용하기
    앞 부분에서 배운 내용들을 응용해서, 유니크하고 재미있는 3D 효과를 직접 구현해봅니다.
  • 콜로소 UX/UI 클래스 구성
    일반 웹의 한계를 뛰어넘는 Canvas 활용법
    놀라운 그래픽 효과를 연출할 수 있는 Canvas의 기초 활용법을 익힌 후, 활용 가능한 예제까지 제작해봅니다.


(자동 구성) 가격이 인상됩니다.

지금이 최저가!
커리큘럼

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

SECTION 01. 오리엔테이션

01. 강의 소개

  1. 강사 및 강의 소개
  2. 코딩하는 디자이너가 되면 좋은 이유
  3. 앞으로 배울 내용
  4. 개발 환경 세팅
SECTION 02. 웹페이지 골격을 만들자: HTML 기본기 익히기

02. HTML 기초 정리

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

03. 웹페이지 구성하기

  1. 주요 태그를 이용해 페이지 만들기
  2. 3단 컬럼 페이지 내용 구성
SECTION 03. 웹페이지 디자인을 입히자: CSS 기본기 익히기

04. CSS 기초 정리

  1. CSS란
  2. CSS 기본 문법
  3. 문자 다루기

05. 레이아웃의 기본 원리

  1. display, float, position 이해하기

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

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

07. Flex로 레이아웃 다루기

  1. Flex의 주요 속성들
  2. Flex로 UI 만들기

08. Grid로 레이아웃 다루기

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

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

  1. 3단 컬럼 페이지 레이아웃 제작
  2. 반응형 웹 적용하기
SECTION 04. 생동감을 불어넣자: 변환, 애니메이션, 3D

10. 변환과 애니메이션

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

11. CSS 3D

  1. 3D 씬 만들기
  2. UI에 3D 효과 응용하기
SECTION 05. JavaScript를 이용한 인터랙티브 웹

12. JavaScript 기초 정리

  1. JavaScript 기초 문법
  2. 이벤트 기초
  3. HTML 요소 제어하기

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

  1. 마우스/스크롤/터치를 이용한 인터랙션
SECTION 06. 디자이너 포트폴리오 페이지 만들기

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

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

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

  1. 스크롤을 활용한 인터랙션
  2. IntersectionObserver 활용하기
SECTION 07. 온라인 서점 페이지 만들기

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

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

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

  1. 정확한 위치로 이동시키기
  2. 마우스 좌표에 따라 움직이는 3D 책장/클릭하면 펼쳐지는 3D 책 만들기
SECTION 08. 웹 그래픽의 한계를 넘어서: Canvas

18. Canvas 기초 정리

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

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

  1. 이미지 데이터 이용하기
  2. 스크롤을 이용한 Canvas 인터랙션
SECTION 09. 에필로그

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

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

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

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

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


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


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


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


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

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

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

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

Visual Studio Code Google Chrome 포토샵
추천

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

유의사항

[유의사항] - 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다. - 결제 완료를 하신 분들은 좌측 상단 [나의 강의장] 클릭 시 바로 영상 시청하실 수 있습니다. 기입해주신 이메일 주소와 연락처로 결제 완료 및 수강 안내 이메일과 문자가 전송될 예정이니 연락처와 이메일을 정확하게 기입 부탁드립니다. - 콘텐츠는 향후 당사의 일정에 따라 추가 또는 업데이트 될 수 있습니다. [환불규정] 환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다. 수강 시작 후 7일 이내 그리고 3강 미만 수강 시에는 100% 환불 가능합니다. 수강 시작 후 7일 이내이나 3강 이상 수강하신 경우, 또는 3강 미만 수강하셨으나 수강 시작 후 7일 초과인 경우 전액 환불 불가하고 수강 시 수강기간인 2주 (14일) 대비 잔여일에 대해 당사의 환불규정에 따라 아래와 같이 환불 가능합니다. : 환불요청일시 기준 수강시작 후 7일 초과 10일 이하 경과 시, 실 결제금액의 1/2에 해당하는 금액을 환불 : 환불요청일시 기준 수강시작 후 10일 초과 시, 환불금액 없음 : 해당 환불규정은 1:1 코칭권에도 동일하게 적용됩니다. 단, 회원이 강의와 함께 제공되는 강의자료를 다운로드하는 경우 해당 자료 또는 정보가 포함된 회차의 클래스영상을 이용한 것으로 간주합니다. *회차가 표기 되지 않은 자료는 무료로 제공됩니다. [총 학습기간] 정상 수강기간(유료 수강기간) 최초 2주(14일), 무료수강기간은 15일차 이후로 무제한이며, 수강기간과 무료수강기간 모두 동일하게 시청 가능합니다. [수강시작일] 수강 시작일은 Coloso가 수강안내를 한 날짜부터 기간이 산정됩니다. Coloso의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다. 천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다. 재생 시간에 관계없이, 영상이 재생된 경우 수강한 것으로 간주합니다. [1:1 코칭권 이용방법] <1:1 코칭권>을 구매한 수강생에게는 연사님이 포트폴리오와 질문사항에 피드백을 제공합니다. 본 상품은 강의 수강권 구매시 1회 구매 및 이용가능하며, 추가 구매가 불가능합니다. 이용방법 : 본인의 포트폴리오 결과물(최대 3개) 및 질문(최대 3개)을 보내주시면 21일(영업일 기준) 이내로 피드백을 제공합니다. 이용기한 : 결제일로부터 90일 이내(이 후 이용권 소멸) 제출방식 : feedback@coloso.co.kr로 [본인의 콜로소 ID / 전화번호]를 적고, [포트폴리오 파일]을 첨부해 보내주세요. * 사전 예약 고객의 이용 기한은 결제일이 아닌 영상 오픈 후 90일 이내 * 각 강의별 피드백 내용이 다를 수 있으며, 멘토링 등 일부 코칭권은 사용 방법이 상이하니, 자세한 사항은 페이지 내의 코칭권 부분을 참고해 주시기 바랍니다.
[유의사항] - 기간 선택 옵션은 구매 시점부터 선택하신 옵션에 해당하는 기간만큼 수강이 가능하며, 일시정지 및 기간 연장이 불가합니다. - 기간 선택 옵션은 평생시청 옵션으로의 전환은 불가합니다. - 평생시청 옵션으로 수강을 원할 시 판매중인 평생시청 옵션을 구매하셔야 합니다. [환불규정] - 본 이벤트성 강좌는 특별강좌에 해당하며, 특별강좌에 대해서는 별도의 취소 환불규정이 적용될 수 있습니다. - 환불 금액은 정가가 아닌 실제 결제 금액을 기준으로 계산됩니다. - 재생 시간에 관계없이, 영상이 재생된 경우 수강한 것으로 간주합니다. *기간 선택 옵션에 대한 환불 규정은 아래와 같습니다. - 회원이 강의와 함께 제공되는 자료 또는 정보를 다운로드 하는 경우 해당 영상을 이용한 것으로 간주 합니다. - 결제 후 7일 이내, 3개 미만의 강의를 수강하신 경우 전액 환불이 가능합니다. - 결제 후 7일 이내, 3개 이상의 강의를 수강하신 경우 수강한 강의 수에 해당하는 금액 공제 후 환불이 가능합니다. (% 차감) 예) 10개 중 3개를 수강하신 경우 결제 금액에서 30% 차감 후 환불 - 결제 후 7일 초과 시에는 환불이 불가합니다