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

나의 포트폴리오에 무한 적용 가능한
30개의 UX/UI 노하우 대공개!

툴과 디자인 이론도 다루면서
UI 기반 디자인 노하우,
포트폴리오에 즉시 활용할 수 있는
실전 스킬까지 알려주는 커리큘럼은
욕심이라고 생각하셨나요?

국내 대표 UX/UI 전문 에이전시
듀오톤의 대표, 크리에이티브 디렉터
정다영의 클래스를 지금 바로 만나보세요.

UX/UI 업계 필수 협업 툴
Figma 완전 정복 튜토리얼과
워크 프로세스 필수 이론부터,
여행/음악/쇼핑 등 서로 다른
앱 예제 제작 실습을 통한
UI 디자인 구성 꿀팁까지!

UX/UI 입문자부터 취업 준비생,
현직 주니어/시니어 디자이너까지
모두가 만족할 30개의
UX/UI 디자인 커리큘럼을
지금 콜로소에서 만나보세요.

크리에이티브 디렉터
정다영 연사의 포트폴리오

크리에이티브 디렉터 정다영의
클래스가 특별한 이유

How에 더해서 Why까지!
체계적인 이론까지 담아낸
UX/UI 융합형 커리큘럼

"디자인을 어떻게 해야 하는가"에만
집중하면 기획력과 응용력이
부족해질 수 밖에 없습니다.

중요한 것은 Why, 즉
"왜 이렇게 디자인 해야 하는가!"

정다영 디자이너의 클래스에서는
리서치, UI Element 학습, 아이콘 디자인 등
무심코 넘어갔던 UI 디자인에
끊임없이 'Why'라는 질문을 던지며,
훨씬 더 완성도 있는 포트폴리오를
제작할 수 있는 기반을 마련해줍니다.

어렴풋하게만 알고 있던
UX/UI 이론과 스킬을 온전히
내 것으로 만들어주는 UX/UI 디자인 클래스,
콜로소가 유일합니다.

이번 클래스에서 직접 제작하게 될
어플리케이션 예제의
6가지 메인 화면을 소개합니다.

01. Main 01

- 핵심 메시지와 앱의 특성을 반영한 콘텐츠로 구성
- 같은 컴포넌트를 통하여 정보의 배치만으로 다른 앱의 기능을 구현할 수 있는 응용력을 기르기 위한 예제
02. Main 02

- 콘텐츠의 허브로서 많은 정보가 앱의 기능 구현에 적합하도록 구성
- 카드 UI와 각 텍스트 정보를 효율적으로 배치
03. Search

- 리스트 UI 구성과 텍스트 배치 구현
- 하단에 쿼티 자판이 생기는 것을 염두하여 화면의 레이아웃 구성

04. Product Detail 01

- 카드 UI와 텍스트의 배치
- 각 서비스에 맞게 이미지 케이스 / 전반적인 콘텐츠 구성에 대해 학습
05. Product Detail 02

- 콘텐츠 배열 기법 연습 화면
- 텍스트 정보 그룹핑을 통한 효과적인 정보 전달
06. Unique Function

- 각 주제에 맞는 특수 화면 제작
- 음악: 앱 화면 외부에서의 음악 재생 탭
- 쇼핑: GNB (Global Navigation Bar) 화면 실습
- 여행: 검색 결과 하이라이트 추천

최종 결과물

01. 음악 감상 어플리케이션
02. 쇼핑 어플리케이션
03. 여행 어플리케이션

정다영
크리에이티브 디렉터

저는 디지털 기반의 UX/UI 디자인 스튜디오
듀오톤의 공동창업자이자
경험디자인센터의 크리에이티브 디렉터로
활동하고 있는데요.

이와 동시에 디자인 관련 서적 출간,
대학과 기업 교육 및 컨퍼런스 등
다양한 플랫폼을 통해 많은 디자이너 분들과
끊임없이 소통하고 있습니다.

크리에이티브 디렉터 정다영

현) 듀오톤(Duotone) Co-founder, Creative Director
현) 오픈패스(OPENPATH) Founder
전) 삼성전자 무선사업부 책임연구원
전) CJ E&M 아트 디렉터
전) NAVER 디자이너
전) D’strict 디자이너

교육 이력

[저서]
<포토샵 디자인 강의>, 2015, 한빛미디어
<플래시, 살짝만 건들면 웹이 살아난다>, 2006, 정글프레스

[교육이력]
OPEN PATH UX General Course,
Fastcampus UX,UI Camp / GUI Lab 등 교육과정 진행

Coloso UX,UI online conference, KIPFA Web trend conference,
Future conference, Web world 등 컨퍼런스 출강

명지대학교, 홍익대학교, SADI, 계원예술대학교, 오산대학교 및
다수 기업 교육 및 대학 특강 진행

Instagram

클래스 특징

UX/UI 디자이너 필수 툴,
Figma 정복하기

프로덕트 디자인 시장 점유율 1위 툴 피그마의 튜토리얼부터 효율적인 UI디자인을 위한 실무 기능까지 배워봅니다.

뮤직, 여행, 커머스 앱 제작을 통한
UI 디자인 이해와 응용

UI 디자인의 이론과 구성 요소 등을 익히며 어떠한 테스크가 주어져도 스스로 성장하며 발전해나갈 수 있는 역량을 키워봅니다.

일관성/효율성/유연성을 모두 갖춘 디자인 시스템 제작 노하우

서비스 특성에 맞게 유연하게 활용 가능한 UI 컴포넌트 제작 노하우를 알아보고, 이를 반영한 디자인 시스템 라이브러리를 직접 제작해봅니다.

실무 UI 디자인
프로세스 이해

생생한 현장 사례들과 함께 실무 UI 디자인의 프로세스는 물론, 단계별로 놓치지 말아야 할 기본기까지 모두 배워봅니다.
온라인 협업을 위한
Figjam 사용법

아이데이션과 분석, UX 워크숍도 모두 온라인으로 진행할 수 있는 피그잼 활용법을 알아봅니다.
기초부터 탄탄히 다지는
Figma 튜토리얼

기본 툴 활용법부터 고급 기능들까지, UI 디자인에 꼭 필요한 기초 스킬을 단단하게 다지고 이를 활용하는 응용력까지 길러봅니다.

구글 머티리얼 가이드를 활용한
디자인 시스템 구축

브랜드 아이덴티티를 살리는 Foundation의 정의와 일관성 있는 UI 디자인을 위한 컴포넌트의 개념을 익히고, 이를 활용한 UI Library 제작을 통해 디자인 시스템을 정의해 봅니다.
작업 효율을 극대화시키는
UI 컴포넌트 제작 노하우

서비스 특성에 맞춰 응용 가능한 Figma의 다양한 기능들을 활용, 변화에 대응할 수 있는 UI 디자인 제작 노하우를 배워봅니다.
활용도 높은 공통 UI Pattern의
사례 학습와 응용 실습

내비게이션, 검색 등 UI 디자인에서 빈번하게 등장하는 화면들을 디자인 할 때 주의해야 할 점들을 학습하고, 제작실습과 다양한 사례들을 통해 활용법을 익혀봅니다.

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

SECTION 01. OT

01. 오리엔테이션

강사 소개
주제 선정 (각자 진행할 프로젝트 주제 선정)
디자인 프로세스 이해하기

02. UX 서비스 목적 정의하기

서비스의 목적 정의 (Golden Circle)
타겟 유저 및 USP 정의

SECTION 02. UX 디자인 프로세스

03. UX 워크숍

UX 리서치&분석 프로세스
UX 프로젝트 사례 살펴보기
워크숍 유형 사례 살펴보기

04. Figjam 튜토리얼 01

피그잼 인터페이스&기본 기능 살펴보기
리서치 분석 워크숍 (Affinity Diagram)
아이데이션 워크숍 (Crazy 8)

05. Figjam 튜토리얼 02

키워드 워크숍 (Keyword Map)
무드보드 워크숍

SECTION 03. Figma 튜토리얼

06. 디자인 컨셉

비주얼 컨셉 케이스 스터디
컬러 정의하기
서체 정의하기

07. Figma 튜토리얼 01

피그마 인터페이스&기본 기능 살펴보기
프로젝트 및 파일 생성하고 관리하기
피그마로 협업하기

08. Figma 튜토리얼 02

피그마 커뮤니티
리소스 다운받기&플러그인 설치하기
플러그인 활용 (Unsplash)

09. Figma 튜토리얼 03

기본 도형 툴 속성 드로잉 툴 이해하기
아이콘 제작하기
아이콘 Export

SECTION 04. UI 디자인 기초

10. 디자인 시스템

디자인 시스템 이해하기
디자인 시스템 사례 살펴보기

11. Figma 그리드 & 레이아웃

그리드 및 레이아웃 기본 세팅 (Android)
그리드에 맞춘 컴포넌트 제작 실습

12. Figma 스타일 이해하기

스타일 등록하기
스타일 기능 활용하고 관리하기

13. Figma 스타일 활용하기

컬러/서체/그림자 스타일 등록&활용하기

14. Figma 컴포넌트 이해하기

컴포넌트 등록하기
컴포넌트 기능 활용하고 관리하기

15. Figma 컴포넌트 활용하기

기본 컴포넌트 제작해보기 (App bar)
컴포넌트 속성값 활용하여 응용하기

16. Figma Autolayout의 이해와 활용

Auto layout 기본기 다지기
Auto layout 을 활용한 컴포넌트 제작해보기 (Chips)

17. Figma Variations의 이해와 활용

Variations 기본기 다지기
Variations를 활용한 컴포넌트 제작해보기 (Buttons)

18. Figma Constraint의 이해와 활용

Constraint 기본기 다지기
Constraint를 활용한 멀티디바이스 컴포넌트 (Botton navigations)

SECTION 05. UI 디자인 실습

19. UI 디자인 기초

UI 디자인 기본기 다지기
UI 디자인 고려사항

20. 로그인 UI Design

스플래시 화면 만들기 (Splash)
로그인 페이지 만들기 (Sign in & out)

21. 내비게이션 UI Design

GNB 사례 1 (App bar & Navigation drawer)
GNB 사례 2 (Bottom navigation)
LNB 제작하기 (Tabs)

22. 카드 UI Design

카드 UI 사례 01 (여행 앱)
카드 UI 사례 02 (뮤직 앱)
카드 UI 사례 03 (쇼핑 앱)

23. 리스트 UI Design

리스트 UI 사례 01 (여행 앱 - 인기 검색어)
리스트 UI 사례 02 (뮤직 앱 - 플레이 리스트)
리스트 UI 사례 03 (쇼핑 앱 - 추천 콘텐츠 리스트)

24. 콘텐츠 UI Design

콘텐츠 UI 사례 01 (여행 앱 - 여행지 상세 페이지)
콘텐츠 UI 사례 02 (뮤직 앱 - 플레이 화면)
콘텐츠 UI 사례 03 (쇼핑 앱 - 상품 상세 페이지)

25. 검색 UI Design

검색 UI 사례 01 (여행 앱 - 추천 여행지)
검색 UI 사례 02 (뮤직 앱 - 항목별 추천 검색)
검색 UI 사례 03 (쇼핑 앱 - 검색 결과)

SECTION 06. UI 디자인 완성

26. 서비스 어플리케이션

다양한 서비스 어플리케이션 살펴보기
터치 포인트 별 벤치마킹 리스트 만들기

27. 여행 어플리케이션 완성하기

UI 컴포넌트 조합하여 여행 어플리케이션 제작

28. 뮤직 어플리케이션 완성하기

UI 컴포넌트 조합하여 뮤직 어플리케이션 제작
뮤직 앱 특화 페이지 제작 (Banner, Notofications)

29. 쇼핑 어플리케이션 완성하기

UI 컴포넌트 조합하여 쇼핑 어플리케이션 제작
쇼핑 앱 특화 페이지 제작 (Sheet, Filter)

30. 마무리

완성된 UI 디자인 요소 Export
협업을 위한 Communication 사례 살펴보기
마무리 인사

크리에이티브 디렉터 정다영과의 SNS 이벤트!

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

#콜로소정다영 #크리에이티브디렉터 #uxui + 콜로소 계정(@coloso_official) 계정 태그

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

인터뷰
크리에이티브 디렉터 정다영이
하고 싶은 이야기

Question.01
크리에이티브 디렉터로서 스스로의 강점은 무엇인가요?

저는 비전공자로 시작했기 때문에 디자인을 추상적으로 설명하는 것이 어려웠었고, 이를 해소하기 위해 이론에 집중을 해왔습니다. 그렇다 보니 제 강의들은 그런 이론과 논리적 근거에 더 집중하여 심도 있게 설명한다는 특징을 가지고 있습니다. 본인의 디자인이 추상적이라 디자인의 근거를 찾기 어려우신 분이라면 이번 클래스가 큰 도움이 될 것입니다.

Question.02
UX/UI 작업 시 어떤 점을
가장 신경쓰시나요?

저는 디지털 사이드의 UX 전략과 컨설팅, UI Design에서의 Design system 설계 관련 업무를 주로 하고 있습니다. 업이 그러하다보니 작업물을 볼 때에도 얼마나 논리적으로 문제를 해결하고 있는가, 도출된 컨셉이 과연 타당한가, UI 디자인에서 일관성/사용성을 고려하여 설계 하였는가의 관점으로 검토하곤 합니다.

Question.03
이번 클래스만의 차별화된 포인트는
무엇인가요?

How 뿐만 아니라 Why도 함께 말하는 강의라는 점입니다. 물론 '이 디자인에서는 어떤 요소를 넣어야 한다'는 내용도 함께 다루지만 그 전에 필요한 Why, '왜 이런 디자인을 해야 하는가'가 먼저 충족될 수 있도록 커리큘럼을 구성했죠. 표면상으로 보여지는 커리큘럼의 제목은 같지만 담고 있는 내용의 관점이 다르기 때문에 근본적인 기초 학습에 도움이 될 것이라 생각합니다.

Question.04
어떤 분들에게
이번 클래스를 추천하나요?

처음 UX/UI 디자인을 시작하는 주니어는 물론, 아직 기본기가 부족하다고 느끼는 시니어 디자이너 분들에게도 추천합니다. 기본기를 다진다는 것은 새로운 무언가를 배우는 것이 아니라, 부분적으로는 알고 있지만 제대로 조합하여 활용하지 못한 지식들을 연결하여 정리하는 것이라 생각하는데요. 이번 클래스는 한 번 들은 것에 그치지 않고, 계속해서 기본기를 연습해볼 수 있는 강의가 될 것입니다.

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

본 클래스는 Figma, Figjam으로 진행됩니다.
원활한 수강을 위해 해당 버전의 프로그램을 별도로 설치해주시길 바랍니다.

* Figma는 무료 버젼으로 활용 가능한 수위로 진행됩니다.
* PC, iMac에서도 활용 가능하며, 웹 브라우저나 App으로 실행하여도 무방합니다.

*다운로드 링크

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

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

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

+ 더 알아보기

Search Input