프레이머 101
새로워진 프레이머는
프레이머를 가장 잘 아는
하버스쿨에서
Framer 101
by 하버스쿨
동영상 강의 상품입니다
Before
[수강 전] Figma-개발자 전달 방식
디자이너
정적 디자인 제작
소통의 벽
"이거 이렇게 안되나요?"
"이건 구현이 어려운데..."
개발자
해석하고 재구현
소통 비용 증가, 구현 퀄리티 저하
정적인 디자인 시안
(인터랙션은 상상에 맡겨야 함)
개발 과정에서 잦은 수정, 타협
After
[수강 후] Framer를 통한 원스톱 제작
실제 웹사이트입니다
스크롤 해보세요!
압도적인 속도, 완벽한 퀄리티
인터랙티브한 최종 결과물
(내가 디자인한 그대로 100% 구현)
수정/배포 클릭 한 번으로
1,300+
누적 수강생
4.9/5.0
수강생 만족도
30+
실전 프로젝트 경험
GAME CHANGER
압도적인 속도
아이디어를 현실로 만드는 데 단 하루. Framer의 블록 시스템과 AI 기능이 당신의 시간을 아껴줍니다.
코드 없는 고퀄리티
개발자가 몇 주간 구현할 인터랙션을 단 몇 번의 클릭으로. 당신의 디자인은 이제 죽지 않습니다.
실시간 협업과 배포
디자인부터 배포까지 한 곳에서. 팀과 함께 실시간으로 작업하고, 클릭 한 번으로 세상에 공개하세요.
웹 트렌드
글로벌 웹 개발 트렌드 분석
2025년 기준 데이터
AI+디자인+인터랙션 통합 시대
AI와 디자인의 융합
자동 생성형 AI로 디자인과 코드 경계가 무너지는 시대
90% 반복작업, 10% 크리에이티브
프레이머로 반복 작업은 자동화, 창의적 작업에만 집중
무코드(No-Code) 시대의 필수 스킬
개발 지식 없이도 고급 웹사이트 구현이 가능한 새로운 표준
글로벌 기업들의 프레이머 도입
애플, 나이키, 에어비앤비 등 선두 기업들의 표준 툴
68%
디자인 효율성 증가
78%
무코드 도입률
4.2배
개발 속도 향상
타사 강의
✕
철학: 자극적인 키워드 중심
✕
학습 경험: 파편화된 스킬 습득
외주 스킬, 특정 기술 등 파편화된 지식을 나열하여 제공합니다. 왜, 어떻게 써야하는지에 대한 근본적인 이해가 부족할 수 있습니다.
✕
접근성: 순차적 강의 공개
강의가 몇 달에 걸쳐 나뉘어 공개됩니다. 나의 학습 속도와 상관없이, 콘텐츠가 공개될 때까지 기다려야만 합니다.
✕
결과: 기능 보유자
Framer라는 '툴'은 다룰 수 있지만, 더 저렴한 비용을 제시하는 다른 '기능 보유자'에게 대체될 수 있습니다.
Harbor School 프레이머 101
철학: 전문가로의 성장
7년간의 교육 경험을 바탕으로, 디자인의 본질과 문제 해결 능력을 길러 '대체 불가능한' 전문가로 성장시킵니다.
학습 경험: 체계적인 마스터리
기초부터 애플 수준의 인터랙션, 비즈니스 전략까지. 모든 과정이 유기적으로 연결되어 압축 성장을 돕는 검증된 로드맵입니다.
접근성: 결제 즉시, 모든 강의 수강
기다릴 필요 없습니다. 당신의 학습 속도에 맞춰 모든 챕터를 자유롭게 넘나들며, 가장 효율적으로 학습하고 빠르게 성장하세요.
결과: 대체 불가능한 전문가
자신만의 디자인 철학을 갖고, 어떤 문제든 해결할 수 있는 전문가. 가격이 아닌 '가치'로 경쟁하는 디자이너가 됩니다.
1. 창작의 완전한 자율성
아이디어 스케치부터 최종 배포까지, 모든 창작 과정을 온전히 통제하세요. 더 이상 기술적 제약이나 소통의 오류로 당신의 비전이 타협되는 일은 없습니다.
2. 세계적 수준의 인터랙션
단순히 '움직이는' 것을 넘어 '반응하는' 디자인을 만듭니다. 사용자의 모든 행동에 섬세하게 반응하는 월드클래스 인터랙션으로 프로젝트의 격을 높이세요.
3. 실전으로 완성되는 학습 경험
이론에 머무는 지식은 의미 없습니다. 매주 실전 과제를 통해 배운 것을 즉시 체화하고, 최종 포트폴리오 프로젝트로 당신의 성장을 세상에 증명하세요. 이 강의는 당신을 '아는' 디자이너가 아닌 '해내는' 디자이너로 만듭니다.
초보 디자이너
코딩 없이 웹디자인 구현
1인 창업가 & 스타트업
비용 절감, 스피드 극대화
에이전시 대표
프로젝트 단가 & 퀄리티 향상
맞춤형 솔루션으로 각자의 문제 해결
당신의 디자인을 100% 구현, 개발자 없이도 완벽한 웹사이트 제작
포트폴리오 강화
디자이너 역량 확장
취업 경쟁력
직접 만들고, 필요할 때마다 5분 만에 수정하는 '린(Lean)' 방식 도입
비용 절감
속도 향상
자율성
스킬업을 원하는 외주 에이전시 대표님
고급 인터랙션과 AI 코드 활용으로 서비스 단가 2배 이상 상승
차별화 전략
고부가가치 창출
팀 역량 강화
SINCE 2019
─
누적 프레이머 수강생
1,300 명 돌파 (2025)
INSTRUCTOR
루움, Harbor School
Framer가 한국에 알려지기 전부터 7년간 Framer만을 연구하고, 30개 이상의 실전 프로젝트를 성공시킨 1세대 Framer 전문가입니다. 단순한 툴 사용법을 넘어, '어떻게' 디자인으로 문제를 해결하는지에 대한 깊은 통찰력을 공유합니다.
7+
교육 경력
30+
실전 프로젝트
1,300+
누적 수강생
[강사 이미지]
2019년 부터 세번의 온오프라인 밋업을 주관한
프레이머 관련 국내 유일 전문 교육 기관 입니다
2019년 프레이머 코리아 x 오픈패스 밋업
2020년 프레이머 코리아 온라인 밋업
2024년 프레이머 코리아 x 29CM 밋업
디자인 엔지니어
(강사님 유튜브 채널)
─
강사님 작업
─
프레이머의 모든 기능, 기초부터 실무까지
실제 출시 가능한 반응형 웹 프로젝트 제작
Framer CMS를 활용한 데이터 연동 마스터
Apple.com 스타일의 고급 스크롤 인터랙션
디자인만으로 끝내지 않는, 코드 컴포넌트 활용법
AI를 활용한 웹디자인 및 코드 생성 자동화
강의 특징
프레이머의 기능들을
예제들로 손쉽게
익힐수 있는 강의
21개의 기본적인 예제들로
프레이머의 기본적인 기능부터,
어려운 스크롤 인터렉션 기능들까지
쉽고 빠르게 익혀보세요
배운 개념을 토대로
실제 반응형 인터렉티브 웹 프로젝트에
적용해보세요
https://marianne.framer.website
(강의에 포함된 웹 프로젝트)
백문이 불여일견
[https://marianne.framer.website]
(위 링크와 같은 퀄리티의 결과물을 만듭니다)
실제 웹사이트입니다
스크롤 해보세요!
완벽한 반응형 레이아웃
시선을 사로잡는 스크롤 애니메이션
CMS를 통한 동적 콘텐츠 관리
코드 컴포넌트를 활용한 기능 확장
4
학습 파트
32
학습 시간
24
강의 클립
1. 프레이머 기초
프레이머 설치부터 시작하는 기본 과정. Frame, Stack, Grid 등 레이아웃 시스템,
반응형 디자인 원리, 컴포넌트 활용법까지 탄탄한 기초를 다집니다. 포트폴리오 웹사이트 제작 미니 프로젝트 포함.
2. 프레이머 인터렉션
3. 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일 초과 시에는 학습률에 따라 차감 후 환불이 진행됩니다.
* 보다 자세한 환불 규정은 고객센터로 문의 바랍니다.