웹 어플리케이션을 개발할 때 어떤 기술을 사용할지 선택하는 것부터가 어려운 문제입니다. 본 포스팅에서는 웹 어플리케이션을 개발할 때 사용될 수 있는 기술의 조합을 소개합니다. 필자가 최근 기술(웹 프레임워크)의 개발경험이 없고 비교적 심플한 웹 어플리케이션을 Side project 형태로 진행하기 위한 것임을 감안해 주시기 바랍니다.

웹 어플리케이션 개발에 필요한 기술들

웹 어플리케이션을 개발하기 위해서는 생각보다 많은 기술들이 필요합니다. front-end, back-end, database, devOps 이런 것을 한번씩은 들어보셨을 거예요. 이것은 웹 개발에 필요한 역할을 의미합니다. 제가 웹 개발을 시작했던 2000년 초반에는 이런 용어가 없었고, 기술도 지금처럼 성숙되지 못한 상태였기 때문에 한명의 개발자가 모든것을 개발해야 했습니다. 물론 지금도 이 모든 것을 하는 것을 Full stack developer 라는 것이 있습니다.

역할에 따른 기술들은 아래의 그림에서 알수 있습니다. 다만 이것은 매우 일부만을 표기한것이라고 봐야합니다. 계속해서 새롭게 생겨나고 사라지고 하는 것이 이쪽 분야의 기술들입니다.

웹 어플리케이션 기술 스택

-출처: What Hiring Managers look for in a Full Stack Developer

Front-end, Back-end, DevOps에 대해서 간략히 알아보겠습니다.

Front-end

Front-end는 사용자에게 보여지는 부분에 관련된 개발을 의미합니다. Client-side 라고도 부릅니다. 우선은 웹의 가장 기초라고 볼 수 있는 HTML, CSS, Javascript에 대한 이해가 필요합니다.

이것만으로 Front-end를 개발하는 것은 매우 어렵습니다. 맨손으로 비행기를 만드는 것이라 볼 수 있기 때문에 웹 프레임워크를 알아야 합니다. 최근 가장 핫한 것은 페이스북에서 만든 React입니다. 웹 개발자로 일을 하고 싶다면 아무래도 가장 많이 필요로 하는 기술을 선택하는 것이 좋겠지요. Angular.js와 Vue.js도 많이 사용됩니다.

요즘에는 UI 개발을 위한 Style 라이브러리도 많이 사용되고 있습니다. Style 라이브러리라고 하면 웹 컴포넌트, 레이아웃, 컨트를들을 미리 만들어서 가져다 사용할 수 있도록 되어 있는 것들입니다. 비즈니스용 웹 어플리케이션에서 주로 사용됩니다. Bootstrap이 인기가 많았었고 최근에는 Material UI, Vuetify 등도 많이 사용됩니다.

Back-end

Back-end 개발은 보통 서버 개발, Server-side 라고 합니다. Front-end를 통해 사용자에게 보여줄 데이터를 가공하고, 데이터베이스를 CRUD(Create, Read, Update, Delete)하는 등 비즈니스 로직을 수행하는 기능을 구현하는 일을 의미합니다.

PHP, Java(JSP), ASP.NET(ASP), Node.js, Python(Django), Ruby on Rails 등 많은 기술들이 있습니다. ASP.NET의 경우 윈도우 운영체제에서만 동작하기 때문에 DevOps와도 관련이 있습니다. Front-end, Back-end 기술들은 컴퓨터 부품의 조립처럼 궁합이라는 것이 있어서 서로 잘 조화가 되는 기술들이 있고, 그렇지 못한 기술들이 있습니다. 이러한 조합을 설명하는 포스트는 구글에 검색하면 많이 있으니 자신에 맞는 것을 참고하면 됩니다.

Database는 따로 설명해도 충분할 정도로 큰 분야이지만, 간략히 설명합니다. 크게 RDBMS(Relational Database, Management System), ORDBMS(Object-Releational Database Management System), NoSQL(Not Only SQL)로 구분할 수 있습니다. RDBMS에는 가장 유명한 Oracle, MS-SQL Server 등 이 있고, 그외 MySQL, MariaDB, PostgreSQL, SQLite 등이 있습니다. MariaDB는 MySQL이 SUN에 인수된 후 SUN이 다시 오라클에 인수되면서 MySQL AB 출신들이 따로 나와서 MySQL 기반으로 오픈소스 DBMS를 만든 것입니다. PostgreSQL는 개인적으로 GIS 데이터에 매우 강력한 DBMS로 기억하고 오픈소스라서 현재에도 많이 사용됩니다. SQLite는 LocalDB라고 해서 서버로 동작하는 것이 아니라 응용 프로그램에 포함해서 사용하는 비교적 가벼운 데이터베이스를 말합니다. 갤럭시 등 스마트폰 앱에서 SQLite가 많이 사용되어 있습니다.

NoSQL는 한마디로 RDBMS가 아닌 데이터베이스를 NoSQL이라고 할 수 있습니다. RDBMS와는 RDBMS의 핵심인 데이터간의 관계를 정의하지 않고 대용량의 데이터를 저장할 수 있습니다. 클라우드 시스템에 적합하여 빅데이터가 유행하면서 크게 발전했습니다.

DevOps

소프트웨어 개발 방법론의 하나로, 개발(develoment)과 운영(operation)을 결합한 혼성어입니다. 개발 초기에서부터 개발과 운영을 연계하여 협력하는 개발 방법론을 의미합니다. 과거에는 개발자는 개발에만 관심이 있고, 운영자는 운영에만 관심이 있기 때문에 개발이 완료된 후 운영으로 인도 시 많은 문제가 있었습니다. 실제 SI업계에서도 SI(System Integration, 시스템 통합/개발)와 SM(System Management, 시스템 운영/유지보수) 사이에서 많은 갈들이 있었습니다. 따라서 현재에는 개발 초기에 개발 및 운영에 필요한 부분을 미리 반영하여 개발을 진행하는 방식입니다.

웹 어플리케이션의 기술 스택 선정

고려사항

앞서 설명한 것과 같이 기술 스택이 너무나 다양합니다. 기술 스택을 잘 선정하는 것만으로도 5할은 먹고 들어간다고 생각합니다. 다행이 검색을 해보면 이런 기술 스택의 조합을 먼저 경험한 많은 개발자들이 잘 정리 해놓은 글들이 많습니다. 본 포스팅에서도 그런 글들을 참고하여 선정한 내용입니다. 개인적인 성향, 취향이 반영된 것임을 미리 말씀드립니다.

저의 기술 스택 선정의 의사결정의 기준과 그 결과는 다음과 같습니다.

대중적인 기술을 선택합니다. 특별한 이유가 아니라면 대부분의 개발자들은 가급적 대중적인 기술을 선택하려 할 것입니다. 훌륭하고 너무 좋은 기술이지만 사용하는 곳이 적고 커뮤니티가 적다면 이는 큰 문제가 됩니다. 특히 채용 측면에서도 중요한 부분입니다. 인기 있는 기술을 필요로 하는 곳도 더 많겠죠.

러닝커브가 적은 기술을 선택합니다. 사실 개인마다 상황은 다를 수 있는데, 저의 경우 전문 웹 개발자가 아닙니다. 배우는데 너무 오랜 시간이 걸리는 것은 목적에 부합하지 않고 선호하지 않습니다. 대체로 쉬운 기술을 먼저 시작하고 이후 능숙해지면 더 좋고 어려운 기술을 배워도 문제되지 않습니다.

절차

개발하고자 하는 웹 어플리케이션이 있다는 가정하에 다음과 같은 순서로 진행합니다. 저의 경우 사이드 프로젝트로 만들어보는 것이라 거창할 필요는 없고 자기만 이해할 수 있는 것이면 충분합니다.

  • 기능 목록 정의: 로그인 기능도 있어야 하고, 전체 상황을 보여주는 Dashboard도 있어야 하고 등등
  • 스토리보드: 웹 어플리케이션의 뼈대 화면을 구상

필요한 기능도 알았고, 화면도 대략 구상이 되었습니다. 이제 기술 스택을 선정해야 합니다. 많은 구글링과 제가 선호하는 방식을 함께 사용해서 다음과 같이 진행했습니다.

  1. Github에서 비슷한 기능을 가진 소스를 검색합니다.
  2. 찾은 소스가 사용하는 언어, 프레임워크를 알아냅니다.
  3. 언어, 프레임워크의 정보나 후기들을 찾아 고려사항을 만족하는지 판단합니다.

1번 2번 순서는 중요하지 않습니다. 선호하는 언어, 프레임워크를 미리 정하고 소스를 찾을 수도 있겠고, 소스를 찾다가 언어, 프레임워크가 정해질 수도 있습니다.

필자의 경우는 처음에는 기술들을 조사하다가 어느 순간 Github에서 생각했던 기술들을 사용한 유사한 소스 및 강좌를 찾게되어 나머지 기술들은 강좌에서 사용하는 기술들을 자연스럽게 받아드린 부분도 있습니다.

Back-end 프레임워크

개발 언어는 주로 Server-side 쪽 개발을 위해 고민을 하게 된다. 필자의 의견이 반영된 웹 어플리케이션 개발에서 언어 선택의 후보들은 다음과 같다.

  • Python
    • Django를 써보고 싶은 욕구와 살짝 공부를 해봤던 경험
  • Java
    • 필자는 아주 오래전 JSP를 능숙하게 사용했던 경험이 있음
  • Node.js
    • Javascript 기반의 대중적인 언어. 한번은 써보고 싶은 욕구
  • 선택: Node.js
    • 기술마다 장/단점이 있는 것이고 무엇 하나가 나쁘다고 할 수가 없어서 Javascript 기반의 프레임워크를 경험해보고 싶은 개인적인 욕구가 반영된 듯 합니다. ^^

웹서버는 Node.js와 잘 어울리는 Express를 선택했습니다. 그외의 기술들은 검토해보지 않아서 잘 모릅니다.

데이터베이스는 목표 웹 어플리케이션이 NoSQL에 적합하다고 판단했고, NoSQL 중 가장 대중적인 MongoDB를 선택했습니다.

Front-end 프레임워크

처음에는 React, Vue.js, Angular.js를 두고 고민을 했습니다. 구글에 검색해보면 대체로 이 프레임워크들이 인기가 많습니다. Angular.js는 점점 사용량이 줄고 많이 불편하다는 평이 있어서 제외를 했습니다. React와 Vue.js를 두고 한참을 고민했습니다. 두 기술을 요약하자면 다음과 같습니다.

  • React
    • 페이스북에서 개발
    • Virtual DOM 지원
    • 현재 글로벌하게 가장 핫한 프레임워크
    • MIT 라이선스
    • 러닝커브가 상대적으로 높은 편
  • Vue.js
    • 개인 개발자와 커뮤니티가 개발
    • Virtual DOM 지원
    • React 다음으로 핫한 프레임워크. React에 밀려 점차 점유율이 감소 추세
    • MIT 라이선스
    • 러닝커브가 상대적으로 낮은 편
  • 선택: Vue.js
    • React가 가장 핫하지만 러닝커브 측면에서 Vue.js의 큰 매력
    • 한글 문서화도 잘되어 있고, 커뮤니티도 활성화 및 꾸준한 업데이트가 이뤄지는 것을 보고 신뢰를 할 수 있고
    • Vue.js의 SFC(Single File Component) 개념이 훌륭하고 다음 프로젝트에서도 Vue.js를 계속 사용할 것이라는 후기
    • Github에서 만들려고 하는 웹 어플리케이션과 유사한 소스 및 강좌를 찾게되었던 부분도 결정에 큰 도움을 준 부분입니다.

UI 컴포넌트 라이브러리는 Bootstrap과 Vuetify에서 고민을 하다가 Vuetify를 선택했습니다. Vue.js와의 조합이 좋고, 참고하는 소스 및 강좌에서도 Vuetify를 사용하고 있어 큰 고민없이 선택했습니다.

요약

결과적으로 MEVN(mongoDB, express, Vue.js, node.js) 스택의 조합을 선택했습니다.

MEVN Stack

  • Back-end
    • MongoDB (데이터베이스)
    • Express (웹서버)
    • Node.js
  • Front-end
    • Vue.js
    • Vuetify (UI 컴포넌트 라이브러리)

Reference