[Spring Boot] 웹 아키텍처 설계의 여정 (1): 폴더 구조부터 WAS의 동작 원리까지

1. 서론: 단순한 파일 위치 고민이 아키텍처 설계로

프로젝트 '가상 주식 거래소'를 개발하며 Spring Security를 도입하던 중, login.html 파일을 어디에 둬야 할지 고민에 빠졌다. 이 사소한 고민은 단순히 폴더 정리를 넘어, Spring Boot의 정적/동적 리소스 처리 방식과 웹 애플리케이션 서버(WAS)의 동작 원리를 재정립하는 계기가 되었다.

2. static vs templates: 스프링 부트는 어떻게 파일을 찾을까?

가장 먼저 헷갈렸던 것은 Spring Boot의 기본 폴더 구조인 src/main/resources 하위의 static과 templates의 역할 차이였다.

(1) static 폴더 (정적 리소스)

• 역할: 서버가 "가공 없이 있는 그대로" 브라우저에게 던져주는 파일들을 보관한다.
• 대상: CSS, JavaScript, 이미지(png, jpg), 폰트 파일, 그리고 내용이 절대 변하지 않는 HTML.
• 동작 원리:
  • 요청: GET /css/style.css
  • 처리: 스프링의 내장 톰캣(Tomcat)이 요청을 받으면, 별도의 컨트롤러 로직 없이 이 폴더에서 파일을 찾아 바로 응답한다.
  • 특징: WAS(Web Application Server)의 연산 자원을 거의 쓰지 않는다.

(2) templates 폴더 (동적 리소스)

• 역할: **서버 사이드 템플릿 엔진(Thymeleaf, Mustache 등)**이 HTML을 "요리(렌더링)"하기 위한 재료를 보관한다.
• 대상: 사용자마다 다른 화면을 보여줘야 하는 모든 HTML 파일.
• 동작 원리:
  • 요청: GET /login
  • 처리: DispatcherServlet이 요청을 가로채고, @Controller로 보낸다. 컨트롤러가 return "login"을 반환하면, ViewResolver가 templates/login.html을 찾아 타임리프 엔진을 돌린다.
  • 이유: 단순히 입력창만 있는 로그인 페이지라도, CSRF 토큰 삽입이나 로그인 실패 에러 메시지(param.error) 처리를 위해선 서버의 개입이 필수적이다. 따라서 templates에 위치해야 한다.

---

3. 웹의 흐름: 클라이언트부터 WAS, DB까지

파일 위치를 결정한 뒤, 사용자가 내 사이트에 접속했을 때 화면이 뜨기까지의 전체적인 흐름을 정리해 보았다. (SSR 기준)

1. Client (Browser): 사용자가 주소창에 www.virtual-exchange.com을 입력한다.
2. Web Server: (Nginx나 Apache가 앞단에 있다면) 정적 파일(이미지 등)은 여기서 바로 처리해서 돌려준다.
3. WAS (Spring Boot/Tomcat): 동적인 요청(예: 메인 페이지 조회)은 WAS로 넘어온다.
4. Controller: 요청을 받아 필요한 데이터를 수집한다.
   • "이 유저의 자산 정보를 가져와야 해." -> Service 호출
   • Service -> Repository -> Database(MySQL) 쿼리 실행
5. View Rendering (핵심):
   • DB에서 가져온 데이터를 가지고 templates 폴더의 HTML을 조립한다.
   • 빈칸(${balance})에 실제 값(10,000원)을 채워 넣는다.
6. Response: 완성된 HTML 문서를 HTTP 응답으로 클라이언트에게 보낸다.
7. Browser: HTML을 받아 화면에 그린다.

이 과정에서 WAS가 HTML을 완성해서 보내주는 것, 이것이 바로 SSR이다.

---

4. SSR vs CSR: 프레임워크와 렌더링 주체의 차이

요즘 트렌드인 "JSON 데이터 통신"과 내가 사용하는 방식의 차이를 명확히 하기 위해 SSR과 CSR을 비교 분석했다.

(1) SSR (Server Side Rendering)

• 대표 기술: Thymeleaf, JSP, Next.js(React 기반의 SSR)
• 특징:
  • 서버(WAS)에서 HTML을 다 만들어서 보낸다.
  • 브라우저는 받자마자 화면을 띄울 수 있다. (초기 로딩 빠름)
  • 단점: 페이지를 이동할 때마다 위 3번(WAS)부터 7번 과정을 다시 거치므로 화면이 깜빡인다.

(2) CSR (Client Side Rendering)

• 대표 기술: React, Vue.js, Angular
• 특징:
  • 처음 접속 시, 서버는 내용이 텅 빈 HTML(<div id="root"></div>)과 거대한 JavaScript 파일만 보낸다.
  • 화면이 하얗게 보이다가, JS가 다운로드 완료되면 브라우저가 실행되어 화면을 그린다.
  • 이후 데이터가 필요하면 서버에 **API 요청(JSON)**만 보내서 받아온다.
• 구조적 차이: WAS가 HTML을 그리지 않고, 오직 데이터(JSON)만 제공하는 API 서버 역할만 수행한다.