디자이너긴 한데..피그마 플러그인을 개발하고 있어요..
figma plugin
안녕하세요 울지 않는 디자이너 검정바지입니다. 다들 잘 지내셨나요?
아 진짜 쓸 게 너무 많은데 자꾸 시간 없다는 변명만 하게 되네요..
6월은 믿어주십시오. 정말 많이 쓰겠습니다.
피그마 플러그인? 왜?
예전 글에서도 피그마 플러그인을 한번 제작한 경험을 소개했었는데요, 저번 달에 플러그인을 3개 정도 더 만들었어요. 돈도 안 되는 피그마 플러그인을 왜 자꾸 만드냐고요?
저는 디자이너-디자인 툴이라는 콘텍스트가 재밌게 느껴지거든요.
특히 디자이너의 생산성을 높일 수 있는 무언가를 제작하는 것을 최종 목표로 가져가고 있는데, 그러기 위해서는 일단 플러그인을 만들 줄 알아야 하잖아요?
그래서 그냥 연습용으로 계속 만들고 있어요. 뭔가 번뜩이는 생각이 들면 큰 고민 없이 바로 만들다 보니 사용수가 저조하긴 한데.. 뭐 괜찮아요. 언젠간 빛을 볼 날이 오겠죠.
아무튼 오늘은 그냥 홍보도 할 겸 그동안 만든 플러그인을 가져왔어요 ㅎㅎ
피그톡
피그마에 카톡을 집어넣었습니다.https://www.figma.com/community/plugin/1494021664168160307/messenger-for-figma
이 플러그인은 말 그대로 피그마 안에 있는 단톡방이에요.
궁금하시면 한번 써보세요..ㅎㅎ작업하면서 오토레이아웃이 안 먹히면 구글링도 해보고 단톡방에도 물어보고 물어볼 일은 많은데 채널은 분산되어 있다고 생각해서, 아예 피그마 안에 있으면 어떨까 싶더라고요.
디자이너 하면 또 소통이잖아요. 단톡방도 많이 있고 유용한 정보를 공유하고 잘 활용할 수 있지 않을까 싶어서 만들게 되었어요.
과정
단순 로직 플러그인이 아닌 백엔드 로직이 필요한 제품이다 보니, 이번에는 개발에 조금 더 집중하고자 했어요.
회사 업무와 이번 플러그인 구현에서 느꼈던 점은 채팅이라는 도메인(?)이 로직 자체는 어렵지가 않은데, 정말 많은 디테일이 요구되는 것 같았어요.
예를 들면,
유저가 예전 메시지를 보고 있을 때 최신 메시지가 오면 자동 스크롤을 막아야 하는데, 예전 메시지를 보고 있다는 것을 어떻게 판단하지?
같은 분 동안 메시지를 여러 개 보낼 때, 마지막 메시지에만 시간을 붙이려면 어떻게 동적으로 구분해야 할까?
이미지나 비디오를 보냈을 땐, 저장이 되도록 해야 하나 별도의 뷰어를 만들어야 하나?
유저의 피그마 프로필과 이름을 그대로 가져오는 게 맞나?
등등
다시 한번 느꼈지만, 카톡이 정말 잘 만들어진 메신저더라고요.
아무튼 개발에 집중하느냐고 플러그인 디자인 자체는 평소 친한 왓챠 디자이너분에게 부탁드렸고,
채팅을 한 번도 안 해보셨는데도 반나절만에 바로 디자인하시는 모습을 보면서 깜짝 놀랐어요.
역시.. 진짜 디자이너는 다르다..!
이 분도 최근에 블로그를 시작하셔서 디자인 과정을 더 보고 싶으신 분은 여기서 확인하실 수 있어요~!
그냥 바로 캡처이제 보니까 좀 지저분해 보이네요.. 제가 어질러놓은 것이고 실제로는 깔끔하게 전달받았습니다..
primary color가 핑크색인 이유는 뭐 크게 없습니다. 제가 핑크색을 좋아해서 요청드렸어요.
아무튼 아직 mvp라서 사실 텍스트와 이미지, 링크 정도밖에 공유할 수 없지만, 꾸준히 시간 내서 업데이트해보려고요. 불편한 점이나 개선사항 알려주시면 열심히 반영해 볼게요 ㅎㅎ
러닝, 잘 한 점, 아쉬운 점
사실 써보시면 아시겠지만 굉장히 조악하고 초라한 상태예요. 플러그인 샌드박스라는 환경적인 이유도 있겠지만 웹에 비해, 통신도 원활하지 않은 편이고 무엇보다 비개발자인 제가 만들었으니까 엉성할 수밖에 없는 것 같네요.
아직 잡아야 할 노운 이슈도 많아서 이 부분들 먼저 개선하고, 채팅방 생성 같은 새로운 기능도 조금씩 추가해보고자 합니다.
사실 진짜 아쉬운 게, 본인이 만든 디자인 요소(컴포넌트 등) 자체를 복붙해서 채팅방에서 공유하면 너무 좋을 것 같은데,, 피그마가 디자인 요소를 복사할 때 사용하는 컨벤션을 공유하지도 제공하지도 않기 때문에 사실상 불가능에 가까워 보여요. 대안은 계속 고민해 볼게요.
아무튼 피드백은 언제든 환영입니다~!
figPlay
https://www.figma.com/community/plugin/1498400504358815733/figplay
이건 진짜 제 개인적인 욕심 때문에 만들었는데요..
피그마 튜토리얼 같은 걸 유튜브로 볼 때 저는 항상 휴대폰으로 영상을 보고 모니터를 쳐다보고 있는데, 휴대폰과 영상을 번갈아가면서 보는 게 항상 불편하다고 느꼈어요.
그래서 강의 볼 때 아예 피그마에서 볼 수 있으면 좋겠다는 생각을 예전부터 했었고, 피그톡을 다 만든 시점에 갑자기 생각나서 하루 만에 만들었고, 솔직히 지금은 강의를 볼 일이 없어서 음악 트는 용도로 사용하고 있긴 해요 ㅋㅋㅋ
개인적인 생각으로는 왓챠나 티빙, 인프런 등 OTT 서비스들과 연동할 수 있으면 좋겠다고 생각하고 있어요. 아니면 아예 음악 플레이리스트 쪽으로 갈까 고민도 되긴 하는데, 일단은 더 많은 유즈케이스를 확인해 봐야 알 수 있을 것 같네요ㅎㅎ
문제가 되는 시점에 썸네일을 변경하겠습니다..어그로를 좀 끌려고 침착맨님을 일부러 썸네일로 사용했어요. 항상 감사합니다…
이것도 사용해 보시고 혹시 더 좋은 아이디어 있으시면 말씀해 주세요! 최대한 빨리 반영해 볼게요!
clicker!
이제 마지막으로는 플러그인이 아닌 위젯을 만들었는데요, 쉽게 생각하면 디자이너 전용 만보기를 만들었어요.
걷기 대신 클릭으로 하루에 얼마나 피그마에서 클릭을 많이 했는지 보여주는 위젯입니다.
피그마 캔버스에서 요소를 클릭하면 카운트가 올라가요!이것도 mvp라서 조악하고요.. 한 파일에 여러 명이 사용하고 있을 때나 하루 기준으로 카운트를 세고 있지 않을 정도로 간단하게 한 시간만에 만든 위젯이에요.
디벨롭시키면 유저 연동 & 개인화로 내가 오늘은 평소보다 얼마큼 작업했고, 네카라쿠배 디자이너 이에 비해 어떤 차이가 있는지, 대부분의 사람들은 어느 정도 작업을 하는지 등등 나의 작업량을 트래킹 하는 수준까지 발전시키고자 해요.
이 위젯을 시작으로, 개발자들이 깃허브에서 잔디를 심는 것처럼 디자이너 역시 열린 환경에서 본인의 몰입과 기여를 명시적으로 알 수 있는 시스템을 만들고자 해요.
결론
저는 요즘 오늘 보여드렸던 3개를 합친 하나의 서비스를 준비하고 있어요.
최종적으로는 정말 디자이너를 위한, 디자이너에 의한, 디자이너의 커뮤니티를 그리고 있어요.
피그마라는 워크 플로우와 툴 기반 환경에서 누구든지 물어보고, 추천해 준 강의를 보면서, 내 노력과 기여도를 언급하며 다시 긍정적인 소통하는 사이클의 모든 순간에 디자이너가 중심인 designer driven community를요!
아직 갈 길이 먼 것도 많고, 빌드를 위한 제 역량도 많이 부족한 상황이지만 앞으로도 조금씩 실력을 익히고, 디자이너분들의 니즈를 파악해 가면서 디자이너만을 위한 공동체를 만들고 싶어요.
참 신기한 일이죠. 당장 몇 달 전만 해도 디자이너를 빨리 때려치워야겠다고 생각했었는데, 지금은 디자이너들을 위한 가장 완벽한 시스템을 만들고 싶다는 생각밖에 없어요.
벌써 올해의 절반이 지난 이 시점에도 회사 일로 바빠서 정신이 없지만,, 진행 사항이 생기면 또 공유드리러 올게요.
다음에는 제가 개인적으로 정말 유용하실 것이라고 생각하는 피그마의 인터랙션(프로토타입)이 개발되기 어려운 이유와 해결책을 공유드릴 것을 약속드리며,,
오늘은 봄날의 벚꽃처럼 흔적만 살짝 남기고 사라져 보겠습니다.
+++
피그마 플러그인계의 유재석이신 피그마튜터님께서 예전에 만든 플러그인을 추천해 주셨어요. 무한 감사..
그저 빛...조만간..피그톡도………
