[개발자가 알려주는 프레이머(Framer) #0] Framer 쉽게 시작해보자.

📑 Framer란?

Framer는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트를 제공하는 라이브러리입니다. 처음 접하시는 분들도 어려움 없이 서비스 아이디어들을 구현할 수 있도록 설계되어 있습니다. Framer는 아래의 기술 스택으로 구성되어 있습니다.

💻 기술 스택

React

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.

Jsx

JavaScript에서 HTML과 같은 구문을 직접 사용하여 친숙한 방식으로 문서 구조를 표현할 수 있는 방법입니다.

Typescript

TypeScript는 Javascript의 상위 확장 개념 언어입니다. 그래서 ES5의 문법을 그대로 사용할 수 있고, ES6에서 새롭게 추가된 기능들을 기존의 자바스크립트 엔진에서 실행할 수 있습니다.

 

벌써부터 어려우시죠? 해당하는 기술 스택의 모든 것을 공부할 필요는 없습니다. 우리는 "Framer"를 공부하는 거잖아요. 알면 좋지만 굳이 공부하지 않아도 Framer를 쉽게 사용할 수 있게 도와드리겠습니다. (개발자들도 React, Typescript 어려워하는 사람 많아요. 걱정하지 마세요!)

🏃 시작하기

자 Framer를 한번 시작해봅시다! 우선 시작하려면 Framer를 가입해야겠죠?

Framer 회원가입을 하도록 하겠습니다.

회원가입

Framer: The prototyping tool for teams

아래 이미지처럼 가운데 Sign up for free가 있죠?

 

Framer 공식홈페이지

 

구글을 통해 소셜 로그인 회원가입을 하셔도 되고 저처럼 아래 가입정보를 기입하고 이메일로 회원가입을 하셔도 됩니다. 저는 이메일로 회원가입을 하도록 하겠습니다.

 

회원가입

 

이메일로 회원가입을 하면 아래와 같이 이메일 인증 메일이 오게 됩니다. 이메일을 확인하여 해당 이메일의 Launch Framer Web을 누르고 프레이머를 실행해주세요!

 

프레이머 이메일 회원가입

 

Launch Framer Web 버튼을 통해 Framer로 돌아오면 이렇게 대시보드에서 프로젝트를 설정할 수 있습니다.

 

프레이머 구동화면

 

프로젝트 생성

좌측 사이드 패널에서 Draft 옆에 플러스 버튼을 누르시면 새로운 프로젝트를 생성할 수 있습니다. 프로젝트를 생성해봅시다.

 

프레이머 대시보드

 

자! 프로젝트가 생성되었습니다. 시작이 반이라고 가입하고 프로젝트 생성하면 반은 끝낸 거죠! 여기까지 오시느라 고생하셨습니다. 그럼 오늘은 워밍업으로 간단히 디바이스 레이아웃을 불러오고 그 안에 컴포넌트를 넣어볼게요.

 

상단의 Insert를 누르면 여러 가지 컴포넌트, 패키지, 인터렉션 등 다양한 기능들을 삽입할 수 있습니다. 저희는 디바이스 레이어를 삽입하도록 해볼게요.

디바이스 레이아웃 삽입

상단 삽입 버튼

삽입 버튼을 누르면 원하는 아이템을 검색하는 검색창이 등장하는데 저희는 디바이스 레이어를 추가할 거니까 Explore에 Frames를 클릭합니다.

검색창

Frames를 클릭하면 다양한 디바이스들이 존재하는데요. 저는 아이폰 11 프로를 가지고 싶으니까 아이폰 11 프로 디바이스를 선택할 겁니다. 여러분은 여러분이 프로토타이핑하려고 하시는 디바이스 스펙으로 선정하셔서 선택하시면 될 것 같습니다.

디바이스 레이어 선택화면

자! 디바이스가 생성되었습니다. 좌측을 보면 선택한 디바이스가 보이고 중앙에는 저희가 선택한 디바이스의 레이어 영역입니다. 레이어 우측에 작은 미리보기 화면이 있는데 저희 레이어의 실제 구동 화면을 미리보기로 보여주는 패널입니다. (Framer Web 퍼포먼스가 정말 좋은데요? 진짜 잘 만든 서비스라는 것이 느껴집니다.) 그리고 제일 우측에는 레이아웃 옵션을 조정해주는 여러 상세 값들이 존재합니다. 

디바이스 레이아웃

컴포넌트 생성

그럼 이제 레이아웃에 넣을 컴포넌트를 만들어볼까요? 사실 제 주력은 코드 작성이라 그전까지는 디자인 관련 툴을 다루시는 전문가 분들이 훨씬 더 잘 파악하고 잘 사용하신다고 생각합니다 :) 저는 툴을 사용하는 것이 굉장히 서툴러서요. 사용해봤자 Visual Studio Code 뿐... 

아래 이미지 좌측 패널에 Layouts와 Code 탭이 있는데 Code를 선택하면 탭이 전환되어 컴포넌트의 목록을 보여주고 코드를 생성할 수 있는 버튼이 활성화됩니다. 아래 Create Code File을 선택해서 코드를 생성해봅시다.

 

저는 컴포넌트 이름을 FirstComponent로 짓고 Create 하도록 하겠습니다. 그럼 이미지 우측처럼 컴포넌트가 생성되었음을 확인할 수 있습니다.

컴포넌트 생성

컴포넌트 내부 코드를 보면 굉장히 복잡한 것처럼 보입니다. 하지만 여러분은 지금 이걸 다 이해하실 필요가 없습니다. 왜냐하면 오늘은 프레이머를 사용하기 위한 사전 준비! 워밍업을 하는 과정이기 때문에 벌써부터 힘 빼실 필요 없습니다. 생성한 컴포넌트의 샘플 코드를 아주 간결하게 다 날려버리겠습니다.

컴포넌트 내부 코드

🎯 컴포넌트 기본 구조 상세 설명

이렇게 코드를 다 날려줍니다. 이게 프레이머의 기본 컴포넌트 구조라고 보시면 됩니다. 하나씩 뜯어보면서 파악해 볼까요?

 

프레이머 기본 컴포넌트 구조

리액트를 사용하기 위한 구문입니다. 자바스크립트에서 react 라이브러리를 가져와서 사용하겠다는 표현식이라고 보면 됩니다.

import * as React from "react"

조금 쉽게 풀어서 설명드리면,

 

import = 가져온다!

* as React = react 라이브러리에 있는 모든 기능들을 React라는 이름으로 사용할 거다!

from "react" = 프레이머에서 미리 다운받아 놓은 react라는 라이브러리를 가져온다!

 

저도 문과생으로서 독학으로 React, Vue를 공부하면서 이런 용어 하나하나가 굉장히 이해하기 힘들고 까다로웠던 생각이 듭니다. 하지만 꾸준히 코드를 반복적으로 접하고, 작성하니 자연스레 이러한 구문들과 친해지게 되었던 기억이 납니다. 반복! 그리고 연습이 답인 것 같아요. 그래도 최대한 쉽게 설명하려고 노력하도록 하겠습니다.

 

그 아래에 Framer 라이브러리에서 Frame 컴포넌트를 가져오는 구문이 있네요. 코드는 아래와 같습니다.

import { Frame } from "framer"

아까 리액트 라이브러리를 가져오는 구문과 비슷하죠? 하지만 리액트는 전체를 가져오는 구문을 사용했지만(*<가지고 있는 모든 것들을> as React<React라는 이름으로 사용할래!>) 프레이머는 조금 다르죠? 그렇다면 import 옆에 있는 저 중괄호는 도대체 뭐냐!

자바스크립트 import 구문 사이의 중괄호는 from 뒤에 framer라는 라이브러리에서 제공하는 다양한 컴포넌트들을 개별로 가져오겠다는 의미를 가지고 있습니다. 

 

{ Frame } ?

"framer에서 제공하고 있는 다양한 컴포넌트 중에서 Frame의 이름을 가지고 있는 컴포넌트를 가져올 거야!" 라는 의미로 보시면 됩니다.

 

그렇다면 framer에서 제공하는 다양한 컴포넌트 중에서 Page 컴포넌트를 하나 불러오고 싶으면 어떻게 할까요?

import { Page } from "framer"

이렇게 작성하면 되겠죠? 간단하죠? 

 

그럼 이제 대망의 컴포넌트 구현체 부분입니다.

export function FirstComponent(props) {
    return (
        <Frame
            width={100}
            height={100}
            background={"#242424"}
        >
        시작이다
        </Frame>
    )
}

 

import 구문을 사용해서 라이브러리에서 제공하는 다양한 컴포넌트나 기능들을 가져온 것 기억하시나요?

import가 있으니 export도 있겠죠? export는 export 뒤에 구현한 로직들을 밖으로 내보내겠다는 의미를 가지고 있습니다.

export 뒤에 function FirstComponent() { } 함수를 선언한 구문이 있는데 처음 보시면 뭐지? 라는 생각을 가지실 수 있습니다. 차근차근 해결해봅시다

export function FirstComponent(props) {

export 앞에 function은 함수를 만들게 도와주는 예약어입니다.

예약어는 또 뭐야? 함수는 또 뭐야? 라는 생각을 하시겠죠?

예약어는 말 그대로 특정 언어를 사용했을 때에 미리 지정되어 있는 구문이라고 보시면 됩니다.

import, export, const, function, class 등 여러 가지 예약어가 존재합니다. 저희는 그저 function이라는 단어는 "자바스크립트에서 함수를 사용하기 위해서 사용하는 거구나!" 라고 생각하시고 넘어가시면 됩니다.

함수가 왜 나왔을까요?

저희가 프레이머에서 이야기하는 컴포넌트들이 바로 이 함수로 구성되어 있습니다. 함수를 통해서 컴포넌트가 만들어지는 것이죠. (사실 좀 더 복잡하게 들어가면 React의 특징적인 부분들이라 함수형, 클래스형 컴포넌트들이 존재합니다. 하지만 현재는 눈앞에 보이는 저 함수는 컴포넌트를 만들려고 저렇게 함수를 불러왔구나~ 라고 생각하고 넘어가시면 됩니다.)

저희는 쉽게 생각하도록 해요. "함수를 활용해서 컴포넌트를 만드는구나~" 라구요.

function 앞에 FirstComponent는 뭘까요? 바로 함수 이름입니다.

함수가 뭐라고 하자고 했죠? 컴포넌트죠. 그럼 바꿔 말해서 컴포넌트의 이름이라고 생각하시면 됩니다. FirstComponent의 이름 뒤에 소괄호가 존재하네요. 소괄호는 컴포넌트에 전달받을 값들을 지정합니다.

props는 추후 설명드릴게요. "props라는 값을 받은 (지금은 무슨 데이터인지 모르죠) FirstComponent 구나" 라고 생각하시면 됩니다.

(props)를 지나서 { 중괄호의 시작점을 만났습니다. 함수 내부에 특정 기능을 부여하기 위해서 이렇게 중괄호 사이에 여러 가지 로직을 작성합니다. 중괄호 사이에 아래와 같이 return 구문과 함께 어떠한 로직이 작성되어 있는 것을 알 수 있습니다.

    return (
        <Frame
            width={100}
            height={100}
            background={"#242424"}
        >
        시작이다
        </Frame>
    )
  }

return이란 함수에서 작성된 결과물을 내보내기 위한 구문입니다.

return 구문 뒤에 Frame과 관련된 코드가 작성되어 있죠? 말 그대로 Frame 코드들을 return(밖으로 반환할꺼다!)라는 의미입니다.

이 부분을 궁금해하시는 분들도 많을 것 같습니다.

"return은 알겠어요. 근데 return 뒤에 왜 소괄호()로 감싸서 저렇게 Frame 뭐시깽이를 작성한 거죠?"

소괄호를 사용하는 이유는 가독성을 좋게 하기 위해 사용된 JSX 구문입니다. JSX라고 하면 또 엄청 낯설죠. 

"JSX 문법에서 여러 줄로 코드를 깔끔하게 작성하기 위해 저렇게 소괄호를 사용하는구나~" 라고 생각하시고 넘어가시면 됩니다 :)

소괄호를 넘어서 드디어 Frame 컴포넌트가 작성된 곳까지 오셨습니다. 처음 코드를 접하시는 분들은 이런 부분들도 굉장히 까다롭게 느껴지기 마련이죠. 저도 그 마음 굉장히 이해가 가구요. 그래서 최대한 쉽게 설명을 드리고자 합니다.

기억이 나실지는 모르겠지만(나셔야 합니다..ㅎ) 위에서 framer 라이브러리에서 Frame이라는 컴포넌트를 가져온 것 기억하시나요?

import { Frame } from "framer"

리마인드 차원으로 한번 더! 이렇게 Frame의 이름을 가진 컴포넌트를 가져왔습니다. 가져만 오면 의미가 있나요? 이제 사용을 해봐야겠죠?

 

사용할 때는 아래와 같이 사용하면 됩니다.

<Frame /> // 그냥 컴포넌트만 가져오고 싶다면 이렇게 하셔도 됩니다.
<Frame></Frame> // 컴포넌트 안에 다른 로직을 작성하고 싶을 때 열고 닫습니다.

여기서 좀 더 추가할 게 있죠! 위 예시에는 <Frame {무언가가 있었죠?}>

Frame 사이에 무언가가 있었죠? 그 무언가가 바로 아까 말씀드린 props라는 값들입니다. props라고 말하면 굉장히 생소하죠. 우리가 만들려는 컴포넌트에다가 넣어줄 값들이라고 생각하시면 됩니다.

Frame 컴포넌트에 width, height, background가 있는 게 보이시죠? 그 말은 즉슨 Frame이라는 컴포넌트를 만들 때 width, height, background라는 값을 받아서 뭔가를 하겠다는 의미입니다. 우리는 framer에서 제공해주는 Frame이라는 컴포넌트를 사용하는 것이니까 Frame 컴포넌트에서 저렇게 컴포넌트를 만들어 놨겠죠. 단순하게 제공해주는 Frame 컴포넌트를 예시로 들자면 아래와 같을 것입니다.

export function Frame({ width, height, background }) {
    return (
    	// 가져온 width, height, background 값들로 뭔가를 만들고
        // 만든 결과를 return 해준다.
		...
    )
}

Frame 컴포넌트에 radius랑 size 값들을 설정해볼게요.

 

FirstComponent

자 컴포넌트 설정을 완료했습니다. 그럼 이제 컴포넌트를 디바이스 레이아웃에 넣어볼까요? 우리가 만든 파일을 드래그해서 디바이스 레이아웃 안에 넣어주면 됩니다.

컴포넌트 추가

짠! 드래그한 컴포넌트가 디바이스 레이아웃에 추가되었습니다.

디바이스 레이아웃에 추가

👋 마무리

이번 포스팅에서는 Framer가 무엇인지 그리고 어떤 기술 스택으로 구성되어 있는지 살펴보았고, 기본적인 회원가입 그리고 사용 방법에 대해서 다뤄보았습니다. 최대한 쉽게 설명한다고 풀어서 설명했는데 제가 설명을 잘 못해서 이 글을 접하시는 분들이 과연 잘 이해하셨을지는 잘 모르겠네요. 앞으로 프레이머 강의를 계속 올릴텐데 좀 더 쉽게 설명하도록 더 노력하겠습니다!

 

예제를 통해서 쉽게 학습하시고 싶으신 분들은 아래 강의도 괜찮아요! 👍👍👍

[예제를 통해 학습하는 프레이머X #1] 페이지 툴을 활용한 스와이프 기능 구현 (Page Interactions)