MVC 아키텍처 — TV 와 자동차로 이해하는 Model View Controller (Model View Controller (MVC) - Explained in Hindi)

출처: Model View Controller ( MVC ) - Explained in Hindi — Abdul Bari. 힌디어 영상의 내용을 기록으로 남겨두기 위해 ai로 번역해서 블로그로 작성했다.

모든 공학 제품은 세 부분으로 나뉜다

영상은 MVC 를 소프트웨어 이야기로 시작하지 않는다. 어떤 공학 제품이든 뜯어보면 세 가지 컴포넌트가 보인다는 관찰에서 출발한다:

1. 사용자 인터페이스(User Interface) — 사용자가 제품을 조작하는 부분
2. 메커니즘(Mechanism) — 제품이 실제로 동작하게 하는 부분
3. 저장소/소스(Storage/Source) — 제품이 동작하는 데 필요한 것을 공급하는 부분

텔레비전 — 버튼과 노브가 사용자 인터페이스다. 채널을 바꾸고 볼륨을 조절하며 TV 와 소통하는 창구다. 케이스 안에 숨어 있는 회로와 브라운관이 메커니즘이고, 방송 채널이 들어오는 접시 안테나가 소스다. 인터페이스는 눈앞에 보이고, 메커니즘은 박스 안에 숨어 있다.

자동차 — 핸들·기어 레버·페달·노브가 사용자 인터페이스, 엔진이 메커니즘, 연료 탱크가 저장소다. 차를 움직이는 건 엔진이고, 엔진은 연료 탱크에서 연료를 받아오고, 우리는 인터페이스로 그것을 조종한다.

전자 제품이든 자동차든 이 세 부분의 분리는 동일하다.

소프트웨어에 대입하면 View / Controller / Model

같은 분해를 소프트웨어에 적용하면 이름만 바뀐다:

즉 MVC 는 새로운 발명이 아니라, 공학 제품이라면 원래 갖고 있던 세 부분의 분리를 소프트웨어에 그대로 가져온 것이다.

세 컴포넌트는 어떻게 상호작용하는가

기본 흐름은 이렇다:

• 사용자의 액션(메뉴 클릭 등)은 View 를 거쳐 Controller 로 전달된다
• 데이터 접근(조회·삽입·갱신)은 Controller 가 Model 에 수행한다 — View 가 Model 에 직접 접근하지 않는다
• Model 에 변경이 생기면 Controller 가 그것을 가져와 View 에 보여준다

자동차 비유가 다시 나온다. 액셀러레이터를 밟는 건 View(인터페이스) 조작이지만, 그 액션은 실제로 엔진(Controller)으로 전달되고, 엔진은 연료 저장소(Model)의 연료 흐름에 영향을 준다.

다만 영상이 강조하는 포인트가 있다 — 상호작용 방식은 설계에 따라 달라질 수 있다. Model 이 View 에 직접 변경을 알리는 변형도 가능하다. MVC 에서 정말 중요한 건 상호작용의 화살표 방향이 아니라, 소프트웨어를 세 개의 주요 컴포넌트로 나눈다는 것 그 자체다. 그리고 소프트웨어이기 때문에 하나의 Controller 에 여러 개의 View 를 붙일 수도 있다 — 여러 View 가 같은 Controller 와 상호작용하고, 그 Controller 가 Model 과 상호작용하는 구조다.

각 컴포넌트는 누가, 무엇으로 만드나

세 컴포넌트는 구성 요소도 다르고 만드는 사람도 다르다:

소프트웨어 하나를 세 컴포넌트로 나눠서 개발하면, DBA 가 Model 을, 디자이너가 View 를, 프로그래머가 Controller 를 만들고 이 셋이 합쳐져 하나의 제품이 된다. 역할 분담이 자연스럽게 아키텍처 경계와 일치하게 된다.

컴포넌트별 기술 스택 (2014년 시점)

영상 후반부는 각 컴포넌트를 만들 수 있는 기술들을 나열한다. 2014년 영상이라 목록은 낡았지만, "컴포넌트마다 다른 기술이 필요하다"는 틀은 그대로다.

• View — AWT/Swing(Java), JSF(웹 기반, 널리 쓰이진 않음), Silverlight(.NET, 이미 단종), WPF(.NET 데스크톱), HTML + CSS(웹), Flash(전력 소모가 커서 퇴조), VisualForce(Salesforce 클라우드용)
• Controller — Core Java(스탠드얼론), Servlet/JSP(웹), VB.NET(스탠드얼론), ASP.NET(웹), PHP·Ruby·Python(서버 사이드), Apex(Salesforce). 웹 기반 소프트웨어라면 Controller 는 보통 서버에서 돈다
• Model — Oracle, SQL Server, MySQL, DB2 같은 RDBMS, 객체지향으로 다루려면 Hibernate 프레임워크, 대용량 데이터는 Hadoop, 아니면 그냥 파일

언제 쓰면 좋을까

프론트엔드

컴포넌트 안에 뷰·로직·데이터가 뒤엉킬 때, MVC 의 분리를 적용하면 정리된다.

뷰와 로직 분리 — 데이터 접근과 상태 로직을 훅(Controller 역할)으로 빼고 컴포넌트는 View 만 담당:

// Controller: 로직만
function useTodos() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const add = (title: string) => setTodos((prev) => [...prev, { id: crypto.randomUUID(), title }]);
  return { todos, add };
}

// View: 렌더링만
function TodoList() {
  const { todos, add } = useTodos();
  return <ul>{todos.map((t) => <li key={t.id}>{t.title}</li>)}</ul>;
}

Model 의 단일 접근 창구 — View 가 저장소(localStorage, API)에 직접 접근하지 않게 하는 것도 같은 원칙이다:

// Model 접근은 이 모듈로만 — 컴포넌트가 localStorage 를 직접 만지지 않는다
export const todoStore = {
  load: (): Todo[] => JSON.parse(localStorage.getItem('todos') ?? '[]'),
  save: (todos: Todo[]) => localStorage.setItem('todos', JSON.stringify(todos)),
};

백엔드

서버 프레임워크 대부분이 이미 MVC 구조를 강제하거나 권장한다.

라우트 핸들러 = Controller, DB 접근 = Model — 핸들러에 SQL 을 직접 쓰지 않고 Model 계층을 거친다:

// Model
const userModel = {
  findById: (id: string) => db.query('SELECT * FROM users WHERE id = $1', [id]),
};

// Controller
app.get('/users/:id', async (req, res) => {
  const user = await userModel.findById(req.params.id);
  res.json(user); // JSON 응답이 View 역할
});

하나의 Controller 에 여러 View — 영상에서 말한 멀티 뷰는 백엔드에선 같은 데이터를 JSON·HTML·CSV 로 다르게 내려주는 형태로 나타난다:

app.get('/report', async (req, res) => {
  const data = await reportModel.fetch();
  if (req.accepts('html')) return res.render('report', data); // HTML View
  return res.json(data); // JSON View
});

정리

• 모든 공학 제품(TV, 자동차, 소프트웨어)은 사용자 인터페이스·메커니즘·저장소 세 부분으로 나뉜다. 소프트웨어에서 그 이름이 View / Controller / Model 이다.
• 기본 상호작용은 View ↔ Controller ↔ Model 이고 View 는 Model 에 직접 접근하지 않지만, 화살표 방향은 설계에 따라 변형될 수 있다. 핵심은 방향이 아니라 세 컴포넌트로의 분리 그 자체다.
• 분리는 역할 분담과 일치한다 — View 는 디자이너, Controller 는 프로그래머, Model 은 DBA 가 만든다.
• 하나의 Controller 에 여러 View 를 붙일 수 있다는 점이 소프트웨어만의 장점이다. 같은 로직으로 다른 화면·다른 포맷을 서빙할 수 있다.