[작업기] 첫 프레이머 템플릿, Interactive Slides

오늘까지 총 54개의 판매를 기록한 내 프레이머 템플릿, Interactive Slides. 종종 판매 소식을 알리는 이메일이 올 때면 반갑다. 

 

 

https://www.framer.com/templates/interactiveslides/

https://interactive-slides.framer.website 

 

만들게 된 계기는 pdf 포트폴리오였다. 이직을 위해 포트폴리오 작업을 하다가 화가 났다. pdf 포맷으로 만들자니 영상이나 프로토타입 위주의 내 작업들을 보여줄 수가 없고, 그렇다고 무겁게 영상을 첨부한 ppt 포맷으로 만들 수도 없고, 온라인으로 슬라이드를 만들 수 있는 Google Slides나 Canva는 아무래도 지원되는 기능이 정해져있다보니 커스터마이즈 하는 데에 한계가 너무 많았다. 그렇다고 포트폴리오 하나 때문에 Pitch 같은 유료 서비스에 구독료를 내고 싶지도 않았다. 

그 때 번뜩 생각난 방법이 프레이머로 웹사이트를 만들되, pdf 슬라이드 형식으로 컨텐츠를 볼 수 있게 하는 방법이었다. 구현도 어렵지 않을 것 같았고, 여러가지 장점이 머릿속에 그려졌다.

1. 프레이머 무료 플랜으로 만들고, 웹사이트 링크를 공유하는 방식으로 쉽게 다른 사람에게 공유가 가능하다.
2. 영상, 링크, 프로토타입, 실제 인터랙션 등 보여줄 수 있는 컨텐츠의 타입이 매우 다양하다. 심지어 영상도 직접 업로드를 해도 되고, AWS같은 다른 클라우드 서비스에 올려둔 파일들을 불러올 수도 있고, 유튜브/비메오에 올려둔 영상도 넣을 수 있다. 
3. PDF처럼 항상 고정된 비율의 컨텐츠를 보여줄거면, 웹사이트를 반응형으로 디자인하듯이 여러 버전의 디자인을 복잡하게 만들 필요도 없다. 보고 있는 화면의 크기/비율에 맞게 크기를 조절할 수 있도록 코드를 짜면 된다. 모바일/타블렛 같은 세로 비율의 기기에서는 컨텐츠의 방향을 90도 돌려주면 더 원활하게 볼 수 있을것이다. 
4. 한 도메인 안에서 하위 페이지를 만들고, 접속자 수를 파악할 수 있다. 여러 곳에 지원할 때, 쉽게 페이지를 복제하고, 그 페이지를 열어본 사람의 수를 확인하는 방식으로 이 회사에서 열어보긴 했는지 (ㅎㅎ) 확인이 가능하다. 

포트폴리오가 필요한 나 같은 사람 뿐만 아니라, 위의 장점이면 피치를 해야하는 스타트업/브랜드에서도 쉽게 사용할 수 있을 것 같았다. 특히, 이미 프레이머 웹사이트를 가지고 있는 사람이라면 쉽게 기존 컨텐츠를 가져올 수 있으니 효율적일 것이다. 

그래서 이왕 내가 필요해서 만드는거, 다른 사람들도 쓸 수 있게 꼼꼼하게 작업을 하고 템플릿으로 판매를 해보게 되었다. 작업부터 판매까지, 그 과정에서 든 몇 가지 생각들. 

 

Interactive Slides

 

결국 이것도 제품이다. 

하나의 서비스를 구축하는 것 만큼의 규모는 절대 아니지만, 결국 템플릿도 제품이다. 평소 프로토타입 형식으로 작업을 할 때와 달리, 유지 보수가 될 수 있게, 최대한 버그가 없게, 필요한 부분은 커스터마이즈 할 수 있게 만들어야했다. 이 템플릿의 경우는 일반적인 템플릿처럼 특정 용도를 위한 '디자인'을 제공한다기 보단 컴포넌트를 통해서 '기능'을 제공하는게 초점이었기에 더더욱 그랬다. 

그리고 제품이기 때문에, 어디에 올려서 홍보할지가 고민이었고, 이 부분은 아직까지도 진행중이다. 지금은 프레이머 커뮤니티와 Read.cv 커뮤니티에만 홍보를 한 것 치고는 계속해서 트래픽이 생기고 있다. 좀 더 나와 비슷한 니즈를 가진 사람들, 구직중인 디자이너, 스타트업, 브랜드 쪽 작업을 하는 사람들이 있는 커뮤니티에 홍보를 한 번 해두면 트래픽이 더 생길 것 같은데, 막상 찾으니 잘 없기도 하고, 실제로 내가 활동하지 않는 커뮤니티에서 홍보만 하고 나오는 데에도 좀 거부감이 있다. 이 템플릿으로 큰 돈 벌 생각도 아니니, 홍보에 소극적이게 되지만, 업데이트를 한 번 하면서 좀 더 홍보를 해볼까 싶다. 적어도 템플릿이 어떤 니즈를 충족하고 있다는 것은 지속적인 구매에서 검증이 된 것 같다. 

 

소프트웨어로 이케아 해킹(IKEA hacking) 하기

이케아 해킹은 저렴하고 조립이 용이한 이케아 제품을 이용해서, 기존 제품의 디자인 의도가 아닌 사용자가 원하는 방식으로 재조립하거나 해체하고 조합하는, 일종의 DIY다. 말이 좀 이상하지만, 종종 소프트웨어로 비슷한 행동을 하는 경우들이 보인다. 피그마는 UI에 최적화된 툴이지만 프레젠테이션을 만드는 경우는 정말 흔하고, 인테리어 배치 구상, 심지어는 영상을 만드는 경우까지도 봤고, 노션이나 Google Spreadsheet을 웹사이트 빌더 처럼 활용하는 서비스들도 많다. 나도 간단한 영상은 프레이머로 만들기도 했고, 이번에 만든 템플릿도 비슷한 결인 것 같다. 이케아도 조립/해체가 용이하다는 점에서 확장성이 높은 것 처럼, 피그마나 프레이머처럼 확장성이 높은 툴, API등을 통해 쉽게 변형이 가능한 툴에서 가능한 일이다. 이미 그 툴에 익숙한 사람들에게는 접근성도 높다. 

이런 아이디어들이 재미있는 점이, 정말 조금만 기능을 가미해도 금방 뾰족하게 유용한 걸 만들 수 있으면서도, 기존의 툴이 가지는 강점들을 다 활용할 수 있다는 점이다. 프레이머에서 프레젠테이션을 만들 수 있도록 간단한 네비게이션과 다양한 화면사이즈에 최적화만 했을 뿐인데 기존의 프레이머의 인터랙션을 그대로 다 활용할 수 있어서, 훨씬 다양한 전환 효과나 인터랙션을 넣은 프레젠테이션을 만들 수 있으니, 내 입장에서는 인풋 대비 활용도가 엄청 높은 템플릿을 만들 수 있었던 것이다. 이런 니즈들을 잘 찾아서 앞으로도 다른 피그마 플러그인이나 프레이머 템플릿을 만들 수 있지 않을까. 

 

 

템플릿을 만들 때 고려할 것들. 

처음 알게 된 사실은 Framer의 Template 페이지에 소개되려면 심사에 약 2주정도가 걸리고, 심지어 꽤나 까다롭다는 점이다. 나는 두 번 반려되었는데, 아마 첫 번째는 레이어 이름 이슈였던 것 같고(레이어 이름을 어느정도로 정리해야하는지 몰랐다), 반려된 이유를 자세히 알려주지 않기 때문에 두 번째 반려 때 메일을 보내서 물어봤다. 두 번째 이유도 레이어 이름이라고 해서, 더 깔끔하게 구조화해서 보냈더니 통과가 되었다. 

사실 Template 페이지에 소개되는 큰 메리트는 없는 것 같다. 물론 그 쪽을 통해서 트래픽이 생기긴 하겠지만, 상위에 떠있는 건 정말 잠깐이기 때문에, 그저 프레이머에게 공인받았다는 그 사실로 쓸만한 템플릿이라는 신뢰감을 주는 것 정도 아닐까. 어쨋튼 심사 기간 등을 고려해서 미리 미리 신청하고, 꼼꼼히 살펴보고 제출하는게 좋은 듯.