각 C4 레벨의 다양한 요소 유형과 스타일링 방법을 알아보세요

요소 및 스타일링

각 C4 레벨은 서로 다른 요소 유형을 지원합니다. 이를 이해하면 정확하고 의미 있는 아키텍처 다이어그램을 만들 수 있습니다.

레벨별 요소

레벨 1: 시스템 컨텍스트

최상위 레벨은 시스템과 주변 환경을 보여줍니다:

요소	설명
소프트웨어 시스템	주요 시스템 또는 제품
사용자	시스템과 상호작용하는 사용자 또는 페르소나
외부 시스템	시스템이 통합하는 서드파티 시스템

레벨 2: 컨테이너

시스템 내부의 기술적 구성 요소를 보여줍니다:

요소	설명
서비스	백엔드 서비스 또는 마이크로서비스
API	REST, GraphQL 또는 gRPC API
웹 앱	프론트엔드 웹 애플리케이션
모바일 앱	iOS 또는 Android 애플리케이션
데이터베이스	SQL 또는 NoSQL 데이터베이스
캐시	Redis, Memcached 등
메시지 큐	Kafka, RabbitMQ, SQS 등
파일 스토리지	S3, Blob 스토리지, 파일 시스템

레벨 3: 컴포넌트

컨테이너의 내부 구조를 보여줍니다:

요소	설명
컨트롤러	HTTP 요청 핸들러
핸들러	이벤트 또는 메시지 핸들러
리포지토리	데이터 접근 계층
어댑터	외부 시스템 어댑터
미들웨어	요청/응답 처리기
유틸리티	헬퍼 함수 및 유틸리티
모델	도메인 모델 및 엔티티

레벨 4: 코드

구현 세부사항을 보여줍니다:

요소	설명
클래스	객체 지향 클래스
인터페이스	인터페이스 정의
구조체	데이터 구조
함수	독립 함수
메서드	클래스 메서드
열거형	열거 타입
상수	상수 값
타입	타입 정의

요소 추가

추가 버튼 사용

툴바에서 추가를 클릭합니다
요소 유형을 선택합니다
이름과 설명을 입력합니다
생성을 클릭합니다

컨텍스트 메뉴 사용

빈 캔버스를 우클릭합니다
[요소 유형] 추가를 선택합니다
세부사항을 입력합니다
생성을 클릭합니다

드래그 앤 드롭

컨테이너와 컴포넌트의 경우 사이드바에서 요소를 캔버스로 직접 드래그할 수 있습니다.

요소 스타일링

스타일 옵션 접근

요소를 우클릭하여 스타일링에 접근합니다:

배경색: 요소의 채우기 색상
테두리 색상: 외곽선 색상
텍스트 색상: 레이블 색상
아이콘: 요소를 나타내는 시각적 아이콘

색상 팔레트

Archyl은 선별된 색상 팔레트를 제공합니다:

파란색 계열: 서비스, API
녹색 계열: 데이터베이스, 스토리지
보라색 계열: 외부 시스템
주황색 계열: 메시지 큐, 비동기
회색 계열: 유틸리티, 인프라

일관된 스타일링 팁

유사한 요소 유형에 동일한 색상 사용
조직의 관례에 맞게 색상 매칭
색각 이상자를 배려한 팔레트 고려
프로젝트 노트에 색상 체계 문서화

오버레이

오버레이는 다이어그램에서 요소를 구성하는 데 도움이 되는 색상이 있는 시각적 그룹입니다.

오버레이 생성

추가를 클릭하고 오버레이를 선택합니다
이름을 지정합니다 (예: "백엔드 서비스", "프론트엔드 앱")
팔레트에서 색상을 선택합니다
생성을 클릭합니다

오버레이 사용

요소를 오버레이 영역으로 드래그
오버레이는 시각적 그룹화 제공
오버레이는 레벨별로 적용
각 C4 레벨에서 다른 그룹화 가능

오버레이 활용 사례

팀 책임별 그룹화
배포 단위별 그룹화
도메인별 그룹화 (DDD 바운디드 컨텍스트)
핵심 경로 컴포넌트 강조
보안 경계 표시

오버레이 모범 사례

단순하게 유지: 레벨당 최대 3-5개 오버레이
의미 있는 이름 사용: "그룹 1"이 아닌 "결제 도메인"
일관된 색상: 관련 그룹에 레벨 간 동일한 오버레이 색상
겹치지 않게: 혼란스러운 중첩 오버레이 피하기

관계 스타일링

관계도 스타일링할 수 있습니다:

속성	옵션
색상	요소 색상에 맞추거나 중립 색상 사용
선 스타일	실선, 점선, 파선
선 두께	얇은, 보통, 두꺼운
화살표 스타일	표준, 빈 화살표, 없음

관계 스타일링 팁

비동기 통신에 점선 사용
주요 데이터 흐름에 두꺼운 선 사용
프로토콜별 색상 코드 (HTTP, gRPC, 이벤트)

다음 단계

관계 - 요소 연결
C4 모델 개요 - 모델 이해하기
첫 프로젝트 가이드 - 이 개념 적용하기

요소 및 스타일링 - Archyl Docs