단일 페이지 애플리케이션 대 다중 페이지 애플리케이션: 웹 애플리케이션의 전쟁

단일 페이지 웹 앱은 이미 거의 20년 동안 존재했지만 그 인기는 비교적 새롭습니다. 그 이유는 기술 개발입니다. 현재 기술을 통해 개발자는 이전의 주요 단점을 실행 가능한 솔루션 또는 이점으로 전환할 수 있습니다. 이 기사에서는 단일 페이지 응용 프로그램과 다중 페이지 응용 프로그램 의 차이점 과 귀하의 비즈니스에 어떤 것을 선택해야 하는지에 대해 설명합니다.

단일 페이지 애플리케이션(SPA)과 다중 페이지 애플리케이션(MPA)의 대결은 생각보다 복잡합니다. 각 유형의 웹 응용 프로그램의 장단점을 자세히 살펴보겠습니다.

내용물:

1. 스파란?
2. SPA는 어떻게 구축됩니까?
3. 스파의 장점
4. SPA의 단점
5. MPA는 무엇입니까?
6. MPA의 장점
7. 다중 페이지 웹 앱의 단점
8. SPA 대 MPA — 어느 것을 선택해야 할까요?
9. 프로그레시브 웹 앱
10. SPA 및 MPA를 개발하는 데 비용이 얼마나 듭니까?

스파란?

평신도의 관점에서 단일 페이지 애플리케이션은 페이지 를 다시 로드할 필요 없이 콘텐츠가 동적으로 로드되는 웹 애플리케이션입니다. 예를 들어 Facebook이나 Twitter에서 피드를 확인하거나 Gmail 웹 앱에서 이메일을 확인할 때 악화되는 페이지 로딩 화면이 표시되지 않습니다. 스크롤하고 탭 간에 전환하면 콘텐츠가 즉시 로드됩니다.

단일 페이지 웹 앱에서는 페이지를 열 때 모든 HTML 및 CSS가 한 번 로드됩니다. 그런 다음 사이트를 이동할 때 새 데이터만 로드됩니다. 페이지 자체가 다시 로드되지 않습니다. 이렇게 하면 사용자 경험이 더 원활해집니다. 대기 시간이 거의 또는 전혀 없으며 페이지가 즉시 로드되는 것처럼 보입니다. 100밀리초의 지연으로 160만 달러 이상의 매출 손실이 발생할 수 있는 세상에서 이는 사업주들이 무시할 수 없는 문제입니다.

SPA는 어떻게 구축됩니까?

단일 페이지 애플리케이션은 JavaScript 프레임워크로 구축되며 개발자는 개인 취향을 비롯한 여러 요인에 따라 프레임워크를 선택합니다. Mind Studios의 개발자들이 발표한 오늘날의 3대 JavaScript 프레임워크는 다음과 같습니다.

대부분의 훌륭한 프론트엔드 개발자는 하나 이상의 프레임워크를 알고 있습니다. 많은 사람들이 React, Angular, Vue 및 일부를 알고 있습니다.

단일 페이지 애플리케이션의 장점

단일 페이지 응용 프로그램의 장점은 무수히 많기 때문에 몇 가지 단점에도 불구하고 인기가 높아졌습니다. 사실, 현재 기술을 사용하면 이러한 단점을 어느 정도 해결할 수 있으므로 SPA가 점점 더 많은 웹 사이트 소유자를 선택하게 됩니다. 우리는 SPA의 장점부터 시작 하여 단점을 다룰 것입니다.

1. 빠른 페이지 로딩

적극적으로 다시 로드할 필요 없이 페이지 간 빠르고 부드러운 전환은 SPA 대 MPA 전투에서 가장 큰 무기가 되었습니다. 콘텐츠를 한 번에 모두 로드하지 않고 작은 부분으로 로드하는 동적 로드는 응답 시간을 크게 단축하여 사용자 경험을 개선합니다.

SPA는 콘텐츠 처리를 서버에서 브라우저로 부분적으로 이동합니다. 이렇게 하면 브라우저가 서버에 요청을 보내고 응답을 기다릴 필요가 줄어듭니다. 덕분에 SPA는 오프라인에서도 어느 정도 작동할 수 있습니다.

2. 프론트 엔드와 백 엔드 분리

SPA의 또 다른 장점 중 하나는 프런트 엔드와 백 엔드가 밀접하게 연결되어 있는 MPA와 달리 SPA에서는 백 엔드에 미치는 영향을 최소화하면서 프런트 엔드만 다시 작성할 수 있다는 것입니다. 따라서 SPA를 더 쉽고 빠르고 저렴 하게 업데이트할 수 있습니다. 그러나 별도의 프런트 엔드 및 백 엔드의 더 큰 장점은 SPA 백 엔드를 구축하기로 결정한 경우 모바일 애플리케이션에 대해 SPA 백 엔드를 사용할 수 있다는 것입니다. MPA를 사용하면 모바일 앱의 백엔드를 처음부터 다시 빌드하는 것이 아니라 상당히 재구축해야 합니다.

3. 개발 및 유지보수

SPA를 구축하는 것은 MPA를 구축하는 것보다 시간이 덜 걸립니다. 반드시 더 쉬운 것은 아닙니다. SPA의 기술 스택이 MPA보다 약간 더 큽니다. 그러나 코드를 작성하고 각 페이지에 대해 별도의 UI/UX 디자인을 만들 필요가 없기 때문에 시간이 덜 걸립니다.

그 외에도 SPA의 장점에는 가장 널리 사용되는 세 가지 JavaScript 프레임워크를 위한 기본 개발자 도구 덕분에 Chrome 디버깅이 크게 간소화된다는 점입니다.

이제 단점으로 넘어갑니다.

단일 페이지 웹 애플리케이션의 단점(및 이를 극복하는 방법)

Unbound의 2018년 연구에 따르면 거의 70%의 사용자가 페이지 로딩 속도 가 사이트에서 구매 여부를 결정하는 데 영향을 미친 다고 말합니다. 그러나 SPA의 단점은 대형 온라인 상점에 특히 불편하기 때문에 대부분의 시장은 느린 MPA로 구축됩니다. 개발자는 온라인 상점 소유자가 웹 사이트를 SPA로 구축하는 것을 방해하는 문제를 해결하기 위해 SPA 개발을 추진해 왔습니다. 다음은 단일 페이지 응용 프로그램의 단점과 오늘날의 기술로 극복할 수 있는 방법입니다.

1. 비활성화된 자바스크립트

단일 페이지 앱은 JavaScript 프레임워크(React, Vue, Angular 등)를 사용하여 개발됩니다. 따라서 사용자가 브라우저에서 JavaScript를 비활성화한 경우 빈 페이지가 표시됩니다. 이 문제는 SSR(서버 측 렌더링)을 사용하여 부분적으로 해결할 수 있으며, 이 경우 앱이 브라우저가 아닌 서버에서 처리됩니다. 완벽한 솔루션은 아니지만 어느 정도 작동합니다. 다행히도 처음부터 브라우저에서 JavaScript를 비활성화하는 사용자는 많지 않습니다.

2. 검색 엔진 최적화

단일 페이지 웹 앱은 AJAX 를 통해 콘텐츠를 로드하므로 검색 봇이 기본적으로 얻는 것은 콘텐츠가 없는 웹 앱 구조인 DOM(Document Object Model) 요소입니다. 즉, 당장 획득할 키워드가 없습니다.

결과적으로 SPA에 대한 검색 엔진 순위가 낮아집니다. 그리고 사이트가 사용자에게 높은 순위를 차지하는 것이 중요할 때 적절한 SEO는 필수 입니다. 따라서 이러한 웹 사이트의 경우 개발자는 일반적으로 다중 페이지 응용 프로그램을 권장합니다.

그러나 SEO 문제는 서버 측 렌더링으로 해결할 수 있는 또 다른 문제입니다. 서버 측 렌더링은 사용자가 페이지를 탐색할 때 콘텐츠를 로드하는 대신 서버에 표시될 때 완전히 로드된 페이지를 (요청 시) 보냅니다. 이를 통해 크롤러는 SPA에서 더 잘 작동할 수 있습니다.

웹 앱의 SEO 게임을 향상시키는 또 다른 방법은 검색 봇이 전체 웹사이트를 덮을 수 있도록 개발자가 웹 페이지 간 탐색을 위한 적절한 태그로 사이트를 코딩하는 것입니다.

3. 확장성

SPA는 새로운 기능과 완전히 새로운 기능을 추가하는 측면에서 확장성이 높지 않습니다. 모든 것이 한 페이지로 작성되기 때문에 새로운 기능을 삽입하면 코드가 중단될 수 있으므로 개발자는 주의해야 합니다. 게다가 추가 코드가 너무 많으면 전체 코드 기반이 즉시 로드되기 때문에 단일 페이지 로드가 너무 느려질 수 있습니다.

다행히 JavaScript 프레임워크에는 청크 지연 로딩 팩이라고도 하는 코드 분할 라우터가 있습니다. 이를 통해 코드를 청크(따라서 이름)로 로드하여 사이트를 더 빠르게 로드할 수 있습니다.

4. 보안 문제

단일 페이지 앱은 XSS(교차 사이트 스크립팅) 공격에 취약합니다. 이것은 해커가 자바스크립트 기반 웹 앱에 악성 코드를 삽입할 수 있는 취약점입니다. React.js에는 XSS 보호 기능이 내장되어 있으며 숙련된 웹 개발자가 모든 종류의 공격으로부터 웹 앱을 보호할 수 있는 다른 방법이 있습니다.

5. 내비게이션

단일 페이지 웹 앱은 정확히 단일 페이지입니다. 이는 전체 사이트에 대해 하나의 URL만 있음을 의미합니다. 이것은 탐색을 어렵게 만듭니다. 앞으로 및 뒤로 버튼은 일반적으로 작동하지 않으며 콘텐츠의 특정 부분에 연결하는 것은 불가능합니다.

이 문제는 API로 해결할 수 있습니다. 동적 값에 경로 접두사를 추가하여 페이지의 특정 부분(일반적으로 제목)에 연결할 수 있도록 하는 API가 있습니다.

MPA가 무엇인가요?

다중 페이지 웹 앱은 우리가 전통적인 웹사이트로 간주하는 것입니다. 한 페이지에서 다른 페이지로 이동할 때 사이트가 완전히 다시 로드됩니다. 이러한 종류의 웹사이트에서는 로딩이 때때로 귀찮을 수 있습니다. 특히 연결 속도가 느리고 미디어가 있는 여러 페이지를 방문해야 하는 경우에 그렇습니다.

너무 자세히 살펴보지 않으면 MPA가 과거의 유물이고 곧 거의 멸종될 것처럼 보일 수 있습니다. 확실히, 더 빠른 페이지 로딩은 항상 판매에 더 좋습니다. 그러나 그것은 그렇게 간단하지 않으며 MPA가 더 나은 선택인 경우가 있습니다.

다중 페이지 앱의 장점

1. 내비게이션

다중 페이지 웹 앱의 가장 큰 장점은 기존 탐색을 허용한다는 것입니다. 즉, MPA의 각 페이지에는 사용자가 복사하여 붙여넣고, 북마크에 추가하고, 공유할 수 있는 고유한 URL이 있습니다. 브라우저의 뒤로 및 앞으로 버튼도 문제 없이 작동합니다. SPA에서 별도의 URL을 만들고 사용자가 버튼을 통해 내부 "페이지" 사이를 앞뒤로 이동할 수 있도록 하려면 개발자가 API를 사용해야 합니다.

2. 확장성

다중 페이지 웹 앱의 부인할 수 없는 이점은 다음과 같습니다. MPA를 사용하면 웹 사이트를 원하는 만큼 확장할 수 있습니다. 더 쉬운 탐색과 더 빠른 로드를 위해 콘텐츠를 분할하여 수십 페이지에 수십 개를 구축할 수 있습니다. SPA는 일반적으로 전체 웹사이트 구조(DOM)를 한 번 로드하기 때문에 웹사이트에 많은 코드가 있는 경우(예: 온라인 상점이 있는 경우) SPA로 구축하려면 스택에 추가 기술이 필요합니다. 이것이 웹 개발자가 대신 온라인 상점을 위한 MPA를 제안하는 것이 드문 일이 아닌 이유입니다.

3. 검색 엔진 최적화

귀하의 비즈니스가 검색 엔진 결과에 크게 의존하는 경우 일반적으로 순위가 더 높기 때문에 다중 페이지 웹 앱을 고려하십시오. SPA의 동적 콘텐츠 로딩은 MPA가 직면하지 않는 문제인 검색 엔진 크롤러를 방해합니다. SPA는 개발자에게 추가 SEO 기술을 다시 한 번 요구하지만 MPA는 자연스럽게 검색 엔진과 좋은 관계를 유지합니다.

4. 기술 스택

두 가지 유형의 웹 앱 중 더 오래된 MPA는 더 발전된 기술 스택과 더 큰 개발자 커뮤니티를 보유하고 있습니다. 또한 여러 페이지로 인해 개발 시간이 오래 걸리지만 다중 페이지 웹 앱은 SPA보다 간단하고 작은 기술 스택으로 구축됩니다.

다중 페이지 웹 앱의 단점

1. 로딩 속도 문제가 흑백이 아니다

우선, MPA는 SPA보다 정확히 느리지 않습니다. SPA에 비해 속도가 느린 것은 페이지 간 전환입니다. 이는 MPA를 사용하면 사용자가 페이지를 변경하려고 할 때마다(예: 프로필로 이동하거나 체크아웃 진행) 사이트에서 새 페이지의 코드에 대한 요청을 서버에 보내기 때문입니다. 요청 자체와 응답을 처리하는 데 시간이 걸리므로 로드 시간이 걸립니다.

새 페이지를 로드하는 데 필요한 시간은 여러 요인에 따라 다릅니다.

• 사용자의 인터넷 연결 속도
• 로드되는 콘텐츠의 양 및 유형
• 얼마나 많은 사용자가 동시에 사이트를 방문하는지
• 사이트의 서버가 얼마나 강력한지
• 사이트가 구축된 기술
• 프론트엔드 개발자의 기술과 경험

반면에 SPA는 사용자가 사이트를 여는 순간 전체 코드를 로드합니다. 그 후에는 동일한 페이지에서 내부 "탭" 사이를 전환하여 완전히 로드된 캐시에서 요청된 콘텐츠를 동적으로 표시합니다. 그리고 코드가 많을 때 이 초기 로딩은 MPA보다 SPA에서 훨씬 더 오래 걸릴 수 있습니다. 따라서 MPA와 SPA 중 하나를 선택해야 할 때 속담처럼 모든 것이 달라집니다.

2. 개발

다중 페이지 웹 애플리케이션을 빌드하는 것은 단일 페이지 앱을 빌드하는 것보다 더 오래 걸립니다. 웹 앱의 각 페이지에는 별도의 코드와 별도의 디자인이 필요하기 때문입니다. 기능의 수와 복잡성에 따라 시간도 비용에 영향을 미칠 수 있습니다. 대부분의 회사와 프리랜서는 작업에 소요된 시간으로 요금을 청구하기 때문입니다.

3. 적응성

MPA는 주로 데스크톱 브라우저용으로 구축되었으며 오늘날 모든 사람이 웹 사이트의 인터페이스를 모바일 브라우저에 맞게 유연하게 만들고 있지만 완전한 적응성은 SPA보다 MPA에 더 어렵습니다. 단일 페이지 애플리케이션은 기본 모바일 앱과 매우 유사하지만 모바일 장치의 다중 페이지 앱은 세로 모드의 웹사이트처럼 보입니다.

UI뿐만이 아닙니다. 어느 시점에서 다중 페이지 웹사이트를 기반으로 네이티브 모바일 앱을 구축하기로 결정했다면 UI/UX, 비주얼 및 백엔드를 처음부터 모두 만들어야 합니다. SPA를 사용하면 백엔드를 재사용할 수 있으며 종종 모바일 앱 인터페이스와 유사한 프론트엔드를 갖게 됩니다.

SPA 대 MPA — 어느 것을 선택해야 할까요?

위에서 설명한 모든 내용을 요약하기 위해 단일 페이지와 다중 페이지 웹 응용 프로그램 간의 주요 차이점을 요약한 다음 표를 보십시오.

보시다시피 두 종류의 웹 앱에는 장단점이 있습니다. 단일 페이지 애플리케이션 기술이 빠르게 발전하고 SPA가 곧 기존 웹 사이트를 압도할 수도 있지만 오늘날에는 비즈니스를 위해 구축할 웹 사이트 유형(SPA 또는 MPA)을 결정하기 전에 여전히 장단점을 저울질해야 합니다.

약간의 추가 사항: 프로그레시브 웹 앱

프로그레시브 웹 앱(PWA)은 지난 몇 년 동안 웹 개발 트렌드였습니다. 간단히 말해서, PWA는 웹 앱과 기본 앱이 혼합된 것입니다. 핵심은 JavaScript, HTML 및 CSS를 사용하는 웹 앱(일반적으로 단일 페이지 앱)입니다. 그러나 스마트폰의 홈 화면에 고정할 수 있으며 기본 앱처럼 어느 정도 오프라인에서 작동할 수 있습니다.

컴퓨터 바탕 화면에 앱과 폴더에 대한 바로 가기를 만드는 방법을 알고 있습니까? PWA는 유사한 방식으로 작동하지만 스마트폰의 홈 화면에 웹 페이지에 대한 앱 모양의 링크를 만듭니다. 최신 기술 스택과 API를 통해 스마트폰의 캐시에 일정량의 데이터를 로드하여 필요한 경우 앱이 오프라인으로 작동할 수 있도록 합니다.

PWA는 아직 기본 앱만큼 기능이 풍부하지 않습니다. 특정 권한이 필요한 NFC, Bluetooth 또는 스마트폰 기능을 사용할 수 없습니다. 완전한 오프라인 기능도 제공하지 않습니다. 그러나 유연하고 구축하기 쉽고 개발 비용이 저렴하며 사용자의 휴대전화에 웹사이트를 지속적으로 상기시켜줍니다 .

SPA 및 MPA를 개발하는 데 비용이 얼마나 듭니까?

단일 페이지 애플리케이션이 인기를 얻고 있는 데는 이유가 있습니다. 보시다시피 SPA가 가지고 있는 대부분의 문제는 완화될 수 있으므로 웹 앱의 죽음이 아닙니다. 즉, 이러한 솔루션을 위해 여전히 추가 기술을 사용해야 하며, 이는 단일 페이지 애플리케이션을 개발하는 데 드는 시간과 비용에 영향을 미칠 수 있습니다. SPA를 개발할지 MPA를 개발할지 결정하기 전에 아이디어의 모든 측면을 평가하고 웹 개발 회사의 경험을 고려해야 합니다.

다음은 방정식에 추가할 수 있는 몇 가지 매개변수입니다.

• 비즈니스 유형
• 웹사이트의 크기
• 확장성 요구 사항
• 사이트에 대한 SEO의 중요성

단일 페이지 앱을 사용하기로 결정했다면 다음 전문가가 있는 개발 회사를 고용해야 합니다.

• 프로젝트 매니저
• UI/UX 웹 디자이너
• JavaScript 및 해당 프레임워크를 전문으로 하는 프론트엔드 개발자
• 백엔드 개발자
• 품질보증 엔지니어

물론 SPA 웹사이트를 구축하는 비용은 사이트의 크기와 유형, 기능 집합, 필요한 기술 스택에 따라 달라지므로 대략적으로만 추정할 수 있습니다.

간단한 단일 페이지 애플리케이션( 예: 랜딩 페이지 )은 2~4주 만에 만들 수 있으며 비용은 4,200달러에 불과 합니다. 더 복잡한 SaaS 플랫폼은 연구, 구축 및 출시하는 데 3~4개월이 걸릴 수 있습니다. 이러한 SPA를 개발하는 데 드는 비용은 약 $29,000 이상 입니다. SPA의 기술 스택이 MPA보다 크기 때문에 개발자의 경험도 단일 페이지 웹 앱을 만드는 데 필요한 시간에 영향을 줄 수 있습니다.

반면에 단일 페이지 이상(그렇지 않으면 의미가 무엇입니까?)이 포함된 가장 단순한 다중 페이지 애플리케이션 은 코딩하는 데 약 4~5개월이 소요되며 비용 은 복잡성과 디자인에 따라 $35,000~$42,000 입니다. 필요한 기능이 많을수록 가격이 높아지고 개발 시간이 길어집니다.

결론: SPA 대 MPA

단일 페이지 애플리케이션이 지금 세계를 정복하고 있습니다. MPA를 제쳐두기에는 너무 이르지만 진행을 중단할 수 없고 중단해서는 안 된다는 의견이 있습니다. 즉, Mind Studios 에서는 대부분 SPA 개발을 위한 최신 기술을 계속 주시하고 추적합니다. 우리 개발자들은 웹사이트 개발의 전통적인 방법과 JavaScript 프레임워크에 대해 잘 알고 있으므로 원하는 방식으로 웹 앱을 구축할 수 있습니다.

SPA 개발 방법에 대해 더 알고 싶거나 상담을 원하시면 저희에게 연락하십시오.

Artem Chervichnik과 Svitlana Varaksina가 작성했습니다.