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

소개 영상
UX/UI 디자이너, 이성민

“합격률 99%를 이끌어낼 수 있었던
스킬과 노하우를 아낌없이 알려드립니다.”

창의적인 레이아웃 구성부터
인터랙션 디자인까지 UI 디자인
포트폴리오 제작의 A-Z

취직, 이직을 위한 포트폴리오 제작,
도대체 어디서, 어떻게 시작해야 할지
막막하신 분들을 위해 준비했습니다.

Adobe Behance에서 개인으로선
60회 이상 최다 큐레이팅에 선정된
UX/UI 디자이너 이성민님의
체계적인 UI 디자인 온라인 클래스!

타이포그래피와 서체 시스템과
Figma의 기능 이해 및 사용성 설계부터

로그인 및 회원가입 페이지와
상세 페이지와 결제 페이지를 포함한
5가지 모바일 화면의 앱 디자인 실습,

Intro에서 Outro에 이르는 포트폴리오 레이아웃과
Behance 큐레이팅에 선정되는 노하우까지!

Behance 포트폴리오 전문가가
말하는 UI 디자인 노하우와
유명 기업의 채용 제안을 받게 되는
포트폴리오 제작 방법을
지금 콜로소에서 공개합니다.

클래스 정보

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

사용 프로그램

Adobe Photoshop 2022
Adobe Illustrator 2022
Figma
*Phtoshop과 Illustrator
모두 2022 이전 버전 사용해도 무방합니다

동영상 정보

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

클래스 혜택

무료 폰트, 무료 목업 파일, 인사이트 (notion 링크로 제공)

다양한 브랜드의 러브콜을
받은 이성민 디자이너의
포트폴리오

UX/UI 디자이너 이성민의
클래스가 특별한 이유

포트폴리오 합격률 99%
디자이너 이성민의 클래스

UX/UI 디자이너 이성민은
디자인 실력과 포트폴리오의 퀄리티뿐 아니라
강의력까지 검증된 연사입니다.

10년 이상 교육을 진행해 온
이성민 디자이너가 운영 중인
'디렉션 스튜디오'는 OIOI, 텐바이텐,
네오플, 아메바 에이전시 등

국내외 여러 브랜드의 실무자들이
찾아올 정도로 포트폴리오 제작에 관한
체계적인 커리큘럼과
완성도 높은 강의 자료를 갖추고 있으며,

수강생들은 디자인 에이전시, 인하우스 등
99% 이상의 포트폴리오 합격률을
달성하고 있습니다.

이번 클래스에서는 토스, 쿠팡, 아마존,
블랭크 코퍼레이션 등 업계에서 주목받는
주요 서비스 브랜드의 채용 제안을 받을 수 있었던
이성민 디자이너만의 포트폴리오 제작 노하우를
실습 위주의 체계적인 커리큘럼으로 선보입니다.

UX/UI 디자이너로서 포트폴리오가 고민이라면
이 클래스를 절대 놓치지 마세요!

이번 클래스에서는
11가지 예제를 실습합니다

5가지 앱 디자인 실습

인트로
메인 페이지
제품 및 카테고리 페이지

결제 페이지
상세 페이지

6단계 포트폴리오 제작 실습

인트로
레이아웃
빌드업

마무리
썸네일
Behance

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

수강생 리뷰

디자이너 합격 후기

이성민
UX/UI디자이너

안녕하세요,
현재 Adobe Behance에서 활동 중이며
디렉션 스튜디오 공동 대표이자
UX/UI 디자이너인 이성민입니다.

저는 교육자 겸 디자이너로서 Behance 전문
포트폴리오 제작을 10년째 활동 중에 있습니다.

어도비 Behance UI 분야에서 개인으로
최초 60회 이상의 큐레이팅에 선정되었고
또한 라인, 블랭크 코퍼레이션, 아마존,
웅진코웨이 등 다양한 기업에서
협업 및 채용 제안을 받았습니다.

최근에는 한국 디자인진흥원 해외 인턴십에
합격한 포트폴리오를 제작했고
이 외에 다양한 포트폴리오를
Behance에서 제작 및 디렉팅 하였습니다.

이번 강의에서 디자이너로서의 본질과
Behance에서 제작되는 타이포그래피
비주얼 포트폴리오의 퀄리티의 급이 무엇이며,

기업이 먼저 선택하는 포트폴리오는 무엇이고,
매일 변화하는 디자인 생태계에서
이론적으로 지루했던 UXUI 디자인
및 Behance 포트폴리오의 끝을
보여드리고 싶습니다.

UX/UI 디자이너 이성민

현) 디렉션 스튜디오 대표

이력 더보기

[대표 참여 프로젝트]
Amazon Japan UX
Hyundai Card Web Design
Hyundai Mobility UI
Starbucks App
shinsegae App,TV
SK B tv Design

[수상]
Adobe Behance UI 큐레이팅 개인 & 팀포함 60회

Behance

클래스 특징

스토리텔링이 보이는
포트폴리오 설계 & 제작 노하우

디렉션 스튜디오에서 직접 설계한 포트폴리오를 살펴보며 프로젝트의 콘셉트를 도출하는 노하우를 배우고, 나의 아이디어를 시각적으로 돋보이게 하는 표현 스킬을 실습해 봅니다. 포트폴리오의 시작과 끝에서 일관된 스토리텔링이 보이는 포트폴리오 제작 프로세스를 전반적으로 학습할 수 있는 커리큘럼을 만나보세요!

시선을 사로잡는 인터랙션 UI
디자인의 원리와 기능 실습

디렉션 스튜디오의 프로덕트 결과물을 바탕으로 인터랙션에 대한 원리와 이론을 학습하고, 디지털의 깊이, 분위기, 질감 등 물리적인 요소를 시각적으로 표현하는 비주얼 이팩트를 직접 제작해 봅니다. 제품을 아이콘화하는 패밀리 아이콘 제작 방법과, 사소하지만 분명한 차이가 보이는 타이포그래피 등 디자인의 완성도를 높여줄 UI 디자인을 체계적으로 배워봅니다.

Figma로 배우는
프로덕트 디자인 실습

UX/UI 디자인 툴의 압도적인 점유율을 보이는 피그마를 활용 방법을 디테일하게 담았습니다. 프로덕트를 위한 리서치, User Flow, 섹션 분류, 콘텐츠 및 디자인 기획 등의 UX 디자인부터 버튼, 인터페이스, 아이콘, 탭바, 5가지의 화면 디자인 등의 UI 디자인까지 실습해 보세요.

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

스토리텔링이 보이는
포트폴리오

Behance 프로젝트를 통해 포트폴리오의 구조를 이해하며, 내가 전개하고자 하는 디자인 프로젝트의 개념과 방향성, 그리고 콘셉트를 명확하게 설정합니다.
UX/UI에 맞는 타이포그래피와
서체 시스템

커닝과 서체 등 타이포그래피에 대한 전문적인 이해를 바탕으로 앱&포트폴리오 디자인에 통일성을 주기 위한 폰트, 굵기, 색, 행간, 자간, 정렬 등 서체 시스템을 일관되고 정돈된 규칙으로 설계합니다.
포트폴리오의 단계별 레이아웃
및 페이지네이션

인트로, 본문, 아웃트로의 전체적인 레이아웃 구성과 페이지네이션하는 방법을 학습합니다. 데코레이션 디자인을 통해 강한 인상을 주는 방법과 Behance 업로드 노하우, 분야별 큐레이팅까지 총 6단계의 포트폴리오 제작 프로세스를 실습합니다.

Figma로 프로덕트의 기능
및 사용성 설계

Figma를 활용해 프로젝트 컨셉 설정과 User Flow를 전개하고, Description을 디테일하게 분석해 보며, UI 디자인이 효과적으로 기능할 수 있도록 기능 및 사용성을 설계합니다.
앱 디자인: 5가지의
모바일 화면 디자인 실습

로그인 및 회원가입, 메인, 카테고리 및 제품 디테일, 결제, 상세 페이지 화면을 직접 설계 및 제작하며 UXUI 디자인에서 자주 사용되는 인터페이스, 네이게이션 바, 아이콘 등의 디자인 요소를 학습합니다.
Behance 전문 디자이너가 선택한
포트폴리오 제작 방법

Behance의 기본적인 인터페이스부터 무드보드를 활용하여 리서치하는 방법, 디테일한 검색 방법, 큐레이팅에 선정되기 위한 팁 등 다양한 노하우를 학습합니다.

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

SECTION 01. OT

01. 디렉션 스튜디오 & 디자이너 이성민 소개

비핸스 포트폴리오 전문 스튜디오가 되기까지
UX/UI 디자이너가 되기까지

02. 비핸스 프로젝트 구조 이해

UI & Interaction
UX/UI
Branding

SECTION 02. UI Interaction 디자인

03. UI & Interaction 디자인 작업 이해

포트폴리오 전반적인 작업 순서 및 진행 방식

04. 제품 그림자 및 백그라운드 이펙트

사물 및 목업 그림자 넣기 (신발, 의자, 제품)
재질 효과 및 백그라운 이펙트 적용

05. 서체의 중요성 #1: 타이포그래피 작업

포트폴리오 컨셉에 따른 서체 선정의 중요성
서체의 종류 및 이해
시각 보정 "커닝"

06. 서체의 중요성 #2: 타이포그래피 작업2

인트로 페이지 타이포그래피 적용
타이포그래피 이펙트
탭으로 이루어진 UI 레이어 정리 요령
컨셉 디자인

SECTION 03. 디자인 소스 아카이빙

07. 디바이스 목업 소스

목업 소스 선정 및 종류 (Clay, Metaphor, Nude)
목업 소스 분리 및 수정

08. 브랜드 선정 과정과 리뉴얼 및 브랜딩 이해

브랜드 선정의 중요성
브랜드 리서치 (카테고리 선정)
포트폴리오 리뉴얼 & 브랜딩

09. 레퍼런스: 사진 수집 방법

레퍼런스 사이트 소개
목적별 사진 수집 방법
포트폴리오에 적합한 사진

SECTION 04. 포트폴리오 제작 실습

10. 포트폴리오 제작: 인트로

콘셉트별 인트로 소개
비핸스를 활용한 프로젝트 콘셉트 찾기
인트로 레이아웃 제작

11. 포트폴리오 제작 #1: 레이아웃 설정

무드보드를 통한 레이아웃 틀 잡기
스토리텔링 디자인

12. 포트폴리오 제작 #2: 빌드업

구간별 레이아웃 디자인 배치 (Desktop, Tablet, App Page)
데코레이션 디자인 적용

13. 포트폴리오 제작 #3: 마무리

오마주 기법을 활용한 마무리 디자인 설정
타이포그래피를 활용한 마무리 단계

14. 포트폴리오 제작 #4: 썸네일 선정

Behance 썸네일에 대한 이해
포트폴리오 구간을 활용한 썸네일
세미 촬영을 통한 썸네일 적용

15. 비핸스 업로드 및 큐레이팅 설명

포트폴리오 구간별 자르기
비핸스 업로드 및 키워드 검색 노출 설정
비핸스 분야별 큐레이팅 및 선정 방법

SECTION 05. UX/UI 디자인 실습: 주제 및 앱 선정

16. UXUI 포트폴리오 주제 선정

비핸스 카테고리
브랜딩 & 컨셉 앱 선정

17. 앱 선정 과정 및 기능성 설정

기능적 요소 앱 리서치
앱에 적합한 브랜드 선정
분야별 포트폴리오 레퍼런스

18. 피그마를 활용한 앱 Description 제작

기능성 파악
페이지 및 섹션 시작하기
포트폴리오 25개 앱 Depth 분류 및 프로토타입 제작

SECTION 06. UX/UI 디자인 실습: 콘셉트 설정

19. UX/UI 포트폴리오 레퍼런스

UI 키트 플랫폼
앱 리서치 방법

20. User Flow 설계와 프로젝트 콘셉트 설정

User Flow 종류 및 선정
디자인 및 형태 제작
피그마를 활용한 User Flow 베리에이션

21. 콘텐츠 & UI 아이콘 설계

사진을 이용한 콘텐츠 아이콘 제작
인터페이스 & 매칭 아이콘 제작
패밀리 아이콘 제작 및 탭바 아이콘 제작

22. 아이폰 목업 소스 선정과 레퍼런스

포트폴리오 구간에 적합한 앱 목업 소스 선정
비핸스 디자이너별 사용 사례

SECTION 07. UX/UI 디자인 실습: 앱 디자인

23. 앱 디자인 #1: 로그인 및 회원가입

버튼 종류 및 이펙트 효과 넣기
로그인 디자인 적용 및 짜집기

24. 앱 디자인 #2: 메인 디자인 제작

탭바 디자인 및 플로팅 버튼 만들기
리스트 메뉴 디자인 적용
사진 메뉴 및 레이웃 배치

25. 앱 디자인 #3: 카테고리 및 제품 페이지

그림자를 활용한 제품 디자인 적용
제품 디테일 페이지 및 레이아웃 제작

26. 앱 디자인 #4: 결제 페이지

카드 디자인 및 재질 효과 적용하기
결제 페이지 만들기

27. 앱 디자인 #5: 상세 페이지

상세 페이지 디자인 종류
포트폴리오에 적용할 스크롤 상세 페이지 제작

SECTION 08. UX/UI 디자인 실습: 포트폴리오 제작

28. 포트폴리오 제작: 포토샵 업로드 후 레이아웃 진행

피그마에서 제작된 결과물 추출
앱 포트폴리오 인트로 및 구성 제작

29. 포트폴리오 제작: 비주얼 이펙트 및 데코레이션

포트폴리오 백그라운드 효과 적용
데코레이션 및 사진 구성 설정

30. 마치며

디자이너의 정체성(I am Designer)
저는 이런 제품입니다
명분성이 있는 기술자

인터뷰
UX/UI 디자이너
이성민의 이야기

Question.01
이번 강의에서 연사님만의 차별점은 무엇인가요?

이번 강의에서 제가 보여드리고 싶은 부분은 포트폴리오에 필요한 기술 그 이상입니다. 포트폴리오는 정말 다양하고 여러 디자인 제작물들이 존재하죠. 하지만 그 안에서도 어떤 디자인을 보여주고 싶은지 어떤 콘셉트를 말하고 싶은지 이야기가 있어야 한다고 봅니다. 먼저는 Behance에서 좋은 포트폴리오는 어떻게 제작하는 것인지 보여드리고 싶습니다. Behance 큐레이팅을 받기 위해서는 어떤 콘셉트를 도출하고, 어떤 서체 스타일을 사용하며, 비주얼적인 이펙트 레이아웃은 어떤 식으로 제작해야 하는지 등 전체적인 Behance 프로젝트 제작의 핵심 내용들을 엄선해 알려드릴 예정입니다.

Question.02
이번 강의의 기획 의도나 포인트는 어떻게 되나요?

이번 강의는 Behance 플랫폼 위주의 강의가 될 것입니다. Behance는 세계의 모든 유명 기업, 디자인 스튜디오 및 디자이너 아티스트들이 즐비한 곳입니다. 바다를 본 사람은 호수를 보고 바다라 말하지 않듯이 작은 호수보다 큰 바다를 무대로 하여 활동했으면 하는 바람이 있습니다. 이론들로만 짜인 강의에 현직 디자이너 및 학생들이 많이 지쳐있을 거라 생각됩니다. 잘 만들어진 포트폴리오는 객관적 명분이 있기에 그 결과물을 보여드리고 싶습니다.

Question.03
이번 강의의 수강생들은 강의를 통해 어떤 부분을 개선하거나 얻을 수 있을까요?

UX/UI 디자인은 다양한 분야를 경험할 수 있는 디자인 분야입니다. 브랜드 디자인과도 매우 밀접한 분야이고 더 나아가 산업 디자인까지 알게 되어 다양한 분야를 경험해 보실 수 있게 됩니다. 또한 사고의 관점이 확장되고, 디자인 플랫폼에서 나 자신을 상품화 시키는 방법을 터득하게 되실 거라 생각합니다.

Question.04
마지막으로 수강생들, 후배 디자이너분들께
하고 싶은 말을 남겨주세요.

디자이너가 회사에 속하지 않아도 성장할 수 있다는 것을 보여드리고 싶어요. 요즘은 누구에게나 아주 쉽게 '디자이너'라는 수식어가 붙는 것 같아요. 하지만 우리는 흉내만 내는 툴러가 아닌 속한 분야의 전문가이며 디자인적 코어와 정체성을 가진 디자이너가 되어야 합니다. 그런 면에서 이번 강의는 정해 놓은 방식이 아닌 본인이 생각하고 명분이 있는 포트폴리오를 제작하여 디자인에 대한 더 높은 기준과 관점을 갖게 되는 특별한 강의가 될 것이라 생각합니다.

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

본 클래스는 Figma와 Adobe Photoshop 2022,
Adobe Illustrator 2022 버전을 사용하여 진행됩니다.
원활한 수강을 위해 해당 버전의 프로그램을 설치해 주시길 바랍니다.

*허용되는 하위 버전
- Adobe Photoshop, Illustrator 모두 2022 이전 버전 사용 가능

*프로그램 및 준비물은 별도로 제공되지 않습니다.

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

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

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

+ 더 알아보기

Search Input