[개발자 입장] 웹개발자와 웹디자이너가 잘 협업하기

필자는 약 10년의 경험을 가진 개발자로서 디자이너와 협업한 경험을 한 토대로 어떠한 것들이 필요한지 적어보겠습니다.

디자이너와 어떻게 일할지 모르는 개발자, 개발자와 어떻게 일할지 모르는 디자이너, 혹은 두 역할자가 어떻게 일할지 모르는 IT인들에게 도움이 되길 바랍니다.

먼저, 웹개발자와 웹 디자이너의 협업에 대해 포커스 맞추어 글을 적어보겠습니다.

 

 

1. UI 디자인 기준

1) Width 기준으로 기본 웹 개발 스펙이 있어야 합니다. ex) 1280, 1600, 1920 px 등등

- 반응형 웹을 만들때는 Desktop 해상도와 Mobile 해상도를 구분하고, 때로는 tablet 해상도를 정하기도 합니다.

 ex) 제가 했었던 프로젝트에서는 Desktop 은 1440px, 모바일은 768px을 경계로 반응형 웹 기준을 잡았습니다.

2) Width 기본 디자인이 필요합니다.

  : 모든 해상도에 맞게 디자인을 할 수는 없어서 기준 width 디자인을 잡습니다.

3) 어떤 값들이 고정이고 변화가 있는지 정의가 필요합니다.

- 고정값이라 하면 위치, 사이즈 등의 값들

- 변화되는 값 또한 정의가 중요함

  : 화면 해상도에 따라 영상, 이미지 등은 어떻게 보여지는지가 중요

  -> 아래 보시는 것처럼 웹버전에서 인스타그램은 아래와 같이 좌우로 긴 해상도의 경우 콘텐츠 다이어로그에 아래부분은 잘려지도록 놔두었습니다.

 

2. UI 디자인의 디테일

1) Max와 Min에 대한 정의

- Maximum와 Minimum에 대한 정의가 확실해야 합니다.

  : 예를 들어 텍스트 영역을 만들때, 최소 1줄 혹은 최대 4줄 이런식의 정의가 필요하고, 만약 0줄이라면 이럴때 해당영역은 없어지거나 어떻게 배치해야 하는 정의도 필수 입니다.

- Input field의 경우도 data의 max 제한이 필요합니다. QA에서 꼭 필요한 정보로서 해당 정보 셋팅이 되어야 합니다.

 

2) 데이터가 없을 경우에 대한 정의

- 백엔드와 인터페이스가 있는 경우, 혹은 외부 API의 값을 받아서 뿌리는 경우 빈 값이 오는 경우 화면에서 어떻게 보여줘야 할지 정의 또한 중요합니다.

 : 예를 들어 구글 같은 경우는 검색 결과가 없을 경우 아래와 같이 정의하였습니다.

3. 인터랙션의 기준

- 개발자는 어떤 스펙을 가지고 인터랙션이 작동하는지 알아야 합니다.

 즉, what (어느 대상이), when (언제 혹은 어느시간동안), how(어떤 동선으로, 어떤 변화를 가지고) 인터랙션이 동작되는지 알아야 합니다.

ex) 대표적인 프로토타이핑 툴은 Protopie(프로토파이)가 있고, Adobe XD 등 다른 디자인 툴로도 재현이 가능합니다.

- 정확한 다지안 spec만이 디자이너가 원하는 모습으로 개발자가 인터랙션을 구현하기 쉽습니다.

   : 시안이 없으면 구체적인 디자인을 기반으로 한 인터랙션 구현이 어렵습니다.

 

4. 디자인 리소스

- 기본적인 디자인 리소스가 개발자에게 제공이 되어야 합니다. 웹 혹은 모바일 디자인에 있었던 아이콘, 이미지, 영상들이 제공되어져야 합니다. 

- 만약 웹개발에서 영상을 제공한다면 크로스 브라우징 이슈 없이 safari, chrome, edge, opera 등 타켓 브라우저 맞게 영상을 제공해야 합니다.

: 코덱 이슈로 크로스 브라우징 이슈가 생기는 경우는 흔합니다.

 

5. 디자인 협업 툴

- 프론트앤드 개발자는 UI 디자인 스펙 확인이 중요하고 프론트앤드 개발 + 퍼블리싱에 필수적입니다.

- 요즘 주로 사용하는 툴은 Figma, Zeplin, Adobe XD 등을 많이 사용하고, 포토샵 등도 사용합니다.

  

본글은 지속적으로 업데이트 시키고 있고, 질문이나 의견을 달아주시면 답변 혹은 지속적인 글 업데이트를 하도록 하겠습니다 ^^

 

References)

www.igor.vc/en/blog/web-designer-vs-web-developer/