프레이머 101

새로워진 프레이머는

프레이머를 가장 잘 아는
하버스쿨에서

Framer 101

by 하버스쿨

  • 동영상 강의 상품입니다

정가

630,000원

할인 금액

(-49%)

310,000원

현재 판매가

320,000원

월 26,600원

* 12개월 할부 시

정가

630,000원

할인 금액

(-49%)

310,000원

현재 판매가

320,000원

월 26,600원

* 12개월 할부 시

혹시, 당신의 이야기인가요?

혹시
당신의 이야기인가요?

"분명 완벽한 디자인이었는데, 왜 개발만 거치면 평범해질까?"
수많은 디자이너가 겪는 좌절입니다. 개발자와의 소통 비용, 기술적 제약, 길어지는 제작 기간...
당신의 위대한 아이디어는 그렇게 빛을 잃어갑니다. 이제 그 고리를 끊어낼 시간입니다.

"분명 완벽한 디자인이었는데,

왜 개발만 거치면 평범해질까?"


수많은 디자이너가 겪는 좌절입니다. 개발자와의 소통 비용, 기술적 제약, 길어지는 제작 기간...
당신의 위대한 아이디어는 그렇게 빛을 잃어갑니다. 이제 그 고리를 끊어낼 시간입니다.

당신의 작업물, 이렇게 달라집니다

당신의 작업물
이렇게 달라집니다

Before

[수강 전] Figma-개발자 전달 방식

디자이너

정적 디자인 제작

소통의 벽

"이거 이렇게 안되나요?"

"이건 구현이 어려운데..."

개발자

해석하고 재구현

소통 비용 증가, 구현 퀄리티 저하

정적인 디자인 시안

(인터랙션은 상상에 맡겨야 함)

개발 과정에서 잦은 수정, 타협

After

[수강 후] Framer를 통한 원스톱 제작

실제 웹사이트입니다

스크롤 해보세요!

압도적인 속도, 완벽한 퀄리티

인터랙티브한 최종 결과물

(내가 디자인한 그대로 100% 구현)

수정/배포 클릭 한 번으로

1,300+

누적 수강생

4.9/5.0

수강생 만족도

30+

실전 프로젝트 경험

GAME CHANGER

왜 지금, Framer인가?

왜 지금
Framer인가?

90%의 반복 작업과 10%의 크리에이티브. 웹디자인의 현실입니다.
Framer는 이 공식을 완전히 뒤집습니다. 이제 당신의 시간 90%를 오롯이 창의성에 쏟아부으세요.

90%의 반복 작업과 10%의 크리에이티브.

웹디자인의 현실입니다.
Framer는 이 공식을 완전히 뒤집습니다. 이제 당신의 시간 90%를 오롯이 창의성에 쏟아부으세요.

압도적인 속도

아이디어를 현실로 만드는 데 단 하루. Framer의 블록 시스템과 AI 기능이 당신의 시간을 아껴줍니다.

코드 없는 고퀄리티

개발자가 몇 주간 구현할 인터랙션을 단 몇 번의 클릭으로. 당신의 디자인은 이제 죽지 않습니다.

실시간 협업과 배포

디자인부터 배포까지 한 곳에서. 팀과 함께 실시간으로 작업하고, 클릭 한 번으로 세상에 공개하세요.

웹 트렌드

2025년 웹 트렌드, 프레이머가 정답입니다.

2025년 웹 트렌드
프레이머가
정답입니다.

글로벌 웹 개발 트렌드 분석

2025년 기준 데이터

AI+디자인+인터랙션 통합 시대

AI와 디자인의 융합

자동 생성형 AI로 디자인과 코드 경계가 무너지는 시대

90% 반복작업, 10% 크리에이티브

프레이머로 반복 작업은 자동화, 창의적 작업에만 집중

무코드(No-Code) 시대의 필수 스킬

개발 지식 없이도 고급 웹사이트 구현이 가능한 새로운 표준

글로벌 기업들의 프레이머 도입

애플, 나이키, 에어비앤비 등 선두 기업들의 표준 툴

68%

디자인 효율성 증가

78%

무코드 도입률

4.2배

개발 속도 향상

어떤 강의를 선택해야 할지, 고민되시나요?

어떤 강의를
선택해야 할지
고민되시나요?

당신의 소중한 시간과 노력을 가장 가치있게 만드는 선택. 저희가 그 차이를 명확히 보여드립니다.

당신의 소중한 시간과 노력을

가장 가치있게 만드는 선택.

저희가 그 차이를 명확히 보여드립니다.

타사 강의

철학: 자극적인 키워드 중심

자극적인 키워드로 비현실적 수익 창출을 유도합니다.

강의 판매에 치우쳐, 전문성의 깊이는 놓칠 수 있습니다.

자극적인 키워드로 비현실적

수익 창출을 유도합니다.
강의 판매에 치우쳐,

전문성의 깊이는 놓칠 수 있습니다.

학습 경험: 파편화된 스킬 습득

외주 스킬, 특정 기술 등 파편화된 지식을 나열하여 제공합니다. 왜, 어떻게 써야하는지에 대한 근본적인 이해가 부족할 수 있습니다.

접근성: 순차적 강의 공개

강의가 몇 달에 걸쳐 나뉘어 공개됩니다. 나의 학습 속도와 상관없이, 콘텐츠가 공개될 때까지 기다려야만 합니다.

결과: 기능 보유자

Framer라는 '툴'은 다룰 수 있지만, 더 저렴한 비용을 제시하는 다른 '기능 보유자'에게 대체될 수 있습니다.

Harbor School 프레이머 101

철학: 전문가로의 성장

7년간의 교육 경험을 바탕으로, 디자인의 본질과 문제 해결 능력을 길러 '대체 불가능한' 전문가로 성장시킵니다.

학습 경험: 체계적인 마스터리

기초부터 애플 수준의 인터랙션, 비즈니스 전략까지. 모든 과정이 유기적으로 연결되어 압축 성장을 돕는 검증된 로드맵입니다.

접근성: 결제 즉시, 모든 강의 수강

기다릴 필요 없습니다. 당신의 학습 속도에 맞춰 모든 챕터를 자유롭게 넘나들며, 가장 효율적으로 학습하고 빠르게 성장하세요.

결과: 대체 불가능한 전문가

자신만의 디자인 철학을 갖고, 어떤 문제든 해결할 수 있는 전문가. 가격이 아닌 '가치'로 경쟁하는 디자이너가 됩니다.

결과로 증명하는, 단 하나의 마스터리 코스

결과로 증명하는,
단 하나의
마스터리 코스

이 강의는 단순히 Framer 사용법을 알려주는 강의가 아닙니다.
디자이너가 자신의 가치를 스스로 증명하고, 대체 불가능한 전문가로 거듭나는 방법을 안내합니다.

이 강의는 단순히 Framer 사용법을

알려주는 강의가 아닙니다.


디자이너가 자신의 가치를 스스로 증명하고, 대체 불가능한 전문가로 거듭나는 방법을 안내합니다.

1. 창작의 완전한 자율성

아이디어 스케치부터 최종 배포까지, 모든 창작 과정을 온전히 통제하세요. 더 이상 기술적 제약이나 소통의 오류로 당신의 비전이 타협되는 일은 없습니다.

2. 세계적 수준의 인터랙션

단순히 '움직이는' 것을 넘어 '반응하는' 디자인을 만듭니다. 사용자의 모든 행동에 섬세하게 반응하는 월드클래스 인터랙션으로 프로젝트의 격을 높이세요.

3. 실전으로 완성되는 학습 경험

이론에 머무는 지식은 의미 없습니다. 매주 실전 과제를 통해 배운 것을 즉시 체화하고, 최종 포트폴리오 프로젝트로 당신의 성장을 세상에 증명하세요. 이 강의는 당신을 '아는' 디자이너가 아닌 '해내는' 디자이너로 만듭니다.

이 위대한 여정을 함께할 분들을 찾습니다

이 위대한 여정을
함께할 분들을
찾습니다

초보 디자이너

코딩 없이 웹디자인 구현

1인 창업가 & 스타트업

비용 절감, 스피드 극대화

에이전시 대표

프로젝트 단가 & 퀄리티 향상

맞춤형 솔루션으로 각자의 문제 해결

코딩 때문에 웹디자인을 포기했던 초보 디자이너

코딩 때문에 웹디자인을 포기했던
초보 디자이너

"분명히 디자인은 내가 했는데, 왜 개발만 거치면 이상해질까?"

"분명히 디자인은 내가 했는데,
왜 개발만 거치면 이상해질까?"

당신의 디자인을 100% 구현, 개발자 없이도 완벽한 웹사이트 제작

포트폴리오 강화

디자이너 역량 확장

취업 경쟁력

외주 비용이 부담되는 1인 사업가, 스타트업 대표님

외주 비용이 부담되는 1인 사업가,
스타트업 대표님

"랜딩페이지 하나 만드는데 수백만 원... 수정할 때마다 눈치 보이네요."

"랜딩페이지 하나 만드는데 수백만 원...
수정할 때마다 눈치 보이네요."

직접 만들고, 필요할 때마다 5분 만에 수정하는 '린(Lean)' 방식 도입

비용 절감

속도 향상

자율성

스킬업을 원하는 외주 에이전시 대표님

"단순 페이지가 아닌, '억' 소리 나는 프로젝트를 수주하고 싶다."

"단순 페이지가 아닌, '억' 소리 나는
프로젝트를 수주하고 싶다."

고급 인터랙션과 AI 코드 활용으로 서비스 단가 2배 이상 상승

차별화 전략

고부가가치 창출

팀 역량 강화

SINCE 2019

누적 프레이머 수강생

1,300 명 돌파 (2025)

INSTRUCTOR

루움, Harbor School

Framer가 한국에 알려지기 전부터 7년간 Framer만을 연구하고, 30개 이상의 실전 프로젝트를 성공시킨 1세대 Framer 전문가입니다. 단순한 툴 사용법을 넘어, '어떻게' 디자인으로 문제를 해결하는지에 대한 깊은 통찰력을 공유합니다.

7+

교육 경력

30+

실전 프로젝트

1,300+

누적 수강생

[강사 이미지]

하버스쿨은 Framer Korea
공식 스폰서 입니다

하버스쿨은
Framer Korea
공식 스폰서 입니다

2019년 부터 세번의 온오프라인 밋업을 주관한

프레이머 관련 국내 유일 전문 교육 기관 입니다

2019년 프레이머 코리아 x 오픈패스 밋업

2020년 프레이머 코리아 온라인 밋업

2024년 프레이머 코리아 x 29CM 밋업

디자인 엔지니어
(강사님 유튜브 채널)

당신이 마스터할 6가지 핵심 역량

당신이 마스터할
6가지 핵심 역량

프레이머의 모든 기능, 기초부터 실무까지

실제 출시 가능한 반응형 웹 프로젝트 제작

Framer CMS를 활용한 데이터 연동 마스터

Apple.com 스타일의 고급 스크롤 인터랙션

디자인만으로 끝내지 않는, 코드 컴포넌트 활용법

AI를 활용한 웹디자인 및 코드 생성 자동화

기초부터, 실제 프로젝트까지
가장 체계적인 프레이머 강의

기초부터
실제 프로젝트까지
가장 체계적인
프레이머 강의

강의 특징

프레이머의 기능들을
예제들로 손쉽게
익힐수 있는 강의

21개의 기본적인 예제들로

프레이머의 기본적인 기능부터,
어려운 스크롤 인터렉션 기능들까지
쉽고 빠르게 익혀보세요

실제 프로젝트를 만들어 보는 강의

실제 프로젝트
만들어 보는 강의

배운 개념을 토대로
실제 반응형 인터렉티브 웹 프로젝트에
적용해보세요

https://marianne.framer.website
(강의에 포함된 웹 프로젝트)

백문이 불여일견

이 강의를 통해 당신이 직접 만들게 될 실전 포트폴리오 프로젝트입니다.

이 강의를 통해 당신이 직접 만들게 될

실전 포트폴리오 프로젝트입니다.

[https://marianne.framer.website]
(위 링크와 같은 퀄리티의 결과물을 만듭니다)

실제 웹사이트입니다

스크롤 해보세요!

완벽한 반응형 레이아웃

시선을 사로잡는 스크롤 애니메이션

CMS를 통한 동적 콘텐츠 관리

코드 컴포넌트를 활용한 기능 확장

잠재력을 폭발시킬 6주간의 압축 성장 프로그램
하버스쿨만의 프레이머 커리큘럼

잠재력을 폭발시킬
6주간의 압축
성장 프로그램

하버스쿨만의
프레이머 커리큘럼

4

학습 파트

32

학습 시간

24

강의 클립

1. 프레이머 기초

프레이머 설치부터 시작하는 기본 과정. Frame, Stack, Grid 등 레이아웃 시스템,


반응형 디자인 원리, 컴포넌트 활용법까지 탄탄한 기초를 다집니다. 포트폴리오 웹사이트 제작 미니 프로젝트 포함.

2. 프레이머 인터렉션

다양한 인터렉션 요소 마스터. 클릭, 호버부터 애플 스타일의 고급 스크롤 인터렉션까지. Sticky, Scroll Transform, Animation & Variant로


사용자 경험을 완성하는 인터렉션 웹사이트 제작.

다양한 인터렉션 요소 마스터. 클릭, 호버부터 애플 스타일의 고급 스크롤 인터렉션까지. Sticky, Scroll Transform,

Animation & Variant로


사용자 경험을 완성하는

인터렉션 웹사이트 제작.

3. CMS & 사이트 설정

콘텐츠 관리 시스템(CMS) 활용법, 노션 데이터베이스 연동,


웹사이트 설정 및 도메인 연결, SEO 최적화. 직접 CMS로 관리되는 포트폴리오 페이지를 구축하는 실습 프로젝트.

콘텐츠 관리 시스템(CMS) 활용법,

노션 데이터베이스 연동,


웹사이트 설정 및 도메인 연결, SEO 최적화.

직접 CMS로 관리되는 포트폴리오 페이지를 구축하는 실습 프로젝트.

4. 프레이머 + 코드

GUI와 코드의 경계를 넘나드는 고급 과정. Framer Override 활용법,


AI를 이용한 코드 생성 기법, 개발자처럼 생각하는 방식과 실무에서 바로 적용 가능한 프레이머 필살기 마스터.

프레이머 기초

01

프레이머 설치 & 주요 기능 소개

02

프레이머의 기본단위: Frame

03

프레이머의 Layout 스타일: Stack & Grid

04

반응형 디자인: Position & Breakpoint

05

반응형 단위: % / vw / vh / fr / max-

06

컴포넌트: 그래픽

06

반복되는 스타일 관리하기

07

레이아웃 템플릿

Project

포트폴리오 웹사이트 01 ─ 반응형 디자인 & 재사용성

프레이머 인터렉션

08

인터렉션: Frame ─ Trigger, Properties, Transition

09

인터렉션: 컴포넌트

10

오버레이

11

스크롤 인터렉션: Sticky

12

스크롤 인터렉션: Scroll Transform

13

스크롤 인터렉션: Scroll Animation & Variant

Project

포트폴리오 웹사이트 02 ─ 주요 웹사이트 인터렉션

CMS & 사이트 설정

14

CMS: 콘텐츠 입력하기

15

CMS: 웹사이트 디자인하기

16

CMS: 노션으로 웹사이트 만들기

17

사이트 설정

Project

포트폴리오 웹사이트 03 ─ CMS 페이지

프레이머 + 코드

18

Framer vs Code ─ GUI 에 필요한 3가지 요소

19

Code: Framer + Override 사용하기

20

Code: AI 사용하기

당신의 성장을 위한, 단 하나의 키트

당신의 성장을 위한,
단 하나의 키트

성공적인 여정을 위해 필요한 모든 것을 담았습니다.
당신은 그저 성장에만 집중하세요.

성공적인 여정을 위해 필요한

모든 것을 담았습니다.
당신은 그저 성장에만 집중하세요.

성장의 동반자, 슬랙 커뮤니티

성장의 동반자,
슬랙 커뮤니티

같은 목표를 가진 동료들과 함께라면 더 멀리, 더 빠르게 갈 수 있습니다. 이곳은 단순한 Q&A 공간이 아닌,

집단 지성의 허브입니다.

프로페셔널의 상징, 포트폴리오 템플릿

프로페셔널의 상징,
포트폴리오 템플릿

강의 완강 후, 당신의 실력을 증명할 가장 빠른 방법. 전문가가 디자인한 고품질 템플릿으로 당신의 가치를 보여주세요.

시간을 지배하는, 핵심 리소스

시간을 지배하는,
핵심 리소스

강의에 사용된 모든 Framer 파일과 코드 스니펫은 당신의 시간을 아껴주는 가장 강력한 무기가 될 것입니다.

성장의 현재진행형, 평생 업데이트

성장의 현재진행형,
평생 업데이트

이 강의는 살아있는 유기체입니다. Framer의 발전에 맞춰 끊임없이 진화하며, 당신의 실력을 항상 최신으로 유지해 드립니다.

당신의 마지막 망설임을 해결해 드립니다

당신의 마지막
망설임을
해결해 드립니다

01

코딩을 전혀 모르는데, 정말 괜찮을까요?

02

강의를 듣기 위해 무엇을 준비해야 하나요?

03

강의 수강 기간에 제한이 있나요?

04

강의를 듣다가 모르는 점이 생기면 어떻게 하죠?

가장 위대한 투자는 당신의 성장입니다

한 번의 결심으로, 당신의 커리어는 새로운 시대를 맞이합니다.
어제의 당신과 작별하고, 내일의 전문가와 만나세요.

한 번의 결심으로, 당신의 커리어는

새로운 시대를 맞이합니다.


어제의 당신과 작별하고,

내일의 전문가와 만나세요.

하버스쿨 Framer 101 평생소장

320,000원

630,000원

월 26,600원 (12개월 할부 시)

🔥 당신의 잠재력에 투자하세요. 할인은 거들 뿐. 🔥

평생 소장 VOD 강의

전용 슬랙 커뮤니티 초대

모든 강의 자료 및 핵심 리소스 제공

학습 및 환불 규정

학습 규정

* 본 상품은 동영상 형태의 강의를 평생 소장하며 수강하는 상품입니다.

* 수강 신청 및 결제를 완료하시면, 마이페이지를 통해 바로 수강이 가능합니다.

* ID 공유, 강의 영상 무단 배포 및 가공, 캡쳐, 판매 등 일체의 저작권 침해 행위를 금지합니다.

* 부정 사용이 적발될 경우 저작권법 위반에 의한 법적인 제재를 받으실 수 있습니다.

환불 규정

* 환불 금액은 정가가 아닌 실제 결제 금액을 기준으로 계산됩니다.

* 수강 시작 후 7일 이내, 2개 강의 미만 수강 시에는 100% 환불 가능합니다.

* 수강 시작 후 7일 이내, 2개 강의 이상 수강 시 또는 7일 초과 시에는 학습률에 따라 차감 후 환불이 진행됩니다.

* 보다 자세한 환불 규정은 고객센터로 문의 바랍니다.

2차 오픈 이벤트

7/19 까지

49%

할인

2차 오픈 이벤트

7/19 까지

49%

할인

© 2024 Harbor School | 상호명 : 하버 559-63-00040 | 2019-서울강남-04995 | 서울특별시 관악구 조원로 25 109