Question.01
'웹 디자인' 분야에 있어서 스스로의 강점은 무엇이라고 생각하시나요?
그래픽디자이너 고윤서 Details
클래스 소개
소개 영상
그래픽 디자이너, 고윤서
“나의 디자인을 더 돋보이게 하는
웹사이트를 만들고 싶으신가요?
디자이너를 위한 코딩 강의,
지금 바로 시작합니다.”
디자인의 매력을 한층 더
돋보이게 만들 방법!
웹 디자인&코딩 입문 클래스
디자인과 개발, 프로그래밍과
시각 예술을 접목한 환상적인
결과물로 이목을 집중시키는
"크리에이티브 코딩"의 세계!
그러나 어려워 보인다는 이유로,
프로그래밍 경험이 없어서
시도조차 못 하고 있으셨나요?
실무급 퀄리티의 7가지 예제를 기반으로
개발 환경 세팅부터 그래픽,
애니메이션, API, 실험적인 디자인의
인터랙티브 웹사이트 구축까지!
수많은 기업과 단체의 웹사이트
디자인/개발을 담당한 고윤서 디자이너의
온라인 커리큘럼에서 이 놀라운
스킬과 노하우를 모두 경험해보세요.
웹 디자인&코딩 용어 길라잡이
HTML / CSS / JavaScript 란?
본 강의에서 HTML은 웹의 구조와 의미를 부여하고, CSS는 웹에서 표시되는 모습을 꾸며주며, JavaScript는 브라우저의 이벤트 처리와 조작을 담당합니다.
Visual Studio Code 란?
코드를 보다 편리하게 편집할 수 있도록 도와주는 소스 코드 편집기이며, 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있습니다.
클래스 정보
영상 21회
강의 시간: 한 회차 당
약 60분 내외
난이도: 초중급
평생 시청
사용 프로그램
- Figma 2022 (116.4.4.)
- Visual Studio Code
- Adobe Illustrator 2023
- Node.js 18.12.1
동영상 정보
온라인 VOD
오디오 : 한국어
자막 : 없음
클래스 혜택
- 실습 예제 원본 파일 (fig)
- 실습 예제 소스 코드 원본 (HTML,CSS, JavaScript)
디자인 스튜디오 YYY 대표
고윤서의 포트폴리오
그래픽 디자이너 고윤서의
클래스가 특별한 이유
대세 중의 대세!
7가지 인터랙티브 웹사이트 예제 총정리
단지 나의 디자인을 사이트에 얹는 것에
그치는 웹개발 입문 강의가 아닙니다.
유저와 웹사이트 속 그래픽이
실시간으로 상호작용하며 환상적인
사용자 경험을 제공하는
"인터랙티브 웹 디자인/개발"
온라인 클래스입니다.
네이버, 앰네스티, 서울독립영화제 등
수많은 인터랙티브 웹사이트를 담당한
그래픽 디자이너 고윤서의 클래스에서는
디자인 뿐 아니라 코딩, 모션, 웹 퍼블리싱 등
수많은 분야가 융합된 7가지 인터랙티브
웹사이트 예제를 직접 경험할 수 있습니다.
코딩 분야에 입문하고 싶은
그래픽 디자이너는 물론
디자인과 퍼블리싱 능력을 동시에
성장시키고 싶은 현직 개발자까지
모두를 위한 프리미엄 클래스를
지금 콜로소에서 확인해보세요.
7가지 웹사이트 예제를 통해
인터랙티브 웹 디자인&코딩
프로세스를 학습해봅니다
반응형 웹 기초
웹 명함 (링크트리)
날씨에 따라 변화하는
인터랙티브 포스터 (맑음)
날씨에 따라 변화하는
인터랙티브 포스터 (구름)
날씨에 따라 변화하는
인터랙티브 포스터 (눈)
날씨에 따라 변화하는
인터랙티브 포스터 (비)
유저가 직접 스탬프 포스터를
만드는 웹 그림판 01
유저가 직접 스탬프 포스터를
만드는 웹 그림판 02
이미지를 클릭하면 실제 구현된 웹사이트를 확인할 수 있습니다
연사 소개
고윤서
그래픽 디자이너
안녕하세요, 디자인 스튜디오
YYY 대표 고윤서입니다.
저는 디자인 스튜디오 "일상의실천"에서
디자이너 겸 개발자로 근무했고,
이후 그래픽 웹 실험 그룹 HHHA에서
친숙한 사용자 경험을 제공하면서도
돋보일 수 있는 디자인을 고민해왔는데요.
현재는 인터랙티브 웹사이트의 대중화를 위해
보다 직접적인 솔루션을 제공하는
다양한 제품을 생산하고 있습니다.
또한 개발 및 디자인에 그치지 않고
각종 강연 및 워크샵을 통해
저만의 경험과 노하우도
함께 전달하고 있습니다.
그래픽 디자이너 고윤서
현) 크리에이티브 디자인 스튜디오 YYY 대표
현) 그래픽 웹 실험 비영리 그룹 HHHA 소속
전) 그래픽디자인 스튜디오 일상의실천 디자이너/개발자
전) 주식회사 올마이투어 디자이너/개발자
이력 더보기
[참여 프로젝트]
[웹사이트]
네이버나눔스퀘어네오 (개발)
씨네21 보도 (인터랙션 디자인/개발)
수장고 (개발)
2021서울도시건축비엔날레 (개발)
서울독립영화제 웹사이트 (개발)
서울디자인페스티벌 (개발)
예술청 (개발)
[전시]
2022 〈POST-IT〉, Same Gallery, Tokyo, Japan
2022.11 〈가든.로컬〉, 보안1942, 서울
[수상]
Asia Design Prize 2021, 2022
[강연/인터뷰]
2022 한국타이포그라피학회 T/SCHOOL 2022
2022 월간<디자인> 2022년 10월호 표지 및 ‘완전함에 반항하기’ 섹션 - YYY 고윤서
2022 최태윤스튜디오 인터랙티브 코딩 클래스 아티스트 토크
2022 It's Nice That
2022 월간<디자인> 2022년 4월호 디자인으로 채우는 A to Z, 알파벳 프로젝트, HHHA
클래스 특징
클래스 특징
실험적인 그래픽디자인 기반의
크리에이티브 코딩 입문
웹 사이트 구동을 위한 뼈대 구축부터 인터랙티브 요소가 있는 각종 사이트 제작법까지 익히며, 웹사이트에서 디자인을 돋보이게 하기 위한 HTML, CSS, JavaScript 개념을 학습해봅니다.
7가지 예제로 체화하는 웹 디자인 및 개발 프로세스
창의적인 디자인을 기반으로 사용자의 입력 값에 따라 반응하는 인터랙티브 웹사이트를 직접 설계하고, 실무에서만 알 수 있는 워크 프로세스를 7가지 다채로운 예제를 통해 단계별로 배워봅니다.
디지털 인터랙션에 대한
이해와 용법 익히기
그래픽디자인이 웹 공간 안에서 자유롭게 실현될 수 있도록, 사용자의 인터랙션을 통해 완성되는 양방향 소통 콘텐츠 구현법을 익혀봅니다.
클래스 구성
이런 것을 배웁니다
-
웹 개발 기초 및
인터랙션의 종류 및 활용디자이너를 위한 웹 개발 HTML, CSS, JavaScript 기초를 학습하고, 웹 인터랙션의 종류와 활용 사례들을 알아봅니다. -
디바이스 크기에 따라 변형되는
반응형 웹사이트다양한 디바이스에서 사용자의 편의성에 맞는 웹사이트를 만들기 위한 CSS 단위와 쿼리를 알아보고, 많은 텍스트 정보를 가진 웹사이트 구현을 위해 필요한 스크린 타이포그래피 지식을 익혀봅니다. -
디자인이 돋보이는
링크트리 명함과 소개서피그마에서 디자인 소스를 추출한 뒤 각종 혼합 모드 및 애니메이션, 함수 사용을 통해 접속 때마다 다르게 표현되는 웹사이트를 구현합니다.
-
API 개념이 적용된
날씨 포스터 예제날씨 데이터를 통해 API의 기본 개념을 학습하고, 받아온 데이터를 바탕으로 웹에서 그래픽을 동적으로 구현해봅니다. -
사용자가 포스터를 만들고
공유하는 웹사이트HTML canvas에 대해 학습하고 웹 그림판을 만들어봅니다. Google Firebase를 통해 웹사이트를 호스팅하고 외부에 공유하는 방법을 배워봅니다. -
인터랙티브 웹의 가능성과
효율적인 개발 노하우인터랙티브 웹으로 표현할 수 있는 다양한 콘텐츠를 살펴보고 앞으로의 마인드셋 및 공부 방향성, 개발 과정/시간을 효율적으로 단축시킬 수 있는 방법을 알아봅니다.
- 평생시청
- 최저가
한번 구매로, 평생 시청하세요.
(자동 구성) 가격이 인상됩니다.
조만간 가격이 인상될 예정입니다.
지금 구매하세요!
지금이 최저가!
커리큘럼
커리큘럼
커리큘럼을 보여드려요
Section 01. 오리엔테이션 및 개발 환경 세팅
01. 오리엔테이션
- 웹으로 할 수 있는 것, 인터랙티브 웹이란
- 사용하는 툴, 알아볼 언어 소개
02. 디자인 툴 및 플러그인 설치&개발 환경 세팅
- HTML Live Viewer 플러그인 설치
- CSS 전처리기 사용을 위한 플러그인 설치
- Node.js, npm 설치
- VS Code 환경 커스터마이징
Section2 : 웹 개발의 첫 단추: HTML, CSS, JavaScript 살펴보기
03. 반응형 웹 사이트 구축하기
01 : 글이 많은 웹사이트
- 디자인 파일 분석 (폰트 사이즈, 간격, 그리드)
- HTML이란: HTML 마크업과 태그 알아보기
- CSS란: CSS 연결하기
- CDN이란: 폰트 연결하기
04. 반응형 웹 사이트 구축하기
02 : 글이 많은 웹사이트
- Inspector로 스타일 미리보기 (피그마와 함께 보기)
- CSS 단위 알아보기 (px, rem, em, vw, vh)
- 그리드에 맞게 CSS 스타일링하기
- media query로 반응형 구현하기
05. 웹 명함 구축하기 01: 글이 적은 웹사이트
- 디자인 파일 분석 (폰트 사이즈, 간격, 그리드)
- 디자인 프로그램에서 에셋(자산) 내보내는 방법
- HTML 마크업, 태그 Recap
- 사이트 이동하기
06. 웹 명함 구축하기 02: 글이 적은 웹사이트
- HTML SVG태그 기초
- CSS 키프레임 애니메이션
- JavaScript란, JavaScript 연결하기
- JavaScript 변수와 함수, 그리고 데이터 타입
07. 웹 명함 구축하기 03: 글이 적은 웹사이트
- JavaScript Math.random()에 대한 이해
- JavaScript로 DOM 조작하기
Section 03. 날씨에 따라 변화하는 웹사이트 구축하기
08. 날씨 API로 날씨에 따라 바뀌는 웹 포스터 만들어보기 01
- 디자인 파일 분석 (폰트 사이즈, 간격, 그리드)
- SVG 벡터 디자인 그대로 웹사이트에 적용하기
- HTML 마크업 01
- CSS 스타일링 01
09. 날씨 API로 날씨에 따라 바뀌는 웹 포스터 만들어보기 02
- HTML 마크업 02
- CSS 스타일링 02
10. 날씨 API로 날씨에 따라 바뀌는 웹 포스터 만들어보기 03
- JavaScript Event Listener의 이해 (1)
- Event에 따른 DOM 스타일 조작
11. 날씨 API로 날씨에 따라 바뀌는 웹 포스터 만들어보기 04
- JavaScript Event Listener의 이해 (2)
- Event에 따른 DOM 생성과 삭제
12. 날씨 API로 날씨에 따라 바뀌는 웹 포스터 만들어보기 05
- API에 대한 이해, 그리고 json
- HTTP Request Method
- OpenWeath API으로 날씨정보 받기
13. 날씨 API로 날씨에 따라 바뀌는 웹 포스터 만들어보기 06
- API에 따른 비주얼 구현
Section 04. 웹 그림판을 만들고 이미지를 공유하는 웹사이트 구축하기
14. 웹 그림판을 만들고 이미지를 공유하는 웹사이트 구축하기 01
- 디자인 파일 분석 (폰트 사이즈, 간격, 그리드)
- Firebase 설치 및 구동
- Firebase Hosting 설정 및 배포
- HTML 마크업
- CSS 스타일링
15. 웹 그림판을 만들고 이미지를 공유하는 웹사이트 구축하기 02
- HTML 마크업
- CSS 스타일링
- JavaScript 연결
16. 웹 그림판을 만들고 이미지를 공유하는 웹사이트 구축하기 03
- JavaScript Event Listener
- JavaScript와 HTML canvas
17. 웹 그림판을 만들고 이미지를 공유하는 웹사이트 구축하기 04
- JavaScript와 HTML canvas (2)
- HTML canvas 이미지 저장하기
18. 웹 그림판을 만들고 이미지를 공유하는 웹사이트 구축하기 05
- Firebase Cloud Storage 설정
- Firebase Cloud Storage에 이미지 업로드하기
19. 웹 그림판을 만들고 이미지를 공유하는 웹사이트 구축하기 06
- Firebase Cloud Storage 데이터 받아오기
Section 05. 에필로그: 디자이너와 개발자의 경계에서
20. 부록
- 코드 파일의 정리와 관리
- settings.json 변경으로 작업 폴더마다 환경세팅하기
- 그 외 팁들
21. 공부 방향 소개
- 다른 구조의 인터랙티브 웹사이트 살펴보기
- 웹 개발을 학습할 수 있는 경로, 방향성 살펴보기
인터뷰
그래픽 디자이너 고윤서가
전하고 싶은 이야기
디자인과 웹 개발의 영역을 동시에 진행하는 것입니다. 웹사이트 생태계를 비롯한 사용자와의 소통 방식을 이해하고 있기 때문에, 일반적인 사용자 경험에서부터 특별함을 줄 수 있는 영역까지 동시에 고민하죠. 저는 두 가지 포지션을 함께 수행해왔기 때문에 실무에서 각 영역이 어떤 능력을 요구하는지, 그리고 내용을 돋보일 수 있게 하는 인터랙션 디자인에 대한 지식을 알려드릴 수 있습니다.
Question.02
이 강의만의 차별화된
포인트가 있다면 어떤 것일까요?
이 강의만의 차별화된
포인트가 있다면 어떤 것일까요?
특별함을 가지고 있는 그래픽디자인, 그리고 이를 실현할 수 있는 웹사이트를 직접 제작하는 실무 중심 강의라는 점입니다. 디지털 기기 인터랙션에 대한 이해와 용법, 그리고 웹 개발의 기초부터 API 사용 등 심도있는 부분까지 모두 다루게 되죠. 코딩이 처음인 분들도 자신만의 특별한 웹사이트를 만들 수 있을 뿐만 아니라, 인터랙션을 연구하고 직접 적용하는 개발 단계까지 스스로 체험해볼 수 있을 것입니다.
Question.03
수강생 분들에게 어떤 말을 전하고 싶으신가요?
수강생 분들에게 어떤 말을 전하고 싶으신가요?
다양한 디지털 기기가 점차 대중화되고 확대됨에 따라, 정적인 디자인을 벗어난 인터랙티브 웹사이트의 영역이 점점 확장되고 있습니다. 이제까지는 고정된 템플릿 아래에서 웹을 구축해왔다면, 지금부터는 개성적이고 독특한 웹사이트가 출범하고 있죠. 이번 강의가 자신만의 디자인을 실현할 수 있는 독특하고 매력적인 무기가 될 수 있도록 처음부터 이끌어드리겠습니다.
사용 프로그램
안내드립니다.
본 클래스는 아래 프로그램으로 진행됩니다.
원활한 수강을 위해 해당 프로그램을
별도로 설치해주시길 바랍니다.
- Figma 2022 (116.4.4.)
- Visual Studio Code
- Adobe Illustrator 2023
- Node.js 18.12.1
* Figma는 이전 버전을 사용해도 지장이 없으나,
Node.js는 15 버전 이상을 사용하셔야 합니다.
*Adobe Typekit 활용을 위해 Adobe 라이센스가 필요하나, 다른 폰트를 임베딩 하거나, 시스템 폰트를 사용하는 방법을 강의 안에서 다룰 예정입니다.
* 프로그램 및 준비물은 별도로 제공되지 않습니다.
추천
추천 클래스
당신이 놓치지 말아야 할
추천 클래스
Q. 한 계정으로 클래스를 구매해
지인과 함께 나눠 수강해도 될까요?
지인과 함께 나눠 수강해도 될까요?
Coloso는, 구매된 클래스영상을 구매자 한 사람에게만 제공하는 것을 원칙으로 하고 있으며, 이를 어길 시 법적으로 책임을 물을 수 있습니다.
클래스 수강 중 다중사용으로 적발되면 계정이 자동 차단되며 영구적으로 사용 제한이 될 수 있으니 각별히 유의 바랍니다.
+ 더 알아보기
클래스 수강 중 다중사용으로 적발되면 계정이 자동 차단되며 영구적으로 사용 제한이 될 수 있으니 각별히 유의 바랍니다.
+ 더 알아보기
주의사항 및 환불규정
* 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
* 결제 완료를 하신 분들은 좌측 상단 [나의 강의장] 클릭 시 바로 영상 시청하실 수 있습니다. 기입해주신 이메일 주소와 연락처로 결제 완료 및 수강 안내 이메일과 문자가 전송될 예정이니 연락처와 이메일을 정확하게 기입 부탁드립니다.
총 학습기간
정상 수강기간(유료 수강기간) 최초 2주(14일), 무료수강기간은 15일차 이후로 무제한이며,
수강기간과 무료수강기간 모두 동일하게 시청 가능합니다.
수강시작일
수강 시작일은 Coloso가 수강안내를 한 날짜부터 기간이 산정됩니다.
Coloso의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.
천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다.
재생 시간에 관계없이, 영상이 재생된 경우 수강한 것으로 간주합니다.
콘텐츠는 향후 당사의 일정에 따라 추가 또는 업데이트 될 수 있습니다.
환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다.
수강 시작 후 7일 이내 그리고 3강 미만 수강 시에는 100% 환불 가능합니다.
수강 시작 후 7일 이내이나 3강 이상 수강하신 경우, 또는 3강 미만 수강하셨으나 수강 시작 후 7일 초과인 경우 전액 환불 불가하고 수강 시 수강기간인 2주 (14일) 대비 잔여일에 대해 당사의 환불규정에 따라 아래와 같이 환불 가능합니다.
: 환불요청일시 기준 수강시작 후 7일 초과 10일 이하 경과 시, 실 결제금액의 1/2에 해당하는 금액을 환불
: 환불요청일시 기준 수강시작 후 10일 초과 시, 환불금액 없음
: 해당 환불규정은 1:1 코칭권에도 동일하게 적용됩니다.
단, 회원이 강의와 함께 제공되는 강의자료를 다운로드하는 경우 해당 자료 또는 정보가 포함된 회차의 클래스영상을 이용한 것으로 간주합니다.
*회차가 표기 되지 않은 자료는 무료로 제공됩니다.
영상 재생 가능 기기대수 제한
하나의 계정당 영상 재생 가능한 기기수를 3대로 제한 하며, 핸드폰 변경 등과 같은 사유로 등록된 사용 기기를 변경하고 싶으실 경우 help@coloso.co.kr로 문의주시면 연 1회에 한하여 기기 변경 도와드리도록 하겠습니다.
(등록하실 첫 3대의 기기는 로그인 후 영상 재생과 동시에 자동 등록됩니다.)