#1 코딩없이 제작하는 인터렉티브 웹사이트 빌더
캔버스에 그림 그리듯이 사이트를 제작? 초보자를 위한 Framer 완벽가이드 10단계
Framer는 코딩 없이 애니메이션을 포함한 다양한 효과로 고품질의 인터렉티브한 사이트를 만들 수 있습니다. 직관적인 인터페이스와 캔버스에 그림을 그리듯이 제작하는 방식은 다양한 아이디어를 창의적으로 구현할 수 있는 환경을 제공합니다.
* 이 가이드는 Framer 제휴마케팅 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다. 이는 추가 비용을 발생시키지 않으며, 높은 품질의 가이드 영상을 무료로 제공하는데 큰 도움이 됩니다. 감사합니다.
시작하는 방법
- 유튜브 영상을 보면서 아래 무료 가이드를 그대로 따라하면 됩니다.
1단계
Framer 기본 빠르게 이해하기
Framer는 고품질의 인터렉티브한 사이트를 쉽고 빠르게 제작할 수 있도록 도와주는 도구입니다. 초보자라면 처음엔 배워야할 개념들이 많이 있지만 배우고나면 누구나 코딩없이 다양한 창의적인 사이트를 혼자서 만들 수 있습니다. 이 단계에서 프레이머를 통해 제작된 예제 사이트는 어떤지 3개 사이트들을 참고하고 시작하기 전에 전반적인 제작 과정도 빠르게 살펴보시기 바랍니다.
2단계
Framer 무료 계정 만들고 시작하기
Framer 무료 계정을 통해 부담없이 시작하세요. 이 단계에서 어떻게 무료 계정을 만들 수 있는지 배우고, 사이트를 제작하기 위한 프로젝트 생성 및 삭제 방법 그리고 캔버스 화면을 처음에 어떻게 조작할 수 있는지 개념과 방법에 대해 배우게 됩니다.
체크리스트
3단계
Header 섹션 만들고 편집하기
사이트 제작을 위한 첫 단계로 상단에 위치한 Header 부분을 만들고 편집할 것입니다. 이 단계에서 헤더를 제작하는 과정 중에 필요한 레이아웃, 컴포넌트, 브레이크포인트등 다양한 기초 개념을 소개합니다. 처음 배우게 되면 다소 어려울 수 있지만 꼭 필요한 개념이기 꼭 이해하고 넘어가시기 바랍니다.
체크리스트
참고하기
- 이 단계에서는 다양한 기초 개념을 많이 배우게 됩니다. 처음엔 복잡하게 느껴질 수 있더라도 제작 단계에서 반복적으로 실행하다보면 익힐 수 있을 것입니다.
4단계
Hero 섹션 만들고 편집하기
사이트의 히어로 섹션은 홈페이지에서 가장 상단에 위치하며 동시에 가장 중요한 메인 콘텐츠를 담는 부분입니다. 이 단계에서는 구글 폰트에서 원하는 폰트를 어떻게 추가하고, 제목 및 일반 텍스트를 각 스타일로 지정해서 편하게 활용할 수 있는 방법도 함께 소개합니다.
STEP 5
Service 섹션 만들고 편집하기
이 단계에서는 각 서비스 이미지를 위해 아이콘을 추가한 뒤 다양한 애니메이션 효과를 적용할 것입니다. 여기서 소개하는 기본적인 개념만 이해하고 활용할 줄 알아도 자신만의 창의적인 사이트를 만들어볼 수 있으니 참고해보시기 바랍니다.
STEP 6
CTA & Process 섹션 만들고 편집하기
이 단계에서는 사용자 행동을 유도하는 CTA 섹션과 프로세스 형태 디자인을 적용한 프로세스 섹션을 만들 것입니다. 특히, 프로세스 디자인에 Scroll Transform 효과를 적용하며 활용하게 됩니다.
체크리스트
STEP 7
Contact 섹션 만들고 편집하기
사이트 편집의 마지막 섹션인 Contact 폼을 추가하는 단계입니다. Framer에서 이미 제공하는 디자인을 기반으로 쉽고 빠르게 설정할 수 있기 때문에 누구나 폼을 추가해서 활용할 수 있습니다.
체크리스트
STEP 8
네비게이션 및 링크 추가하고 연결하기
사이트를 모두 제작했다면 링크가 제대로 작동되도록 설정하는 단계입니다. 이 영상에서는 원페이지를 제작했기 때문에 동일한 사이트 내에서 링크를 클릭시 원하는 섹션으로 이동되도록 설정할 것입니다.
체크리스트
STEP 9
사이트 배포 및 플랜 업그레이드하기
사이트를 누구나 방문할 수 있도록 공개하는 단계입니다. 무료 플랜이라면 Framer 임시 주소를 사용하고 Framer 배너가 붙게 됩니다. 만약 단순 취미가 아닌 자신만의 사이트로 운영하기 위해 도메인 주소를 적용하고 배너를 없애려면 플랜 업그레이드가 필요합니다. 이 단계에서 어떤 플랜이 있는지 살펴보고 업그레이드 방법을 확인할 수 있습니다.
