현이의 개발 이야기
SPA (Single Page Application)의 장단점 - 웹 퍼블리셔와 프론트엔드 개발자
프로그래밍2024. 12. 27. 11:34
웹 퍼블리셔라는 말을 들어본 적 있을 것이다.
이 용어는 디자인된 페이지를 그대로 HTML / CSS / JS로 옮기는 작업을 하는 사람들을 일컫는다.
이 용어는 디자인된 페이지를 그대로 HTML / CSS / JS로 옮기는 작업을 하는 사람들을 일컫는다.
얼핏 들으면 프론트엔드 개발자와 같은 역할인 것 같다.
실제로 이러한 인식 때문에 프론트엔드 개발자들이 백엔드 개발자보다 실력 없는 개발자라는 이야기가 많이 있었다.
실제로 이러한 인식 때문에 프론트엔드 개발자들이 백엔드 개발자보다 실력 없는 개발자라는 이야기가 많이 있었다.
그러나 웹 개발이 발전해 나감에 따라 웹 퍼블리셔가 없어지고 프론트엔드 개발자가 등장하게 된 데에는 이유가 있다.
이것을 이해하기 위해서는 과거의 웹 개발이 어땠는지 살펴보고, 웹 개발에 획기적인 전환점을 불러일크킨 SPA (Single Page Application)에 대해서 알아볼 필요가 있다.
이것을 이해하기 위해서는 과거의 웹 개발이 어땠는지 살펴보고, 웹 개발에 획기적인 전환점을 불러일크킨 SPA (Single Page Application)에 대해서 알아볼 필요가 있다.
과거의 웹 개발
전통적인 웹 개발은 백엔드 개발에 많은 부분 얽매여 있었다.
웹 사이트는 여러 개의 HTML 페이지로 구성된 MPA (Multi-Page Application) 형태였으며, 새로운 페이지를 요청할 때마다 서버는 매번 새로운 HTML 파일을 생성하여 브라우저에 전송했다.
즉, 모든 페이지의 렌더링이 서버에서 이루어지는 서버 사이드 렌더링 (Server-Side Rendering) 방식이었다.
웹 사이트는 여러 개의 HTML 페이지로 구성된 MPA (Multi-Page Application) 형태였으며, 새로운 페이지를 요청할 때마다 서버는 매번 새로운 HTML 파일을 생성하여 브라우저에 전송했다.
즉, 모든 페이지의 렌더링이 서버에서 이루어지는 서버 사이드 렌더링 (Server-Side Rendering) 방식이었다.
이러한 구조에서 Javascript는 주로 폼 유효성 검사나 간단한 시각 효과를 위한 보조적인 역할에 머물렀다. 간혹 api 요청 등 비동기 작업이 있다고 하더라도 대부분의 로직은 서버에서 처리되었기 때문에, 프론트엔드 개발자의 역할은 상대적으로 제한적일 수 밖에 없었다.
과거 웹 개발 방식 (MPA)의 문제점:
- 느린 페이지 로딩
- 새로운 페이지를 요청할 때마다 전체 페이지를 다시 로드해야 했기 때문에 속도가 느리고 사용자 경험이 좋지 않았다.
- 아예 새로운 페이지를 로딩하는 것은 감안하더라도, 페이지의 일부분만 업데이트 할 때도 페이지 전체를 새로 로드해야 했다.
- 높은 서버 부하
- 모든 페이지 요청에 대해 서버가 전체 HTML을 생성해야 하므로, 서버 부하가 높고 많은 양의 데이터가 전송되어야 했다.
- 제한적인 상호작용
- 사용자와의 상호작용이 많은 웹 애플리케이션을 구현하기 어려웠다.
- 부드러운 페이지 전환은 불가능했고, Javascript의 비중이 많은 페이지를 개발하는 것도 쉽지 않았다.
- 복잡한 상태 관리
- 여러 페이지에 걸쳐 애플리케이션의 상태를 관리하는 것이 번거로웠다.
SPA의 등장
이러한 문제점을 해결하기 위해 등장한 것이 바로 SPA (Single Page Application) 이다.
SPA는 이름 그대로 단 하나의 HTML 페이지를 기반으로 하는 웹 애플리케이션이다.
(간혹 여기서 오해하는 경우가 있는데, 개발은 여러 HTML 페이지로 한다. SPA는 이를 webpack으로 묶어 하나의 HTML 파일로 빌드한다.)
SPA는 이름 그대로 단 하나의 HTML 페이지를 기반으로 하는 웹 애플리케이션이다.
(간혹 여기서 오해하는 경우가 있는데, 개발은 여러 HTML 페이지로 한다. SPA는 이를 webpack으로 묶어 하나의 HTML 파일로 빌드한다.)
React.js, Angular, Vue.js와 같은 프레임워크 및 라이브러리가 SPA를 구현하기 위해 대표적으로 사용되며, 최초 로드 시 하나의 HTML 페이지만을 받고, 이후에는 Javascript를 사용하여 동적으로 콘텐츠를 변경하는 클라이언트 사이드 렌더링 (Client-Side Rendering) 방식을 사용한다.
SPA는 사용자와의 상호작용에 따라 필요한 데이터만 서버로부터 비동기적으로 가져와(AJAX, Fetch API 등) 화면의 일부분만 업데이트한다.
따라서 전체 페이지를 다시 로드할 필요가 없기 때문에, 훨씬 빠르고 부드러운 사용자 경험을 제공할 수 있다.
따라서 전체 페이지를 다시 로드할 필요가 없기 때문에, 훨씬 빠르고 부드러운 사용자 경험을 제공할 수 있다.
SPA의 장점
- 빠르고 반응성 좋은 사용자 경험
- 페이지 전체를 다시 로드하지 않기 때문에, 부드러운 화면 전환과 빠른 반응 속도를 제공한다.
- 서버 부하 감소
- 필요한 데이터만 요청하고 클라이언트 측에서 렌더링을 수행하기 때문에, 서버 부하를 줄일 수 있다.
- 코드 재사용성 및 유지보수 용이
- 컴포넌트 기반 아키텍처를 통해 코드의 재사용성을 높이고 유지보수를 쉽게 할 수 있다.
SPA의 장점은 그 무엇보다 사용자 경험이 크게 향상된다는 것에 있다.
버튼을 클릭할 때 마다 페이지 전체가 로딩되던 과거와 달리, 버튼을 누르자마자 페이지가 부드럽게 전환되고, 데이터가 로드되면 자연스럽게 보여주는 방식은 SPA를 사용하는 브랜드 자체를 더욱 친근하고 고급스럽게 만들었다.
버튼을 클릭할 때 마다 페이지 전체가 로딩되던 과거와 달리, 버튼을 누르자마자 페이지가 부드럽게 전환되고, 데이터가 로드되면 자연스럽게 보여주는 방식은 SPA를 사용하는 브랜드 자체를 더욱 친근하고 고급스럽게 만들었다.
SPA의 대표격인 리액트의 수요가 크게 증가했으며, 단순히 디자인 된 것을 코드로 옮기기만 하는 웹 퍼블리싱보다 더욱 높은 기술적 난이도가 요구되었다.
부드러운 사용자 경험이 안정적인 서비스만큼 중요해지면서 프로젝트에서 Javascript의 비중이 함께 증가했고, 재사용성 높은 컴포넌트를 설계하고 복잡한 프로젝트를 오류 없이 관리해나가는, "엔지니어"의 역량이 필요해진 것이다.
부드러운 사용자 경험이 안정적인 서비스만큼 중요해지면서 프로젝트에서 Javascript의 비중이 함께 증가했고, 재사용성 높은 컴포넌트를 설계하고 복잡한 프로젝트를 오류 없이 관리해나가는, "엔지니어"의 역량이 필요해진 것이다.
이 때 부터 퍼블리싱 보다는 더욱 사용자와 가까이서 그들을 이해하고, HTML, CSS, Js를 넘어 여러 라이브러리와 프레임워크를 활용하여 알맞는 기술적 솔루션을 구현해내는 프론트엔드 개발자가 등장하기 시작하고, 프론트엔드 기술도 한층 박차를 가해 발전하기 시작했다.
SPA의 단점
- 초기 로딩 속도
- 초기에 모든 Javascript 파일을 로드해야 하기 때문에 초기 로딩 속도가 느릴 수 있다.
- SEO (검색 엔진 최적화) 문제
- 검색 엔진 크롤러가 Javascript를 실행하지 못하는 경우, 콘텐츠를 제대로 수집하지 못할 수 있다.
- 대부분의 최근 검색 엔진 크롤러는 SPA를 고려하여 Javascript를 실행한 후, 콘텐츠가 로드되면 크롤링을 한다.
- 보안
- 클라이언트 측에서 많은 로직이 처리되기 때문에 보안에 더 신경 써야 한다.
높은 사용자 친화적 경험을 제공해서 각광받았던 SPA는 시간이 지남에 따라 그 단점 또한 부각되었다.
대부분의 단점들은 SPA가 발전해나감에 따라 같이 해결되었지만, 기술적 한계로 인해 그렇지 못한 것들도 있다.
대부분의 단점들은 SPA가 발전해나감에 따라 같이 해결되었지만, 기술적 한계로 인해 그렇지 못한 것들도 있다.
초기 로딩 속도 같은 경우, 사이트 전체에서 사용될 코드를 전부 초기 로딩 시에 불러오기 때문에 느릴 수 밖에 없다.
한 번 로드된 이후부터는 매우 빠르게 페이지를 전환할 수 있다는 장점에 대한 트레이드 오프이다.
한 번 로드된 이후부터는 매우 빠르게 페이지를 전환할 수 있다는 장점에 대한 트레이드 오프이다.
보안은 각별히 신경써야 한다.
대부분의 로직이 서버에서 돌아가던 과거와 달리, 클라이언트에서 돌아가는 로직은 전부 공개된 것이나 다름 없다.
SPA를 구동하기 위한 Javascript는 브라우저에서 실행되어야 하기 때문에 브라우저의 개발자 모드를 열어보면 전부 까볼 수 있다.
대부분의 로직이 서버에서 돌아가던 과거와 달리, 클라이언트에서 돌아가는 로직은 전부 공개된 것이나 다름 없다.
SPA를 구동하기 위한 Javascript는 브라우저에서 실행되어야 하기 때문에 브라우저의 개발자 모드를 열어보면 전부 까볼 수 있다.
난독화 과정을 거치기는 하지만 마음만 먹으면 읽을 수 있기 때문에 안전하다고는 할 수 없다.
Javascript에서 사용하는 API 키나 비밀번호 같은 중요한 정보도 모두 공개되기 때문에 중요한 정보는 노출시키지 않도록 세심한 주의가 필요하다.
Javascript에서 사용하는 API 키나 비밀번호 같은 중요한 정보도 모두 공개되기 때문에 중요한 정보는 노출시키지 않도록 세심한 주의가 필요하다.
SPA는 분명 장점과 단점을 모두 가지고 있으며, 이러한 단점을 보완하기 위한 차세대 라이브러리와 프레임워크 또한 많이 등장했다.
그러나 사용자에게 더 나은 경험을 제공하고, 개발 생산성을 향상시킬 수 있는 잠재력이 크기 때문에, 현대 웹 개발의 핵심 기술로 자리 잡았다.
그러나 사용자에게 더 나은 경험을 제공하고, 개발 생산성을 향상시킬 수 있는 잠재력이 크기 때문에, 현대 웹 개발의 핵심 기술로 자리 잡았다.
SPA의 단점을 보완하는 Next.js 등과 같은 프레임워크도 React.js 기반이므로 React.js와 SPA의 장단점을 명확히 파악한다면 Next.js가 어떤 문제를 풀기 위해 탄생했는지, 그로 인해 발생하는 Next.js의 장단점은 무엇인지 또한 자연스럽게 알 수 있을 것이다.
댓글 0
로그인이 필요합니다.
로그인