Framer 101 · by 하버스쿨
프레이머 101
2025년 새로워진 프레이머는,
프레이머를 가장 잘 아는 하버스쿨에서.
동영상 강의 상품입니다 · 평생 소장
잠깐, 혹시
혹시, 당신의 이야기인가요?
“분명 완벽한 디자인이었는데, 왜 개발만 거치면 평범해질까?”
수많은 디자이너가 겪는 좌절입니다. 개발자와의 소통 비용, 기술적 제약, 길어지는 제작 기간…
당신의 위대한 아이디어는 그렇게 빛을 잃어갑니다. 이제 그 고리를 끊어낼 시간입니다.
당신의 작업물, 이렇게 달라집니다
개발자가 해석하고 재구현합니다.
“이거 이렇게 안되나요?”
“이건 구현이 어려운데…”
- 소통 비용 증가, 구현 퀄리티 저하
- 정적인 디자인 시안 (인터랙션은 상상에 맡겨야 함)
- 개발 과정에서 잦은 수정, 타협
- 압도적인 속도, 완벽한 퀄리티
- 인터랙티브한 최종 결과물 (내가 디자인한 그대로 100% 구현)
- 수정/배포 클릭 한 번으로
1,300+
누적 수강생
4.9/5.0
수강생 만족도
30+
실전 프로젝트 경험
Game Changer
왜 지금, Framer인가?
90%의 반복 작업과 10%의 크리에이티브. 웹디자인의 현실입니다. Framer는 이 공식을 완전히 뒤집습니다. 이제 당신의 시간 90%를 오롯이 창의성에 쏟아부으세요.
01
압도적인 속도
아이디어를 현실로 만드는 데 단 하루. Framer의 블록 시스템과 AI 기능이 당신의 시간을 아껴줍니다.
02
코드 없는 고퀄리티
개발자가 몇 주간 구현할 인터랙션을 단 몇 번의 클릭으로. 당신의 디자인은 이제 죽지 않습니다.
03
실시간 협업과 배포
디자인부터 배포까지 한 곳에서. 팀과 함께 실시간으로 작업하고, 클릭 한 번으로 세상에 공개하세요.
웹 트렌드
2025년 웹 트렌드,
프레이머가 정답입니다.
글로벌 웹 개발 트렌드 분석 · 2025년 기준 데이터
AI + 디자인 + 인터랙션 통합 시대
01
AI와 디자인의 융합
자동 생성형 AI로 디자인과 코드 경계가 무너지는 시대
02
90% 반복작업, 10% 크리에이티브
프레이머로 반복 작업은 자동화, 창의적 작업에만 집중
03
무코드(No-Code) 시대의 필수 스킬
개발 지식 없이도 고급 웹사이트 구현이 가능한 새로운 표준
04
글로벌 기업들의 프레이머 도입
애플, 나이키, 에어비앤비 등 선두 기업들의 표준 툴
68%
디자인 효율성 증가
78%
무코드 도입률
4.2배
개발 속도 향상
어떤 강의를 선택해야 할지, 고민되시나요?
당신의 소중한 시간과 노력을 가장 가치있게 만드는 선택. 저희가 그 차이를 명확히 보여드립니다.
- 철학
타사 강의
자극적인 키워드 중심
자극적인 키워드로 비현실적 수익 창출을 유도합니다. 강의 판매에 치우쳐, 전문성의 깊이는 놓칠 수 있습니다.
Harbor School 프레이머 101
전문가로의 성장
7년간의 교육 경험을 바탕으로, 디자인의 본질과 문제 해결 능력을 길러 ‘대체 불가능한’ 전문가로 성장시킵니다.
- 학습 경험
타사 강의
파편화된 스킬 습득
외주 스킬, 특정 기술 등 파편화된 지식을 나열하여 제공합니다. 왜, 어떻게 써야하는지에 대한 근본적인 이해가 부족할 수 있습니다.
Harbor School 프레이머 101
체계적인 마스터리
기초부터 애플 수준의 인터랙션, 비즈니스 전략까지. 모든 과정이 유기적으로 연결되어 압축 성장을 돕는 검증된 로드맵입니다.
- 접근성
타사 강의
순차적 강의 공개
강의가 몇 달에 걸쳐 나뉘어 공개됩니다. 나의 학습 속도와 상관없이, 콘텐츠가 공개될 때까지 기다려야만 합니다.
Harbor School 프레이머 101
결제 즉시, 모든 강의 수강
기다릴 필요 없습니다. 당신의 학습 속도에 맞춰 모든 챕터를 자유롭게 넘나들며, 가장 효율적으로 학습하고 빠르게 성장하세요.
- 결과
타사 강의
기능 보유자
Framer라는 ‘툴’은 다룰 수 있지만, 더 저렴한 비용을 제시하는 다른 ‘기능 보유자’에게 대체될 수 있습니다.
Harbor School 프레이머 101
대체 불가능한 전문가
자신만의 디자인 철학을 갖고, 어떤 문제든 해결할 수 있는 전문가. 가격이 아닌 ‘가치’로 경쟁하는 디자이너가 됩니다.
결과로 증명하는,
단 하나의 마스터리 코스
이 강의는 단순히 Framer 사용법을 알려주는 강의가 아닙니다. 디자이너가 자신의 가치를 스스로 증명하고, 대체 불가능한 전문가로 거듭나는 방법을 안내합니다.
1
창작의 완전한 자율성
아이디어 스케치부터 최종 배포까지, 모든 창작 과정을 온전히 통제하세요. 더 이상 기술적 제약이나 소통의 오류로 당신의 비전이 타협되는 일은 없습니다.
2
세계적 수준의 인터랙션
단순히 ‘움직이는’ 것을 넘어 ‘반응하는’ 디자인을 만듭니다. 사용자의 모든 행동에 섬세하게 반응하는 월드클래스 인터랙션으로 프로젝트의 격을 높이세요.
3
실전으로 완성되는 학습 경험
이론에 머무는 지식은 의미 없습니다. 매주 실전 과제를 통해 배운 것을 즉시 체화하고, 최종 포트폴리오 프로젝트로 당신의 성장을 세상에 증명하세요. 이 강의는 당신을 ‘아는’ 디자이너가 아닌 ‘해내는’ 디자이너로 만듭니다.
이 위대한 여정을 함께할 분들을 찾습니다
맞춤형 솔루션으로 각자의 문제 해결
코딩 없이 웹디자인 구현
코딩 때문에 웹디자인을 포기했던 초보 디자이너
“분명히 디자인은 내가 했는데, 왜 개발만 거치면 이상해질까?”
당신의 디자인을 100% 구현, 개발자 없이도 완벽한 웹사이트 제작
- 포트폴리오 강화
- 디자이너 역량 확장
- 취업 경쟁력
비용 절감, 스피드 극대화
외주 비용이 부담되는 1인 사업가, 스타트업 대표님
“랜딩페이지 하나 만드는데 수백만 원… 수정할 때마다 눈치 보이네요.”
직접 만들고, 필요할 때마다 5분 만에 수정하는 ‘린(Lean)’ 방식 도입
- 비용 절감
- 속도 향상
- 자율성
프로젝트 단가 & 퀄리티 향상
스킬업을 원하는 외주 에이전시 대표님
“단순 페이지가 아닌, ‘억’ 소리 나는 프로젝트를 수주하고 싶다.”
고급 인터랙션과 AI 코드 활용으로 서비스 단가 2배 이상 상승
- 차별화 전략
- 고부가가치 창출
- 팀 역량 강화
수강 후기
먼저 시작한 디자이너들의 이야기
‘욕심많은 디자이너’의 수강 후기
Hello, Framer 수강생 인터뷰 · 이현수 님
Since 2019 · Instructor
누적 프레이머 수강생 1,300명 돌파 (2025)
루움 (Ruum)
Harbor School · 1세대 Framer 전문가
Framer가 한국에 알려지기 전부터 7년간 Framer만을 연구하고, 30개 이상의 실전 프로젝트를 성공시킨 1세대 Framer 전문가입니다. 단순한 툴 사용법을 넘어, ‘어떻게’ 디자인으로 문제를 해결하는지에 대한 깊은 통찰력을 공유합니다.
7+
교육 경력
30+
실전 프로젝트
1,300+
누적 수강생
하버스쿨은 Framer Korea 공식 스폰서 입니다
2019년부터 세 번의 온·오프라인 밋업을 주관한, 프레이머 관련 국내 유일 전문 교육 기관 입니다.
2019
프레이머 코리아 x 오픈패스 밋업
2020
프레이머 코리아 온라인 밋업
2024
프레이머 코리아 x 29CM 밋업
당신이 마스터할 6가지 핵심 역량
01
프레이머의 모든 기능, 기초부터 실무까지
02
실제 출시 가능한 반응형 웹 프로젝트 제작
03
Framer CMS를 활용한 데이터 연동 마스터
04
Apple.com 스타일의 고급 스크롤 인터랙션
05
디자인만으로 끝내지 않는, 코드 컴포넌트 활용법
06
AI를 활용한 웹디자인 및 코드 생성 자동화
강의 특징
기초부터, 실제 프로젝트까지
가장 체계적인 프레이머 강의
프레이머의 기능들을 예제들로 손쉽게 익힐 수 있는 강의
21개의 기본적인 예제들로 프레이머의 기본적인 기능부터, 어려운 스크롤 인터렉션 기능들까지 쉽고 빠르게 익혀보세요.
실제 프로젝트를 만들어 보는 강의
배운 개념을 토대로 실제 반응형 인터렉티브 웹 프로젝트에 적용해보세요.
marianne.framer.website(강의에 포함된 웹 프로젝트)
백문이 불여일견
직접 만들게 될 실전 포트폴리오
이 강의를 통해 당신이 직접 만들게 될 실전 포트폴리오 프로젝트입니다. (위 링크와 같은 퀄리티의 결과물을 만듭니다)
하버스쿨만의 프레이머 커리큘럼
잠재력을 폭발시킬 6주간의 압축 성장 프로그램
4
학습 파트
32
학습 시간
24
강의 클립
프레이머 기초
프레이머 설치부터 시작하는 기본 과정. Frame, Stack, Grid 등 레이아웃 시스템, 반응형 디자인 원리, 컴포넌트 활용법까지 탄탄한 기초를 다집니다. 포트폴리오 웹사이트 제작 미니 프로젝트 포함.
- 01프레이머 설치 & 주요 기능 소개
- 02프레이머의 기본단위: Frame
- 03프레이머의 Layout 스타일: Stack & Grid
- 04반응형 디자인: Position & Breakpoint
- 05반응형 단위: % / vw / vh / fr / max-
- 06컴포넌트: 그래픽
- 06반복되는 스타일 관리하기
- 07레이아웃 템플릿
Project · 포트폴리오 웹사이트 01 ─ 반응형 디자인 & 재사용성
프레이머 인터렉션
다양한 인터렉션 요소 마스터. 클릭, 호버부터 애플 스타일의 고급 스크롤 인터렉션까지. Sticky, Scroll Transform, Animation & Variant로 사용자 경험을 완성하는 인터렉션 웹사이트 제작.
- 08인터렉션: Frame ─ Trigger, Properties, Transition
- 09인터렉션: 컴포넌트
- 10오버레이
- 11스크롤 인터렉션: Sticky
- 12스크롤 인터렉션: Scroll Transform
- 13스크롤 인터렉션: Scroll Animation & Variant
Project · 포트폴리오 웹사이트 02 ─ 주요 웹사이트 인터렉션
CMS & 사이트 설정
콘텐츠 관리 시스템(CMS) 활용법, 노션 데이터베이스 연동, 웹사이트 설정 및 도메인 연결, SEO 최적화. 직접 CMS로 관리되는 포트폴리오 페이지를 구축하는 실습 프로젝트.
- 14CMS: 콘텐츠 입력하기
- 15CMS: 웹사이트 디자인하기
- 16CMS: 노션으로 웹사이트 만들기
- 17사이트 설정
Project · 포트폴리오 웹사이트 03 ─ CMS 페이지
프레이머 + 코드
GUI와 코드의 경계를 넘나드는 고급 과정. Framer Override 활용법, AI를 이용한 코드 생성 기법, 개발자처럼 생각하는 방식과 실무에서 바로 적용 가능한 프레이머 필살기 마스터.
- 18Framer vs Code ─ GUI 에 필요한 3가지 요소
- 19Code: Framer + Override 사용하기
- 20Code: AI 사용하기
당신의 성장을 위한, 단 하나의 키트
성공적인 여정을 위해 필요한 모든 것을 담았습니다. 당신은 그저 성장에만 집중하세요.
01
성장의 동반자, 슬랙 커뮤니티
같은 목표를 가진 동료들과 함께라면 더 멀리, 더 빠르게 갈 수 있습니다. 이곳은 단순한 Q&A 공간이 아닌, 집단 지성의 허브입니다.
02
프로페셔널의 상징, 포트폴리오 템플릿
강의 완강 후, 당신의 실력을 증명할 가장 빠른 방법. 전문가가 디자인한 고품질 템플릿으로 당신의 가치를 보여주세요.
03
시간을 지배하는, 핵심 리소스
강의에 사용된 모든 Framer 파일과 코드 스니펫은 당신의 시간을 아껴주는 가장 강력한 무기가 될 것입니다.
04
성장의 현재진행형, 평생 업데이트
이 강의는 살아있는 유기체입니다. Framer의 발전에 맞춰 끊임없이 진화하며, 당신의 실력을 항상 최신으로 유지해 드립니다.
수강 신청
바로 시작하세요.
평생 당신의 것이 됩니다.
이름·이메일·전화번호만 남기면 결제가 시작됩니다. 결제가 완료되면 입력하신 이메일로 수강권이 자동 부여되고, 같은 이메일로 로그인하면 내 강의실에서 바로 시청할 수 있어요.
- 평생 소장 VOD · 결제 후 내 강의실에서 바로 시청
- 코딩을 전혀 몰라도 디자인 그대로 완성
- 막히면 슬랙 커뮤니티에서 질문 · 함께 해결
- 수강 기간 무제한 + 평생 업데이트
궁금한 점이 있다면 슬랙 커뮤니티에서 먼저 물어보셔도 좋아요.
자주 묻는 질문
당신의 마지막 망설임을 해결해 드립니다
- 네. 프레이머 101은 코드 없이 디자인 그대로 웹사이트를 완성하는 것이 핵심입니다. 21개 예제를 기초부터 차근차근 따라가며, 마지막 모듈(프레이머 + 코드)에서만 선택적으로 코드 컴포넌트를 다룹니다. 디자인 경험만 있으면 충분합니다.
- 프레이머 무료 계정과 인터넷이 되는 컴퓨터면 됩니다. 강의에 쓰이는 포트폴리오 템플릿과 핵심 리소스(Framer 파일·코드 스니펫)는 키트로 함께 제공되고, 별도 유료 플러그인 없이 진행합니다.
- 없습니다. 평생 소장 VOD라 결제하신 강의는 기간 제한 없이 언제든 다시 보실 수 있고, 강의가 업데이트되면 추가 비용 없이 계속 받아보실 수 있습니다.
- 전용 슬랙 커뮤니티에서 질문하실 수 있습니다. 막히는 부분을 남겨주시면 답변과 함께 다른 수강생들의 작업도 보며 풀어갈 수 있어, 혼자 보는 VOD의 한계를 메웁니다.
가장 위대한 투자는
당신의 성장입니다
한 번의 결심으로, 당신의 커리어는 새로운 시대를 맞이합니다. 어제의 당신과 작별하고, 내일의 전문가와 만나세요.
하버스쿨 Framer 101 평생소장
- 평생 소장 VOD 강의
- 전용 슬랙 커뮤니티 초대
- 모든 강의 자료 및 핵심 리소스 제공
정가 ₩630,000
할인 금액 −₩310,000
현재 판매가
₩320,000
월 26,600원 · 12개월 할부 시
🔥 당신의 잠재력에 투자하세요. 할인은 거들 뿐. 🔥
학습 및 환불 규정
학습 규정
- 본 상품은 동영상 형태의 강의를 평생 소장하며 수강하는 상품입니다.
- 수강 신청 및 결제를 완료하시면, 마이페이지를 통해 바로 수강이 가능합니다.
- ID 공유, 강의 영상 무단 배포 및 가공, 캡쳐, 판매 등 일체의 저작권 침해 행위를 금지합니다.
- 부정 사용이 적발될 경우 저작권법 위반에 의한 법적인 제재를 받으실 수 있습니다.
환불 규정
- 환불 금액은 정가가 아닌 실제 결제 금액을 기준으로 계산됩니다.
- 수강 시작 후 7일 이내, 2개 강의 미만 수강 시에는 100% 환불 가능합니다.
- 수강 시작 후 7일 이내, 2개 강의 이상 수강 시 또는 7일 초과 시에는 학습률에 따라 차감 후 환불이 진행됩니다.
- 보다 자세한 환불 규정은 고객센터로 문의 바랍니다.