노코드 툴 Framer 배우기 #1

Framer 배우기_Day1

지금까지 여러 프로토타입들을 만들어보며 아쉬웠던 부분은 정말 실행되는 것 처럼 만들었지만, 사실은 실행되지 않는다는 점이었다. 개발 바로 직전까지만 닿을 수 있었는데, 이번 노코드 툴 학습을 통해 실제 구동하는 화면을 만들 수 있다는 게 기대가 된다. 일주일간 노코드 툴인 'Framer'를 통해 랜딩페이지 제작을 목표로 학습하는 것이 목표이다.

 

Framer를 통해 개발 과정 없이 바로 실행할 수 있는 페이지를 만들 수 있다. Frame에서 웹사이트를 디자인하면 곧바로 사이트가 개설되는 것이다. 오늘은 이 Frame 툴을 처음 접해보려 한다.

 

---

 

랜딩페이지

최종 목표인 랜딩페이지에 대해 알아보자. 랜딩페이지는 사용자가 처음 도달하는 페이지로 회원가입등과 같은 행동을 유도할 수 있으며, 브랜드의 첫인상을 좌우한다. 이는 전환율에 직접적인 영향을 미친다. 그러므로 랜딩페이지는 논리적, 시각적으로 사용자를 설득할 수 있는 페이지이어야 한다.

 

 

Framer 용어

Framer는 전체적으로 Figma 툴 사용법과 유사했지만, 몇가지 중요한 툴 용어가 달랐다.

• Autolayout=Stack
• Hug=Fit
• Ignore Autolayout=Position Absolute
• Stroke=Border

 

 

실습

기본적인 기능들을 하나씩 사용해보며 툴을 익혔다.

 

➀ Stack

첫번째로 가장 기본적인 Frame과 Stack을 구분할 수 있다. Frme 속의 요소들은 자유롭게 배치되지만, Stack은 Figma의 Autolayout과 같이 Stack 속의 요소들이 레이아웃에 맞춰 배치된다.

 

 

➁ Size

사이즈 조절을 Width값으로 조절해보았다. Fixed/Fill/Fit/Relative로 조절할 수 있으며, Relative의 경우 부모 개체의 퍼센트 영역으로 조절할 수 있는 설정값이다.

 

 

Viewport의 경우 Height에만 있는 옵션인데, 화면 크기에 맞춰 영역의 크기가 정해지는 옵션이다. Preview를 통해 확인해보면, 화면 크기에 맞춰져 Viewport를 적용한 박스의 크기가 변화한 것을 확인할 수 있다.

 

 

➂ Position

Position은 스크롤 시 위치 옵션으로 인터렉션에서 중요하게 활용되는 속성이다. 기능은 모두 Figma 프로토타입과 유사했다.

 

 

다만 용어가 달라 이름을 잘 기억하도록 해야한다. Relative의 경우 부모 개체(현재 Steck 상태의 Desktop)의 레이아웃대로 쌓이는 것이고, Absolute의 경우 레이아웃과 상관없이 원하는 곳에 배치할 수 있는 옵션이다.

 

 

Fixed와 Sticky는 Figma와 같고, Sticky의 경우 어디에 붙을지 Top 값을 설정해주어야 한다.

 

 

➃ Distribute

Distribute는 Stack 설정 이후 설정할 수 있는 옵션이고 내부 개체 나열 방식을 설정할 수 있다.

 

 

➄ Overflow

Overflow는 콘텐츠가 컨테이너를 초과할 때 동작하는 방식을 말하며, Cilp/Hidden/Visible/Scroll 4가지 방식으로 조절이 가능하다. Cilp과 Hidden은 컨테이너 밖으로 나간 콘텐츠는 안보이게하는 것은 똑같지만, Cilp이 다른 스크롤들과 같이 동작됐을 때, 버그가 적고 성능이 좋게 설계된 최신 옵션이라고 한다.

 

 

⑥ Card 제작

다양한 Card 옵션을 제작해보며 'Insert'의 다양한 Icons과 Media의 Image 블럭을 사용해볼 수 있었다. Figma보다 좀 더 편리하게 다양한 옵션들을 제작하지 않고도 쉽게 가져다 쓸 수 있는 점이 매우 큰 장점으로 보여졌다.

 

 

Image 위에 글자를 배치하고자 하는 경우, Position의 속성을 이용해 Absolute로 지정해주면 Stoke 상태에서도 원하는 자리에 배치할 수 있다.

 

 

⑦ Button 컴포넌트

Button은 웹에서 상태를 항상 표시해 주어야하기 때문에 'Hover/Pressed' 상태를 항상 만들어주어야 한다. 이를 위해선 컴포넌트로 제작해주어야 하는데, Framer는 이를 쉽게 제작할 수 있도록 Primary 버튼을 하나 만들어 컴포넌트로 변경해주면 오른쪽으로 + 하여 베리언츠를 제작하고, 아래로 + 하여 Hover와 Pressed 상태의 버튼을 간편하게 제작할 수 있었다.

 

---

 

이렇게 오늘 실습을 통해 기본적인 툴의 기능들을 다뤄보았다. Figma와 대체로 비슷한 부분이 많아 이해하기 좋았고, 더 편리하게 적용할 수 있는 Insert 부분이나 컴포넌트 제작 과정이 인상깊었다. 처음 만난 용어들도 반복해서 사용해보며 Framer에 익숙해질 수 있도록 할 것이다.