하루 2시간, 월 1천만 원을 벌 수 있는 외주 디자이너의 성공 방정식 with Framer

더도 덜도 말고 딱 하루 2시간씩 만 투자해도
월 1,000만원 을 버는 외주 디자이너가 되는 방법이 있다고요?

초보 디자이너도 월 1,000 디자이너로 만들어주는 혁신적인 디자인 툴
UI/UX 맛집
유니콘 핀테크 기업 도 애용하는

내 몸값을 배로 올려줄 특급 노하우!
제대로 알려드릴게요

국내 Top Tier 외주 디자이너의
하루 2시간, 월 1,000만 원을 버는 Framer 활용법을 소개합니다

안녕하세요 수강생 여러분,
스튜디오 애스보겔입니다

프레이머는 제 디자인 작업 방식을 완전히 바꿔놓았습니다.
기존에 1000만원짜리 웹 디자인을 위해 수백 장의 작업물을 준비하던 것이,
이제는 단 1주일 만에 완성할 수 있게 되었죠. 실제로 프레이머를 이용해 2주 작업으로 800만원, 1주일 작업으로 990만원의 프로젝트를 수주했고,
현재는 월 1000만원의 안정적인 수입까지 만들어내고 있습니다.

이 강의를 통해 여러분은 디자이너로서 새로운 차원의 가능성을 경험하게 될 것입니다. 이제는 개발자의 도움 없이도 비주얼 디자인부터 데이터베이스 연동, SEO 최적화,
결제 시스템까지, 디자이너인 우리가 직접 모든 것을 설계하고 구현할 수 있습니다.
프레이머 하나로 디자인부터 실제 서비스 구현까지, 프로젝트의 시작과 끝을 온전히
컨트롤할 수 있는 힘을 갖게 되는 것이죠.

제가 경험한 혁신적인 작업 방식과 수익 창출의 노하우를 여러분과 나누고 싶습니다. 프레이머를 통해 디자이너로서의 새로운 지평을 함께 열어보시죠!

Thread

2022& 2023 라우드소싱 매출 1위

서울대학교 디자인학부

와디즈 누적 펀딩액 149,500,000원

우리은행 프로젝트 제안

강사 포트폴리오

전북현대 앱 디자인

우리금융그룹 프로토타입 앱 디자인

보건복지부 앱 리뉴얼 디자인 & 브랜딩

상조회사 웹사이트 리뉴얼

코드프레소 글로벌 플랫폼 디자인

네스트 페이 앱 & 웹 디자인

Point 1
몸값을 2배로 올려줄 All-In-One 디자인 툴 Framer 완전 정복

기존 웹 디자인 방식의 번거로움을 전부 해결해주는
혁신적인 기능

Framer, 어디까지 가능하니??

Point 2
개발 지식이 없어도 마이크로 인터랙션부터 데이터 시각화까지 전부 가능하다고?
노코드/로우코드로 개발자 필요 없는 만능 디자이너 등극!

대체 불가능한 웹 디자인 테크닉 1

디테일의 한 끗을 만들어주는 마이크로 인터랙션

트랜지션 효과
· 인터랙션 컴포넌트
· 애니메이션 베지어 & 스프링 (Bezier Curves & Spring Transition)
· 트랜지션 속성 값들 (Offset, Opacity, Scale, Border, Fill, Rotate)
· 트랜지션 트리거 인터랙션 (Click, Mouse Enter, Mouse Leave)
· 컴포넌트 배리언트 프로토타이핑

스크롤 효과
· 인스크롤 트리거 레이아웃
· 스크롤 트리거 애니메이션
· 스크롤 트랜스폼
· 스크롤 트랜스폼 레이아웃

인터랙티브 컴포넌트 활용
· 티커, 캐러셀, 슬라이드쇼 비교
· 티커 세부 설정, 응용
· 캐러셀 세부 설정, 응용
· 슬라이드쇼 세부 설정, 응용

커서 & 마이크로 디테일
· 커서 컴포넌트 제작
· 커서 컴포넌트 트랜지션 & 애니메이션
· 커서 컴포넌트 적용
· 호버 이펙트 & 커서 컴포넌트 혼합

대체 불가능한 웹 디자인 테크닉 2

I 노코드로 개발자 없이 구현하는 고급 기능

CRM/API 적용
· 실시간 데이터베이스 연동
· 외부 API 콜 데이터 연동
· CRM 관리
· 크로스 레퍼런스
· CRM 데이터 컴포넌트 활용

기능성 플러그인 적용
· 배경 제거 플러그인
· 이미지 삽입 플러그인
· 목업 생성 플러그인
· 그래픽 심화 플러그인 3종
· 로그인 연동 플러그인

코드 연동
· GPT 활용 프레이머 컴포넌트 제작
· 이메일 활용 컴포넌트
· 한국형 결제 활용 컴포넌트
· 서버리스 API 보안 구축
· 서버리스 API 회원기능 구축

데이터 시각화
· 데이터 시각화 플러그인 사용법
· 플러그인 연동 서버 구현
· 플러그인 API 연동

Point 3
기획부터 디자인, 퍼블리싱까지 전문가의 차별화된 워크플로우를 공개합니다.
4가지 웹 디자인 프로젝트로 배우는 Framer 실무

PROJECT 1 | # 인터렉션 # 트랜지션 # 애니메이티드 텍스트 # 스크롤 효과
프로젝터 홍보 사이트 제작

실습 목표

∙ 부드럽고 창의적인 인터랙션 기획 및 구현
∙ 반응형 상세페이지를 통한 마케팅적인 웹 디자인

학습내용

∙ 메인 비주얼을 위한 컴포넌트 배리언트 구축
∙ 컴포넌트 배리언트 애니메이션/트랜지션 구성
∙ 반응형 컴포넌트 구성
∙ 호버,클릭 이벤트 구축 및 모달 구성
∙ 타이포그래피/이미지에 로딩 이펙트/스크롤 트리거 이펙트 적용

PROJECT 2 | # 간편결제 연동 # 모달팝업 # 이미지 캐러셀
디지털 상품 랜딩페이지 제작

실습 목표

∙ 간편결제 기능이 연동되는 실제 이커머스 구조 구현
∙ 모달과 팝업 기능을 통한 웹앱적인 접근법

학습내용

∙ 히어로 섹션/CTA 버튼 디자인 및 이펙트 구현
∙ 이커머스식 상세페이지 벤토 레이아웃과 타이포그래피 구성
∙ 스크롤 트리거 이펙트/호버 이펙트 구성
∙ GPT를 활용한 간편결제 모듈 컴포넌트 제작
∙ 팝업 모달 구성 및 결제 기능 추가

PROJECT 3 | # CRM 연동 # CRM 필터 # 검색 컴포넌트 # 다층 구조 페이지
온라인 매거진 웹앱 제작

실습 목표

∙ 실제 데이터베이스 연동과 필터링/검색 기능 구현
∙ 페이지 뎁스의 심층 이해와 구현

학습내용

∙ 매거진 포멧에 맞는 CRM 데이터 구조 제작 및 KREA 데이터 생성
∙ CRM 데이터 콜렉션 리스트 구성 및 디자인
∙ 필터 및 정렬기능을 위한 탭메뉴 컴포넌트 배리언트 제작
∙ CRM 데이터 상세보기 서브페이지를 구성
∙ 히어로/푸터 영역 디자인 및 애니메이션 적용

PROJECT 4 | # 스크롤 애니메이션 # 커서 이펙트 # 호버 이펙트 # 클릭 이펙트 # 애니메이션 베지어
비주얼 후킹 포트폴리오 페이지 제작

실습 목표

∙ 스크롤 트리거 애니메이션, 스크롤 대응 애니메이션, 커서 효과, 호버 및 클릭 이벤트의 구현

학습내용

∙ STICKY 구조 레이아웃 구성
∙ 스크롤 애니메이션 컴포넌트 제작 및 배리언트 적용
∙ 로딩 이펙트와 커스텀 커서 컴포넌트 구성
∙ 스크롤 트랜스폼 구현 및 애니메이션 배지어 설정