Framer 입문기

Framer 입문 2개월, 프레이머에 대한 자료가 너어어어어무 없어서 "직접" 만들려고요. Framer 블로그.

 

앞서 저의 Background를 소개해보자면,

• Design : Figma 3년째 사용 (이해도 상)
• Develop : 약간의 Python, 약간의 HTML, 약간의 CSS, 약간의 JS (외 약간의 C, 약간의 C++)
• 2022년 8월 기준, 1개월 차 개발자?기획자?디자이너?데이터분석가? (실무 경험 0에 수렴)

인턴 시절에 기획했던 기능을 리액트를 활용해 프로토타입을 만들었었는데, 그 순간 프로토타입의 위대함에 눈떠버렸습니다! 확실히 프로토타입을 가지고 설득하는 편이 더 설득력 있더라고요. 

 

프레이머를 사용하게 된 이유

저는 프로토타입을 만들기 위해 리액트를 입문했습니다. 실서비스 퀄리티로 만들 필요가 없기 때문에, 조금 공부한걸로도 내가 기획한 것들을 구현할 수 있었습니다. 다만 문제점이 있다면,

• 피그마로 디자인한 화면을 다시 코드로 구현해야 한다. 
• 코드로 레이아웃 짜는 게 (나한텐) 너무 어렵다.
• 반응형 만드는 게 너무 복잡하다.
• 배포하는 과정이 너무 복잡하다. 

애초에 저는 사용자의 input 값을 받아, 막 계산하고, 결과로 시각화해주는 그런 기능들을 프로토타입으로 만드는 게 목적이었습니다. 근데 만든 김에 잘 만들어 보자 하는 생각에 이쁘게 꾸미고... 반응형을 만들어보고... 배포해보고... 여러므로 시간을 많이 뺏기는 느낌이었습니다. (그리고 토스에서 프레이머를 쓴다네요) 그래서 프레이머에 입문하게 되었습니다. 

 

프레이머에 대하여

프레이머는 프로토타이핑 툴로, 코드 없이 프로토타이핑을 만들 수 있어 디자이너 사이에 유명한 툴입니다. 하지만 코드를 덧붙이면, 더 엄청난 결과물이 나오게 됩니다.

• 모션을 넣어 사용자의 눈길을 끌 수 있습니다.
• 실제 데이터를 화면에 보여주는 등 실제 서비스에 더 가까운 프로토타입을 만들 수 있습니다. 
• 웹으로 배포하기가 아주아주 쉽습니다.
• GA도 달수 있어요!

 

다만, 최근에 프레이머가 업데이트를 했는데,,,

• Code Override에 대한 새로운 버전의 자료를 찾기가 너무 어렵습니다. 특히 한국어 자료는... 포기하는 편이 빨라요. (2022년 7월 기준..)
• 아직 막혀있는 기능들이 간간히 있습니다. 

그럼에도 저는 코드로 레이아웃을 짤 필요가 없다는 게 너무 좋아서, 계속 공부하는 중입니다. 

(참고로 모션에 대한 자료는 많아서, 모션 공부에는 큰 어려움은 없을 듯 해요 ㅎㅎ)

 

Appendix

이번 글에는 별 내용이 없기 때문에 제가 자주 참고하는 사이트들과 영상 링크라도 첨부해 보이겠습니다. 

공식 사이트를 최우선으로 보시는 걸 추천드려요. 더불어 구글링 해서 나오는 자료들은 프레이머 X 시절의 자료가 많기 때문에, 감안하면서 보셔야 할 듯합니다. 

• Framer 공식 사이트 / 학습 : https://www.framer.com/learn/

Framer: Make beautiful sites in minutes

• Framer 공식 사이트 / Developers : https://www.framer.com/developers/ 
• Coding with Seth - Coding in Framer 영상 : https://youtube.com/playlist?list=PLRG1hGYAPvla9Gu9GEdNSjRAu7ay7Q9eP