프론트엔드 개발자, 디자이너의 협업과 태도

빠르면 이번달, 다음달부터 디자이너와 협업이 시작될 것 같다. 나는 항상 디자이너와 협업을 어떻게 하는지 궁금해했다. 프론트엔드 개발자는 디자이너, 백엔드 개발자와 의사소통을 할 상황이 많다는 것을 자주 보았다.

 

특히 '디자이너와 협업은 어떤식으로 진행이 될까?'라는 궁금증이 컸다. 하얀 백지인 상태에서 디자이너와 협업할 상황에 직면하게 되면 우왕좌왕 할 것이 뻔하기 때문에..😵 주말을 활용해 프론트엔드 개발자는 디자이너와 어떻게 협업을 하는지, 그리고 가져야할 태도에 대해서도 알아봤다.

• 현업에서는 디자이너, UX 디자이너가 대략적인 프로토타입 버전을 개발팀에 전달 해준다
• 디자인에서는 담을 수 없는 반응형, 에러처리, 로딩상태 등은 개발팀에서 피드백을 많이 준다
• 적극적으로 빠진 부분이 무엇인지, 어떻게 개선하면 좋은지, 에러 상태 등을 먼저 잡아내서 디자이너와 협업하거나 알아서 잘 처리하도록 노력하자
• 로고나 배경이미지를 투명으로 만들고 싶을땐 removebg, miricanvas 사이트를 이용하자
• 보통 데스크탑에서 편하게 볼 수 있는 너비는 1000 ~ 1200px 정도이다
• CSS transition 애니메이션에서 답답하지 않은 정도의 시간초는 0.25~0.3(250~300ms)이다

구버전 브라우저 대응은 어디까지?(21년 11월 기준)

카카오 회사 같은 경우 IE11까지 대응하고자 했지만 많은 논쟁 끝에 IE11은 엣지 브라우저로 강제 리다이렉션을 하는 방식으로 합의를 했다고 한다. 현재는 사파리 브라우저 13이상을 대응하는 것으로 하고 있으며 이제는 사파리가 IE 대우를 받고 있다고 한다.

CSS in JS의 단점과 성능 차이

성능은 생각보다 많이 나지 않지만 초기 플리커링(깜빡임) 현상이 발생 할 수 있다. 이는 단순하게 초기 로딩 화면이나 스켈레톤만 따로 만들어 주면 해결된다. 굳이 단점을 찾자면 런타임으로 생성을 해주는 라이브러리 자체가 번들에 포함이 되므로 CSS를 위한 추가 번들의 크기가 커지는 문제가 있다 정도이다.

인터랙티브 UI와 프로토타입

디자이너분에게 최대한 레퍼런스를 가져와 달라고 부탁을 드리자. 말로는 구현하기가 애매하고 힘들다. 레퍼런스를 바탕으로(예를 들어 codepen과 같은 자료면 금상첨화) 조립한 다음 결과물들을 만들어서 보여주자.

 

애니메이션과 같은 것들은 속도나 수치등이 민감하다 보니 자주 커뮤니케이션을 하자. 같이 붙어서 숫자를 조절해가며 배포, 확인하는 방식도 좋다.

디자인을 화면에 100% 녹여낼 수 있을까?

타협점은 찾지 않는다. 디자이너가 요구하는 것을 최대한 그대로 구현하도록 노력하자. 그것이 FE 개발자의 역할이고, 능력이다. 이상하다 생각하거나 성능에 이상이 있더라도 구현을 해주고 나서 그 부분에 대해 언급하고 실제로 확인하도록 보여주자. 최종 판단은 언제나 디자이너의 몫이다.

 

특히 FE 개발자는 잘 만든 서비스를 했다는 게 커리어에 큰 도움이 되는데 그 기준에는 디자인의 비중이 절대 낮지 않다. 디자이너의 최대 역량을 발휘 할 수 있도록 하는 것은 결국 서로에게 도움이 되는 것이다.

 

내가 평가를 받는 것은 코딩뿐만 아니라 디자인과 기획을 포함한 종합적인 결과물이란걸 의식하자. 좋은 기획과 디자인을 온전히, 아니 그 이상을 해줄 수 있게 하도록 도와주자.

끝으로

물론 해당 사항들이 내가 다니는 회사와 많이 다를 수도 있다. 하지만 이를 활용할 순 있다. 적극적으로 의사를 표현하고 만들지 않고서 안된다고 하지 말자.

 

일이 많아지면 디자이너는 나중에 자기검열을 하게 되고, 이는 곧 프로젝트의 퀄리티 하락으로 이어진다 했다.

📌 디자이너가 준 그대로만 만드는 개발자는 성장하기 어렵다.

참고

if(kakao) after talk 후기 - 요즘 웹 프론트는 디자니어와 CSS 협업 어떻게 해요? - teo.log