<aside>
📢 안녕하세요. 해당 섹션에서는 디자인 - 클라이언트가 어떻게 협업하는지에 대한 내용을 다루고 있습니다. 물론 반드시 이렇게 해야 한다!는 아니지만, 이미 앱 런칭을 진행한 팀들은 이렇게 진행했다는 내용을 담고 있으니 다들 참고해 주시면 될 것 같습니다☺️
🤍 Thanks to Agatha (Inha Univ.)
</aside>
일반적인 협업 방식
보통 디자인 - 프론트엔드 협업은 아래와 같은 방식으로 진행됩니다. (꼭 이렇다!는 아닙니다. 참고만 해주세요.)
- 디자이너가 Figma/Zeplin 등의 툴을 이용해 앱 화면을 디자인합니다.
- 협업할 때는 주로 Figma, Zeplin 등의 툴을 사용합니다.
- Zeplin의 경우 Adobe XD Zeplin 플러그인 설치가 필요할 수 있습니다.
- 프론트엔드 개발자가 아이콘/배경에 할애하는 시간을 최소화하기 위해 디자인 협업 툴은 반드시 활용할 것을 권장합니다.
- 디자이너가 작업한 결과물을 프론트엔드 개발자에게 공유합니다.
- 프론트엔드 개발자는 Figma의 Inspect/Export 기능을 이용해 디자인을 추출합니다.
- 프론트엔드 개발자가 추출한 디자인을 이용해 화면을 구현합니다.
만약 아직 디자인이 완료되지 않은 화면인 경우 와이어 프레임 혹은 대략적인 위젯의 위치를 참고해 간단하게 화면을 구현한 다음 기능 위주로 개발을 시작합니다. 그 후 디자이너로부터 디자인 결과물을 받으면 해당 디자인을 화면에 적용시키는 방식으로 진행할 수 있습니다.
협업 시 주의해야 할 점
소통
- 소통이 가장 중요합니다. 디자이너 - 프론트엔드 개발자 사이의 활발한 소통은 필수입니다. 앱런칭 프로젝트가 처음인 만큼 최대한 많은 소통을 통해 내용을 공유할 수 있도록 합니다.
- 디자이너는 PM → 프론트엔드 개발자 → 백엔드 개발자 순으로 디자인에 대한 적극적인 의견 교환이 필요합니다. 이때 디자이너는 개발에 대해 정확히 알지 못할 수도 있으므로 소통에 적극적인 개발자가 리드를 맡는 것도 하나의 방법이 될 수 있겠죠? 😉
- 프론트엔드 개발자는 필요한 에셋/리소스나 추가 요청 사항 등을 적극적으로 디자이너에게 알려야 합니다. 디자이너는 변경된 부분이 있다면 바로 프론트엔드 개발자에게 알려야 하고, 앱에서 해당 디자인이 구현 가능한지 또한 파악해야 합니다. Figma의 경우 댓글 기능도 있으니 이러한 기능을 활용해 디자이너와 프론트엔드 개발자가 궁금한 점이나 서로의 의견을 얘기하는 것도 좋습니다.
- 제가(서누) 앱 런칭 프로젝트를 진행하면서 중요하다고 느낀 건 바로 디자이너와의 적극적이고 활발한 소통이었습니다. 저희 팀은 디자인 관련 이슈가 있어 디자인을 몇 번이고 갈아엎은 적이 있었는데 그때 알게 된 것이 바로 소통의 중요성이었습니다. ‘처음부터 적극적으로 디자이너와 소통했으면 좋았을 텐데…’하는 아쉬움이 있었는데요, 그만큼 디자이너와 프론트엔드 개발자의 소통이 중요하다는 걸 여러분에게 전달하고 싶었습니다.