장인은 도구를 탓하지 않는다
그런데 나는 장인이 아니고...
Photo by Barn Images on Unsplash잊혀진 이름들
2017년 무렵 한창 Framer 열풍이 불던 시절, 나도 시류에 편승하여 코드를 끄적이며 여기저기 불려다니던 때가 있었다. 그러나 우쭐했던 기분은 순간이었고, 트렌드의 변화와 Framer의 잦은 업데이트로 이따금씩 불안이 찾아오곤 했다.
툴에 매몰되면 안될 것 같아요.
당시 어울렸던 몇몇 디자이너분들도 같은 생각이었는지, 밋업에서나 SNS 상에서나 으레 이런 말들을 나누며 불안을 공유했었다. 그로부터 몇 해 지나지 않아 Framer는 React 프로젝트에 최적화된 툴로 변모했고, 심지어 최근에는 Webflow 같은 웹사이트 도구를 지향하며 과거와 전혀 다른 미래를 그려나가고 있다.
정말 이러기야? ©FramerFramer가 한 챕터를 마치는 동안, 여러가지 상황과 우연이 겹치며 ‘인터랙션 디자이너’ 를 지향하는 이들은 점점 희미해졌고, 나 역시 이런저런 일들을 오가며 이제는 디자이너다운 혹은 디자이너스러운 정체성을 찾기란 쉽지 않게 되어버렸다.
그럼에도 불구하고
하지만 이 바닥(IT)의 일이라는게 언제나 작은 화면 안에서 아웅다웅 하는 것들을 다루다 보니, 그 속에서 어떤 정보를 어떻게 효과적으로 보여줄지 고민하는 날들의 연속이었고, 정적인 화면에서는 해결할 수 없는 문제들도 더러 있게 마련이었다.
물론 간단한 경우에는 Figma에서 바로 해결할 수도 있고, 좀 더 고민이 필요한 경우에는 Protopie라는 훌륭한 도구가 있지만, 아무래도 손에 익은 도구를 써야 최대한의 효율을 낼 수 있을 것 같다는 생각에 늘 아쉬움이 남았다.
혹시나 나와 같은 생각을 하는 사람들이 조용히 숨어있는 것은 아닐까 하고, Framer의 기능 요청 게시판에 글을 올려보기도 했다. 몇 사람들의 공감을 받긴 했지만, 냉정한 답변과 함께 나의 글은 ‘CLOSED’ 처리 되었다.
고민하는 척이라도 해보면 안되겠니... ©canny.io우린 답을 찾을 것이다
단념하려던 차에 여기저기를 기웃거리다보니 흥미로운 정보들을 얻을 수 있었다. Framer.js가 오픈소스인 덕분에 몇몇 사람들이 재미있는 시도들을 해보았던 것이다. Figma 플러그인으로 에디터를 만든 사람이 있는가 하면, 코드 에디터 Atom의 패키지로 Framer Studio를 재현한 사람도 있었고, VScode에서 Framer.js를 불러와 편집하는 것도 가능해 보였다.
Figma 플러그인인 Prototyper는 디자인 파일에서 그대로 인터랙션을 추가할 수 있다는 게 무척 매력적이어서 베타 프로그램에 참여해보았지만, Framer.js의 간편한 문법을 그대로 사용할 수 없다는 점이 아쉬웠다.
Atom의 패키지로 만든 Maji-Studio는 사용하기에 무난하고, 예전 Framer Studio를 보는 듯한 착각이 들만큼 잘 만들어졌지만, 내가 잘 모르는 것인지 디바이스 타입과 스크린 사이즈를 변경할 수 없어서 실무에서 사용하기엔 곤란했다.
https://wheresmykeyboard.com/2016/07/using-framer-js-windows-framer-studio-windows-alternative/
코드 에디터에서 Framer.js를 불러와 사용하는 방법은 시작부터 어려웠고, 제대로 따라한 것 같은데 잘 되지 않아 결국 포기했다.
이것도 재미있는 시도였지만, Framer Studio의 편의성을 따라가지는 못했다.
의외로 간단했던
이런 일에 에너지를 쏟기엔 다른 일들이 산적해 있기도 했고, 낭비라는 생각이 들어 정말 단념하려던 무렵, 생각해보면 Framer Studio는 결국 몇 가지 편의 기능이 추가된 Framer.js 전용 코드 에디터인 셈이었고, 어떻게 해서든지 코드 에디터에서 불러오기만 하면 되는게 아닐까 하는 생각에 무작정 과거에 작업했던 폴더를 VScode로 열어보았다.
그런데 이게 왠걸. 옛날에 Framer Studio에서 보던 것 그대로 모두 잘 동작했다.
짜잔~!장인은 도구를 탓하지 않는다지만, 나는 장인이 아니라 ROI를 걱정하는 직장인일 뿐이기에, 손에 익은 도구를 다시 만나게 되어 다행이었다. 혹시나 도구를 탓하고 있는 또 다른 워너비 장인들이 있다면 아래 방법을 추천한다.
1. VScode 설치
2. VScode 확장프로그램으로 LivePreview 설치 (보기 > 확장 > Live Preview 검색)
3. framer starter kit 모두 내려받기 (폴더/파일 목록 우측 상단 Code 버튼)
4. 새 프로젝트 폴더 만들고, framer starter kit 폴더 안의 내용 복사하기
5. VScode에서 새 프로젝트 폴더 열기
6. index.html 파일 선택해서 LivePreview 실행 (편집창 우측 상단 아이콘)
7. app.coffee 파일 선택해서 해피 프로토타이핑!
8. 가이드 문서 복습 (The Framer Classic book)
당부의 말씀
잘 되지 않는다면 아마도 node.js나 CoffeeScript 컴파일러가 없기 때문일 것이라고 생각합니다. ‘우린 답을 찾을 것이다’ 단락의 네번째 링크를 따라서 설치해 보시거나 생활코딩 CoffeeScript 토픽을 참고해 보셔도 좋겠습니다.
업데이트
framer starter kit의 app.coffee 파일 수정
아이폰 12 이상 해상도 기준
모바일 프리뷰 대응 (반응형)
모바일 프리뷰
1. VScode에서 확장프로그램 LiveServer 설치
2. index.html 선택해서 LiveServer 실행 (127.0.0.1:{포트번호}/index.html)
3. 모바일에서 {PC의 ip주소}:{포트번호} 접속
4. iOS의 경우, Safari에서 접속 후 ‘홈화면에 추가’ 해서 확인
PC의 ip주소 확인하는 방법
Mac: 설정 > 네트워크 > 상태 항목에 표시
Windows: 제어판 > 네트워크 및 인터넷 > 네트워크 및 공유 센터 > 활성 네트워크 보기 > 연결 세부정보의 IPv4 주소
공통: 네이버에서 ‘내 컴퓨터 ip’ 검색
기타 등등
2022년 10월 5일 발행한 미디엄 원문을 첨부합니다.
