초보도 쉽게 배우는 Framer 10단계 완벽 가이드 | 무료 고퀄 강좌
게시일:
작성자: 자청의 유튜브 추출기
- 이 사이트는 프레이머로 만들어졌어요.
- 애니메이션 효과가 눈에 띄어요.
- 스크롤과 마우스 효과를 다양하게 사용했어요.
- 연습하면 창의적 사이트를 만들 수 있어요.
- 초보자용 데모 사이트를 직접 만들어 볼 거예요.
- 가이드 영상과 링크를 참고하세요.
- 프레이머는 쉽고 빠른 웹사이트 제작 도구예요.
- 템플릿 없이 캔버스에서 시작할 수 있어요.
- 왼쪽 인서트 메뉴에서 디자인 요소를 넣어요.
- 텍스트는 더블 클릭으로 수정 가능해요.
- 드래그앤드롭으로 위치와 순서도 바꿀 수 있어요.
- 퍼블리 버튼 클릭으로 사이트 공개가 가능해요.
- 무료 계정을 만들고 프로젝트를 시작하세요.
- 캔버스는 데스크탑 기준 1200픽셀 이상이에요.
- 미리 보기와 풀스크린으로 사이트를 확인하세요.
- 캔버스 이동은 마우스 스크롤과 드래그로 해요.
- 확대/축소는 퍼센트 아이콘 또는 맥북 휠을 사용해요.
- 다크모드와 라이트모드도 활용할 수 있어요.
- 헤더와 내비게이션은 인서트에서 컴포넌트로 넣어요.
- 컴포넌트는 반복 사용 가능한 모듈이에요.
- 로고와 버튼은 드래그로 넣고 편집하세요.
- 버튼은 컴포넌트로 만들어 재사용 가능해요.
- 버튼에 색상과 텍스트, 링크를 설정하세요.
- 링크는 스크롤 섹션으로 연결할 수 있어요.
- 브레이크포인트로 기기별 디자인을 조절하세요.
- 데스크톱, 태블릿, 모바일 각각 편집 가능해요.
- 헤더와 섹션을 스택으로 묶어 정리하세요.
- 히어로 섹션은 사이트 맨 위에 배치해요.
- 텍스트는 구글 폰트로 업로드해서 쓸 수 있어요.
- 애니메이션 효과와 트랜지션으로 생동감 있게 만들어요.
- 스크롤 트랜스폼으로 자연스럽게 변형시켜요.
- 서비스, 문의하기, 프로세스 섹션도 쉽게 만들어요.
- 각 섹션에 배경색과 내부 여백을 조절하세요.
- 문의하기 폼은 프레이머 제공 템플릿으로 빠르게 완성 가능해요.
- 링크와 버튼에 페이지 내 섹션 연결도 쉽게 할 수 있어요.
- 사이트를 미리 보기로 최종 점검하세요.
- 퍼블리 버튼 클릭 후 임시 주소로 공개 가능해요.
- 유료 플랜으로 도메인 등록과 연결도 할 수 있어요.
- 네임칩에서 도메인 구매 후 DNS 정보를 입력하세요.
- 도메인 연동 후 최대 48시간 기다리면 접속 가능해요.
- 최종적으로 사이트 공개와 도메인 연결까지 모두 배웠어요.
- 앞으로 더 많은 기능과 활용법을 채널에서 다룰 예정입니다.
- 좋아요와 구독도 꼭 부탁드릴게요!