Framer X 시작하기
Framer X 기본 환경 세팅하기
Overview
지난해, 베타를 거쳐 정식버전으로 등장한 Framer X. 코딩이 어려워서, 대부분 예제들이 영어로 되어있어서, 주변에 딱히 쓰는 사람이 없어서. 이러한 이유들로 Framer X는 많은 디자이너들에게 선택받지 못한 채 멀어져만 갔다.
지난 1년간 Framer X를 경험하면서 실무에 도입하고, 회사 내부에서 교육을 진행했다.좀 더 많은 디자이너들이 Framer X를 쉽게 접할 수 있도록, 디자이너 입장에서 다가가 보려 한다. 진입장벽을 조금이나마 허물 수 있길
1. Framer X 다운로드
아래 Framer 공식 사이트에서 최신 버전을 내려받자. 메일 계정 하나 당, 14일의 시험버전을 이용할 수 있다.
2. VS Code 에디터 다운로드
사실 Framer X는 기본적인 코드 에디터를 빌트인으로 제공하기 때문에, 굳이 외부 에디터가 없어도 된다.
하지만 프레임을 보면서 동시에 코드 탭을 볼 수 있는 멀티태스킹이 불가능하다.
이왕이면 외부 에디터로 편하게 작업하는 걸 추천한다.
아래 Visual Studio 공식 사이트에서 최신 버전을 내려받자.
3. VS Code Extension 설치
다운로드한 VS Code를 열어, 왼쪽 맨 아래쪽을 보면 Extension 아이콘을 찾을 수 있다. VS Code는 수많은 괜찮은 기능들을 Extension으로 제공하고 있다.
우린 디자이너이니까 이 못생긴 테마를 바꿔보도록 하자.
Material Theme를 검색하면 가장 위에 표시되는 Extension을 선택하고, 초록색 Install 버튼을 누르면 설치가 시작된다. 참 쉽쥬?
Set Color Theme를 눌러 해당 테마의 다른 컬러로 변경할 수도 있다.
혹시 테마가 별로라면 다른 테마를 설치해보자. 필자는 Framer Syntax라는 테마를 쓰고 있다.
코드의 띄어쓰기나 줄 바꿈을 자동으로 정리해주는 자동완성 기능이 있다.
우선 Prettier를 설치하자.
Prettier는 정해진 규칙에 따라 자동으로 코드 스타일을 정리해주는 도구다. 설치가 끝났다면, 커맨드+쉼표를 눌러 설정에 들어가 보자. 검색창에 Format on save를 입력하고, 아래와 같이 체크해주면 끝이다.
마지막으로 Framer X 상단 사이드바 > View > Editor에서 Internal을 External로 변경해주자. Edit Code를 누르면 자동으로 외부 에디터가 열리도록 설정해주는 방법이다.
험난했던 설치 과정이 끝났다. 이제 본격적으로 Framer X를 즐기러 가자.
Cheers!
