230623 Framer(프레이머)로 Login Form(로그인 폼) 만들기 / 프레이머 사용법

230623 Framer(프레이머)로 Login Form(로그인 폼) 만들기 / 프레이머 사용법

토스의 강연 영상을 정주행하고 프레이머가 도대체 어떤 것일까 궁금해지기 시작했다. 토스에서는 디자인 모두가 프레이머로 작업한다고 한다. 영상 중간 중간에 나오는 작업 영상들도 모두 프레이머였다. 그래서 한 번 써보기로 했다.

 

Framer는 무엇인가

프레이머도 피그마 스케치와 비슷하게 프로토 타이핑 툴이다. 하지만 애니메이션과 상호작용이 점점 많아지고 있는 웹·앱을 피그마로 만드는 데는 한계가 많다. 피그마에 비해 프레이머는 동적으로 할 수 있는 것들이 많다. 예를 들면 버튼 호버시 커서를 설정하거나 컴포넌트로 리액트의 props처럼 속성을 넘기거나 Form이 실제로 동작하기도 한다.

더 자세한 설명은 유튜브의 온보딩 영상을 올리신 분이 계셔서 그것을 보면 된다.

 

Framer에서 Input 컴포넌트 만들기

기본 제공 Input 요소 찾기

처음에 프레이머를 설치하고 새로운 프로젝트를 만든다.

Input 요소는 직접 만들 필요 없이 기본적으로 제공하고 동작도 한다.

프로젝트를 열고 키보드 단축키 i(아이)를 누르면 좌측에 선택 창이 뜬다.

여기서 검색을 통해 'Input'을 입력하여 찾으면 된다.

 

다른 Input 요소 찾기

검색으로는 이상하게 다른 요소를 찾을 수 없었다.

하지만 다른 Input들도 사용할 수 있는 방법은 있다.

좌측 Pages탭에서 새로운 Canvas 만들고 캔버스에서 다시 i(아이)를 입력하면 원래 없던 'Prototyping' 탭이 생긴다.

여기서는 더 다양한 컴포넌트를 제공한다.

 

컴포넌트로 지정하는 방법

컴포넌트로 지정하는 방법은 두 가지가 있다.

1.  Assets 탭에서 컴포넌트를 만들고 원하는 요소를 추가하기
   
   
   
2. 또는 Layers 탭에서 원하는 요소를 선택해 우클릭 -> 'Create Component'를 하면 된다.

 

컴포넌트에서 속성 값 입력받기 (props)

Input을 가져와서 컴포넌트로 만들었다면 아래와 같은 화면이 나온다.

이 컴포넌트는 Text input이므로 아이디나 비밀번호같은 텍스트를 입력받을 수 있다.

 

이 컴포넌트를 재사용하기 위해서는 Placeholder 값을 입력으로 받아야할 것 같다. 
아이디 입력이면 '아이디를 입력하세요' 비밀번호 입력이면 '비밀번호를 입력하세요'가 되어야 한다.

또한 비밀번호를 입력받을 때는 비밀번호 타입으로 지정해야 입력값이 보이지 않을 것이다

우측 창의 Input 탭에서 각각 Placeholder와 Password 옆의 + 버튼을 눌러 변수를 생성할 수 있다.

 

Placeholder 변수 지정

 

Password 변수 지정

 

변수 설정 후 Input 탭 상태

 

컴포넌트 사용하기

이제 컴포넌트를 Pages탭에 가서  Asssets 탭의 컴포넌트를 드래그앤드롭하면 사용할 수 있다.

컴포넌트를 선택하면 우측 탭에 지정한 변수가 뜨고 값을 입력하면 실시간으로 바뀐다.

다 만들었다면 우측 상단의 ▶(Preview)버튼을 눌러 직접 사용할 수 있다.

 

실제 Input 요소처럼 값을 입력할 수 있고, 패스워드 타입으로 지정했으므로 패스워드처럼 점으로 입력값이 표현된다.

 

로그인 폼 만들기

위와 같은 방법으로 Login 폼에 관련된 Input Label은 Text 요소를 통해 만들 수 있고,

Button은 기본 요소로 제공한다. 아이콘은 Phoshor을 사용했다.

사용해보면서 느낀 점

현재 사람들이 가장 많이 쓰는 앱이 Figma인 건 부정할 수 없다.
Figma에서도 애니메이션이나 입력을 구현 할 수 있다.

하지만 프레이머는 애니메이션 구현이 상대적으로 쉽고, 리액트로 구현되었기 때문에 컴포넌트에 대한 리액트 코드를 직접 제공하고 url을 통해 바로 import하여 사용할 수도 있다. 또한 Framer-motion이라는 라이브러리를 통해 다양한 트랜지션 효과를 적용할 수 있다는 강점이 있다. 재밌는 툴인 것 같다.

 

사실 아래의 말을 듣고 프레이머를 써보고 싶다는 생각이 생겼다.
왜 이토록 칭찬을 했는지 알 것도 같다.

"지금까지 썼던 버튼이 스티커였을 수도 있겠구나". - Youtube 토스 ㅣSimplicity 21 - 지금, 툴이 아닌 틀을 바꿔야 할 때

 

아쉬운 점

관련 자료가 너무 없다. 피그마는 커뮤니티가 크기 때문에 자료가 정말 많지만 프레이머는 공식 홈페이지 'Learn' 페이지도 불친절한 느낌이 들고, 영어든 한국어든 사용법에 관련된 블로그나 영상이 매우 적다.

 

---

공식홈페이지의 자료

Framer Learn: Publishing Prototypes

Framer Learn: Component Variables