오픈신청이 완료 되었습니다.

클래스 오픈시 가입하신 핸드폰 번호로 문자를 발송 드립니다 :D
고객센터 02-6080-8623

유튜버 디자인베이스의 UXUI 툴 패키지 VOD

329,000 90,000
73% 15,000
6개월 무이자 카드안내
🎉

사전오픈

클래스 정보

  • 온라인 클래스

    강의 유형

    촬영된 영상을 제공하는 클래스 입니다.

  • 평생 소장

    소장 기간

    한번 구매로 평생 소장이 가능 합니다

로그인 필요

결제기능을 이용하기 위해서는
로그인이 필요합니다.

close

카드안내

  • 신한카드

    2-6개월 무이자 할부 (5만원 이상)

  • KB국민

    2-6개월 무이자 할부 (5만원 이상)

  • 비씨(페이북)

    2-6개월 무이자 할부 (5만원 이상)

  • 삼성카드

    2-6개월 무이자 할부 (5만원 이상)

  • NH농협

    2-6개월 무이자 할부 (5만원 이상)

  • 현대카드

    2-7개월 무이자 할부 (1만원 이상)

  • 하나카드

    2-6개월 무이자 할부 (5만원 이상)

  • 롯데카드

    2-4개월 무이자 할부 (5만원 이상)

* 무이자 할부는 결제 금액 기준으로 적용됩니다.

[ 유의사항 ]
- 법인(기업), 체크, 선불, 기프트, 은행계열카드 (BC마크가 없는 NON BC카드 불가)제외 (예. 수협카드 등)
- 직계약 가맹점, 상점부담 무이자 가맹점, 특별제휴가맹점, 오프라인 가맹점, 신규 가맹점 등 일부 제외
- 본 행사는 카드사 사정에 따라 변경 또는 중단될 수 있음
- 무이자 할부 결제시 포인트, 마일리지 적립 제외
- 개인간 안전거래 이니 P2P 서비스 제외
- TASF 취급 수수료 거래 하나카드 제외
- 온라인 PG업종 해당하는 무이자로 이 외 업종은 적용 불가 (제약, 등록금, 도시가스 등)

😎
얼리버드 이벤트

이벤트 혜택

😎
바쁜분들을 위해
빠르게 요약해 볼께요

클래스 요약

혜택 항목

  • 👀

    평생소장

    베스트 강의 평생소장

  • 🎁

    패키지 클래스

    맞춤 클래스들을 전부 드려요

  • 🔥

    실습파일 제공

    실습과정으로 응용력 UP

  • 🤭

    원본 파일 제공

    현업에서 바로 사용가능

100개의 필수 이론과 클론 디자인 실습

  • 어도비 XD, 실제 케이스 응용 이론

    도형, 텍스트 사용, 컴포넌트 만들기 등 필수 사용법과 반응형 크기 조정 등 실무 꿀팁

  • 가장 핫한 바로 그 툴, 피그마 사용법

    인터페이스와 컴포넌트, Constraints, 코멘트 활용법 등 가장 쉽게 배우는 피그마 수업

  • 스케치 필수 이론과 프로토타이핑 팁

    심볼 응용, 그리드, 리사이징 등 핵심 이론과 프로토타이핑 팁, 최신 플러그인 정보까지

  • 실무 우대사항 플러스, 프로토파이 사용법

    프로토파이의 장점, 핵심개념과 특수한 tilt, sound, lottie.js로 활용하는 방법 배우기

  • 제플린으로 팀원들과 소통하는 방법

    각 툴에서 제플린으로 디자인 전달하는 방법, 제플린에서 의견을 남기고 공유하기

  • UI 플랫폼 클론 디자인 실습

    유튜브 예제 파일로 디자인 실습, 스플레시 화면부터 채널, 영상 시청 페이지 등 실습

🙊
이 모든걸 월 15,000원에
평생소장 할 수 있어요
🙌

스케치 툴

커리큘럼

[바로 수강 가능] 챕터 01

스케치 툴 필수 이론

이론과 사례

  • 스케치 툴 소개
  • 인터페이스 파악하기
  • 도형 및 텍스트 사용
  • 레이어 및 텍스트 스타일
  • 심볼 이해하기
  • 심볼 응용
  • 리사이징 & 레이아웃
  • 프로토타이핑
  • 내보내기
  • 추천 플러그인 - anima, distributor, rename it

[바로 수강 가능] 챕터 02

스케치 UI 클론 디자인 실습

실습과 풀이

  • 아트보드 생성 / 탭바 top, 바텀 네비게이션 제작
  • 반복적으로 사용될 컴포넌트 제작 / 메인, 드로월메뉴, 채널, 비디오 재생 페이지 제작
🙌

피그마 툴

커리큘럼

[바로 수강 가능] 챕터 01

피그마 툴 필수 이론

이론과 사례

  • 피그마 소개
  • 인터페이스 파악하기
  • 도형 및 텍스트 사용
  • 텍스트 & 컬러 스타일
  • 컴포넌트 사용
  • Constraints & Auto Layout 사용
  • Comments 사용
  • 내보내기
  • 프로토타이핑
  • inspect와 공유하기

[바로 수강 가능] 챕터 02

피그마 UI 클론 디자인 실습

실습과 풀이

  • 아트보드 생성 / 탭바 top, 바텀 네비게이션 제작
  • 반복적으로 사용될 컴포넌트 제작 / 메인, 드로월메뉴, 채널, 비디오 재생 페이지 제작
🙌

XD 툴

커리큘럼

[바로 수강 가능] 챕터 01

XD 툴 필수 이론

이론과 사례

  • XD 소개
  • 인터페이스 파악하기
  • 도형 및 텍스트 사용
  • 텍스트 & 컬러 스타일
  • 구성요소 이해하기
  • 구성요소 상태 이해하기
  • 스크롤, 스택, 패딩 기능
  • 반응형 크기 조정 사용법
  • 반복그리드 기능
  • 내보내기 기능
  • 프로토타입 제작, 디바이스 미리보기
  • 공유하기

[바로 수강 가능] 챕터 02

XD UI 클론 디자인 실습

실습과 풀이

  • 아트보드 생성 / 탭바 top, 바텀 네비게이션 제작
  • 반복적으로 사용될 컴포넌트 제작 / 메인, 드로월메뉴, 채널, 비디오 재생 페이지 제작
🙌

프로토파이

커리큘럼

[8월 21일 오픈] 챕터 01

프로토파이 기본 이론

이론과 사례

  • 프로토파이 소개
  • 인터페이스 파악하기
  • 핵심 개념 (오브젝트, 트리거, 리스폰스)
  • Import
  • Scroll
  • Paging
  • Scene
  • Input
  • 프로퍼티
  • 변수
  • 함수
  • 조건
  • 체인과 레인지 개념
  • 클라우드 활용 및 모바일 확인하기
  • tilt 기능
  • sound 기능
  • lottie.js 사용

[8월 21일 오픈] 챕터 02

프로토파이 UI 클론 디자인 실습

실습과 풀이

  • 메인페이지 스크롤, 드로월메뉴, 채널 페이지 제작
  • 메인에서 영상 상세 페이지로 이동 / 드래그 시 Collapsed 재생 타입 제작
  • 영상 상세페이지에서 비디오 플레이 영상 일시정지 기능 제작
🙌

제플린 활용

커리큘럼

[8월 21일 오픈] 챕터 01

툴 별 제플린 활용, 공유하기

이론과 실습

  • 제플린 소개 및 설치
  • 각 툴마다 제플린 사용법
  • 결과물 보기 및 공유

👋
이제부터 클래스를
자세히 소개해 볼께요

디자이너가 운영하는 디자인 공부 채널
디자인베이스 직강 툴 패키지 클래스 ✔️

디자인베이스는 ‘누구나 쉽게 배우는 디자인 클래스’를 목표로 하는 디자인 전문 유튜브 채널입니다.
구독자 수 4만명, 누적 조회수 100만 이상으로 많은 디자이너들에게 입소문난 디자인베이스의 디자인 노하우와 미공개 꿀팁을 모두 모아 UXUI 툴 패키지로 준비했습니다.😎

🎁
UXUI 툴 패키지는 이렇게
구성되어 있어요

1단계UXUI 툴 삼대장으로 기본기 다지기

  • ✏️

    스케치 툴 기능 학습

  • 📐

    피그마 툴 기능 학습

  • 👗

    XD 툴 기능 학습

2단계툴에서 배운 기능을 실무에 적용하기

  • 👩‍🔬

    스케치 클론 예제 실습

  • 🚗

    피그마 클론 예제 실습

  • 🚗

    XD 툴 클론 예제 실습

3단계디자인 퀄리티를 높이는 프로토타이핑

  • 🛠

    프로토파이 툴 기능 학습

  • 📱

    프로토파이 툴 클론 예제 실습

4단계내 디자인을 팀원과 빠르게 공유하기

  • 🎉

    제플린 활용

👋
먼저 수강한 분들의
후기를 들어보세요

이주찬

👍4.5

UX/UI를 처음 배우는 신입입니다. 프로그램을 배우고 싶어 여러 튜토리얼을 찾아보았지만 어렵게만 느껴졌던 스케치와 어도비 XD를, 디자인베이스 강좌를 시청하며 업무 시 편하게 사용할 수 있을 정도가 되었습니다. 깔끔하고 이해하기 쉽게 단계별로 잘 설명되어 있어서 꾸준히 강좌 시청 중입니다:)

디자인베이스

Master

감사합니다! 더 좋은 강의로 보답하겠습니다.

안지수

👍4.4

해외강좌로 디자인툴을 공부하려다가 도저히 해석이 안 되어 한국어 강좌를 찾다가 처음 접하게 됐어요. 더 이상 해외강좌는 찾아보지 않습니다. 쌤 영상이면 한 번에 해결이 가능해서요! ㅎㅎ 툴강좌외에도, 기본적인 디자인 방법론에 관한 콘텐츠들 또한 많은 도움이 됐어요. 양질의 콘텐츠기 때문에 학부생 또는 저와 같은 신입 디자이너분들에게 추천합니다!

디자인베이스

Master

감사합니다! 디자인 툴 강좌는 툴을 처음 다루는 디자이너의 눈높이에서 시작하기 때문에 신입 디자이너가 배우기에도 적합합니다:) 추천 감사해요!

김선일

👍4.3

업종을 바꿔보려고 퇴사 후에 학원도 다녔지만, 포트폴리오 위주라 실질적인 업무 활용법이나 유의점같은 건 배우기 어려웠어요ㅠ 올려주신 영상 덕분에 UX/UI 프로그램 사용법이나 유의법, 어렵게 느껴진 부분들에 흥미를 느끼게 됐습니다.

디자인베이스

Master

수업을 잘 따라와 주셔서 기쁘네요:) UXUI 분야는 새롭고 유용한 것들이 계속 생겨나는 것 같아요. 새로운 강의 내용도 많이 업데이트 하도록 하겠습니다.

이원선

👍5.0

그냥 당연하게 해오던 작업에 대해 ‘왜’ 이렇게 하는지, 본질적으로 배울 수 있었어요. 사수들도 잘 알려주지 못했던 부분도 배울 수 있던 좋은 수업이었습니다.

디자인베이스

Master

솔직한 이야기 감사합니다! 앞으로 실무에서도 작업의 방향성과 본질을 생각하며 디자인해주세요:)

박주현

👍5.0

비전공자가 디베님의 영상을 참고하여 공부했을 때, 사소한 부분에 대해 몰랐던 것들이 의외로 많았고, 기초를 잘 가르쳐주셔서 많은 도움이 됐어요. 다양한 프로그램들 강의로도 알려주심으로써 아예 안 썼던 툴을 실무에서 업무에 능숙하게 활용할 수 있게 됐어요. 감사합니다!

디자인베이스

Master

하루에 10분씩 꾸준히 들어주세요:) 다양한 툴을 연습하면서 자신에게 잘 맞는 툴을 찾아가셨으면 좋겠습니다.

김현정

👍4.3

궁금증의 근원과 핵심을 알게되어 좋습니다. 실질적으로 정말 도움이 많이 되며, 수학이라고 치면 공식을 외우기 보다는 원리를 알게되는 느낌이에요.

디자인베이스

Master

맞아요, 작업과정의 원리를 알아가는 것도 중요한 단계입니다. 이후 여러 번 수업 내용을 복습해서 온전한 나만의 지식으로 만들어주시면 더 도움이 될 거에요.

김석형

👍4.3

디자인에 있어 가장 중요한 건 비주얼 라이징이 아니라 ‘본질’에 충실한 거로 생각해요. 디자인 툴만 다루는 기술자가 아니라 기획력을 갖춘 디자이너가 되고 싶다면 디자인 베이스님의 강의를 추천합니다.

디자인베이스

Master

추천해주셔서 감사합니다:) 기획력을 가진 디자이너로 좋은 성과 함께 거두시길 기원합니다!

이지현

👍4.2

사수에게 배우지 못했던 기본적인 요소들을 체계있게 배울 수 있었던 강의였습니다.

디자인베이스

Master

많은 도움이 되셨다니 기쁘네요:) 잘 따라와주셔서 감사합니다!

😃
50개 이상의 이론과 실습!
원본파일까지 제공해요

디자이너라면 꼭 챙겨 가세요!

강사님이 수업에서 내주시는 핵심 실습! 실습 풀이를 함께 제공합니다. 더불어 현업에서 바로 사용 가능한 디자인 원본 파일도 꼭 챙겨가세요!

📂 클래스 실습파일 화면 중

  • UXUI 툴 총집합🔥

    스케치, 피그마, XD, 프로토파이, 제플린까지

  • 실습 중심 강의👩‍🔬

    이론과 실습을 하나로!
    UI 디자인 예제로 익히기

  • 검증된 퀄리티🧑‍💻

    디자인 전문 유튜버
    디자인베이스와 함께

  • 평생소장👍

    한번의 구매로 5개의
    클래스를 평생소장

👩‍💻
강의 파트를 담당하는
강사님을 소개할께요

  • 👀

    구독자수 4만명

    입증된 강의 퀄리티

  • 📃

    누적 조회 100만

    꾸준히 듣게 되는 실무 강의

  • 🔥

    디자인 실무자

    S사, J기획 디자인 실무자

  • 🤭

    입문자 맞춤 강의

    꼭 필요한 툴만, 쉽게 배우기

💁‍♀️
파트별 챕터 훑어보기

커리큘럼 맛보기

디자인베이스 강사님 코멘트 📌

안녕하세요, 디자인베이스입니다👋.
저는 유튜브 채널 [디자인베이스]에서 디자인 꿀팁과 트렌드 정보들을 공유하는 유튜버이자, 필드에서 활발하게 일하고 있는 디자이너에요.
이번에 리메인과 콜라보로 진행하는 UXUI 툴 패키지에서는 제가 130여개의 강의를 만들면서 가장 중요하게 생각했고, 더 업데이트하고 싶은 핵심 툴 정보를 모아 커리큘럼을 만들었습니다.

클래스는 대표 UI 툴 삼대장인 스케치, 피그마, 어도비 XD를 설명드리면서, 이 3가지 툴을 마스터하는 시간을 가질 거에요. 회사마다, 프로젝트마다 사용하는 툴이 다르고, 툴 마다 장단점이 있기 때문에 각 툴들의 역량을 다져놓을 필요가 있기 때문이에요.

제 수업에서는 3가지 툴에 대한 설명 후, UI 예제를 따라 만들어보면서 각 툴간의 장단점과 차이점도 명확히 알려드리겠습니다.

👩‍🔬

XD 툴 파트
커리큘럼 맛보기

Window 사용자를 위한 최적의 툴
Adobe XD 💻

XD 툴은 Mac과 Window 운영체제에서 동시 사용이 가능해, Window 사용자에게 압도적인 인지도를 갖고 있습니다. 만약 여러분이 운영체제에 구애받지 않고 유연한 작업을 하고 싶다면, 가장 적합한 UXUI 툴이 될 거에요.

다음에 해당된다면 꼭 들어보세요!

  • ✔️

    회사에서 전부 윈도우를 써서 윈도우에 최적화 된 디자인 툴이 필요하다.

  • ✔️

    실제 모바일 화면에서 어떻게 움직이는 지 XD로 프로토타이핑까지 구현하고 싶다.

  • ✔️

    XD로 아이콘과 페이지 디자인을 마치고, 기획자와 개발자에게 깔끔하게 공유도 하고 싶다.

👨‍🔬

스케치 툴 파트
커리큘럼 맛보기

UXUI 툴의 정석, 스케치 툴 알아보기 📌

구글, 애플부터 삼성, 네이버까지. 디자인을 주도하는 많은 국내외 기업들이 스케치를 디자인 툴로 채택하여 사용하고 있습니다. 이제 스케치는 UI 디자인 표준 툴로 자리 잡았으며, UI를 다루는 디자이너라면 반드시 알아야하고 배워야하는 필수 툴로 여겨지고 있어요.

다음에 해당된다면 꼭 들어보세요!

  • ✔️

    맥을 쓰고 있는데 스케치랑 xd 중에서 어떤 프로그램으로 UXUI 디자인을 할 지 고민된다.

  • ✔️

    스케치 심볼 기능을 쓰고 있긴 한데, 내가 제대로 쓰고 있는 건지 모르겠다.

  • ✔️

    내가 툴을 효율적으로 쓰고 있는 건지.. 알려줄 사수가 없어서 답답하다.

👨‍🔬

피그마 툴 파트
커리큘럼 맛보기

환경에 구애받지 않고 작업하고 싶다면?
이젠 피그마는 필수 🤭

피그마는 별도의 설치가 필요한 스케치나 XD와 달리 웹 브라우저 기반이기 때문에 운영체제에 구애받지 않고 사용이 가능합니다. 다른 환경에서 작업하기 위해 클라우드나 다른 저장장치로 파일을 보내놔야 할 필요도 없어요. 회사에서 작업하던 디자인을 집에서도 그대로 할 수 있다는 편의성 때문에 더욱 주목받고 있는 툴입니다.

아래 경험이 남일 같지 않다면?

  • ✔️

    매번 슬랙으로, 메일로 디자인 파일 보내기 번거롭고, 용량도 커서 보내는데 시간이 걸린다.

  • ✔️

    프로젝트의 디자인 버전 정리가 안된다. 디자이너들이 전부 다른 버전 파일로 작업하고 있다 😱

  • ✔️

    집에서, 회사에서 같은 디자인 작업을 하려면 클라우드에 파일을 매번 옮겨놓고, 업데이트 해야한다.

👨‍🔬

프로토파이 파트
커리큘럼 맛보기

내 디자인이 살아 움직이는
프로토타이핑 툴, Protopie 🍰

UXUI 실무 우대 사항 중 하나인 프로토타이핑 능력! 툴 패키지 클래스에서는 프로토타이핑 툴 중에서도 자유도가 높고, 디자이너가 배우기 쉬운 프로토파이를 배워볼거에요.😎

그래픽 툴 인터페이스와 비슷해서 디자인 작업에 익숙한 분이라면 사용 방법을 쉽게 익힐 수 있어요. 작업 중인 스케치, xd, figma 파일이 있다면 별도의 플러그인 설치없이 바로 가져와 쓸 수 있다는 장점도 있습니다. 디자인 역량을 높이고 싶은 디자이너라면 놓치지 마세요.

다음에 해당된다면 꼭 들어보세요!

  • ✔️

    개발된 앱을 보고 인터렉션이 마음에 안들어서 수정요청을 해본 적이 있다.

  • ✔️

    화면 플로우를 설명하려고 무작정 대지를 여러 장 만들어서 보여줬던 경험이 있다.

  • ✔️

    Hi-fi 수준의 고퀄리티 인터렉션이 가능한 프로토타이핑 툴을 익혀보고 싶다.

👨‍🔬

제플린 활용 파트
커리큘럼 맛보기

스케치, 피그마, XD에서
제플린 효과적으로 사용하기 📌

내가 예쁘게 만든 디자인! 이제 개발자에 전달해 실제 구현가능한 웹/앱 화면으로 만들 차례에요.
그런데 아무리 그들에게 화면을 보여주고 요청사항을 전달해도 내 디자인과 너무 다른 결과물로 나올 때가 있습니다.

디자인된 화면의 색상값, 이미지의 위치값을 정확하게 개발자에게 전달하고 싶은 디자이너라면 제플린 툴을 사용해주세요. 제플린 활용 파트에서 어떻게 개발자에게 요청사항들을 전달하고 활용하는 지 알려드리겠습니다.😃

다음에 해당된다면 꼭 들어보세요!

  • ✔️

    개발자에게 디자인의 상세한 CSS 값을 주고 싶다.

  • ✔️

    최신 버전의 화면 디자인을 팀원이나 개발자들과 공유하고 싶다.

  • ✔️

    수정 요청사항을 빠르고 자세하게 전달해야한다.

혜택 항목

  • 🔥

    무이자 할부 혜택

    제휴 카드사의 무이자 할부 혜택 최대 6개월까지

  • 🤭

    무제한 시청 가능

    무제한 시청으로 원하는 만큼 복습 가능

유의사항

  • ✔️

    상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.

  • ✔️

    수강 신청 및 결제를 완료하시면, 마이클래스에서 바로 수강이 가능합니다.

  • ✔️

    패키지 클래스의 경우, 사전 공지 없이 강의 영상이 추가로 업데이트되거나 변경될 수 있습니다.