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

소개 영상
그래픽 디자이너, 박하늘

“밀려있는 포트폴리오 정리,
효율적으로 관리할 방법을 찾고 계신가요?
지속적인 업데이트가 용이하면서도
나만의 개성을 담은 웹사이트 제작법을 공개합니다."

나의 포트폴리오에 날개를 달아줄
커스텀 포트폴리오 웹페이지 제작법

마음에 쏙 드는 웹사이트를 갖고 싶지만
기성 템플릿과 테마는 성에 안 차고
직접 만들기엔 막막했던 경험이 있으신가요?

그래픽 디자이너이자
웹디자이너로 활동하고 있는
스튜디오 바톤 소속의 박하늘 디자이너가
나만의 웹사이트를 만들기 위한
프로세스를 상세하게 알려드립니다.

초기 단계부터 명확한 기획,
피그마를 활용한 손쉬운 디자인,
간단명료한 퍼블리싱 과정과
효율적인 관리를 위한 CMS* 구축까지
전 과정을 경험해 보세요.

아카이빙이 용이하고
내 개성이 듬뿍 담긴 웹사이트는
디자이너로서 갖출 수 있는
또 하나의 포트폴리오입니다.

*CMS(Contents Managing System)란 콘텐츠 관리 시스템으로, 자료 관리 및 업데이트를 편리하게 만들어줍니다.

클래스 정보

영상 22편
강의 시간: 한 회차 당
약 30분 내외
난이도: 초중급
평생 시청

사용 프로그램

[사용 툴]
Figma Desktop App version 116.2.4
Visual Studio Code 1.71.1
MAMP 6.6
FileZilla 3.56.0

*모든 소프트웨어는 무료 프로그램으로 최신 버전 다운로드가 가능합니다.

동영상 정보

온라인 VOD
오디오: 한국어
자막: 없음

클래스 혜택

1. 피그마 예제 파일
2. 예제에 사용된 자료

웹사이트 디자인 및 구현부터
그래픽 디자인까지 아우르는
박하늘 디자이너의 포트폴리오

그래픽디자인

웹디자인

그래픽 디자이너 박하늘의
클래스가 특별한 이유

코딩을 처음 해보지만
자유롭게 디자인을 담고 싶은
디자이너들을 위한
커리큘럼과 실습 예제

포트폴리오 웹사이트를 만들 때
사용성만을 중심으로 만들다 보면
웹사이트가 따분해지기 쉽고,
시각적인 임팩트만을 강조하다 보면
어렵기만 한 웹사이트가 되어버립니다.

사용성과 재미를 조화롭게 갖춘
즉, 지속적인 업데이트가 용이하면서도
내 포트폴리오를 매력 있게 담아내는
나만의 웹사이트를 만들어보고 싶다면,

코딩이 익숙하지 않은 디자이너의
눈높이에 맞춘 친절한 설명과
3개의 구체적인 실습을 통해
기획 단계부터 최종 구현까지
차근차근 따라 해보세요.

본 클래스에선
웹사이트 디자인부터 완성까지
모든 과정을 학습해봅니다.

Part 01. 피그마로 만드는 웹사이트 디자인

피그마로 만드는 웹사이트 디자인: 데스크탑 ver.
피그마로 만드는 웹사이트 디자인: 모바일 ver.

Part 02. 최종적으로 구현하는 웹사이트(퍼블리싱부터 호스팅까지)

최종 결과물

사이트 구경하기

* 위 결과물은 해당 클래스에서 직접 만들게 될 실제 예제들입니다.

박하늘
그래픽 디자이너

안녕하세요, 그래픽 디자이너 박하늘입니다.

저는 현재 스튜디오 바톤에서 UI 디자이너로 일하며,
다양한 분야의 브랜드를 위한 웹사이트 작업에 참여하고 있습니다.

동시에 프리랜서 디자이너로 활동하면서,
그래픽 디자인, 전시 디자인, 웹사이트 디자인과 구현까지
온 오프라인의 여러 매체를 통해 작업하고 있습니다.

만들어져있는 템플릿에 의존하지 않고
온전히 나만의 콘텐츠에 맞춘
개성 있는 포트폴리오 웹사이트를 만들어보시길 바랍니다.

그래픽 디자이너 박하늘

현) 스튜디오 바톤 UI 디자이너
현) 프리랜서 디자이너

이력 더 보기

[참여 프로젝트(스튜디오 바톤)]
'파사드패턴' 웹사이트 디자인 2022
'모어비전' 웹사이트 디자인 2022
'매거진B' 웹사이트 디자인 2022
'오설록 브랜드 스토리 & 다다일상' 웹사이트 디자인 2021
'HEIGHTS' 웹사이트 디자인 2021

[참여 프로젝트(프리랜서)]
'다리없는산책' 그래픽 디자인 2022
'Look Who's Talking' 웹사이트 디자인 및 개발 2022
'어퍼하우스 VIP 라운지' 웹사이트 디자인 및 개발 2022
'SMile Music Festival' 그래픽 디자인 2022, 2020
'시계의 손' 그래픽 디자인 2022
'Eugene Jung' 웹사이트 디자인 및 개발 2022
'서울신문 인터랙티브 기사' 웹사이트 디자인 및 개발 2022
'이름행진' 웹사이트 디자인 및 개발 2020

Instagram

클래스 특징

지속 가능한 포트폴리오
관리 시스템 만들기

항상 미루게 되는 포트폴리오 정리. 웹사이트를 통해 구조화하여 지속 가능하고 손쉬운 '매체별 포트폴리오 관리 시스템'을 만들어보세요.

코딩 입문자도 OK,
실습하며 배우는 제작 노하우

코딩이 처음이거나 코딩의 벽에 부딪혀 본 분들도 기획부터 최종 호스팅까지 단계별로 따라 하다 보면 어느새 하나의 웹사이트를 완성하게 됩니다.

나만의 아이덴티티를 담은
포트폴리오 웹사이트

템플릿으로 웹사이트를 만들면 편리하지만, 한편으로는 아파트와 같이 천편일률적인 모습을 띠게 됩니다. 템플릿 없이 나만의 개성과 구조를 가진 단독주택 같은 웹사이트를 만드는 방법을 배워보세요.

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

개성을 표현하는 웹사이트 기획

웹사이트의 목적과 방향성을 설정하고 적당한 사용성과 개성을 고려한 와이어 프레임을 만들어봅니다.
따라 하며 배우는 피그마 입문

피그마의 프레임, 오토 레이아웃 등 주요 기능의 작동 방식을 이해하고 실습 예제를 통해 기본 기능을 빠르게 익혀봅니다.
디테일한 프로토타입 제작법

유용한 프로토타입 기능과 트릭들을 살펴보며 실제로 구현할 웹사이트에 가깝고 디테일한 프로토타입 제작법을 배워봅니다.

반응형 웹사이트 구조 설계

다양한 비율과 크기의 디바이스 환경에서 유연하게 동작하는 반응형 웹사이트 구조를 살펴봅니다.
직접 워드프레스 테마 만들기

빌더나 테마를 사용하지 않고 비교적 간단하게 원하는 디자인으로 직접 워드프레스 테마를 만들어봅니다.
포맷별 포트폴리오 콘텐츠 가공 방식

인스타그램, 웹사이트, PDF 등 다양한 포맷으로 포트폴리오를 게시할 때 콘텐츠를 가공하는 팁을 살펴봅니다.

평생시청
최저가

한번 구매로, 평생 시청하세요.
(자동 구성) 가격이 인상됩니다.

조만간 가격이 인상될 예정입니다.
지금 구매하세요!

지금이 최저가!

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

SECTION 01. Intro

01. 강의 소개

연사 소개
커리큘럼 소개
사용 프로그램 소개

SECTION 02. 포트폴리오 웹사이트 만들기 - 준비

02. 웹사이트를 만드는 방법들

플랫폼, 빌더, 템플릿 살펴보기
상황에 맞는 제작 방식 알아보기

03. 웹사이트 기획 및 리서치

목적 및 방향성 설정
와이어프레임 설계 및 인상 키워드 도출
웹사이트 리서치 및 분석

SECTION 03. 포트폴리오 웹사이트 만들기 - 디자인

04. 피그마로 만드는 웹사이트 디자인: 피그마

피그마 파일 설정
프레임 구조 이해하기
기본/주요 기능 살펴보기

05. 피그마로 만드는 웹사이트 디자인: 데스크탑1

데스크탑 기본 레이아웃, 프로토타입 설정

06. 피그마로 만드는 웹사이트 디자인: 데스크탑2

데스크탑 메인 페이지 디자인

07. 피그마로 만드는 웹사이트 디자인: 데스크탑3

데스크탑 소개 페이지 디자인
데스크탑 상세 페이지 디자인

08. 피그마로 만드는 웹사이트 디자인: 모바일1

모바일 기본 레이아웃, 프로토타입 설정
모바일 메인 페이지 디자인

09. 피그마로 만드는 웹사이트 디자인: 모바일2

모바일 소개 페이지 디자인
모바일 상세 페이지 디자인
프로토타입 디테일 올리기

SECTION 04. 포트폴리오 웹사이트 만들기 - 구현

10. 자료 준비

웹사이트 구현을 위한 디자인 자료 준비
Lottie 애니메이션 제작 과정 살펴보기

11. 작업 환경 세팅

로컬에서 워드프레스 작업 환경 설정하기
VSCode 작업 환경 설정하기

12. 웹사이트 구조 파악

워드프레스 테마 구조 살펴보기
디자인과 테마 구조 비교하기

13. 웹사이트 구현: 퍼블리싱1

기본 파일 구조 설정
반응형 css 이해하기
Header & Footer 설계

14. 웹사이트 구현: 퍼블리싱2

메인 페이지 html 설계 #1
메인 페이지 css 설계 #1

15. 웹사이트 구현: 퍼블리싱3

메인 페이지 html 설계 #2
메인 페이지 css 설계 #2

16. 웹사이트 구현: 퍼블리싱4

소개 페이지 추가하기
소개 페이지 html 설계
소개 페이지 css 설계

17. 웹사이트 구현: CMS1

상세 페이지 추가하기
커스텀 포스트 타입 만들기

18. 웹사이트 구현: 퍼블리싱 5

상세 페이지 html 설계
상세 페이지 css 설계

19. 웹사이트 구현: CMS2

메인 페이지 필드 설정 및 CMS 연결
소개 페이지 필드 설정 및 CMS 연결
상세 페이지 필드 설정 및 CMS 연결

20. 웹사이트 구현: CMS3

언어 변경 기능 추가하기
콘텐츠 업로드하기
마무리 설정

21. 웹사이트 구현: 호스팅

데이터 백업
호스팅 연결

SECTION 05. Outro

22. 다양한 활용 가능성

다른 구조의 웹사이트 살펴보기
포트폴리오 매체별 관리 방법 살펴보기
완성한 웹사이트 매체별로 가공하기

그래픽 디자이너 박하늘과의 SNS 이벤트!

클래스를 듣고 수강생 여러분들만의 개성이
담긴 예제들을 인스타그램에 지정된
해시태그와 함께 올려주시면, 수상작이
있을 경우 월 최대 3명을 뽑아 쿠폰을 지급해드립니다.

#콜로소박하늘 #피그마 #웹사이트제작 + 콜로소 계정(@coloso_official) 계정 태그

*올려주신 게시물은 광고로 활용될 수 있습니다. 이를 원하지 않으시는 분은 게시물에 표기 부탁드립니다.

인터뷰
그래픽 디자이너 박하늘이
하고 싶은 이야기

Question. 01
이번 강의의 핵심 포인트는 무엇인가요?

자신의 포트폴리오를 다각도로 탐색하여 그에 어울리면서도 지속적이고 쉬운 업데이트 체계를 마련하는 부분입니다. 또한 디자인부터 구현까지 웹사이트 제작에 필요한 전체 프로세스를 넓고 얇게나마 경험해 볼 수 있다는 점과 기성 템플릿이나 테마를 사용하지 않고 디자인 자유도가 높은 구현 방식을 학습해 보는 것 또한 중요한 포인트라고 생각합니다.

Question. 02
강사님의 강점 혹은 차별점은 무엇이라고 생각하시나요?

저는 주로 그래픽 디자인 작업을 해오다가 우연히 UI 디자이너로 일하게 되면서 기능을 따르는 형태에 대한 감각을 키울 수 있었습니다. 적당한 사용성과 적당한 재미를 모두 갖춘 웹사이트를 처음부터 디자인하고 끝까지 구현해 본 경험이 저의 강점이자 차별점이라고 생각합니다. 피그마를 다루는 목차에서 적당한 사용성과 재미를 컨트롤하기 위한 효율적이면서도 자유로운 웹사이트 디자인 프로세스를 공유하고자 합니다.

Question. 03
수강생분들은 강의를 통해 무엇을 얻어 갈 수 있을까요?

자신의 작업 과정과 결과물을 지속해서 정리해 보여주는 습관, 그리고 그로 인해 만들어질 자신만의 아카이브를 얻어 가셨으면 좋겠습니다. 잘 정리된 아카이브는 직접적으로나 간접적으로 도움이 되기 때문입니다. 추가로 웹사이트 디자인과 구현이 생각만큼 어렵지 않고 재밌네? 더 배워볼까?라는 마음도 조금이나마 얻어 가실 수 있기를 바라겠습니다.

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

본 클래스는 Figma Desktop App version 116.2.4과 Visual Studio Code 1.71.1, MAMP 6.6, FileZilla 3.56.0로 진행됩니다.
원활한 수강을 위해 해당 버전의 프로그램을 설치해 주시길 바랍니다.

* 모든 소프트웨어는 무료 프로그램으로 최신 버전 다운로드가 가능합니다.
* 프로그램 및 준비물은 별도로 제공되지 않습니다.

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

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대의 기기는 로그인 후 영상 재생과 동시에 자동 등록됩니다.)

Search Input