지난 포스팅에서는 AWS S3 standard 객체 스토리지를 클라우드 환경에 가동하여 상품 이미지 원본을 안전하게 아웃소싱하고, 데이터베이스(RDBMS) 테이블에는 가벼운 링크 주소(S3 URL)만 바인딩함으로써 RDBMS의 I/O 및 백업 오버헤드를 극적으로 제거하는 클라우드 분산 연동을 성공적으로 완료했습니다.

인프라 세팅과 마스터 데이터 구성을 완료했으니, 이제 이 데이터를 바탕으로 사용자 요청을 받아 처리하고 화면을 동적으로 그려주는 웹 애플리케이션의 뼈대를 조율할 차례입니다. 이번 포스팅에서는 단일 파일에 수만 줄의 코드를 작성하여 유지보수를 어렵게 만드는 모놀리식의 한계를 극복하기 위해, MVC(Model-View-Controller) 디자인 패턴을 바탕으로 시스템의 결합도를 낮추고 모듈 간 단일 책임 원칙을 수립하는 설계 사상을 설명하겠습다.

1. 관심사의 분리(SoC)와 단일 책임 원칙(SRP)의 의의

프로젝트 기획 초기나 소규모 단계에서는 하나의 파일(app.js 또는 server.js) 내부에 데이터베이스 연결 인스턴스, 사용자 인증 분기문, HTML 화면 마크업 코드, 에러 트래킹 로직까지 모두 한곳에 우겨넣고 작동시키는 설계(스파게티 코드)를 자주 사용합니다.

단기적으로는 속도가 빠를지 모르나, 기능이 하나둘 누적되거나 다수의 개발자가 협업하는 실제 엔터프라이즈 환경에서는 코드의 한 부분을 고칠 때 전혀 상관없는 엉뚱한 로직이 붕괴되는 사이드 이펙트(Side Effect)가 빈번하게 수반됩니다.

이를 방어하는 공학적 솔루션이 바로 관심사의 분리(Separation of Concerns, SoC)와 단일 책임 원칙(Single Responsibility Principle, SRP)입니다.

• 관심사의 분리: 프로그램을 기능과 목적에 따라 서로 겹치지 않는 독립적인 영역들로 잘게 쪼개어 배치하는 설계 원칙입니다.
• 단일 책임 원칙: "하나의 모듈이나 클래스는 오직 하나의 비즈니스 목적과 책임만을 가져야 한다"는 아키텍처적 약속입니다. 이를 의류 쇼핑몰의 Node.js-Express 백엔드 시스템에 투영하여, 완벽하게 분할된 MVC 아키텍처로 격상시킴으로써 시스템 유연성을 극대화할 수 있습니다.

2. 의류 쇼핑몰 백엔드를 지탱하는 MVC 3대 계층 구조 분석

교재 6.3절 '애플리케이션 구조' 명세에 따라, 의류 쇼핑몰의 각 모듈 파일들이 MVC 아키텍처에서 수행하는 고유 역할과 내부 설계를 낱낱이 분해해 보겠습니다.

① Model (데이터 계층) : db.js

• 전담 파일: db.js
• 역할: 데이터베이스 연결 상태의 지속적인 관리와 제어를 전담합니다.
• 동작 원리: 데이터베이스 호스트 엔드포인트 주소와 포트, 풀(Pool) 자격증명 정보를 은닉 관리하며, MySQL과의 효율적인 연결 풀(Connection Pool)을 생성합니다. 다른 파일(Main.js 등)들이 데이터를 조회, 삽입, 갱신할 때 오직 이 공공 인스턴스(db.query)만을 매개체로 활용하여 RDBMS와 통신하도록 설계함으로써 자원 관리 최적화를 단독으로 책임집니다.

② View (화면 계층) : template.js 및 style.css

• 전담 파일: template.js, style.css (및 인라인 CSS 스타일링)
• 역할: 사용자에게 데이터를 시각적으로 가시화하여 뿌려주는 UI 뼈대를 설계합니다.
• 디자인 이원화 전략:
  • template.js (인증 전용): 로그인(/auth/login) 및 회원가입(/auth/register)과 같은 핵심 보안 및 인증 단계는 로딩 지연 속도를 최소화하는 것이 최우선입니다. 따라서 template.js를 이용해 미니멀한 폼 구조 중심의 HTML을 서버 사이드에서 즉각 생성하되, 외부 파일 요청 오버헤드를 아끼기 위해 인라인 CSS를 적극 융합해 빠른 응답성을 구현합니다.
  • style.css (메인 쇼핑몰 전용): 상품 그리드 및 마이페이지 등 대용량 데이터 카드와 미디어가 나열되는 복잡한 이커머스 UI는 브라우저 캐싱 이점을 끌어올리기 위해 style.css라는 외부 정적 파일 방식으로 완전히 격리하여 다채로운 컬러 테마와 반응형 모바일 그리드를 전담 수립합니다.

③ Controller (로직 계층) : Main.js, auth.js, cartView.js, prodDetail.js, myPage.js

• 전담 파일: Main.js (중앙 허브) 및 세부 도메인 라우터들
• 역할: 사용자의 HTTP 요청 패킷을 가장 먼저 접수하여 입구 컷 제어(인증 상태 확인)를 실행하고, 분석한 요청 매개변수를 적절한 비즈니스 제어 코드로 라우팅 위임하는 중추 신경망 역할을 전담합니다.
• 모듈화된 라우팅 구조:
  • Main.js (교통 경찰): Express 가상 애플리케이션 초기 세팅을 집행하고 미들웨어를 장착한 뒤, 들어오는 URL 세부 경로에 맞춰 상품 상세는 prodDetail.js로, 로그인 및 가입 처리는 auth.js로, 장바구니 제어는 cartView.js로, 내 주문 내역은 myPage.js로 역할을 철저하게 위임(Routing) 배포합니다.
  • 이로써 각 도메인 라우터들은 전체 구조를 신경 쓸 필요 없이 오직 자기 영역의 비즈니스 데이터 가공 처리와 DB 트랜잭션 수송 연산에만 집중할 수 있게 되어 코드의 유지보수 효율성이 증강됩니다.

3. 구조적 모듈화 설계의 R-D-B 결속 다이어그램

우리가 구현한 핵심 자바스크립트 모듈들이 단일 책임 원칙 하에 각자 독립적인 임무를 수행하면서, 전역 허브인 Main.js를 매개로 어떻게 안전하고 긴밀하게 결속하는지 보여주는 아키텍처 다이어그램입니다.

4. 의류 쇼핑몰 MVC 계층 간 메시지 수송 요약표

실무 백엔드 시스템 가동 시, 각 비즈니스 요청(Scenario)들이 어떤 계층 구성을 경유하여 작동하는지 일목요연하게 명시한 구조적 흐름표입니다.

시나리오(요청 경로)	핵심 컨트롤러 (Controller)	데이터 모델 연동 (Model)	UI 전송 전략 (View)	최종 수송 목적 및 처리값
신규 회원 가입 (/auth/register)	auth.js (가입 프로세스)	db.query (Customers 테이블)	template.js (인라인 CSS)	중복 가입 체크 검증 및 bcrypt 암호화 해싱 유저 삽입
상품 목록 조회 (/api/products)	Main.js (API 라우트)	db.query (Products 테이블)	비동기 JSON 전송 (CSR)	RDBMS 내의 상품 마스터 및 S3 이미지 고유 주소 고속 반환
상세 페이지 조회 (/prod/product/:id)	prodDetail.js (상품 상세)	db.query (Products + Prod_Evals)	서버 사이드 HTML 생성 (SSR)	상품 상세 사양 및 실구매자 별점 한줄평 데이터 결합 렌더링
장바구니 추가 (/cart/add)	Main.js (중앙 라우트)	db.query (Carts 테이블)	비동기 결과 JSON 응답	세션 상태 체크 및 Customers 아이디 매핑 장바구니 INSERT
주문 및 결제 처리 (/cart/pay)	cartView.js (결제 라우트)	복합 트랜잭션 (Orders + Ord_items)	style.css 기반 리다이렉트	다중 삽입 트랜잭션 ACID 보증 수립 후 장바구니 소프트 삭제

마치며: 모듈과 역할의 완전 분업화 완수

오늘 우리는 데이터를 가공하고 사용자 경험을 설계하는 최고의 백엔드 아키텍처로서, 관심사의 분리(SoC)와 단일 책임 원칙(SRP)의 당위성을 완벽히 체화했습니다. 또한 우리의 의류 쇼핑몰 백엔드를 구성하는 Model(db.js), View(template.js, style.css), Controller(Main.js 및 기능별 라우터들)의 3대 핵심 뼈대를 분배 모듈화하여 유연하고 확장 가능한 엔터프라이즈 시스템 구조로 격상시켰습니다!

"모든 잡다한 자재와 전선, 도어락들을 한 통에 무작정 집어넣고 기동시키던 비효율을 완벽히 퇴출하고, 고속 물류 수송 배관(Model), 미려하고 산뜻한 내외부 문짝(View), 그리고 구역마다 배치된 검문소와 교통 제어 시스템(Controller)을 완벽하게 양분화하여 하나의 똑똑한 시스템 요새를 완성해 낸 것입니다."

정적인 파일들의 구조적 배치와 역할 분배(MVC)를 확실히 이해했으니, 이제 실제 사용자 데이터 패킷들이 시간의 순서에 따라 흘러 다니는 동적인 시퀀스 동선과 메시지 전이 흐름을 완벽히 마스터할 차례입니다.

다음 포스팅이자 웹 애플리케이션 가동 메시지 흐름의 바이블이 될 [시스템 흐름 분석] 시퀀스 다이어그램으로 추적하는 사용자 인증, 장바구니, 결제 처리의 전체 데이터 생명 주기 편에서는 사용자가 사이트에 도킹하여 로그인 전용 검문소로 튕겨 나갔다가 가입 프로세스를 거치고, 메인 화면의 비동기 패치를 뚫어 상품을 담고 결제 처리 트랜잭션이 종결되기까지의 전체 데이터 전이 생명 주기(Life-Cycle)를 시퀀스 다이어그램으로 분석하여, 코딩의 방향성을 명쾌하게 알려주는 완벽한 동적 지도를 알려드리겠습니다.

오늘 분리된 폴더 모듈 간의 require 의존성 주입 시 상대 경로 파일 호출 오타나, template.js의 인라인 CSS 적용 원리가 아리송하시다면 운영자 메일로 질문해 주세요. 오늘도 안전하고 똑똑한 클라우딩 라이프 하세요. 감사합니다! 😉

출처

• 이현호. 실무 프로젝트로 완성하는 클라우드 환경에서 DB 구축과 웹 개발. 길벗캠퍼스. 2026.04. (6.3장 '애플리케이션 구조' 151-155페이지 참조)
• 이현호. "06장. 애플리케이션 개발 - 개요_설명오디오.m4a" 설명 오디오 가이드 스크립트 기반 MVC(Model-View-Controller) 아키텍처 역할 매핑, template.js(인증 전용)의 인라인 스타일링과 style.css(메인 전용) 외부 파일의 이원화 렌더링 설계, Main.js의 교통 경찰 위임 역할 비하인드 대화록 완벽 반영.
• Express.js Routing Guide (https://expressjs.com/en/guide/routing.html) 및 Node.js Module Architecture Specifications.

자주 묻는 질문 (FAQ)

Q. 웹 애플리케이션 설계 시 MVC 패턴의 '관심사의 분리(SoC)'가 보증해 주는 실무적 이점은 무엇인가요? 

A. 모듈 간 결합도 감소 및 유지보수 편의성 확보입니다. 데이터베이스(Model), 화면(View), 라우팅 제어(Controller)를 별개 모듈로 완전 독립 격리함으로써, 특정 영역(예: DB)의 스펙이 변경되어 교체되더라도 나머지 비즈니스 룰 및 UI 레이아웃 코드는 일절 손상되지 않는 안전성을 제공합니다.

Q. 쇼핑몰 뷰(View) 구현 단계에서 template.js(인증 전용)와 style.css(메인 쇼핑몰)를 굳이 나누어 이원화 설계한 이유는 무엇인가요? 

A. 로딩 지연 오버헤드를 제어하기 위함입니다. 보안이 민감하고 폼 입력 전송 속도가 최우선인 로그인과 회원가입 페이지는 template.js를 통해 인라인 CSS와 함께 빠르게 렌더링되게 만들고, 복잡한 메인 상품 목록 및 마이페이지 화면은 style.css 외부 스타일시트로 격리해 브라우저 캐싱 이점을 도모합니다.

Q. Controller 계층에서 Main.js와 개별 기능별 스크립트(auth.js, cartView.js 등)의 역할 관계는 어떻게 되나요? 

A. 중앙 교통 제어 허브와 전문 위임 라우터의 관계입니다. Main.js는 Express의 전반적인 서버 환경 구성과 공통 미들웨어를 초기화하고, 들어오는 URL 경로 패턴에 맞춰 전문 처리기인 auth.js나 cartView.js 등의 모듈로 처리를 위임(Routing)하는 조정자 임무를 맡습니다.