Framer

# of Posts

1 more property

LMS Develop

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. 웹 서비스의 동작에 대해 이해하기

•

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

•

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

•

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

◦

이 홈페이지에 프로젝트나 프로젝트 정보, 사진 같은 것을 등록하고 홈페이지에서 보이도록 연결되어 있다. 이것을 콘텐츠 관리 시스템(Contents Management System)이 들어간 홈페이지라고 이해하면 된다.

◦

하지만 이것을 웹개발자의 경우 실제 코드로 이처럼 운영되도록 구성하지만, 초심자의 경우 코드로 적용하기 어려운 문제가 있다.

•

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

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

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

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

•

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

•

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

•

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

•

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

◦

처음 입력한 정보는 다음과 같다. 

나는 가상전시관 VEXPO라는 언리얼엔진 프로젝트를 개발했어
이것에 대한 프로젝트 소개 페이지로 구성해줘

프로젝트 설계 과정 이미지들과 레벨디자인 모습 내부/외부 여러 모습이 있고, 기능 구현에 대한 블루프린트 로직 정도의 이미지가 있어.

이걸 포함 할 수 있도록 준비해줘

새로운 페이지를 만들지말고 홈을 변경해줘

불필요한 연락하기, 회사 등은 제거해줘도 되
Shell
복사

•

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

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