markdown-viewer/architecture

architecture은(는) 무엇을 하나요?

HTML/CSS 템플릿을 사용하여 색상 코드 계층과 그리드 레이아웃으로 계층형 시스템 아키텍처 다이어그램을 생성합니다. 기술 스택, 마이크로서비스 토폴로지 및 다중 계층 애플리케이션 설계에 가장 적합합니다.

개요

이 스킬은 시스템 아키텍처를 시각화하기 위한 구조화된 접근 방식을 제공합니다. HTML과 CSS를 활용하여 색상으로 구분된 계층과 그리드 기반 레이아웃을 갖춘 전문적인 다이어그램을 만듭니다.

주요 기능

• 색상 코드 계층: 각 계층을 고유한 색상으로 표현하여 구성 요소를 시각적으로 구분합니다.
• 그리드 레이아웃: 일관되고 정렬된 방식으로 다이어그램 요소를 배치합니다.
• 템플릿 기반: 재사용 가능한 HTML/CSS 템플릿을 사용하여 빠르고 일관된 다이어그램 생성을 지원합니다.

사용 예시

<div class="architecture-diagram">
  <div class="layer presentation" style="background-color: #f0f0f0;">
    <h3>프레젠테이션 계층</h3>
    <p>웹 UI, 모바일 앱</p>
  </div>
  <div class="layer application" style="background-color: #d0e0f0;">
    <h3>애플리케이션 계층</h3>
    <p>마이크로서비스 A, B, C</p>
  </div>
  <div class="layer data" style="background-color: #c0d0c0;">
    <h3>데이터 계층</h3>
    <p>PostgreSQL, Redis</p>
  </div>
</div>

지원 플랫폼

이 스킬은 다양한 AI 어시스턴트 환경에서 사용할 수 있습니다:

• Claude Code
• Cursor
• Codex

시작하기

1. 설명할 시스템 아키텍처를 식별합니다.
2. 포함할 계층을 정의합니다.
3. 각 계층의 구성 요소를 나열합니다.
4. 템플릿을 사용하여 다이어그램을 생성합니다.

모범 사례

• 계층을 논리적으로 구성합니다.
• 명확한 색상 대비를 사용합니다.
• 각 계층에 간결한 설명을 포함합니다.
• 적절한 경우 그리드 레이아웃을 활용하여 정렬을 유지합니다.