도메인 기반의 FE 디렉토리 구조

 

📌 신규 서비스 앱 구조, 어떻게 설계할까요?

현재 재직 중인 회사의 사내 신규 서비스를 하이브리드 앱 형태로 개발하기로 결정된 이후

프론트엔드팀의 첫 번째 과제는 큰 규모의 비즈니스를 어떻게 구조화할 것인지였습니다.

 

Vue 프로젝트를 구조화하는 여러 가지 제안들이 커뮤니티에 많이 존재하지만

그중 대부분은 규모가 크지 않은 앱에 적합한 형태였고 무엇보다 저희는 외주 개발자분들도

함께 작업을 해야 하는 상황이었기 때문에 보다 명확한 구조가 필요했습니다.

 

이번 포스트에서는 어떤 이유로 DDD 를 프로젝트에 적용하게 되었고

이를 통해 얻게 된 이점이 무엇이었는지 위주로 정리해보려고 합니다.

💡 주의!

여기서는 DDD에 대한 자세한 이론적인 내용은 포함하지 않습니다.
DDD의 개념을 이용해서 FE 프로젝트 구조 설계에 어떤 식으로 적용했는지 위주로 다루고 있습니다.

 

📌 도메인 기반 설계(DDD)란?

DDD (Domain Driven Design)?

DDD 란 큰 규모의 비즈니스를 각 domain 별로 나누어 설계하는 방법론입니다.

예를 들어 e-commerce 서비스의 경우에는 다음과 같이 비즈니스를 나눌 수 있습니다.

 

 

결제, 주문, 배송, 고객 관리, 인증 등과 같이 비즈니스를 분리해서 생각할 수 있습니다.

이처럼 DDD 는 큰 규모의 서비스를 작은 비즈니스 단위로 쪼개어

각 도메인 간의 응집도를 높이고 서로 다른 도메인끼리는 느슨한 의존도를 가지게 됩니다.

 

📌 왜 도메인 기반으로 설계했나요?

1️⃣ 비즈니스 요구사항에 맞춰 모델링 하기 용이하다

저희 팀이 DDD 를 선택한 가장 첫 번째 이유입니다.

현재 운영 중인 앱은 수많은 크고 작은 비즈니스들로 이루어져 있고

금융업 특성상 현업과의 커뮤니케이션이 무엇보다 중요한 환경이었습니다.

 

아무래도 개발자들은 현업보다 비즈니스의 이해도가 낮을 수밖에 없기 때문에

개발자 임의로 비즈니스를 쪼개서 관리하게 되면 추후 유지보수에서 관리 포인트가

증가하게 되는 일이 발생할 것이라고 생각되었습니다.

 

2️⃣ 유지보수에 용이하다

DDD 는 각 도메인별로 느슨한 의존도와 도메인 내에서는 높은 응집도를 가지기 때문에

새로운 비즈니스를 추가하거나 제거하는데 수월하다는 장점이 있습니다.

 

저희 회사의 경우 기존 앱 1.0 에서 운영하던 비즈니스와 마이데이터 신규 서비스를

별도의 비즈니스 도메인으로 분리해서 개발하고 있습니다.

두 개의 큰 비즈니스 내에서도 다시 대출, 자동차, 마이데이터 연동, 관리 등

여러 가지 서브 도메인으로 분리해서 개발하고 있습니다.

 

3️⃣ 도메인 간 결합도가 낮아 확장성이 좋다

도메인별로 결합도가 낮다는 것은 많은 개발자들이 하나의 서비스를 개발할 때

서로의 개발 영역이 다른 영역에 영향을 주는 정도가 낮다는 것을 의미하기도 합니다.

저희는 외주 개발자분들도 함께 개발하고 있는데 이분들과 함께 실시간으로 커뮤니케이션하며

작업을 할 수 없는 업무 환경 특성상 충돌을 최대한 줄이며 개발할 수 있는 방법이 필요했습니다.

 

DDD 를 이용하면 개발자들은 자신이 맡은 도메인의 코드가 타 영역에 영향을 주는

side effect 를 걱정하지 않아도 되기 때문에 보다 효율적인 개발이 가능할 것이라 생각했습니다.

 

또한 차후 특정 비즈니스 도메인을 독립적으로 배포 및 운영하는 요구사항이 생길 수도 있어

이를 별도의 프로젝트로 분리하는 등의 확장성도 고려해야 하는 상황이었기 때문에

DDD 의 각 도메인 사이의 낮은 결합도는 큰 장점으로 다가왔습니다.

 

📌 도메인 기반 설계를 적용한 프로젝트 구조 예시

다음은 저희가 DDD 를 적용해서 설계한 프로젝트 구조의 예시입니다.

 

비즈니스를 home, auto, menu, mydata 라는 큰 도메인으로 나누고

각각의 도메인의 서브 도메인을 section 으로 구분했습니다.

app 에서는 특정 도메인에 속해있지 않은 전역 비즈니스들을 관리하며

각각의 비즈니스 도메인들의 store 와 router 를 import 해서

최상위 App 에게 전달해주는 역할을 합니다.

src
ㄴ public
ㄴ assets
ㄴ app
| ㄴ store
| ㄴ api
| ㄴ util
| ㄴ router
|
ㄴ domain
| ㄴ home
| ㄴ auto
| ㄴ menu
| ㄴ mydata
| ㄴ Index.vue
| ㄴ api
| ㄴ mydata-management
| ㄴ mydata-auto
| ㄴ section
| | ㄴ mydata-management
| | ㄴ mydata-auto
| | ㄴ Index.vue
| |
| ㄴ shared
| ㄴ store
| ㄴ util
| ㄴ router
|
ㄴ App.vue
ㄴ main.ts

 

📌 주의사항

1️⃣ 유비쿼터스 언어를 사용한다.

유비쿼터스 언어 란 현업과 동일한 용어를 사용한다는 것을 말합니다.

개발자만 이해할 수 있는 용어들을 사용한다면 현업분들 혹은 도메인 지식이 부족한 개발자분들이

신규로 투입되었을 때 비즈니스 이해에 어려움을 겪을 수도 있습니다.

 

2️⃣ 적용하기전에 충분한 고민이 필요하다.

도메인 기반설계방식이 무조건 만능은 아닙니다.

각 프로젝트 성격에 맞는 구조가 있기 때문에 억지로 적용시키는 것은 독이 될 수도 있습니다.

 

📌 참고 자료

Learn How Domain-Driven Design Can Benefit Your Nuxt.js Applications

DDD와 MSA 기반으로 좋은 서비스 개발하기