웹 개발 기술 동향 2019

소개

디지털 혁신은 매년 점점 더 다양한 삶과 비즈니스 영역을 다루고 있습니다. 기업이 경쟁력을 갖기를 원한다면 일반 정보 사이트로는 더 이상 충분하지 않으며 사용자에게 정보를 제공할 뿐만 아니라 상품과 서비스를 받거나 주문하고 도구를 제공하는 등 특정 기능을 수행할 수 있는 모바일 및 웹 애플리케이션이 필요합니다.

예를 들어, 현대 은행에서는 정보가 포함된 웹사이트를 갖는 것만으로는 더 이상 충분하지 않으며, 고객을 위한 온라인 도구, 사용자가 계좌, 투자 및 대출을 관리할 수 있는 개인 계좌가 필요합니다. 소규모 기업이라도 의사나 미용사와 약속을 잡거나 생일 파티를 위해 레스토랑이나 어린이 놀이방에 테이블을 예약하는 등 전환율을 높이기 위한 편리한 도구가 필요합니다.

그리고 소유주 자신도 다양한 생산 부서에 대한 통계 데이터 및 분석 수집이나 부서의 생산성과 같이 회사 상태에 대해 편리한 형태로 적시에 정보를 받아야 합니다. 종종 각 부서는 이 데이터를 고유한 방식으로 수집하고 다른 도구를 사용할 수도 있으며 소유자는 이 모든 것을 이해하기 위해 많은 개인적인 시간을 소비해야 합니다. 이는 간접적으로나 직접적으로 회사의 효율성과 궁극적으로 이익에 영향을 미칠 수 있습니다. 디지털 혁신과 웹 또는 모바일 애플리케이션 개발도 여기에 도움이 될 것입니다.

기술은 가만히 있지 않고 끊임없이 진화하고 있으며, 몇 년 전에 사용되었던 것이 오늘날에는 더 이상 관련이 없을 수도 있고, 몇 년 전에는 할 수 없었던 것이 이미 현실이 되었습니다. 웹 및 모바일 애플리케이션을 더 빠르고 효율적으로 만드는 데 도움이 되는 최신 도구가 있습니다. 개인적인 관찰과 경험을 바탕으로 가까운 미래에 어떤 기술과 도구가 필요할지, 그리고 최신 웹 애플리케이션을 만들 때 왜 주의를 기울여야 하는지에 대한 비전을 공유하고 싶습니다.

단일 페이지 애플리케이션

용어를 조금 정의해 보겠습니다. SPA(Single Page Application)는 한 페이지에 구성 요소가 한 번 로드되고 필요에 따라 콘텐츠가 로드되는 웹 응용 프로그램입니다. 그리고 애플리케이션 섹션 사이를 이동할 때 페이지가 완전히 다시 로드되지 않고 필요한 데이터만 로드 및 표시됩니다.

단일 페이지 애플리케이션은 속도와 사용 편의성 측면에서 기존 웹 애플리케이션의 이점을 크게 얻습니다. SPA를 사용하면 재부팅이나 상당한 지연 없이 웹사이트가 데스크톱의 애플리케이션처럼 작동하는 효과를 얻을 수 있습니다.

몇 년 전에는 단일 페이지 애플리케이션이 실제로 검색 엔진 최적화를 지원하지 않고 주로 개인 계정 및 관리 패널을 만드는 데 사용되었지만 오늘날에는 검색 엔진 최적화(SEO)를 완벽하게 지원하는 단일 페이지 애플리케이션을 만드는 것이 훨씬 쉬워졌습니다. 현재 서버에서 렌더링되는 단일 페이지 애플리케이션을 사용하면 이 문제가 완전히 사라졌습니다. 즉, 이것은 동일한 단일 페이지 애플리케이션이지만 첫 번째 요청에서 서버는 데이터뿐만 아니라 표시할 준비가 된 HTML 페이지를 생성하고 검색 엔진은 모든 메타 정보와 의미 체계 마크업이 포함된 미리 만들어진 페이지를 받습니다. .

클라이언트 측 웹 애플리케이션을 생성하기 위한 도구의 개발로 인해 단일 페이지 애플리케이션으로의 개발 및 전환은 올해와 향후 몇 년 동안만 성장할 것입니다. 오래되고 느리게 작동하는 오래된 응용 프로그램이 있고 섹션 간 전환 시 전체 페이지를 다시 로드하는 경우에도 올해는 빠른 단일 페이지 응용 프로그램으로 안전하게 업그레이드할 수 있습니다. 지금이 좋은 시기입니다. 이미 기술을 통해 이 작업을 매우 빠르고 효율적으로 수행합니다.

현대적이고 빠른 웹사이트를 갖는 것은 매우 좋지만 솔직하게 말씀드리자면 모든 애플리케이션이 단일 페이지 애플리케이션으로 쉽게 변환될 수 있는 것은 아니며 전환하는 데 비용이 많이 들 수 있습니다! 따라서 그러한 전환이 필요한 사람과 그 이유를 이해해야 합니다.

이해를 돕기 위해 아래 표에서는 SPA를 개발하거나 SPA로 전환하는 것이 적절하고 정당한 경우와 그렇지 않은 경우에 대한 몇 가지 예를 제시합니다.

ЗА

현대적이고 빠른 애플리케이션을 만들고 웹 버전뿐만 아니라 모바일 또는 데스크톱 버전도 사용하고 싶고 모든 프로세스와 계산이 원격 또는 클라우드 서버에서 발생하는 경우. 또한 모든 클라이언트가 하나의 상호 작용 인터페이스를 가지므로 새 클라이언트를 추가할 때 서버 코드를 모두 편집할 필요가 없습니다.

예: 소셜 네트워크, 수집자, SaaS 플랫폼(클라우드 서비스로서의 소프트웨어), 마켓플레이스

상점이나 웹 서비스가 있는데 속도가 느리고 사람들이 떠나고 있다는 것을 알고 더 빠르게 만들고 싶고 고객의 가치를 이해하고 업그레이드를 위해 백만 루블 이상을 지불할 준비가 되어 있습니다.

사이트의 API를 사용하는 모바일 애플리케이션이 있지만 사이트가 느리고 페이지 간에 이동할 때 전체 콘텐츠가 다시 로드됩니다.

반대

타겟 고객이 최신 브라우저와 장치를 사용하지 않는 경우.

예: 은행, 의료 기관 및 교육을 위한 내부 시스템 개발과 같은 특정 기업 영역.

주요 활동을 오프라인으로 진행하고 온라인 서비스를 제공할 준비가 되어 있지 않으며 고객 유치만 하면 됩니다.

이미 잘 팔리는 온라인 매장이나 웹 서비스가 있으면 고객 유출이나 불만 사항이 표시되지 않습니다.

SPA에 적용할 수 없는 작동 중인 애플리케이션이 있고 모든 것을 처음부터 다시 작성하고 다른 기술을 사용해야 한다면 이에 대해 수백만 달러를 지출할 준비가 되어 있지 않습니다.

예를 들면 다음과 같습니다. 박스형 사이트나 집에서 작성한 고대의 모놀리식 코드가 있습니다.

프로그레시브 웹 애플리케이션

프로그레시브 웹 애플리케이션은 기본 애플리케이션과 웹 사이트가 공동으로 발전한 산물입니다. 기본적으로 이는 실제 기본 애플리케이션처럼 보이고 작동하며, 푸시 알림을 받고, 오프라인 모드에서 작업할 수 있는 웹 애플리케이션입니다. 이 경우 사용자는 AppStore나 Google Play에서 애플리케이션을 다운로드할 필요 없이 데스크톱에 저장하기만 하면 됩니다.

PWA는 기술이나 개발 접근 방식으로 2015년부터 개발을 진행해 왔으며 최근 전자상거래 분야에서 엄청난 인기를 얻고 있습니다.

실제 사례:

• 작년에 Best Western River North 호텔은 새로운 PWA 지원 웹사이트를 출시한 후 수익을 300% 늘릴 수 있었습니다.
• Arabic Avito OpenSooq.com은 웹사이트에 PWA 지원을 만든 후 사이트 방문 시간을 25%, 리드 수를 260% 늘릴 수 있었습니다.
• 유명한 데이트 서비스인 Tinder는 PWA를 개발하여 로딩 속도를 11.91초에서 4.69초로 줄일 수 있었으며, 게다가 이 애플리케이션의 무게는 기본 Android 애플리케이션보다 90% 가볍습니다.

이 기술에 주목할 가치가 있다는 사실은 전자상거래 프로젝트를 만드는 가장 큰 엔진 중 하나인 Magento가 2018년 PWA Studio의 초기 개발 버전을 출시했다는 사실에서도 알 수 있습니다. 이 플랫폼을 사용하면 PWA 지원을 통해 전자상거래 솔루션을 위한 즉시 사용 가능한 React 기반 프런트엔드를 만들 수 있습니다.

이미 인터넷 프로젝트가 있거나 모바일 장치를 지원하는 새로운 서비스에 대한 아이디어가 있는 사람들을 위한 조언: 본격적인 기본 애플리케이션을 작성하려고 서두르지 말고 먼저 PWA 기술을 살펴보십시오. 이는 귀하의 제품에 대한 최고의 가격 대비 솔루션일 수 있습니다.

연습에서 조금. 이미 준비된 REST 서버가 있는 경우 간단한 기본 모바일 뉴스 애플리케이션을 만들려면 플랫폼당 약 200-300인시가 필요합니다. 개발 시간당 평균 시장 가격이 시간당 1500~2000루블인 경우 애플리케이션 비용은 약 1만 루블에 이릅니다. 푸시 알림, 오프라인 모드 및 기타 기능 등 PWA를 완벽하게 지원하는 웹 애플리케이션을 개발하는 경우 개발에는 200~300시간이 소요되지만 제품은 모든 플랫폼에서 즉시 사용할 수 있습니다. 즉, 애플리케이션 스토어 배치 비용을 지불할 필요가 없다는 사실은 말할 것도 없고 약 2배의 비용 절감 효과가 있습니다.

서버리스

이것은 개발에 대한 또 다른 현대적인 접근 방식입니다. 이름 때문에 많은 사람들은 이것이 진정한 서버리스 개발이고 백엔드 코드를 작성할 필요가 없으며 모든 프런트엔드 개발자가 본격적인 웹 애플리케이션을 만들 수 있다고 생각합니다. 하지만 그것은 사실이 아닙니다!

서버리스 애플리케이션을 생성할 때 여전히 서버와 데이터베이스가 필요합니다. 이 접근 방식의 주요 차이점은 백엔드 코드가 클라우드 기능(서버리스의 또 다른 이름은 FaaS, 서비스로서의 기능 또는 서비스로서의 기능)의 형태로 제공되며 애플리케이션이 신속하게 확장되고 용이하게. 이러한 애플리케이션을 만들 때 개발자는 비즈니스 문제에 집중할 수 있으며 인프라 확장 및 설정에 대해 생각하지 않아도 되므로 애플리케이션 개발 속도가 빨라지고 비용이 절감됩니다. 또한 서버리스 접근 방식은 작업을 완료하는 데 필요한만큼의 리소스를 정확하게 사용하고 부하가 없으면 서버 시간이 전혀 사용되지 않고 비용도 지불되지 않기 때문에 서버 임대 비용을 절약하는 데 도움이 됩니다.

예를 들어, 미국의 대형 미디어 회사인 Bustle은 서버리스로 전환하면서 호스팅 비용을 60% 이상 절감할 수 있었습니다. 그리고 Coca-Cola 회사는 자동 판매기를 통해 음료를 판매하는 자동화된 시스템을 개발할 때 서버리스로 전환하여 호스팅 비용을 연간 13000달러에서 4500달러로 줄일 수 있었습니다.

지난 몇 년 동안 서버리스는 그 참신함과 한계로 인해 주로 소규모 프로젝트, 스타트업 및 MVP에 사용되었지만 오늘날에는 소프트웨어의 발전, 서버 컨테이너화의 다양성 및 강력함 덕분에 다음과 같은 도구가 등장하고 있습니다. 제한 사항을 제거하고 클라우드 애플리케이션 개발을 단순화하고 속도를 높일 수 있습니다.
이는 이전에 클라우드 현대화가 불가능하다고 간주되었던(예: 엣지 장치, 전송 중인 데이터 또는 상태 저장 애플리케이션) 기업 비즈니스 시나리오가 이제 현실이 되었음을 의미합니다. 많은 가능성을 보여주는 좋은 도구는 kNative와 Serverless Enterprise입니다.

그러나 이 모든 것에도 불구하고 서버리스는 웹 애플리케이션 개발을 위한 만병통치약이 아닙니다. 다른 기술과 마찬가지로 장점과 단점이 있으며, 기술적으로 더 발전했기 때문에 "현미경으로 못을 망치지 않고" 이해하고 이 도구를 선택해야 합니다.

이를 파악하는 데 도움이 되도록 새로운 웹 서비스를 개발하거나 현재 웹 서비스를 향상할 때 서버리스를 고려할 수 있는 몇 가지 예는 다음과 같습니다.

• 서버 로드가 주기적이고 유휴 용량에 대한 비용을 지불하는 경우. 예를 들어, 커피 머신 네트워크를 갖춘 클라이언트가 있었는데 하루에 수백, 수천 번만 요청을 처리하고 통계를 수집해야 했고 밤에는 요청 수가 수십 번으로 떨어졌습니다. 이 경우 실제 리소스를 사용한 만큼만 비용을 지불하는 것이 훨씬 더 효율적이므로 Serverless에 대한 솔루션을 제안하고 구현했습니다.
• 인프라의 기술적 세부 사항을 자세히 알아보고 서버와 밸런서를 설정하고 유지 관리하는 데 초과 비용을 지불할 계획이 없는 경우. 예를 들어 마켓플레이스를 개발할 때 트래픽이 어떻게 될지 정확히 알 수 없거나 그 반대의 경우도 마찬가지입니다. 많은 트래픽을 계획하고 애플리케이션이 로드를 견딜 수 있도록 하려면 서버리스가 탁월한 선택입니다.
• 기본 애플리케이션에서 일부 스트리밍 이벤트를 수행해야 하는 경우 테이블에 부가 데이터를 쓰고 일부 계산을 수행합니다. 예를 들어, 사용자 행동에 대한 분석 데이터를 수집하고 특정 방식으로 처리하여 데이터베이스에 저장합니다.
• 애플리케이션의 현재 작업을 단순화, 통합 또는 가속화해야 하는 경우. 예를 들어, 사용자가 클라우드에 동영상을 업로드하면 별도의 기능이 트랜스코딩을 처리하는 동안 메인 서버는 계속 정상적으로 작동하는 경우 이미지나 동영상 작업을 위한 성능 향상 서비스를 만들 수 있습니다.

타사 서비스의 이벤트를 처리해야 하는 경우. 예를 들어 결제 시스템의 응답을 처리하거나 사용자 데이터를 CRM으로 리디렉션하여 잠재 고객의 요청 처리 속도를 높입니다.
대규모 애플리케이션이 있고 애플리케이션의 일부 부분이 기본 언어와 다른 언어를 사용하여 더 최적으로 구현될 수 있습니다. 예를 들어, Java로 프로젝트가 있고 새 기능을 추가해야 하지만 자유 의지가 없거나 특정 언어로 구현하는 데 시간이 더 오래 걸릴 수 있고 이미 다른 언어로 된 솔루션이 있는 경우 서버리스가 도움을 줄 수 있습니다. 이것으로도.

이것은 주목할 만한 도구 및 기술의 전체 목록이 아니며, 저는 우리가 업무에서 매일 사용하는 것을 공유하고 그것이 비즈니스에 어떻게 도움이 될 수 있는지 정확히 알고 있을 뿐입니다.

출처 : habr.com