SPA (Single Page Application) 란?
본문
SPA라고 들어봤어?
최근에 웹 개발 이야기하면 꼭 나오는 개념인데, 한마디로 '페이지 이동이 없는 웹사이트' 라고 생각하면 돼.
기존 웹사이트, 예를 들어 네이버 뉴스 페이지를 생각해 봐. 정치란을 클릭하면 화면이 하얗게 깜빡이고 새로고침 되면서 페이지가 완전히 바뀌지? 그게 전통적인 방식이야.
근데 SPA는 그렇지 않아. 페이스북이나 인스타그램을 떠올려 봐. 홈피드에서 어떤 글의 댓글을 보려고 클릭하면, 화면이 하얗게 변하거나 새로고침 되지 않고, 그 글 내용만 부드럽게 펼쳐지잖아. 아니면 Gmail에서 메일함을 바꿀 때도 전체 페이지가 다시 로딩되는 게 아니라, 왼쪽 메뉴는 그대로고 오른쪽 메일 목록만 스무스하게 바뀌는 것처럼.
이게 바로 SPA의 핵심이야. 사용자가 뭘 클릭해도 처음 로딩된 그 '한 장'의 페이지 안에서 내용만 부분적으로 바꿔치기 하는 거지.
장점은 뭘까?
느낌이 진짜 좋아. 앱 쓸 때처럼 깜빡임 없이 매끄럽고 반응이 빠르잖아. 사용자 경험이 확 달라져.
서버에 요청하는 양이 줄어들어. 매번 페이지 전체를 새로 보내달라고 떼쓰는 게 아니라, '이 글의 댓글 데이터만 주세요' 하는 식으로 필요한 것만 요청할 수 있으니까 서버도 부담이 덜하고 통신도 효율적이지.
물론 단점도 있어.
첫 화면 뜨는 게 좀 느릴 수 있어. 모든 전투 준비(HTML, CSS, JS 코드)를 한방에 다 불러와야 하기 때문에 초기 로딩 시간이 조금 길어질 수 있어.
검색엔진 최적화(SEO)가 조금 까다로워. 구글 같은 검색 엔진 봇이 내용을 수집하기가 기존 페이지보다는 복잡해져서, 신경 써서 설정해줘야 해.
뒤로 가기 버튼 관리가 필요해. 페이지가 하나뿐이니까, 브라우저의 뒤로 가기 동작을 개발자가 직접 구현해 줘야 하는 부분이 생기거든.
그래서 요즘 대부분의 '웹 애플리케이션'이라고 부르는 것들(예: 트렐로 같은 협업 도구, 네이버 웹툰, 쇼핑몰 상세 페이지 등) 이 SPA 방식으로 만들어지고 있어. 특히 React, Vue, Angular 같은 프레임워크가 이 SPA를 쉽게 만들 수 있게 도와주는 대표적인 도구들이지.
결국 SPA는 정적인 홈페이지보다는 사용자와 끊임없이 상호작용하는 동적인 웹앱을 만들 때 그 진가를 발휘하는 개발 방식이야. 최근 트렌드의 핵심이라고 볼 수 있지.
전통적 웹사이트 vs SPA 비교
전통적 웹사이트 (책 넘기기)
방식: 메뉴를 클릭할 때마다 서버에서 새 페이지를 받아옴
예시: 네이버, 다음 같은 포털 사이트
느낌: 책장을 넘기듯이 '뒤로가기', '앞으로가기' 버튼 사용
단점: 페이지 이동할 때마다 깜빡임 발생, 속도가 느림
SPA (TV 채널 바꾸기)
방식: 한 번 페이지를 로드하면 내용만 부분적으로 바뀜
예시: 페이스북, 인스타그램, Gmail
느낌: TV 리모컨으로 채널만 바꾸듯 부드럽게 화면 전환
장점: 깜빡임 없음, 매우 빠른 반응
SPA의 장점
| 장점 | 설명 | 실제 예시 |
|---|---|---|
| 빠른 반응속도 | 페이지 이동시 깜빡임 없고 매우 빠름 | 인스타그램에서 사진 클릭하면 바로 확대 |
| 모바일 앱 같은 느낌 | 앱처럼 부드러운 사용자 경험 | 카카오톡 웹버전처럼 자연스러운 전환 |
| 서버 부하 감소 | 데이터만 주고받아 서버 부담 적음 | 구글 지도에서 영역 이동시 지도 데이터만 갱신 |
| 오프라인 가능 | 필요한 데이터 미리 저장 가능 | Gmail 오프라인 모드 |
SPA의 단점
| 단점 | 설명 | 해결 방법 |
|---|---|---|
| 첫 로딩 느림 | 처음에 모든 코드를 한번에 받아서 오래 걸림 | 코드 분할(필요한 부분만 로드) |
| SEO 문제 | 검색엔진이 내용을 잘 인식하지 못할 수 있음 | 서버사이드 렌더링(SSR) 사용 |
| 뒤로가기 문제 | 브라우저 기록 관리가 복잡함 | History API로 해결 |
| 자바스크립트 필수 | 자바스크립트 꺼지면 사이트 작동 안됨 |
점진적 향상 기법 사용 |
