노코드 툴 Framer 배우기 #2

Framer 배우기_Day2

오늘은 어제 배운 기능들을 사용하여 랜딩페이지를 제작 실습을 진행하였다. 노션의 랜딩페이지를 클론해보고, 디스플레이에 맞춰 반응할 수 있도록 데스크탑, 타블렛, 모바일 화면을 제작하였다.

 

---

 

Section

먼저 랜딩페이지의 센션을 파악했다. 랜딩페이지는 여러개의 섹션들로 이루어져 있는데, 구성요소에 따라 어떤 네이밍으로 불리는지 알 수 있었다.

 

 

Breakpoint

디바이스에 맞게 반응하는 화면을 위해선 화면이 바뀌는 기준 사이즈가 필요한데, 이를 Breakpoint라고 한다. 일반적으로 모바일/타블렛/데스크탑 3단계로 나뉘며, 표준 Breakpoint가 있지만, Framer에서 제공하는 사이즈를 사용했다.

 

 

반응형 디자인

Framer에선 데스크탑을 Primary로 사용하는 원리였으며 이를 바탕으로 타블렛과 모바일 화면을 정돈해주는 과정으로 작업 프로세스가 이루어져있다. 큰 화면(Primary) → 작은 화면으로 순으로 설계가 진행되며, 이 반대로는 반영이 안되는 시스템이다.

 

 

Wireframer

Framer의 AI 기능인 Wifeframer로 와이어 프레임까지 제작을 할 수 있었다. 원하는 프롬포트를 입력하면 알아서 와이어프레임까지 제작해주면 되어서, 와이어프레임 제작 과정 없이 바로 디자인을 시작할 수 있는 매우 편리한 기능이었다.

 

 

Interactive

Interative 효과들을 활용해 좀 더 멋진 화면들을 제작할 수도 있었다. 오늘 사용해본 Interative는 Ticker과 Slidshow였는데, 평소 웹 사이트에서 많이 봐왔던 익숙한 효과들이라 

Ticker

 

Slideshow

 

 

Component

버튼의 경우 Component로 제작하였는데, Figma에서 Text property를 적용했던 것과 같이, Text를 수정할 수 있었다. 별도의 설정 없이 이런 기능이 다 갖춰져 있어, 제작에 굉장히 편리한 툴이라는 생각이 들었다.

 

 

반응형 랜딩페이지 실습 완료

토스의 랜딩페이지를 클론디자인하며 Frame로 반응형 페이지를 제작했다. 반응형으로 모바일에선 Top Nevigation이 메뉴로 들어간다거나, 2열이었던 레이아웃을 1열로 정리해서 디스플레이에 대응하게 제작하는 과정이 흥미로웠다.

 

---

 

오늘은 실제 랜딩페이지를 만들어보았는데, 이틀만에 실제 사용이 가능한 페이지를 제작할 수 있는 것으로 하여금 Framer가 얼마나 편리하고 강력한 툴인지 체감이되었다. Figma를 사용할 줄 알면 금방 익힐 수 있는 기능들과 Wireframer AI 기능으로 와이어프레임까지 제작이 가능한 점이 매우 강력한 Framer의 장점으로 느껴졌다. 이 툴을 적극적으로 사용하면 원하는 다양한 반응형 페이지를 만들 수 있겠다는 생각이 들었다.