외주 개발 맡기기 전 꼭 알아야 할, 비전공자를 위한 개발 지식

외주 개발을 맡기기 전 꼭 알아야 할 개발 지식을 알아보세요. 프론트엔드, 백엔드, DB, API, SQL, 앱, 웹, 웹앱, 자바, 자바스크립트의 개념을 상세히 설명해드립니다. 비전공자도 부담없이 이해할 수 있어요!
Dongeun Paeng's avatar
May 10, 2024
외주 개발 맡기기 전 꼭 알아야 할, 비전공자를 위한 개발 지식

외주 개발의 아이러니

외주 개발을 맡길 때 고객사가 직면하는 아이러니가 있습니다. 개발 지식과 능력의 부족 때문에 외주를 맡기는데, 이러한 무지가 외주 실패로 이어지고는 한다는 점입니다. 외주 실패의 위험에 노출되지 않기 위해서는 최소한의 개발 지식을 갖춘 채로 믿을 만한 외주 개발사를 찾아야 합니다. 다빈치가 외주 개발 전에 알아야 할 기본적인 개발 지식을 알려드릴게요.

1. 프론트엔드, 백엔드, DB

  • 프론트엔드 = 클라이언트: 사용자가 직접 보는 화면

  • 백엔드 = 서버: 모든 요청을 처리하는 뇌

  • DB = 모든 정보를 저장하는 저장소

프론트엔드(=클라이언트)는 사용자가 직접 보는 화면으로, 서비스와 사용자 간의 상호 작용이 이루어지는 공간입니다. 사용자는 화면에 떠 있는 콘텐츠를 보고 버튼을 클릭하며 프론트엔드를 이용합니다.

백엔드(=서버)는 프론트엔드로부터 들어오는 요청을 처리하고, 이 과정에서 DB와 필요한 데이터를 주고받습니다. 서비스의 ‘뇌’로 볼 수 있습니다.

DB는 Database의 약자로, 서비스에 필요한 모든 정보를 저장하는 곳입니다.

새로운 서비스에 회원 가입할 때를 예로 들어볼까요? 

프론트엔드에서는 회원 가입을 위한 일련의 화면을 제공합니다. 사용자가 이메일과 비밀번호를 입력하고 ‘회원 가입’ 버튼을 누르면 요청이 백엔드로 전달됩니다. 프론트엔드가 전달한 정보를 받은 백엔드는 DB에 저장된 이메일을 쭉 읽고 중복 여부를 확인합니다. 중복이 없으면 DB에 해당 이메일을 새로 저장하고 프론트엔드에 가입을 진행하라는 응답을 보냅니다.

<출처: Zellwk>

2. API와 SQL

  • API: 소프트웨어 구성 요소 간 소통을 위한 규칙

  • SQL: DB의 데이터를 조회하고 관리하는 언어

프론트엔드에서 백엔드로, 백엔드에서 DB로 요청을 전달할 때는 API(Application Programming Interface)라는 소프트웨어 간 통신 규칙을 사용합니다.

사용자가 ‘회원 가입’ 버튼을 클릭하면 프론트엔드는 API에 따라 백엔드에 요청을 보냅니다. 백엔드는 이를 해석하고, 다시 정해진 방식으로 프론트엔드에 응답합니다.

// 프론트엔드 예시 코드
fetch('/api/check-email', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ email: 'test@example.com' })
})
.then(response => response.json())
.then(data => {
  if (data.exists) {
    console.log('이메일이 이미 존재합니다.');
  } else {
    console.log('사용 가능한 이메일입니다.');
  }
});

이 코드에서 프론트엔드는, POST 통신 방식을 사용하여 /api/check-email라는 API 엔드포인트로 JSON 형태의 이메일 주소를 전송합니다. 이 주소가 DB에 존재하면 “이메일이 이미 존재합니다.”라는 로그를, 존재하지 않는다면 “사용 가능한 이메일입니다.”라는 로그를 남깁니다. 이처럼 이 소프트웨어는 프론트엔드와 백엔드 간 약속에 따라 동작합니다. 이 약속을 API라고 하는 것입니다.

한편 SQL(Structured Query Language)은 DB에서 데이터를 조회하고 관리하기 위한 언어입니다. 데이터를 체계적으로 조회, 수정, 추가하는 데에 사용됩니다.

API, Application Programming Interface

3. 앱, 웹, 웹앱

  • 앱: 기기에 직접 설치해서 사용하는 소프트웨어

  • 웹: 브라우저를 통해 접근할 수 있는 웹사이트

  • 웹앱: 앱의 형태를 띠는 웹사이트

앱은 기기에 직접적으로 설치되는 소프트웨어로, 기기의 운영체제에 최적화되어 개발됩니다. Windows PC에서 사용하는 프로그램, Mac의 앱, iOS 또는 안드로이드용 앱 등이 이에 해당합니다. 앱은 기기 및 운영체제에 맞게 개발되기 때문에 성능과 기기의 여러 기능 활용 측면에서 강점이 있습니다.

웹은 크롬, 사파리, 파이어폭스 같은 브라우저로 접근할 수 있는 모든 콘텐츠를 의미합니다. URL을 입력해 접근할 수 있는 웹사이트들이 이에 해당합니다. 웹은 모든 기기와 운영체제에서 접근할 수 있고, 별도의 설치가 필요 없다는 장점이 있습니다.

웹앱은 웹과 앱의 장점을 결합한 형태입니다. 웹 기술을 통해 개발되었지만, 기기나 운영체제에 설치되어 마치 앱과 같은 경험을 제공합니다. 웹처럼 다양한 기기와 운영체제에서 접근할 수 있고, 앱처럼 푸시 알림, 카메라 등의 기능을 사용할 수 있습니다.

4. 자바와 자바스크립트

  • 자바: 안정성과 확장성이 보장된 개발 언어

  • 자바스크립트: 웹 페이지 개발에 특화된 언어

마지막으로, 많은 사람들이 혼동하는 두 개발 언어, “자바”와 “자바스크립트”를 소개합니다.

제일 먼저, 두 언어는 전혀 상관이 없는 별개 언어입니다.

자바는 거의 모든 환경, 다양한 운영체제에서 실행 가능한 개발 언어입니다. 따라서 여러 플랫폼 및 기기로의 확장이 필요한 환경에 많이 이용됩니다. 특히 자바로 백엔드를 개발하는 경우가 많은데요, 자바의 높은 안정성이 기업 단위의 소프트웨어 개발에 유용하기 때문입니다.

스프링부트(Spring Boot)는 자바로 백엔드 개발을 쉽게 하도록 돕는 프레임워크입니다. 이때 프레임워크란 개발의 뼈대를 의미하는데요. 스프링부트를 활용하면 복잡한 설정 없이 빠르게 개발에 돌입할 수 있습니다. 마치 이미 있는 골조에 레고 블럭을 조립하는 것처럼요.

자바스크립트는 웹 페이지 개발에 특화된 프론트엔드 전용 언어로 등장했습니다. 우리가 사용하는 거의 모든 웹사이트가 자바스크립트로 만들어졌습니다. 최근에는 자바스크립트의 확장 언어인 타입 스크립트가 인기를 얻고 있습니다. 타입 스크립트는 코드 관리와 오류 방지를 더 쉽게 만들어줍니다. 사실, 자바스크립트는 프론트엔드 전용 언어로 등장했지만 활용 범위가 커지면서 백엔드 언어로도 쓰이고 있습니다. 그런 점에서 백엔드 개발 시 자바로 할지, 자바스크립트로 할지 선택할 수 있다는 뜻입니다.

Java and JS

자바스크립트에는 리액트리액트 네이티브 같은 프레임워크가 있습니다. 리액트는 웹사이트, 리액트 네이티브는 모바일 앱을 개발하는 데 도움을 주는 프레임워크입니다. 마찬가지로 이러한 뼈대들을 통해 손쉽게 자바스크립트 기반의 웹사이트와 모바일 앱을 만들 수 있습니다. 특히 리액트 네이티브를 활용할 경우 iOS와 안드로이드에 모두 대응되는 앱을 두 번의 수고 없이 만들 수 있다는 장점이 있습니다.

React and React Native

<출처: Stack Overflow>

전문가에게 외주 개발을 맡겨야 하는 이유

외주 개발에 있어 가장 중요한 건 명확하고 명료한 의사소통입니다. 고객사와 외주 개발사 모두 서로의 요구와 계획을 이해할 수 있어야 합니다. 개발사는 고객사가 모르는 내용을 위와 같이 쉽게 설명할 수 있어야 합니다.

그렇기에 외주 개발은 많은 이력을 쌓은 전문가에게 맡겨야 합니다. 고객을 만족시키려면 개발 그 자체만 잘해서는 외주 개발 프로젝트를 잘 마칠 수 없고, 과정 내내 고객과 잦은 소통을 유지해야 하기 때문입니다. 다빈치는 전략 컨설팅 회사 베인앤드컴퍼니, 우아한형제들(배달의민족), 삼성 등 국내 빅테크 및 대기업 출신 IT 전문가들로 구성되어 있으며, 대형 고객사에 IT 컨설팅을 제공하여 그 전문성을 인정받았습니다.

다빈치의 외주 개발 서비스는 위에 소개된 모든 영역을 포괄합니다.

  • 프론트엔드(앱, 웹, 웹앱) 개발

  • 백엔드 개발

  • DB 관리

  • 개발 목적에 적합한 개발 언어 사용

다빈치의 다양한 IT 컨설팅 사례를 확인하고 싶다면 다빈치 홈페이지를 방문하세요!

Share article

Codex - 다빈치 블로그