UI-GUI 협업 프로세스

pxd talks에서 소개된 이 협업 프로세스는 UI 팀과 GUI 팀처럼 역할이 밀접하게 맞닿아 있는 두 팀 사이의 비효율을 줄이는 방법을 다룬다. 네덜란드 디자이너 Stephen Hay의 "We're not designing pages, we're designing systems of components(우리는 페이지가 아니라 컴포넌트 시스템을 디자인한다)"라는 말처럼, 효과적인 협업은 개별 화면이 아니라 시스템적으로 접근하는 마인드셋을 전제로 한다. 협업 프로세스 개선은 한 가지 특효약으로 해결되지 않으며, 커뮤니케이션 방식 개선과 목적에 맞는 도구 활용을 함께 추구해야 작업 시간을 단축하면서 결과물의 퀄리티도 높일 수 있다.

개선 프로세스는 A~D 4단계로 구성되며, 프로젝트 상황에 따라 유연하게 적용한다. A 단계는 필수적이고 D 단계로 갈수록 선택적이며, 아래 단계가 선행되어야 다음 단계를 적용할 수 있는 단계적 구조다.

A — 시스템적 컴포넌트 정의. UI-GUI 간 커뮤니케이션은 주로 화면과 컴포넌트를 중심으로 이루어지는데, 컴포넌트의 구분·이름·기준을 팀원들이 각자 다르게 이해하고 있는 경우가 많다. 팀원들의 컴포넌트 이해도를 맞추고 프로젝트에서 사용할 기준을 정리하는 과정이 먼저 필요하며, Sketch를 사용하는 경우 이 기준을 심볼 네이밍 컨벤션으로 발전시켜 디자인 시스템·라이브러리 구축의 토대로 삼을 수 있다.

B — 목적에 맞는 도구 사용. 컴포넌트를 정의했다면 이를 효율적으로 다룰 수 있는 도구를 선택해야 한다. 문서 작성용으로 만들어진 파워포인트·키노트나 이미지 편집이 본래 목적인 포토샵은 컴포넌트 중심 작업에는 한계가 뚜렷하다. 최근에는 컴포넌트 중심 작업 방식을 지원하고 화면 공유가 쉬운 도구들이 많이 서비스되고 있으며, 이를 유기적으로 활용하면 커뮤니케이션용 문서를 줄이면서도 더 짧은 시간에 일관성 있는 UI를 설계할 수 있다. pxd가 시험적으로 사용한 Abstract은 Sketch 파일의 버전 관리 도구로, 개발자의 git·github에 대응해 '디자이너의 git'이라 불린다. 이를 활용하면 버전 관리가 쉬워지고, 커뮤니케이션이 한 곳으로 모여 리소스를 절약할 수 있다.

C — UI 팀·GUI 팀의 공동 관리 라이브러리. 라이브러리는 하나의 소스를 여러 사람이 함께 작업하도록 하는 기능이다. 라이브러리 없이 각자 같은 컴포넌트를 반복 제작하면 효율이 떨어지고, 규모가 크고 인원이 많을수록 통일성을 맞추기 어려워진다. UI 팀과 GUI 팀이 공동으로 라이브러리를 관리하면 유지 보수 리소스를 줄이고 팀 내 커뮤니케이션을 원활하게 하며, 다음 단계인 문서 통합도 수월해진다.

D — UI/GUI 문서 통합 관리. 기존에는 UI 설계 문서(기획서)와 GUI 가이드라인·시안 문서를 팀별로 따로 발행·관리해 역할과 책임 범위는 분명했지만, 이중 작업과 커뮤니케이션 오류가 생기기 쉬웠다. 문서를 통합 관리하면 세 가지 이점이 있다. ① 단일 문서의 버전만 관리하면 되어 버전 관리가 쉬워지고, ② UI 설계와 GUI 디자인 레이아웃 불일치로 인한 재개발 같은 커뮤니케이션 미스가 줄어들며, ③ 컴포넌트가 바뀌지 않는 레이블 문구 수정 같은 마이너 수정은 한 명이 처리할 수 있게 된다. 다만 이 모든 단계를 현업에 곧바로 적용하는 데는 현실적 한계가 있으므로, 프로젝트 규모와 클라이언트 요구 사항에 맞게 A 단계부터 적용 가능한 단계까지 유동적으로 진행하는 것이 가장 효과적이다.

핵심 내용

  • 4단계 구조: A(컴포넌트 정의, 필수) → B(도구 선택) → C(공동 라이브러리) → D(문서 통합, 선택적) — 아래 단계 선행이 다음 단계의 전제
  • Stephen Hay의 "시스템 단위로 디자인하라"는 마인드셋이 협업 개선의 출발점
  • Abstract: Sketch 파일의 버전 관리 도구, '디자이너의 git'으로 불림
  • 공동 라이브러리는 중복 제작을 줄이고 팀 간 컴포넌트 일관성을 유지시킴
  • 문서 통합 관리의 3가지 이점: 버전 관리 용이, 커뮤니케이션 오류 감소, 마이너 수정의 1인 처리 가능
  • 모든 단계를 일괄 적용하기보다 프로젝트 규모·상황에 맞게 단계적·유동적으로 적용 권장

관련 개념

출처

최종 업데이트: 2026-07-18 | 출처 1개