C4 Component Diagram
C4 모델(C4 Model)은 소프트웨어 아키텍처를 시각화하고 소통하기 위해 고안된 체계적인 다이어그램 표준입니다. 시스템을 4개의 단계(Context, Container, Component, Code)로 줌인(Zoom-in)하며 설명하는데, 그중 컴포넌트 다이어그램(Component Diagram)은 3단계(Level 3)에 해당합니다.
1. C4 컴포넌트 다이어그램이란?
특정 ‘컨테이너(Container)’ 내부가 어떻게 구성되어 있는지 보여주는 다이어그램입니다. (여기서 컨테이너란 웹 애플리케이션, 모바일 앱, 마이크로서비스, 데이터베이스 같은 실행 단위를 말합니다.)
자동차로 비유하자면, 2단계 컨테이너 다이어그램이 ‘엔진’, ‘바퀴’, ‘변속기’의 배치를 보여준다면, 3단계 컴포넌트 다이어그램은 ‘엔진’ 뚜껑을 열고 그 안에 있는 ‘실린더’, ‘점화플러그’, ‘연료 분사기’ 등의 조립 상태를 보여주는 것과 같습니다.
2. 주요 대상 독자
- 소프트웨어 개발자 (Software Developers)
- 소프트웨어 아키텍트 (Software Architects)
- (비즈니스 담당자나 기획자에게는 너무 기술적인 내용이라 적합하지 않습니다.)
3. 다이어그램의 필수 구성 요소
컴포넌트 다이어그램을 그릴 때는 다음 요소들이 포함되어야 합니다.
- 컨테이너 경계 (Container Boundary):
- 이 컴포넌트들이 속해 있는 시스템의 테두리입니다. (예: “결제 웹 애플리케이션”, “사용자 관리 마이크로서비스”)
- 컴포넌트 (Component):
- 실제 코드의 논리적인 묶음입니다. (UI 컴포넌트가 아니라 아키텍처 상의 모듈을 의미합니다.)
- 예:
AuthController(컨트롤러),UserService(서비스),UserRepository(데이터 접근 객체) 등 - 표기 항목: 컴포넌트 이름, 역할(설명), 사용된 기술(예: Spring Bean, Node.js 모듈, AWS Lambda 등).
- 외부 의존성 (External Dependencies):
- 해당 컨테이너 밖에 있는 데이터베이스나 다른 외부 API 등 컴포넌트가 직접 통신하는 대상입니다.
- 관계 (Relationships):
- 컴포넌트 간의 상호작용(의존성)을 화살표로 표현합니다.
- 누가 누구를 호출하는지, 어떤 데이터를 주고받는지 명시합니다.
4. 이해를 돕기 위한 예시 (사용자 로그인 기능)
만약 “사용자 관리 서비스(Spring Boot)“라는 컨테이너를 컴포넌트 다이어그램으로 분해한다면 다음과 같이 그려집니다.
Sign In Controller[Component: Spring MVC Rest Controller] : 사용자의 로그인 HTTP 요청을 받습니다.Security Component[Component: Spring Security] : 비밀번호 암호화 및 토큰을 검증합니다.User Service[Component: Spring Service] : 비즈니스 로직(로그인 프로세스)을 처리합니다.User Repository[Component: Spring Data JPA] : 데이터베이스와 통신합니다.- 화살표 흐름: 사용자의 요청 ➔
Sign In Controller➔User Service➔User Repository➔User Database(외부 컨테이너)
이 다이어그램을 보면 새로 합류한 개발방라도 “아, 이 서비스는 요청을 받으면 저 서비스 로직을 거쳐서 저 DB로 데이터를 저장/조회하는 구조구나” 하고 한눈에 코딩 구조를 파악할 수 있습니다.
5. 컴포넌트 다이어그램 작성 시 유의사항 (Tip)
- 모든 클래스를 그리지 마세요: 클래스 다이어그램(Level 4)이 아닙니다. 인터페이스나 중요한 클래스들의 단위(패키지 혹은 모듈 수준)로 묶어서 굵직하게 표현해야 합니다.
- 선택적으로 그리세요: C4 모델의 창시자인 Simon Brown은 “모든 컨테이너에 대해 컴포넌트 다이어그램을 전부 그릴 필요는 없다”고 권장합니다. 아키텍처적으로 복잡하거나, 중요한 비즈니스 로직이 있는 컨테이너만 그리는 것이 좋습니다. (유지보수 비용이 크기 때문입니다.)
- 기술 스택 명시: 단지 ‘서비스’라고 쓰기보다 ‘[Spring Bean]’, ‘[Node.js Express Router]’ 처럼 구체적인 구현 기술을 적어주는 것이 개발자 간 소통에 끊임없이 좋습니다.
요약하자면, C4 컴포넌트 다이어그램은 “개발자들이 실제 코드를 작성하기 위해 애플리케이션 내부 구조를 논리적인 덩어리(컴포넌트)로 쪼개어 의존성을 설계한 지도”라고 이해하시면 됩니다.