Framer 시작하기 1화 ⎮ 프레이머 소개 : 레이아웃 기본 이해, 단축키, 예제 만들기

김현준·2024년 6월 8일

Framer

목록 보기

1/2

프레이머란?

노코딩 웹디자인툴
복잡한 코딩과정 없이 여러 트렌지션 효과와 인터랙션을 구현해서 본격적인 앱 개발에 앞선 프로토타이핑이 가능하다.
그리고 본격적인 웹디자인 툴로써 재탄생했다.
즉 전문적인 개발 능력이 없어도 웹디자인 및 실제 구현이 가능하며 웹포폴은 물로 손쉬운 반응형 웹페이지 제작까지 가능하다.

그리고 노코딩 툴이지만 추가적이 코딩을 통해 3D그래픽 모델을 적용하는 등 폭 넓고 다채로운 퍼포먼스가 가능하다.

마지막으로 피그마와 연계도 가능하다.
피그마에서 작업한 내용을 그대로 가져올 수 있다.

최근엔 챗GPT를 이용해 AI웹서비스를 적용해서 무서운 툴이 되었다.

프레이머 설치

홈페이지 우측 상단의 Launch 버튼 클릭
다른 방법으론 페이지 제일 하단에서 Resources -> Desktop Apps를 클릭하고 pc에 프로그램 설치

둘러보기

insert
- sections
  클릭 후 죄측에 등장하는 sections을 살펴보면 다양한 기본 템플릿이 있다. 클릭하면 바로 페이지에 삽입.
- navigation
  top바와 footer를 불러올 수 있다.
- page
  완성된 페이지를 불러올 수 있다.
  데스크탑, 테블릿, 모바일 환경에 따른 반응형으로 완성해준다.
- CMS
  블로그 기능. 상단의 CMS 탭을 통해 미리 글을 작성해서 완성된 디자인에 따라 지속적인 업로드를 할 수 있다.
- Media
  유튜브, 빔에 업로드된 영상을 불러오거나 직접 동영상을 업로드할 수 있다. 그리고 오디오 파일을 인베더할 수 있는 기능이 있다.
- Interactive
  웹페이지에 여러 슬라이드 기능을 삽입할 수 있다.
- Social
  인스타그램 같은 소셜미디어를 업로드할 수 있다.
- Utility
  Social에 없는 것을 가져오고 싶으면 제일 하단에 있는 Utility의 인베디드 기능을 활용하면 코딩 없이도 링크만 사용해 가져올 수 있다.

사이즈

Fixed :

고정된 값

Relative :

퍼센트(%)로 값을 설정할 수 있다.

Fill :

컨테이너 내 공간 비율을 설정할 수 있다.(fr단위를 사용)

레이아웃 이해하기

이 4가지들을 모두 포함해 레이아웃이라 한다.
웬만하면 모두 Colums을 사용한다.

Frame(단축키 F)

안에 내용이 정렬되지 않은 그냥 네모이다.

Colums(단축키 S), Rows

프레임 안의 내용을 각각 가로, 세로 방향으로 자동정렬 해준다.

Grid

추후 다룰 예정

이미지 업로드하기

만든 Frame을 클릭하고 오른쪽의 목록에서 style의 Fill을 클릭하면 동그라미 친 부분에서 이미지를 업로드할 수 있다.

font 업로드는 해당 프로젝트 한정
이후 다른 프로젝트를 진행할 경우 다시 업로드 해야 한다.

참고로 그림 업로드 버튼 왼쪽에 있는 각각의 버튼들은 그라데이션이다.

Crop 버튼

그리고 Crop 버튼을 클릭하면 이미지를 자를 수 있다.

Resolution

이미지의 해상도를 설정할 수 있다.
Auto로 설정해두면 웹페이지에서 이미지가 뜨는 시간이 조금씩 더 늦어진다.
그러므로 이미지를 업로드할 때마다 Resolution을 꼭 수정해야 한다.

고화질 배경이라면 large, 로고처럼 작게 들어갈 것이면 medium 추천

좌우 정렬하기

Distribute

flex의 justify 속성이라고 생각하면 된다.

Distriction

flex-colums라고 생각하면 된다. 세로 정렬

텍스트 font 변경하기

Text

텍스트 창을 선택하면 우측 목록에 Text 탭이 있다.
기본적으로 제공하는 font들이 있는데 custom 버튼으로 pc에 있는 font 파일을 업로드 할 수 있다.

그라데이션

자주 사용하는 색 저장

컬러창 하단 스타일의 + 버튼을 누르면 이름을 입력하고 저장할 수 있다.

그러면 컬러창 하단에 색이 저장된다.

색 반전

style의 +버튼을 누르고 filter -> invert를 누르면 색이 반전된다.

단축키

T

텍스트

F

Frame

S

Stack:
Columns과 Rows를 모두 Stack이라고 부르며 정렬 방향이 가로냐 세로냐 차이(웬만하면 모두 Stack 사용)

상위 그룹 생성하기

나는 여기서 고양이 그림과 "고양이"는 왼쪽, "공룡"과 "사슴"은 오른쪽으로 보내고 싶다.
그러면 시프트+클릭(=드래그 선택, 컨트롤+클릭은 각각 선택)으로 고양이 그림과 "고양이 선택" 선택한 뒤 컨트롤+알트+엔터를 눌러준다.(좌측 레이아웃 창에서 우클릭 후 add stack도 됨)