Framer 사용해보기

프레이머를 사용하여 나만의 블로그 만들어보기

프레이머를 사용해보자

아직 피그마도 엄청 잘 다루지는 못하지만 예전부터 계속 언급이 되고 있는 프레이머를 사용해보기로했다.

프레이머를 처음 들은 것은 토스에서 사용하고 있다고해서 알게되었는데... 요새는 디자이너들이 웹사이트를 만들 때 좋다고 해서 더 알려진 것 같고 사용하는 것도 그쪽으로 더 발달한 것 같다.

프레이머를 실행한 모습

실행해봤을 때는 처음 사용하다보니까 우측에 welcome to Framer라고 공식 설명 부분이 나와있었고, 좌측 패널에는 home이라고 이름이 표시되어있었다.

상단 + 버튼을 눌러보았더니 다양하게 기본 틀을 제공하고 있었습니다. 그래서 처음 사이트를 만들 때에 부담없이 기본 틀을 사용해서 제작할 수 있다는 장점이 있는 것 같다.

이렇게 하나 선택해서 add하게되면 데스크탑, 타블렛, 폰화면까지 다 제공해주는 것을 확인할 수 있었다. 정말 간편한 것 같다.

프레이머를 직접 사용하면서 익혀봐야겠다 생각이 들던 도중, 막상 사용해보니 은근 모르겠는게 많아서

유튜브를 같이 보면서 진행하기로했다.

그렇지만 베이스는 그냥 일단 만들어보는 것! 만드는 김에 블로그를 직접 만들어보기로했다.

컬러 스타일 추가할 때 라이트/다크 를 바로 설정해서 넣을 수 있는 것 같았다.

주로 사용할 색상들만 스타일 지정해놓으려고하는 와중에 저렇게 라이트/다크모드인 아이콘이 보였다.

프레이머는 이렇게 스타일 추가할 때 라이트, 다크를 설정해서 추가할 수 있는 것을 확인할 수 있었다.

컴포넌트도 직관적으로 추가가 가능했다.

이 부분이 신기했다. 컴포넌트 관리하는 페이지도 따로고 아직 명확하게 이해가 되진 않았지만..!

컴포넌트 페이지로 넘어가면 primary 즉 메인 컴포넌트를 만들고 클릭하면 저렇게 variant 부분이랑 state 설정이 따로되는 것이 좋았다. 

그래서 일단 데스크탑이랑 모바일 카드 나눠서 만들어놓기까지 진행했다..

앞으로 블로그 구성을 좀 더 생각해서 인터렉션까지 추가해보는것까지 진행을 더 해봐야겠다.