C4 다이어그램과 글로벌 아키텍처의 실시간 협업

몇 주 전, 화이트보드 실시간 협업을 출시했습니다. 반응은 즉각적이고 명확했습니다: 팀들은 서로의 커서를 보는 것을, 존재 표시기를, 아키텍처가 함께 형성되는 것을 지켜보는 것을 좋아했습니다. 그러나 가장 흔한 요청은? "실제 C4 다이어그램에서도 이것을 사용할 수 있나요?"

당연한 질문입니다. 화이트보드는 브레인스토밍에 훌륭하지만, 실제 아키텍처는 C4 모델에 있습니다 — 소프트웨어가 어떻게 구조화되어 있는지 정의하는 시스템, 컨테이너, 컴포넌트, 코드 요소. 팀이 대부분의 시간을 보내는 곳입니다. 협업이 가장 중요한 곳입니다.

오늘 이것을 실현합니다. 실시간 협업이 이제 프로젝트 C4 다이어그램과 글로벌 아키텍처 뷰에서 작동합니다.

같은 마법, 중요한 곳에서

화이트보드 협업을 사용해 봤다면, 즉시 친숙할 것입니다. 프로젝트의 다이어그램 뷰를 열면, 팀원이 같은 프로젝트를 열 때 커서가 캔버스에 나타납니다. 아키텍처를 탐색하며 이름이 떠있는 색상 화살표가 다이어그램을 가로질러 미끄러집니다.

시스템 노드를 선택하면 모든 사람이 당신의 색상으로 하이라이트된 것을 봅니다 — 요소 주위의 미묘한 테두리, 위에 당신의 이름. 팀원이 다른 컨테이너를 선택하면? 그들의 색상으로 선택된 것을 봅니다. 시각적 언어는 간단합니다: 누가 무엇을 보고 있는지 항상 알 수 있습니다.

아바타 스택이 하단 모서리에 나타납니다. 누가 여기 있는지 봅니다. 누군가 세션에 참여하면 알림이 뜹니다. 모든 것이 자연스럽게 작동합니다.

C4 레벨 간 협업

여기서 흥미로워집니다. C4 모델은 계층적입니다 — 당신은 시스템 레벨에서 작업하고 있을 수 있고, 동료는 특정 컨테이너의 컴포넌트 레벨 깊숙이 있을 수 있습니다. 둘 다 같은 프로젝트를 편집하고 있지만, 다른 깊이를 보고 있습니다.

메타데이터를 통해 이를 추적합니다. 각 협력자의 세션은 현재 어떤 C4 레벨을 보고 있는지에 대한 정보를 포함합니다. 이는 Sarah가 같은 프로젝트에 있다는 것뿐만 아니라, 당신이 시스템 레벨에 있는 동안 그녀가 컨테이너 레벨에서 작업하고 있다는 것을 볼 수 있음을 의미합니다. 존재 표시기는 보고 있지도 않는 뷰에서 커서를 보여주는 소음 없이 서로를 인식하게 합니다.

두 사람이 같은 레벨에 있으면, 커서와 포커스 하이라이트가 자연스럽게 나타납니다. 다른 레벨에 있으면, 협업은 배경에 머뭅니다 — 존재하지만 방해되지 않습니다.

글로벌 아키텍처: 프로젝트 간 협업

글로벌 아키텍처 뷰는 조직의 모든 시스템을 한 곳에 보여줍니다. 큰 그림을 보는 곳입니다 — 프로젝트가 어떻게 연결되는지, 경계가 어디인지, 어떤 시스템이 서로 통신하는지.

이제 그 뷰를 함께 탐색할 수 있습니다. 글로벌 아키텍처를 열면 팀원들이 조직 전체 풍경을 가로지르는 당신의 커서를 봅니다. 시스템을 선택하여 검토하면 모든 사람이 당신의 포커스를 봅니다.

글로벌 아키텍처 뷰에는 두 가지 깊이 모드가 있기 때문에 뷰 범위 필터링을 추가했습니다 — 시스템과 컨테이너. 시스템 개요를 보고 있고 동료가 컨테이너 뷰로 드릴다운했다면, 서로의 커서를 볼 수 없습니다. 사실상 다른 캔버스에 있는 것입니다. 같은 깊이로 전환하면, 협업이 다시 살아납니다.

이런 종류의 세부 사항이 협업을 시끄럽지 않고 자연스럽게 느끼게 합니다. 현재 맥락에 관련된 것을 봅니다.

변경 사항이 자동으로 동기화됩니다

협업은 커서를 보는 것만이 아닙니다. 팀원이 새 시스템을 추가하거나, 컨테이너를 옮기거나, 관계를 업데이트하면, 다이어그램이 자동으로 새로고침됩니다. 새로고침을 누를 필요 없습니다. "저장했어?"라고 물을 필요 없습니다.

내부적으로 버전이 매겨진 작업을 사용합니다. 모든 변경은 버전 번호를 증가시킵니다. 클라이언트가 매초 새 버전을 폴링하고, 변경을 감지하면 관련 데이터를 다시 가져옵니다. 간단하고, 신뢰할 수 있으며, 모든 프록시나 방화벽 뒤에서 작동합니다 — WebSocket 연결 걱정 없이.

결과는 모든 사람의 변경 사항이 1~2초 내에 나타나는 공유 작업 공간입니다. 적극적인 협업에 충분히 빠르면서, 텍스트 에디터에 필요한 실시간 문자 단위 동기화의 복잡성 없이.

통합 시스템

가장 만족스러운 결정 중 하나는 통합된 협업 모델입니다. 화이트보드, 프로젝트 C4 다이어그램, 글로벌 아키텍처 모두 같은 인프라에서 실행됩니다. 하나의 서비스, 하나의 데이터베이스 테이블 세트, 하나의 엔드포인트 세트.

내부적으로 모든 협업 세션은 리소스 유형(whiteboard, project 또는 global)과 리소스 ID로 식별됩니다. 커서 추적, 존재 감지, 작업 버전 관리, 정리 작업이 공유됩니다. 이는 한 리소스 유형의 개선이 자동으로 모든 것에 혜택을 준다는 것을 의미합니다.

또한 미래에 새로운 영역으로 협업을 확장하는 것 — 플로우, 문서, ADR — 이 처음부터 무언가를 만드는 것이 아니라 기존 인프라를 새 뷰에 연결하는 문제라는 것을 의미합니다.

열 가지 색상, 혼란 제로

모든 협력자는 접근 가능하고 구별 가능한 열 가지 색조 팔레트에서 고유한 색상을 할당받습니다. 할당은 참여 순서에 기반하여 결정적이므로, 나갔다가 다시 들어오면 같은 색상을 받습니다 (슬롯이 점유되지 않았다면). 커서, 요소 하이라이트, 아바타 링 — 모두 같은 색상을 사용합니다.

다양한 디스플레이 유형과 색각 프로필에서 테스트했습니다. 팔레트는 일반적인 색맹을 가진 사람들에게도 모든 색상 쌍이 구별 가능하도록 선택되었습니다. 아키텍처는 커뮤니케이션에 관한 것입니다; 도구가 모호함을 도입해서는 안 됩니다.

보고 있는 사용 사례

아키텍처 리뷰: 기술 리더가 팀과 함께 C4 모델을 살펴봅니다. 모든 사람이 자기 화면에서 따라가며, 질문이 있는 요소를 클릭합니다. 리더는 관심이 어디에 집중되는지 보고 그에 맞게 논의를 조정합니다.

온보딩: 새 엔지니어가 시니어 팀원과 함께 아키텍처를 탐색합니다. 슬라이드 덱 대신 살아있는 다이어그램을 함께 살펴봅니다. 시니어 엔지니어가 시스템을 선택하고 실시간으로 설명합니다. 신규 직원이 클릭하며 보이는 것에 대해 질문합니다.

기획 세션: 두 팀이 통합을 논의합니다. 각 팀에는 자체 프로젝트가 있지만, 시스템이 어떻게 연결될지 보기 위해 함께 글로벌 아키텍처 뷰를 엽니다. 모든 사람이 같은 것을 보며 특정 시스템을 가리키고 경계를 논의할 수 있습니다.

분산 설계: 백엔드 엔지니어가 서비스에 새 컴포넌트를 추가하는 동안 프론트엔드 엔지니어가 소비할 API 컨테이너를 검토합니다. 둘 다 같은 프로젝트에 있으며, 서로의 진행 상황을 인식하면서 다른 부분에서 작업합니다.

시작하기

C4 다이어그램과 글로벌 아키텍처의 실시간 협업은 팀 기능을 지원하는 모든 플랜에서 지금 사용할 수 있습니다. 구성할 것은 없습니다 — 프로젝트나 글로벌 아키텍처 뷰를 열기만 하면, 팀원이 같은 뷰를 열자마자 협업이 활성화됩니다.

아키텍처는 팀 산출물입니다. 이제 도구가 이를 반영합니다.

협업 아키텍처가 처음이신가요? 전체 스토리를 위해 화이트보드 협업을 어떻게 만들었는지 읽어보거나, 팀이 협업할 수 있는 아키텍처를 자동으로 생성하려면 AI 기반 아키텍처 디스커버리를 탐색하세요.