DDD 기반 UI 설계 및 자동 구현

개요

마이크로서비스 아키텍처 설계에서 가장 중요한 과제 중 하나는 설계와 구현 간의 일관성 유지입니다. 이벤트스토밍을 통해 도출된 비즈니스 요구사항이 실제 사용자 인터페이스에 정확히 반영되고, 백엔드 서비스와 원활하게 연동되는 것은 프로젝트 성공의 핵심 요소입니다.

이러한 과제를 해결하기 위해, DDD 기반의 체계적인 접근 방식을 제공합니다. 먼저 도메인의 비즈니스 요구사항을 분석하고 BoundedContext를 분할한 다음, 각 BC별로 접근되는 인터페이스를 구조화하는 사이트맵 생성 기능을 통해 전체 시스템의 구조를 명확히 합니다. 이어서 사이트맵의 각 노드와 연결되어 실제 UI를 시각화하는 와이어프레임 생성 기능으로 구체적인 사용자 경험을 설계합니다. 마지막으로 생성된 와이어프레임을 포함한 Frontend 생성에 따른 요구사항을 Rule로 정리한 바이브템플릿을 통해 일관된 UI를 자동으로 구현함으로써 설계부터 구현까지의 완전한 자동화를 실현합니다.

음식 배달 앱 도메인 주제를 기반으로 사이트맵부터 바이브 템플릿까지 UI 요구사항을 유지하면서 동작 가능하면서 UI 일관성이 유지되는 애플리케이션을 구현하는 방법은 다음과 같습니다.

1) 사이트맵 생성하기

사이트맵은 웹사이트나 애플리케이션의 전체 구조를 시각화한 지도입니다. 개발을 시작하기 전에 전체 그림을 보면서 "우리 앱에는 이런 화면들이 필요하구나"를 이해하는 데 활용할 수 있습니다.
또한, 각 화면 카드에는 해당 페이지가 무엇을 하는지에 대한 간단한 설명이 포함되어 있어, 개발자뿐만 아니라 기획자, 디자이너 등 모든 팀원이 쉽게 이해할 수 있습니다.

음식 배달 앱 도메인 주제를 기반으로 사이트맵을 생성하는 방법은 다음과 같습니다.

1) 메인 페이지에서 '음식 배달 앱'을 클릭 후, BoundedContext 생성 단계까지 진행합니다.
이때, Bounded Context 분리 기준 하단에 위치한 '프론트엔드 생성 여부'가 클릭 되었는지 확인 후, 생성이 진행되어야 합니다.

2) Bounded Context 분할 결과까지 생성되었다면 하단의 사이트맵 생성 버튼을 클릭하여 사이트맵을 생성합니다.

3) 생성이 완료되면 다음과 같이 음식 배달 앱의 전체 구조를 한눈에 볼 수 있는 사이트맵이 생성됩니다.

이렇게 생성된 사이트맵은 단순히 화면 목록을 나열한 것이 아니라, DDD 기반으로 분석된 요구사항에 따라 사용자 인터페이스를 체계적으로 구조화한 결과물입니다. 이를 통해 이후 구현 단계에서 UI 컴포넌트 간의 관계를 명확히 파악할 수 있으며, 일관된 시스템 설계를 위한 가이드북 역할을 하게 됩니다.

2) 와이어프레임 생성하기

와이어프레임은 웹사이트나 앱 화면의 뼈대를 그린 설계도입니다. 마치 집을 짓기 전에 평면도를 그리듯이, 실제 디자인과 개발에 들어가기 전에 "이 화면에는 어떤 버튼이 있고, 어떤 정보가 표시되고, 사용자가 어떤 행동을 할 수 있는지"를 미리 표현한 것입니다.

앞서 생성한 사이트맵이 어떤 화면들이 필요한지를 보여주었다면, 와이어프레임은 각 화면이 실제로 어떻게 구성되어야 하는지를 구체화하는 단계입니다.

음식 배달 앱 도메인의 이벤트스토밍 모델을 기반으로 와이어프레임을 생성하는 방법은 다음과 같습니다.

먼저, 이전단계에 이어 이벤트스토밍 생성 단계까지 진행합니다.

생성이 완료되면 아래와 같이 Command, ReadModel스티커 앞에 UI스티커가 생성된것을 확인할 수 있습니다.

또한, 하단의 '프론트엔드' BoundedContext가 생성된 것을 확인할 수 있는데, 이는 이전 단계에서 생성한 사이트맵을 확인할 수 있습니다.

생성된 UI 스티커를 더블 클릭 하여 패널을 생성한 후, 'GEN AI' 탭을 클릭하면 연결된 Command 스티커의 정보를 기반으로 와이어프레임이 생성된 것을 확인할 수 있습니다. 이때, 해당 와이어프레임을 확인하고 추가 요구사항이 있을 경우 해당 요구사항을 입력하여 새로운 와이어프레임을 생성할 수 있습니다.

3) 바이브템플릿 적용하기

와이어프레임을 생성한 다음 요구사항 기반 바이브코딩을 진행하기 위해 바이브템플릿을 적용합니다.
CODE를 클릭하여 Code Viewer 화면을 생성한 다음, 'Base:'를 클릭 > 'MARKETPLACE'를 클릭을 통해 마켓플레이스 화면에 진입합니다.

'TOPPINGS'탭에 위치한 'Vibe Template for React'를 클릭하고 Apply를 클릭하여 토핑을 적용합니다.
이때, TEMPLATES 탭에 위치한 'Vibe Template for Spring Boot'를 적용하면 백엔드와 프론트엔드에 대한 바이브코딩을 진행할 수 있습니다.

적용이 완료되면, 상단 메뉴 중 '아카이브 다운로드'를 클릭하여 적용된 프로젝트를 다운받을 수 있습니다.

4) 바이브코딩 실행하기

바이브템플릿이 적용된 프로젝트를 'Cursor IDE'를 통해 실행하면 아래와 같은 화면을 확인할 수 있습니다.

'Ctrl + L'을 입력하여 우측에 Cursor LLM 영역을 활성화합니다. 이후 단계에서 해당 Prompt영역에 템플릿/토핑 적용을 통해 생성된 PRD를 Prompt에 추가하여 바이브코딩을 진행할 수 있으며 생성된 Rule과 PRD에 작성된 음식배달 시나리오 모델의 정보를 추출한 Metadata를 통해 요구사항에 맞는 코드 구현이 진행됩니다.

생성된 파일에 대한 설명은 다음과 같습니다.

1. Rule
   .cursor/rules 하위에 생성된 파일들은 Cursor LLM이 동작할 때 Prompt를 제외한 기본적으로 적용됩니다. 따라서 바이브코딩이 진행될 때, 프론트엔드 구현에 있어 일관성 유지 및 동작 가능한 애플리케이션을 생성하기 위한 요구사항들이 포함되어 있습니다.
   대표적으로 기술 스택, 패키지 구조, 이벤트스토밍 스티커별 생성 예시, 디자인 예시, 생성 규칙이 있으며, 각각의 Rule은 바이브코딩이 진행됨에 따라 적절한 상황에 Rule이 적용되도록 처리되어 있습니다.
   
2. FrontendPRD.txt
   Cursor AI 기반 바이브코딩을 진행할 때, Prompt역할을 하며, 동시에 이벤트스토밍 모델 기반 생성된 데이터인 데타데이터를 제공합니다. 이를 통해 이벤트스토밍 모델에 따른 구현이 진행됩니다.
   
3. wireframe.txt
   UI스티커를 통해 생성한 와이어프레임에 대한 HTML 코드로 구성된 파일입니다. 이는, 바이브코딩이 진행될 때, 파일 상단에 작성한 요구사항대로 React기반으로 변경되어 구현이 진행됩니다.
4. openapi.yaml
   설계 단계에서 생성한 Command기반 API 명세에 대한 내용으로 바이브코딩이 진행될 때, 생성되는 버튼 및 화면상에 필요한 API를 제시하고 백엔드와의 통신에 있어 일관성있는 API를 제공하는 역할을 담당합니다.
   

5) 프론트엔드 기본 구조 생성하기

프론트엔드 구현에 앞서 frontend-setup.txt에 작성된 내용을 Prompt 영역에 복사 및 붙여넣기를 진행하고 'Enter'를 입력합니다. 해당 파일은 모듈별 프론트엔드 코드를 구현하기에 앞서 기초가 되는 React 기반의 패키지 구조 및 실행 환경을 사전에 생성하기 위한 파일이며, 생성이 진행되면 파일에 입력한 순서에 따라 frontend폴더 생성과 기본 실행 환경을 구성하는 파일들이 생성됩니다.

6) 모듈별 바이브코딩 실행하기

frontend-setup.txt를 통해 기본 구조가 생성되었다면 BoundedContext 하위에 생성된 FrontendPRD.txt에 작성된 내용을 새로운 Cursor AI Prompt창을 활성화하여 동일한 방법으로 바이브코딩을 진행하면 이전에 설명한 Rule 기반 프론트엔드 구현이 시작되는 것을 확인할 수 있습니다.

바이브코딩이 완료되면, BoundedContext별 설계된 모델에 따른 UI와 와이어프레임에 따른 버튼 및 폼 생성이 진행된 프론트엔드 UI를 확인할 수 있습니다.

이를 통해 분석/설계를 통해 도출된 요구사항을 토대로 생성된 이벤트스토밍 모델이 구현단계의 요구사항으로 전달되어 설계와 구현의 일관성이 유지되고, 마이크로서비스 아키텍처 설계를 보장한 UI가 구현된 프론트엔드가 구현된 것을 확인할 수 있습니다.