citeFred’s Blog

/

/

citeFred’s Blog

/

/

Share

🏷️

Framer

# of Posts

4

1 more property

LMS Develop

Search

1. Framer란 무엇인가?

Framer: Create a professional website, free. No code website builder loved by designers.

Framer(프레이머)는 디자이너가 코딩 없이도 실제 작동하는 전문가 수준의 웹사이트를 만들 수 있도록 하는 혁신적인 웹 빌딩 플랫폼입니다.

과거에는 디자이너가 만든 시안을 개발자가 코드로 구현하는 방식이 일반적이었지만, Framer는 디자인과 개발 사이의 간극을 허물어 디자인 툴에서 작업하듯 웹사이트를 만들고 클릭 한 번으로 바로 인터넷에 게시(배포)할 수 있게 해줍니다.

쉽게 말해, "디자인 툴(Figma 등)의 자유도 + 웹 빌더(Wix, Squarespace 등)의 편리함 + 실제 웹 기술(React)의 강력함"을 합쳐놓은 도구라고 이해하시면 됩니다.

2. Framer의 핵심 특징

웹사이트 빌더: Figma나 Sketch 같은 디자인 툴과 사용법이 매우 비슷하여 디자이너가 쉽게 적응하고 웹사이트를 직접 만들 수 있습니다. 코드를 전혀 몰라도 드래그 앤 드롭 방식으로 사이트를 구축할 수 있습니다.

호스팅 포함: Framer로 만든 모든 사이트는 Framer에서 직접 호스팅을 제공합니다. 따라서 별도의 호스팅 서비스를 계약하거나 서버를 설정할 필요가 없습니다.

반응형 디자인: 데스크톱, 태블릿, 모바일 등 다양한 기기 환경에 맞춰 자동으로 조절되는 반응형 웹사이트를 손쉽게 제작할 수 있습니다.

CMS 기능: 블로그 게시물, 포트폴리오 등 동적인 콘텐츠를 관리할 수 있는 CMS(콘텐츠 관리 시스템) 기능도 내장되어 있습니다.

[Framer] 1. 초보, 비전공자를 위한 Framer로 홈페이지 만들기 소개

1. Framer 회원가입

회원가입하기

구글로 간편 회원가입 하기

구글 회원 가입 진행, 알맞는 정보 입력하여 회원 가입 완료하기

회원가입 후 나타나는 메인 에디터 페이지

2. 테마 찾기

에디터에서 직접 템플릿을 디자인하고 레이아웃을 구성하거나 Figma 등의 웹디자인 툴을 통해 디자인한 것을 삽입 할 수도 있다.

하지만 웹 디자인에 익숙하지 않은 사람들을 위해서는 전문가들이 틀을 잡아둔 유용한 템플릿을 활용하는 것으로 시간을 절약 할 수 있다.

에디터 창에서 브라우저에서 아래 링크로 접속

템플릿들을 살펴보기 위해서 전체 목록을 살펴보기

“무료” 템플릿 모아서 살펴보기 및 고르기

원하는 템플릿 선택과 미리보기를 통해서 홈페이지가 완성된 모습을 미리 체험 할 수 있다.

해당 템플릿 사용을 원한다면, Use For Free 선택 

[Framer] 2. Framer를 활용 웹사이트 디자인과 배포해보기

1. 웹 서비스의 동작에 대해 이해하기

홈페이지는 우리가 보여주는 것 말고도 클릭해서 눌렀을때 동작하는 것들이 포함된다. 이 홈페이지의 예시로는 아래 사진과 같다.

우리는 강제로 우리 프로젝트 이미지를 넣긴했지만, 저렇게 프로젝트 메뉴로 이동하니 우리가 수정하지 못했던 부분들이 있는 것을 확인했다.

실제 홈페이지들의 동작은 단순히 이미지를 교체하는 정도로는 한계가 있고,

하지만 Framer에서는 이러한 복잡함을 간단히 페이지 구성을 통해 해결할 수 있다.

2. 홈페이지의 콘텐츠를 변경해보기

우리는 단순히 이미지를 교체해보기도 했지만, 프로젝트나 슬라이드 이미지 사진을 누르면 나타나는 상세 정보도 넣어주고싶어졌다.

Framer 에디터를 켜고 왼쪽 메뉴를 살펴본다.

Edit in CMS를 들어가보면 다음처럼 등록된 프로젝트들이 실제로 보이게 된다.

이는 우리가 처음에 이미지를 단순히 바꾸는것 보다는 실제로 이 프로젝트 관리 부분에 들어와서 이미지를 교체하고 설명을 입력하면

홈페이지에서 동일하게 보일 것이다.

[Framer] 3. Framer를 활용 웹사이트의 콘텐츠를 바꿔보기 심화(콘텐츠관리시스템 CMS?)

1,2,3 장에서의 실습과 설명은 비전공, 웹개발 경험이 없는 대상을 위해 안내했지만, 이 과정도 다소 어렵게 느껴질 수 있는 왕초보들을 위한 AI 활용 방법이다.

1. AI에게 구성 만들도록 하기

Framer 홈페이지에서 Start with AI 선택

프로젝트 소개 페이지므로 Landing Page 선택 및 전송

알아서 에디터가 열리면서, 기본 레이아웃을 AI가 작성한다. 

왼쪽 Ask Framer… 에서 원하는 것을 입력해보려고 한다. 

실시간으로 AI가 페이지를 변경하기 시작한다.

간단한 레이아웃이나 설명 등을 통해 기본 레이아웃 정도를 빠르게 생성해주는 도움을 받을 수 있다.

AI는 지시한대로 움직이기 때문에 명령을 보다 명확하게 자세히 할 수록 좋은 결과를 만들어준다.

프로젝트를 홍보하고 영상, 이미지 등을 업로드하는 랜딩페이지 정도는 오히려 빠르게 구성 할 수 있음

2. 효과 등 수정해보기

원하는 이미지 등을 넣기만 해도 나만의 간단한 프로젝트 소개 홈페이지가 구성된다.

각 이미지나 텍스트, 레이아웃 프레임이 나타나거나 확대되는 각종 효과를 추가해보면서 꾸밀 수도 있다.

[Framer] 4. AI Framer를 활용 웹사이트의 만들기(초심자추천)