인터랙티브 웹사이트로 만드는 디자인 포트폴리오 Class Details
끝까지 구경하고 싶어지는
포트폴리오 웹사이트를 위한
디자인&코딩 스킬

이미지와 내용만 갈아끼우는
유료 템플릿을 사용하는 것이 아닌,
클릭하면 상호 작용까지
일어나는 참여형 웹사이트를
직접 제작하고 싶으셨나요?
개발의 영역에 발 들이기
무서웠던 입문자 분들도 본인만의
커스텀 인터랙티브 웹사이트를
구현할 수 있도록 그래픽 디자이너
박하늘, 고윤서가 준비했습니다.

Figma, Visual Studio Code 등의
핵심 툴 환경 세팅법부터 프로토타입
설정 방식, 기초적인 크리에이티브 코딩
및 퍼블리싱과 호스팅 프로세스까지
종류별 웹사이트 예제를 통해 배워보세요.
기존 작업물의 특성을 반영한
감각적이면서도 접근성 좋은 웹사이트
완성과 더불어 업데이트 내용이
생길 때마다 효율적으로 아카이빙하는
시스템도 구축할 수 있게 도와드리겠습니다.

클래스 정보
영상 43회
강의 시간: 한 회차당
약 35분 내외
난이도: 초·중급
평생 시청

사용 프로그램
Figma
Visual Studio Code
MAMP
FileZilla
Adobe Illustrator
Node.js

동영상 정보
온라인 VOD
오디오: 한국어
자막: 없음

클래스 혜택
1. 피그마 예제 파일
2. 예제 사용 소스
3. 코드 원본 파일
(HTML,CSS, JavaScript)
클래스 추천
이런 분들에게 추천합니다
테크닉과 전문성을 보여줄 수
있는 포트폴리오가 필요한
시각 디자인 전공생
작업물 아카이빙에 효과적인
웹사이트를 만들고 싶은
그래픽 디자이너
웹 디자인과 퍼블리싱 역량을
동시에 향상시키고자 하는
코딩 및 개발 입문자
이번 클래스에서는
총 11가지의 웹사이트
예제를 직접 만들어봅니다
Part 01. 웹사이트 디자인&구현
피그마를 활용하여 웹사이트를 디자인해보고,
최종적으로 웹사이트의 퍼블리싱부터
호스팅까지 마무리해봅니다.
-
피그마로 만드는 웹사이트 디자인: 데스크탑 ver.
-
피그마로 만드는 웹사이트 디자인: 모바일 ver.
-
최종 결과물
Part 02. 인터랙티브 웹사이트
웹 개발에 필요한 HTML, CSS, JavaScript
기초를 익히고, 글의 분량 및 개설 목적에 따라
상호작용 하는 웹사이트를 만들어봅니다.
* 위 결과물은 해당 클래스에서 직접 만들게 될 실제 예제들입니다.
클래스 완주 후
데스크탑/모바일 버전 웹사이트와
포트폴리오용 인터랙티브 웹사이트까지
온전히 내 것으로 만들 수 있습니다.

로드맵
인터랙티브 웹사이트 포트폴리오 Class


Coloso CLASS는 교육 기획자가 고객의 니즈에 맞는
교육을 만들기 위해
기존 Coloso 강의를 재구성한
실무 집중 커리큘럼 코스입니다.
각 과정을 따로 듣고 싶다면?
클래스 특징
양방향 소통 콘텐츠를 위한
웹 디자인 및 코딩 입문&심화
시각적 구현 역량과 웹사이트 개발 스킬을 한꺼번에 보유해 디자이너와 개발자 사이의 경계를 모호하게 만드는 제너럴리스트로 성장할 수 있도록 단계별로 차근차근 알려드립니다.

기획부터 완성까지 웹사이트
제작에 필요한 핵심 툴
디자인 업계에서 필수로 사용되고 있는 피그마와 어도비 일러스트레이터는 물론 Visual Studio Code와 MAMP, FileZilla, Node.js 등 생소할 수 있는 소프트웨어의 주요 기능 및 활용법을 배워봅니다.

실제 웹사이트로 트렌디하게
선보이는 디자인 포트폴리오
예시로 얹어놓은 목업이 아닌 진짜로 연결되는 웹사이트를 직접 디자인하고 구현하는 모든 프로세스 경험을 통해 본인만의 특별한 웹사이트 포트폴리오를 제작하여 경쟁력을 확보해봅니다.

웹사이트 디자인부터 코딩 기초까지
수많은 경쟁자들 중 단연 돋보이는
웹사이트 포트폴리오를 위한 스킬을
업계 탑티어 연사들에게 배워보세요
스튜디오 바톤에서 웹사이트 디자인
및 개발 업무를 주로 담당하고 있는
그래픽 디자이너 박하늘과 디자인 업계에서 유명한
일상의실천 출신 그래픽 디자이너 고윤서만의
특별한 노하우를 Coloso에서 단독 공개합니다.
연사 소개
유명 브랜드 및 기업들의 웹사이트
트렌드를 이끄는 독보적인 행보!

그래픽 디자이너 박하늘
현) 스튜디오 바톤 UI 디자이너
현) 프리랜서 디자이너
이력 및 경력
[그래픽 디자인]
2022 '다리없는산책', 'SMile Music Festival', '시계의 손'
[웹사이트 디자인]
2022 '파사드패턴', '모어비전', '매거진B'
2021 '오설록 브랜드 스토리 & 다다일상', 'HEIGHTS'
[웹사이트 디자인 및 개발]
2022 'Look Who's Talking', '어퍼하우스 VIP 라운지', 'Eugene Jung', '서울신문 인터랙티브 기사'
2020 '이름행진'

그래픽 디자이너 고윤서
현) 크리에이티브 디자인 스튜디오 YYY 대표
현) 그래픽 웹 실험 비영리 그룹 HHHA 소속
전) 그래픽디자인 스튜디오 일상의실천 디자이너/개발자
전) 주식회사 올마이투어 디자이너/개발자
이력 및 경력
[웹사이트 개발]
'네이버나눔스퀘어네오', '씨네21 보도', '수장고', '2021서울도시건축비엔날레', '서울독립영화제 웹사이트', '서울디자인페스티벌', '예술청'
[전시]
2022 일본 도쿄 Same Gallery 'POST-IT'
2022 한국 서울 보안1942 '가든.로컬'
[수상]
2022, 2021 Asia Design Prize
[강연 및 인터뷰]
2022 한국타이포그라피학회 T/SCHOOL 2022
2022 월간 디자인 2022년 10월호 표지 및 ‘완전함에 반항하기’ 섹션
2022 최태윤스튜디오 인터랙티브 코딩 클래스 아티스트 토크
2022 It's Nice That
2022 월간 디자인 2022년 4월호 디자인으로 채우는 A to Z, 알파벳 프로젝트
클래스 구성
이런 것을 배웁니다
-
프로토타입 구현 및 구조 설계피그마를 활용하여 알아두면 쓸모 있는 여러 프로토타입 테크닉을 익혀보고, 디바이스의 크기와 비율에 따라 변화하는 웹사이트 구조도 파악해봅니다.
-
커스터마이징하는 워드프레스 테마로컬의 워드프레스와 VS Code 작업 환경을 설정한 뒤, 페이지별 html과 css를 설계하고 CMS를 연결하여 원하는 디자인의 웹페이지를 만들어봅니다.
-
알맞은 콘텐츠 가공 노하우포트폴리오 매체별 관리 방법과 추출한 포맷에 적합한 가공 스킬을 얻어가봅니다. 또한 웹사이트를 구조화시켜 손쉬운 아카이빙 관리 시스템을 구축해봅니다.
-
디지털 인터랙션 용법과 종류웹사이트 디자인을 극대화시켜주는 크리에이티브 코딩의 개념에 대해 순차적으로 자세히 알아보고, 유용한 웹 개발 사례까지 확인해봅니다.
-
다양한 종류의 반응형 웹사이트css와 쿼리를 통해 디바이스의 크기에 따라 달라지는 웹사이트를 구현해보면서 스크린 타이포그래피와 날씨 API, 웹 그림판 등의 활용법을 익혀봅니다.
-
효율적인 실무 워크 프로세스각종 혼합 모드 및 애니메이션, 함수 등을 사용하는 실질적인 개발 과정과 더불어 웹사이트 호스팅 및 외부에 효과적으로 공유하는 방식도 알아봅니다.
커리큘럼
커리큘럼을 보여드려요

Part 01. 독창적인 포트폴리오 웹사이트 만들기
그래픽 디자이너 박하늘

Part 02. 디자인이 돋보이는 인터랙티브 웹사이트 만들기
그래픽 디자이너 고윤서
인터뷰
박하늘, 고윤서

이번 강의에서 연사님만의
강점/차별점이 있나요?
[박하늘]
저는 주로 그래픽 디자인 작업을 해오다가 우연히 UI 디자이너로 일하게 되면서 기능을 따르는 형태에 대한 감각을 키울 수 있었습니다. 적당한 사용성과 적당한 재미를 모두 갖춘 웹사이트를 처음부터 디자인하고 끝까지 구현해 본 경험이 저의 강점이자 차별점이라고 생각합니다. 피그마를 다루는 목차에서 효율적이면서도 자유로운 웹사이트 디자인 프로세스를 공유하고자 합니다.
[고윤서]
디자인과 웹 개발의 영역을 동시에 진행하는 것입니다. 웹사이트 생태계를 비롯한 사용자와의 소통 방식을 이해하고 있기 때문에, 일반적인 사용자 경험에서부터 특별함을 줄 수 있는 영역까지 동시에 고민하죠. 저는 두 가지 포지션을 함께 수행해왔으므로 실무에서 각 영역이 어떤 능력을 요구하는지, 그리고 내용을 돋보일 수 있게 하는 인터랙션 디자인에 대한 지식을 알려드릴 수 있습니다.
이번 클래스의
주요 포인트는 무엇인가요?
[박하늘]
본인의 포트폴리오를 다각도로 탐색하여 그에 어울리면서도 지속적이고 쉬운 업데이트 체계를 마련하는 부분입니다. 또한 디자인부터 구현까지 웹사이트 제작에 필요한 전체 프로세스를 넓고 얇게나마 경험해 볼 수 있다는 점과 기성 템플릿이나 테마를 사용하지 않고 디자인 자유도가 높은 구현 방식을 학습해 보는 것 또한 중요한 포인트라고 생각합니다.
[고윤서]
그래픽 디자인, 그리고 이를 실현할 수 있는 웹사이트를 직접 제작하는 실무 중심 강의라는 점입니다. 디지털 기기 인터랙션에 대한 이해와 용법, 그리고 웹 개발의 기초부터 API 사용 등 심도있는 부분까지 모두 다루게 되죠. 코딩이 처음인 분들도 자신만의 특별한 웹사이트를 만들 수 있을 뿐만 아니라 인터랙션을 연구하고 직접 적용하는 개발 단계까지 스스로 체험해볼 수 있을 것입니다.
어떤 분들에게
이번 클래스를 추천하나요?
[박하늘]
자신의 작업 과정과 결과물을 지속해서 정리해 보여주는 습관, 그리고 그로 인해 만들어질 아카이브를 얻어 가셨으면 좋겠습니다. 잘 정리된 아카이브는 직접적으로나 간접적으로 도움이 되기 때문입니다. 추가로 웹사이트 디자인과 구현이 생각만큼 어렵지 않고 재미있어서 더 학습해보고자 하는 마음도 조금이나마 얻어 가실 수 있기를 바라겠습니다.
[고윤서]
다양한 디지털 기기가 점차 대중화되고 확대됨에 따라, 정적인 디자인을 벗어난 인터랙티브 웹사이트의 영역이 점점 확장되고 있습니다. 이제까지는 고정된 템플릿 아래에서 웹을 구축해왔다면, 지금부터는 개성적이고 독특한 웹사이트가 출범하고 있죠. 이번 강의를 통해 본인만의 디자인을 실현할 수 있는 무기를 만들어보세요.
사용 프로그램
안내드립니다.
본 클래스는 아래 명시된 툴로 진행됩니다.
원활한 수강을 위해 최신 버전의 해당 프로그램을 별도로 구매 및 설치해주시길 바랍니다.
– Figma Desktop App version 116.2.4
– Visual Studio Code 1.71.1
– MAMP 6.6
– FileZilla 3.56.0
– Adobe Illustrator 2023
– Node.js 18.12.1
* Figma, Visual Studio Code, MAMP, FileZilla 소프트웨어는 무료 프로그램으로 최신 버전 다운로드가 가능합니다.
* Figma 2022 (116.4.4.) 이전 버전을 사용해도 지장이 없으나, Node.js는 15 이상 버전을 권장합니다.
* Adobe Typekit 활용을 위해 Adobe 라이센스가 필요하지만, 다른 폰트를 임베딩 하거나 시스템 폰트를 사용하는 방법을 강의 안에서 다룰 예정입니다.
* 프로그램 및 준비물은 별도로 제공하지 않습니다.

추천 클래스
당신이 놓치지 말아야 할
추천 클래스
지인과 함께 나눠 수강해도 될까요?
클래스 수강 중 다중사용으로 적발되면 계정이 자동 차단되며 영구적으로 사용 제한이 될 수 있으니 각별히 유의 바랍니다.
+ 더 알아보기
주의사항 및 환불규정
* 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
* 결제 완료를 하신 분들은 좌측 상단 [나의 강의장] 클릭 시 바로 영상 시청하실 수 있습니다. 기입해주신 이메일 주소와 연락처로 결제 완료 및 수강 안내 이메일과 문자가 전송될 예정이니 연락처와 이메일을 정확하게 기입 부탁드립니다.
총 학습기간
정상 수강기간(유료 수강기간) 최초 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대의 기기는 로그인 후 영상 재생과 동시에 자동 등록됩니다.)
강의 수강권 + 1:1 코칭권 패키지 안내
1:1 코칭권이란?
<1:1 코칭권>을 구매한 수강생에게는 연사님이 포트폴리오와 질문사항에 피드백을 제공합니다.
본 상품은 강의 수강권 구매시 1회 구매 및 이용가능하며, 추가 구매가 불가능합니다.
이용방법 : 본인의 포트폴리오 결과물(최대 3개) 및 질문(최대 3개)을 보내주시면 30일(영업일 기준) 이내로 피드백을 제공합니다.
이용기한
: 영상 공개 전 - 영상 공개일 기준 90일 이내 사용 가능
: 영상 공개 후 - 결제일로부터 90일 이내(이후 이용권 소멸)
제출방식 : feedback@coloso.co.kr로 [본인의 콜로소 ID / 전화번호]를 적고, [포트폴리오 파일]을 첨부해 보내주세요.
* 사전 예약 고객의 이용 기한은 결제일이 아닌 영상 오픈 후 90일 이내