모든 C4 요소를 처음부터 다시 디자인했습니다
아키텍처 다이어그램에는 한 가지 임무가 있습니다: 코드를 읽는 것보다 더 빠르게 시스템에 대한 진실을 알려주는 것. 대부분은 그러지 못합니다. 12개 서비스의 스타트업을 보든 600개 서비스의 엔터프라이즈를 보든 똑같이 생겼습니다. 똑같은 일반적인 파란 사각형. 똑같은 선. 위계도, 스토리도 없습니다.
지난 한 주 동안 Archyl 캔버스를 분해하고 다시 조립했습니다. 모든 노드, 모든 엣지, 배경의 모든 픽셀. 오늘 릴리즈가 그 결과물입니다.
지금 로그인하시면, 다이어그램이 다른 제품처럼 보일 겁니다.
무엇이 잘못되었나
이전 노드들은 일반적인 파랑 일색이었습니다. 두꺼운 보더, 부드러운 frosted 배경, 과한 그림자 — 2022년에는 맞았지만 지금은 평범하게 느껴지는 그런 "테크-모던" 룩.
더 중요한 건, 시각적으로 아무 말도 하지 않았다는 점입니다. System(레벨 1, "아키텍처")이 Component(레벨 3, "내부 클래스")와 똑같이 생겼습니다. 데이터베이스 컨테이너가 워커 컨테이너와 똑같이 생겼습니다. C4 모델의 네 레벨 — System Context → Container → Component → Code — 이 한 겹의 구분되지 않는 파란 사각형으로 무너져 있었습니다.
엣지는 방향감이 없는 평평한 슬레이트 색 선이었습니다. 캔버스는 평평한 배경 위의 점 그리드였습니다. 선택은 거의 표시되지 않았습니다. 노드를 클릭해도... 아무것도 변하지 않았습니다.
다이어그램은 정확했습니다. 읽히지 않았을 뿐.
새로운 비주얼 시스템
레벨별, 타입별 컬러
이제 모든 C4 레벨에 고유한 시각적 무게가 있습니다:
- System(레벨 1) 은 브랜드 정체성을 담습니다 — 카드 상단 가장자리를 따라 가는 indigo-to-fuchsia 그라디언트 stripe, Archyl의 다른 모든 곳에서 쓰는 동일한 컬러. People 변형은 따뜻한 amber 그라디언트. External 시스템은 graphite.
- Container(레벨 2) 는 서브타입화되었습니다. 데이터베이스와 캐시는 emerald. 메시지 큐는 amber. 파일 스토리지와 서버리스 함수는 cyan. 웹 앱은 indigo. 모바일과 데스크톱 앱은 violet. 상단의 액센트 stripe가 라벨을 읽기 전에 컨테이너가 무엇인지 알려줍니다.
- Component(레벨 3) 는 의도적으로 절제했습니다 — 미묘한 indigo 액센트만, 더 작은 카드, 더 작은 아이콘. Component는 Container 안에 살고, 시각적으로 경쟁하면 안 됩니다.
이제 100개 노드 보드가 낮은 줌에서도 존(zone)으로 읽힙니다: 초록 클러스터는 스토리지, amber 클러스터는 비동기, indigo 클러스터는 코드. 라벨을 단 하나도 읽지 않고도 컬러로 탐색할 수 있습니다.
더 깔끔한 표면
빠진 것: 무거운 frosted 룩, 두툼한 보더, 그라디언트라고 하기도 민망했던 듀얼 블루 그라디언트.
들어간 것:
- 헤어라인 보더에 상단 가장자리를 따라 한 줄의 밝은 픽셀 — Linear와 Stripe 카드에 프리미엄 느낌을 주는 "위에서 빛이 비치는" 트릭. 카드들이 반투명 판이 쌓인 게 아니라 진짜 재질로 만들어진 것처럼 보입니다.
- 레벨별 액센트 컬러로 톤이 입혀진 방향성 있는 drop shadow. 각 레벨이 카드 아래 자기만의 ambient glow를 가집니다. 같은 모양, 다른 분위기 — 데이터베이스 카드는 옅은 emerald 쿠션 위에, 큐 카드는 따뜻한 amber 쿠션 위에 앉아 있습니다.
- 진짜 타이포그래픽 위계. 타이틀에는 무게가 실리고, 설명은 muted grey로 한 발 물러서고, 타입 라벨은 기술적 명료함을 위해 small caps를 사용하고, 기술 아이콘은 그 아래 깔끔하게 정렬됩니다. "이게 더 중요하다"고 말하기 위해 사이즈에만 의존하지 않습니다.
재정리된 배지
이전 디자인에서는 모든 카드 둘레에 최대 8개의 서로 다른 배지가 떠다녔습니다 — insights, ADRs, docs, API contracts, comments, external, org-linked, time-travel. 밀집된 다이어그램에서는 카드들이 포위된 것처럼 보였습니다.
Insights는 좌상단에 그대로 둡니다. 알림 — 액션이 필요한 것입니다. 떠 있는 자리를 차지할 자격이 있습니다.
나머지는 모두 카드 하단을 따라 한 줄의 인라인 메타데이터 strip으로 합쳐졌습니다: 📚 5 · 📄 3 · 🔌 2 · 💬 8. 각 pill은 클릭하면 여전히 전체 popover로 확장됩니다. 카드 본문이 다시 숨을 쉽니다.
방향을 보여주는 엣지
기본 상태: 브랜드 톤이 입혀진 가는 중립색 선, 전체 길이를 따라 천천히 부드럽게 움직이는 모션 — 짧은 표시들이 source에서 target으로 흐릅니다. 미묘하지만 끊임없이. 인터랙션하지 않을 때도 캔버스가 살아있는 느낌입니다. 결정적으로, 페이지의 다른 것이 업데이트되어도 모션이 멈추거나 다시 시작되지 않습니다 — 한 번 화면에 올라온 관계는 계속 흐릅니다.
이제 세 가지 라인 스타일이 올바르게 흐릅니다:
- Solid — 깔끔하고 연속적인 선, 모션 없음. solid를 골랐다면? solid로 유지됩니다.
- Dashed — 균일하고 중간 간격의 세그먼트가 차분하고 읽기 좋은 속도로 흐릅니다.
- Dotted — 더 촘촘하고 둥근 점들이 약 두 배 빠르게 흐르므로, dotted 엣지는 dashed보다 한눈에도 더 "가벼운" 느낌입니다.
Hover나 선택 시 라인이 엣지 방향에 맞춘 브랜드 그라디언트(indigo → violet → fuchsia)로 업그레이드되어, 위에서 아래로 가는 관계는 수직 그라디언트를, 좌에서 우로 가는 관계는 수평 그라디언트를 가집니다. 부드러운 브랜드 컬러 glow가 활성화된 엣지 아래에 깔립니다. 그 아래로 drift는 끊김 없이 계속됩니다.
화살표 마커는 활성 그라디언트의 끝점을 받아내는 더 슬림한 chevron이 되었습니다. 엣지 라벨은 자체 카드가 되어, 기술 표시들이 옆으로 떨어진 분리된 덩어리가 아니라 둥근 보더 안에 자리합니다. 활성 상태는 라벨 좌측 가장자리에 브랜드 그라디언트 sliver를 더하고 설명 컬러를 indigo로 바꿉니다.
Focus 모드
아무 노드나 클릭하세요. 짧은 멈춤 후, 캔버스의 나머지가 뒤로 페이드 아웃됩니다 — 노드는 거의 투명해지고, 엣지는 거의 사라집니다. 클릭한 노드와 직접 이웃들만 또렷하게 남습니다. 연결 엣지들은 계속 흐릅니다. 선택된 노드는 레이어드 halo를 얻습니다 — 선명한 브랜드 컬러 ring, 부드러운 외곽 glow, 강화된 ambient bloom — 모두 노드 자신의 액센트로 톤이 입혀집니다. 포커스된 데이터베이스는 emerald로 빛납니다. 포커스된 큐는 amber로 빛납니다. 포커스된 시스템은 indigo로 빛납니다.
그 짧은 멈춤은 의도된 것입니다: 후속 더블 클릭이 포커스가 발동하기 전에 취소하므로, 다음 C4 레벨로 드릴 다운하는 동작이 dim 플래시의 방해 없이 그대로 작동합니다.
빈 캔버스를 클릭하거나, Escape를 누르거나, 다른 노드를 클릭하면 포커스가 해제됩니다.
결과적으로 "이 다이어그램이 나에게 말을 건다"는 가장 큰 단일 업그레이드가 되었습니다. 무엇이 무엇에 연결되어 있는지 알 수 없던 100개 노드 보드가, 이제는 클릭 한 번이 그것을 답해주는 보드가 되었습니다.
분위기
캔버스 자체도 더 이상 평평하지 않습니다. 점 그리드 뒤에서, 부드러운 컬러 풀들이 표면을 따라 흐릅니다 — 상단에는 indigo, 코너 쪽으로는 fuchsia, 하단에는 더 짙은 indigo — 모두 매우 옅게 유지하여 장식이 아닌 분위기로 읽히게 했습니다. 제품의 다른 부분과 같은 정체성. 점 그리드 자체도 이제 일반적인 슬레이트가 아니라 브랜드 톤이 입혀졌습니다.
MiniMap과 Controls도 맞춰서 다시 만들었습니다 — 브랜드 표면, 헤어라인 보더, 브랜드 ambient shadow, 액센트 톤이 입혀진 노드 컬러. MiniMap은 이제 메인 캔버스와 같은 팔레트를 사용하므로, 조감도가 다이어그램 자체와 같은 스토리를 들려줍니다.
Connection handle은 hover 시 브랜드 indigo로 빛나며, 그릴 관계의 컬러를 미리보기 하는 부드러운 halo가 함께 나타납니다.
성능
이왕 손을 댄 김에, 다이어그램도 눈에 띄게 더 빠릿해졌습니다:
- 노드별 애니메이션 엔진은 사라졌습니다. 스케일에서 가장 큰 숨겨진 비용이었습니다 — 모든 카드가 가만히 있을 때조차 자기만의 모션 bookkeeping을 안고 있었습니다. 이제 opacity 변화는 단일하고 가벼운 transition을 탑니다.
- 더 가벼운 그림자. 첫 버전의 ambient glow는 후하고 비싼 blur였는데, lifted 느낌은 유지하면서 사이즈를 약 2/3로 조였습니다.
- 카드는 더 이상 자기만의 GPU 레이어에 영구적으로 앉아 있지 않습니다. 그 힌트는 이제 가만히 있는 노드에 구워지는 대신, 실제 인터랙션 중에만 발동합니다.
- transition은 변하는 속성에 정확히 한정했습니다 — movement과 shadow — "혹시 모르니" 모든 속성을 브라우저가 고려하게 두지 않습니다.
reduced-motion 설정은 어디서나 존중됩니다 — 엣지의 기본 흐름, 포커스 모드 fade, drift 모션 모두 OS가 그 설정을 보고할 때 꺼집니다.
사용해 보세요
Archyl에 로그인하고, 아무 프로젝트나 열어, 시스템이나 컨테이너를 골라보세요. 새로운 다이어그램은 free 티어를 포함한 모든 플랜에 롤아웃되어 있습니다 — 마이그레이션 단계도, 토글도 필요 없습니다.
특별히 자랑스러운 (또는 특별히 지긋지긋한) 다이어그램이 있다면, 이번 주가 공유하기 좋은 때입니다. 캔버스를 다시 만든 이유는 아키텍처 맵이 Visio export가 아니라 진짜 artefact처럼 느껴지기를 바라기 때문입니다. 태그해 주세요 — 여러분의 맵이 지금 어떻게 보이는지 보고 싶습니다.