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)의 강력함"을 합쳐놓은 도구라고 이해하시면 됩니다.

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

1. Framer 회원가입

회원가입하기

구글로 간편 회원가입 하기

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

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

2. 테마 찾기

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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