[아티클] 디자이너와 개발자의 협업: 함께 일 하고 싶은 디자이너

작자는 작년부터 올해 상반기까지 개발자였다. 그리고 23년 7월부터 약 6개월 간 '풀무원 드실앱 고도화' 개발 프로젝트에 참여하여 flutter/dart 를 이용한 애플리케이션 개발을 진행한 경험이 있다. 그 당시 프로젝트의 메인 디자이너분과 함께 소통하며 일했던 경험이 떠올라 이번 아티클 주제를 '디자이너와 개발자의 협업: 함께 일 하고 싶은 디자이너'로 정했다. 개발자였을 때 느낀 것도 있지만, 디자이너가 되기 위한 준비 과정으로서 더 열심히 찾아 보았다.

 

작자는 요즘IT 라는 사이트에서 현직 개발자들을 대상으로 2년차 개발자부터 10년차 개발자까지 총 8명의 개발자와 인터뷰를 하여 과연 어떤 디자이너가 함께 일하고 싶은 디자이너로 뽑혔을까에 대해 조사한 아티클을 토대로 요약하고 느낀점을 작성해보려한다. 함께 일하고싶은 디자이너는 어떤 특징을 가지고 있을지에 대해 알게된 후 원만한 협업이 이루어지려면 각자 어떤 태도로 협업에 임해야하는지도 궁금해져 추가로 찾아보았고, 목차는 아래와 같다.

 

- 디자이너와 개발자의 역할 차이점

- 디자이너와 개발자의 충돌이 일어나는 원인

- 함께 일하고싶은 디자이너의 특징

- 디자이너와 개발자의 원할한 협업이 진행되려면

- 과제를 맟리며

 

---

 

 

디자이너와 개발자의 역할 차이점

UIUX디자이너

: 인터페이스(UI)와 사용자 경험(UX)에 초점을 맞추어 디자인 시스템, 사용성, 시각적 일관성 등을 설계하는 직무

 

개발자

: 디자이너가 만든 디자인을 실제 제품으로 구현하며, 코드 작성, 기능 구현, 시스템 안정성 등을 책임지는 직무

---

디자이너와 개발자의 충돌이 일어나는 원인

디자인과 개발이 함께 협업하는 것은 제품의 품질, 효율성, 사용자 경험에 큰 영향을 미친다. 따라서 디자이너와 개발자 간의 협업이 원할할 수 있도록 만드는 방법을 알아야 한다. 우선, 디자이너와 개발자 사이에 갈등과 충돌이 일어나는 이유에 대해 알 필요가 있다.

 

1. 상대방이 자신만큼 직무에 대한 이해도가 높다고 가정한 경우

특정 직무에서 전문성을 쌓다 보면 자신이 알고 있는 지식과 노하우를 당연하다고 생각하기 쉽다. 그러나 다른 직무의 사람들은 이해하지 못 할 수 있는데, 개발자와 디자이너는 이런 부분에서 충돌이 자주 일어나는 것 같다. 예시로, 디자이너가 본인이 만든 디자인을 개발자에게 개발해달라고 요구를 했는데, 개발자는 개발이 어렵다고 답변했다고 가정했을 때 디자이너가 '이렇게 간단한 화면을 왜 못 만들어요?'라고 반문했을 때를 예로 들 수 있다. 또, '이 부분은 지금 개발한 것보다 조금 더 밝게 해주세요' 라는 식의 모호한 요구사항을 하면 디자인을 공부하지 않은 개발자는 얼만큼 밝게 바꿔야 하는지 가늠하기가 힘들다. 따라서 상대를 고려하여 정확한 수치로 요구를 한다는 식의 배려가 필요하다. 원활한 소통과 작업을 위해서는 '내가 아는 건 너도 알겠지' 라는 태도는 옳지 않다는 것을 꼭 인지해야 한다.

 

2. 프로덕트의 우선순위에 대해 서로 다른 기준을 가진 경우

개발자와 디자이너 사이에서 발생하는 의견 충돌의 주요 원인 중 하나이다. 바로, 우선순위에 대한 기준 차이인데 일반적으로 디자이너는 디자인의 완성도를 중요시하고, 개발자는 코드의 안정성이나 기능을 중요시한다는 것이다. 이런 경우 기능적 결함이 우려되어 디자인 요소를 일부 제외하는 등의 개발자에게는 중요하지 않은 포인트가 디자이너에게는 중요한 포인트로 작용하여 갈등이 발생할 수 있다.

 

3. 커뮤니케이션의 부족으로 인한 경우

디자이너가 설계한 디자인이 개발팀에게 제대로 전달되지 않으면, 개발자는 디자인의 의도를 이해하기 어려워지고 개발자가 본인이 해석한 대로 구현을 하고 디자이너에게 넘기면 디자인과 구현을 다시 수정하고 개발하는 반복 작업이 생길 수 있다. 같은 용어여도 각자 사용하는 언어가 다르기 때문에 의사소통이 힘든 경우도 있다. 디자이너는 디자인 언어로서 '버튼의 클릭 유도 느낌을 살려주세요'라고 했지만, 개발자는 개발 언어로서 '버튼의 상태변화, hover 되었을 때를 말하는 것이구나'로 받아들일 수 있다는 것이다.

 

---

출처 : unsplash

이번 아티클 스터디의 주제는 UIUX디자이너에게 초점이 맞추어져 있으니, 개발자가 원하는 UIUX디자이너는 어떤 특징이 있는가를 중점적으로 다뤄보려고 한다.

 

함께 일하고 싶은 디자이너의 특징

1. 직관적인 UI/UX를 구현하는 디자이너

디자이너는 PM과 개발자 사이에서 요구사항을 조율하고 사용하기에 직관적인 디자인을 고안하여 제품의 완성도를 높이는 직군이다. 기획서에 적힌 기획의도를 파악해서 직관적으로 디자인을 하면, 개발자 입장에서도 명확히 개발할 수 있고, 개발 전과 후의 디자인을 비교했을 때 결과물 또한 직관적으로 나타나기 때문에 개발자와 디자이너가 모두 만족하는 결과를 도출할 수 있다. 실제로 작자도 디자이너의 요구사항대로 디자인하고 테스트하는 과정에서 직관적인 UI를 개발했을 때랑 아닌 때랑 소요되는 시간도 차이가 나고, 테스트 오류성도 적어짐을 느꼈었다.

 

2. 프로덕트 중심으로 생각하는 디자이너

디자이너는 본인이 만든 디자인들이 모두 포트폴리오가 된다. 개발자와 디자이너 모두 자신의 작업물에 애정을 갖기 마련인데, 차이점이 있다면 개발자는 코드가 밖으로 드러나지 않는 반면 디자인은 실제 서비스에 그대로 반영된다는 것이다. 이 때문에 보통의 디자이너들은 본인이 만든 결과물이 아무것도 아닌 곳에 쓰이는 것에 거부감을 느낄 수 있다. 그러나, 시간이라는 제약이 있음을 인지하고 개발과 디자인 모두 좋은 프로덕트를 만들기 위해 노력하는 것은 같으니 중요도에 따라 개인보다 공동의 목표를 추구할 줄 아는 디자이너가 더 선호될 것이라 생각한다.

 

3. 디테일을 챙기는 디자이너

앱 내에서 하나의 기능만 수행하더라도 여러가지 케이스가 생기게 된다. 버튼만 보더라도 활성/클릭 시/비활성 등 다양한 케이스가 존재하는데 디자이너가 기본 디자인만 제출했다면, 개발자는 난감할 수 있다. 그렇기 때문에 여러 상황들을 따져가며, 어떤 케이스들이 있을지 충분히 분석하고 케이스에 따라 디테일하게 디자인한 산출물을 제출할 수 있어야 한다.

 

4. 개발 도메인에 대한 이해가 높은 디자이너

자신의 직무에 대해 다른 사람도 당연히 알고 있을 것이라는 자세는 지양해야 한다고 앞서 언급했었다. 그러나 디자이너가 개발 직군에 대한 이해가 있을수록 개발자와의 소통이 원활해지는 것은 사실이다. 도메인 등에 대한 이해가 높은 디자이너라면, 개발자와 소통할 때 용어나 세부적인 영역에서 좀 더 원활해질 수 있다.

 

5. 컴포넌트 단위로 작업하는 디자이너

앱에는 통일성이 있어야 한다. 디자이너가 처음부터 통일감 있게 컴포넌트 단위로 개발을 한다면, 개발자는 같은 작업을 반복하지 않고 비슷한 컴포넌트들을 재사용하는 등의 수월한 작업이 가능하다. 비슷해보여도 폰트 사이즈나 색상 등 조금씩 디자인이 다르다면, 개발자는 컴포넌트 개수만큼 반복 작업을 해야할 가능성이 있다. 따라서 컴포넌트 단위로 작업할 줄 아는 디자이너가 선호된다.

 

 

---

디자이너와 개발자의 원할한 협업이 진행되려면 어떻게 해야할까?

1. 협업의 초기 단계에 디자인과 개발의 기획 및 요구사항을 함께 정의

우선, 협업을 시작하는 단계에서부터 디자이너와 개발자가 함께 제품의 요구사항, 사용자 요구사항, 비즈니스 목표, 기술적 제약 등을 명확히 제시하면 좋다. 또한, 디자이너는 디자인 시스템을 개발하고, 개발자는 이를 실제로 구현할 수 있는가에 대한 기술적 제약사항들을 고려한다면 개발이 불가하여 디자인을 수정하는 일은 거의 없을 것이다.

 

2. 효과적인 커뮤니케이션과 협업 도구를 활용

디자이너와 개발자는 주기적인 미팅을 통해 계속해서 진행 사항을 점검하고, 문제를 즉시 해결할 수 있어야 한다. 따라서 주기적으로 스프린트 회의나 데일리 미팅 등 정기적인 회의를 진행하면 좋다. 협업 도구로는 Figma, Sketch, Zeplin, Adobe XD와 같은 디자인 툴에서 제공하는 코드를 참고한다던지, 깃허브와 같은 버전 관리 시스템을 통해 디자인 파일과 코드의 버전관리를 하는 것도 좋다.

 

3. 디자인과 개발의 상호 피드백 주고받기

디자이너가 작업한 디자인이 기술적으로 구현 가능한지에 대한 피드백을 개발자로부터 받고, 개발이 어렵다거나, 모바일에 적합하지 않다는 등의 피드백을 수용하고 해결책 논의를 통해 디자이너가 수정을 하면 협업의 속도를 높일 수 있다. 디자인과 개발은 반복적으로 개선하는 과정이 필요하기때문에 주기적인 피드백 사이클을 통해서 계속해서 점검하는 것이 중요하다.

 

4. 반응형 디자인과 기술적 구현

모바일 환경은 다양한 해상도가 존재하기 때문에 화면 크기에 적합한 UI 요소를 설계해야하고, 디바이스에 맞게 반응형 디자인을 설계해야 한다. 이 과정에서 디자이너의 유연성이 중요시되고, 개발자는 디자인을 구현하면서 기술적 제약 사항이 있는지 고려해야 한다. 이 또한, 지속적인 커뮤니티로 해결할 수 있다.

 

5. 디자인 및 개발 문서화

디자인을 문서화하여 개발자가 참고할 수 있도록 하면 좋다. 디자인 시스템을 문서화하여 일관성을 유지할 수 있고, 타이포그래미, 색상, 버튼 스타일 등의 디자인 가이드라인을 문서로 남겨두면 개발할 때에도 유용하다. 개발자 측에서도 기능 명세서를 작성하여 디자이너와 팀원들이 구현된 기능에 대해 정확히 이해할 수 있도록 문서화를 해두는 것이 좋다.

 

6. 디자인과 개발의 '협업 문화' 구축

디자이너와 개발자는 서로 고유한 전문성을 가지고 각자의 역할이 명확한 직무이다. 그렇기에 서로의 업무 영역과 형태를 존중하고 각자의 의견을 수용하면서 적극적으로 교환하는 것이 중요하다. 각자 우선순위가 다를 수는 있지만, 최종 목표는 사용자 경험과 제품 품질을 향상시키는 것이므로 공동의 목표를 명확히 설정하고 목표를 중심으로 협업이 이루어져야 한다. 또한 갈등이 발생했을 때 양쪽 의견의 밸런스를 맞춰 최적의 솔루션을 찾는 과정이 필요하다.

 

7. 디자인 및 개발의 최종 검토와 릴리스

최종적으로 검토하는 작업 또한 디자이너와 개발자가 함께 하여 디자인과 기능이 일치하는지 사용성 테스트를 수행해야 한다. 개발자는 배포 전에 디자인이 실제로 잘 작동하는지 확인하는 테스트를 실행하고, 디자이너는 실시간 피드백을 통해 버그나 문제를 발견하고 수정할 수 있도록 협력해야 한다.

 

---

과제를 마치며

개발자로서 앱 개발을 하던 당시, 실제로 '이걸 어떻게 구현해' 하는 디자인도 받아 보았다. 그 당시 디자이너와 함께 타협점을 보며 의견 조율을 하던 경험이 있는데 이렇게 디자이너와 개발자의 협업과 관련한 정보를 수집하다보니 당시에 서로 공동의 목표를 가지고 협업하기 위해 노력했구나를 느끼게 됐다. 관련 아티클을 보며 개발자로서 공감하는 부분과 디자이너를 준비하는 사람으로서 갖춰야 할 자세에 대해 알게되어 의미있는 시간이었다. 결국 협업을 하려면 서로의 직무를 이해하는 것이 중요한데, 특히 디자이너가 개발 경험이 있거나 기본 지식이 있다면 의사소통이 원할하게 진행되어 협업의 속도나 품질 측면에서 완성도 높은 결과물이 나올 수 있을 것이라는 생각을 하였다. 이런 포인트에서 작자가 UIUX 디자이너로서 좀 더 매리트 있는 강점을 가진 것은 아닐까 하는 생각을 가지며 글을 마친다.

 

 

 

* 참고 : https://yozm.wishket.com/magazine/detail/1712/