메이커 스토리
메이커 스토리 1 - 디자이너와 개발자의 간극을 줄이고 싶어요.
March 26, 2021
메이커 스토리
March 26, 2021
15년 동안 개발을 하면서 정말 다양한 분야의 개발을 다 해봤는데 디자인 관련된 제품 개발은 못해봤어요. 프론트엔드 개발을 하다보니 커리어내내 디자이너들과 같이 일한 시간이 정말 많았는데 15년 동안 다양한 분야에서 많은 디자이너분들과 함께 일하면서 디자이너들이 겪는 어려운점, 특히 개발자와 디자이너가 함께 일할때 생기는 불편한 점들이 무엇인지 많이 알게 되었어요. 특히 제가 초점을 둔 부분은 디자이너들이 퀄리티가 높은 시안을 가져와도 개발자들이 구현이 힘들다는 피드백을 주면 어느 순간부터 디자이너들이 퀄리티가 낮은 시안을 제안하는 거였어요. 이런 디자이너와 개발자의 간극을 없애고 디자인에 초점을 맞출 수 있도록 하고자 이지로직을 시작했어요.
개발자들은 디자인에 관심이 없어요. 디자인 시안을 구현하는 일을 하는 프론트엔드 개발자라 하더라도 디자인보다는 개발 언어를 배우고 로직을 짜는것에 더 관심이 많아요. 디자인을 공부하는건 커리어를 성장시키는데 도움이 별로 안된다고 생각을 하는 경우가 많아요. 취직이나 이직을 할 때 프론트엔드 개발자에게 디자인 역량을 기대하지는 않거든요. 그래서 보통 디자이너와 프론트엔드 개발자가 같이 일을 할때 보면 제품의 퀄리티를 확인하고 높이는 유형의 대화는 이루어지지 않아요. 보통 개발자는 디자이너가 시안을 주면 아무 피드백 없이 그냥 그대로 구현을 하는거죠. 그래서 저는 주니어 개발자가 저에게 와서 어떤걸 공부해야하냐고 물어보면 서버, 네트워크, 그리고 디자인을 공부하라고 조언을 해줘요. 근데 아마 대부분 이런 조언을 안들을 거에요.
최근 피그마 같은 툴이 나오기 전까지 보통 회사에서 진행되는 제품 개발 프로세스를 보면 우선 디자이너가 포토샵, 스케치 같은 툴로 디자인 시안을 가져오면 개발자는 이를 구현 했었어요. 그런데 이 과정에서 디자인을 별로 중요시하지 않은 개발자들이 개발자 중점으로 개발을 하면서 디자인 시안과 실제 개발된 제품의 간극이 항상 있었어요. 그래서 이를 해결하고자 디자이너들이 디자인을 하고나서 일일히 픽셀 크기와 위치를 다 지정해주기 시작했는데 이게 정말 지루하고 비효율적인 작업인데 이는 높은 communication cost로 이어져요. 디자이너가 원하는 픽셀 크기나 위치 그리고 폰트 같은 걸 수정하기 위해서 계속 개발자와 디자이너 간의 커뮤니케이션을 해야되는데 개발자가 디자인 퀄리티에 관심이 없어 디자이너가 원하는 결과물이 안나오면 더 많은 커뮤니케이션 비용이 발생하게 되는 거죠. 이런 문제를 해결하고자 재플린 같은 툴이 나왔는데 이 역시 communication cost를 완전히 없애주는 못해요. 이런식의 피드백 고리가 형성이 되면서 제품 퀄리티가 높아지는 디자인도 안나오고 개발도 안되는 문제가 생겨요.
이지로직은 웹어셈블리를 사용하는 피그마와 어도비랑 달리 오로지 자바스크립트를 사용해 웹기반으로 개발했어요. 웹어셈블리를 사용하면 html과 css를 그대로 코드로 구현하는 것이 힘들어요. 그래서 피그마나 어도비 툴을 보면 이들은 캔버스 기반으로 디자인을 해야되요. 하지만 이지로직은 순수 웹기반이라 markup language인 html과 css를 그대로 그래픽 유저 인터페이스 방식의 디자인이 가능하고 개발자는 디자이너의 시안을 다시 일일히 코딩을 할 필요 없이 디자이너가 GUI로 그린 코드를 바로 가져다 쓸 수 있어요. 이점이 피그마나 어도비 같은 툴과 가장 큰 차이점이에요.
네 맞아요. 현재 웹플로우를 디자이너들이 디자인하는데 사용을 하지는 않아요. 고퀄리티 프로토타입이나 아니면 사이트를 개발하는데 사용해요. 그에 비해 피그마는 디자인 작업을 하는데 사용을 많이 하는데 이게 그대로 코드로 변환 되지는 않아 아직 communication cost가 발생해요. 하지만 제가 지금 웹의 흐름을 보면 이런 패러다임이 바뀌고 있어요. 최근 디자이너들이 그들이 상상하는 것을 바로 개발하게 도와주는 툴들이 굉장히 많이 나오고 있어요. 이전까지 디자이너들이 디자인 중심적으로 개발을 할 수 없는 이유가 디자이너가 디자인을 바로 구현을 할 수 없기 때문인데 이를 가능하게 해준다고 상상을 해보세요. 엄청난 포텐이 터질만한 일이 지금 웹에서 일어나고 있는거에요.
네 저는 2년전부터 주변 개발자들에게 노코드 트렌드를 이야기해왔어요. 근데 대부분 시큰둥한 반응이에요. 저는 시장이 두개로 나뉠거라고 생각해요. 첫째는 지금처럼 일일히 손으로 코딩하는 시장이고 둘째는 그래픽툴을 사용해서 코딩을 하는 시장이에요. 그러다 결국 지금처럼 개발자가 일일히 손으로 코딩을 하는건 의미가 없어질거라 생각해요. 앞으로 제품을 개발하는 방식과 그에 따라 퀄리티도 바뀌어야 된다고 생각해요.
네 그럴 수 있어요. 저는 시대는 흘러가고 있는데 이를 인정하는지 안하는지의 문제인 것 같아요. 이런 흐름을 따라갈 수 있어야 되요. 15년정도 업계에 있다보니 흐름이 보이는 것 같아요. 원래 포토샵 같이 픽셀 기반에서 시작해 스케치 같은 벡터 기반 툴이 나오고 지금은 피그마, 프레이머 같은 클라우드 기반 협업 툴로 발전했어요. 그리고 앞으로는 디자이너와 개발자가 하나의 문서에서 디자인, 개발, 그리고 비즈니스 결정을 다 내리는 툴이 생겨날거라 생각해요. 저는 피그마를 보면 개발자 입장에서는 정말 무서운 생각이 들어요. 피그마는 게임출신 개발자가 웹으로 와서 디자인 툴을 개발한거에요. 보통 개발자는 그래픽에 관심이 없지만 게임 개발자들은 다르죠. 그래픽에 관심이 많으면서 로우레벨 개발을 할 수가 있어요. 이 부분에서 퀄리티 차이가 나기 시작했어요. 이렇게 게임과 웹이 융합 했을때의 임팩트를 피그마가 보여줬어요. 현재 피그마는 디자인툴처럼 보이지만 다른 앱을 붙일 수도 있고 원한다면 피그마를 웹포털로 만들 수도 있어요. 혹은 게임 같은 요소를 넣어 버릴 수도 있어요. 웹에서 할 수 있는 상상가능한 웬만한 것을 할 수 있도록 그 기반을 만들 수가 있어요.
혼자 2년 동안 작업했어요. 풀타임으로 일을 하면서 사이드로 하는 거라 오래 걸리는 것 같아요. 그리고 디자이너분들께 피드백을 얻을 수 있으면 좋은데 피드백이 많이 없어 개발하는게 쉽지 않아요.
저는 팀이 있으면 6개월 안에 임팩트 있는 결과물을 만들 수 있을 것 같아요. 지금은 혼자 사이드로 해서 속도가 안나요. 올해 목표가 이지로직을 클라우드 기반으로 만들고 좀 더 확실한 액션을 취하는 거에요.
작년에 비슷한 고민을 하기는 했어요. 하지만 코로나 때문에 상황이 안좋았던 것 같아요. 그리고 블로그, 트위터, 페이스북에 제가 매일 매일 이지로직 개발 관련해서 저의 주변 친구들 그리고 지인들에게 어떤 일을 했는지 업데이트를 했는데 좋아요 정도만 누르고 막상 정말 관심을 갖고 같이 프로젝트를 하고 싶어하는 사람은 없었어요. 한국은 디자인 툴 같은건 개발을 잘 안하는 것 같아요. 프로토파이랑 미리 캔버스, 망고 보드 정도가 있는데 그게 다인 것 같아요. 한국 개발자는 정말 돈이 될 것 같은 것만 하는 것 같아요. 주변에 이지로직을 보여주면 그래서 돈은 어떻게 벌건데?라는 질문을 많이 해요. 아직까지 찾지는 못했지만 디자인에도 관심이 많은 개발자가 한분만이라도 더 있으면 훨씬 더 빨리 좋은 결과물을 낼 수 있을 것 같아요.
좋은 것 같아요. 반응을 이끌어내는걸 하고 싶은데 어떻게 할지 잘 생각이 안났었는데 해봐야겠네요. 개발할때 프레임워크나 라이브러리도 거의 사용하지 않고 다 제가 순수 자바스크립트로 직접 개발을 해서 사용자나 디자이너들 혹은 마켓니즈에 따라 이지로직을 빠르게 바꿀 수 있거든요. 올해에는 좀 더 drive를 해보고 싶어요.
저는 디자이너 경력에 도움이 될 수 있으면 좋겠어요. 다들 너무 힘들어하는 것 같아요. 저는 퀄리티가 좋은 서비스가 나오려면 디자이너가 작업하기 편해야 되고 디자인 중심적인 제품 개발이 이루어져야 된다고 생각해요.