Frontend

Vue.js 입문·설치 가이드 + 리액트와 무엇이 다른가

Vue.js는 리액트(React)보다 진입 장벽이 낮고 한 파일에 마크업·로직·스타일을 모아 쓰는 단일 파일 컴포넌트 방식이 특징인 프론트엔드 프레임워크인데, 2026년 기준 국내 SI·중소기업·공공 프로젝트 채용에서 여전히 수요가 살아 있습니다. 이 글에서는 Vue 3를 설치해 첫 화면을 띄우는 절차를 정리하고, 리액트와 무엇이 구조적으로 다른지, 그리고 리액트 위주로 작업하는 1인 개발자가 어떤 상황에서 Vue를 고르는 게 합리적인지 판단 기준까지 같이 다룹니다.

by Lee발행: 2026-06-24

한 줄 요약: Vue.js는 리액트(React)보다 진입 장벽이 낮고 한 파일에 마크업·로직·스타일을 모아 쓰는 단일 파일 컴포넌트 방식이 특징인 프론트엔드 프레임워크인데, 2026년 기준 국내 SI·중소기업·공공 프로젝트 채용에서 여전히 수요가 살아 있습니다. 이 글에서는 Vue 3를 설치해 첫 화면을 띄우는 절차를 정리하고, 리액트와 무엇이 구조적으로 다른지, 그리고 리액트 위주로 작업하는 1인 개발자가 어떤 상황에서 Vue를 고르는 게 합리적인지 판단 기준까지 같이 다룹니다.

이 글이 필요한 사람

리액트는 들어봤는데 Vue는 처음이라 설치부터 막막한 입문 개발자
채용 공고에 Vue가 보여서 지금 배워야 하나 고민 중인 분
리액트만 쓰다가 Vue 프로젝트에 투입되어 차이를 빠르게 파악해야 하는 분
새 사이드 프로젝트에 Vue와 리액트 중 무엇을 고를지 저울질하는 1인 개발자

※ 버전과 명령어는 2026년 6월 기준입니다. 프레임워크 버전은 자주 올라가니 설치 직전 공식 문서에서 최신 절차를 다시 확인하시길 권합니다.

Vue.js는 어떤 프레임워크인가

Vue.js는 화면을 만드는 자바스크립트 프레임워크입니다. 리액트나 앵귤러(Angular)와 같은 자리를 차지하지만, 중간 정도의 무게감으로 설계되어 입문자가 처음 손대기에 부담이 덜하다는 평가를 자주 받습니다. 가장 큰 특징은 한 화면 단위를 .vue 확장자의 파일 하나에 담는 단일 파일 컴포넌트 방식입니다. template, script, style 세 블록이 한 파일에 모여 있어서, 마크업과 로직과 스타일을 한눈에 보며 작업할 수 있습니다.

또 하나의 특징은 화면을 그릴 때 HTML과 거의 같은 문법의 템플릿을 쓴다는 점입니다. 조건부 렌더링은 v-if, 반복은 v-for 같은 지시자로 처리하므로, HTML을 어느 정도 아는 사람이라면 코드가 직관적으로 읽힙니다. 데이터가 바뀌면 화면이 자동으로 다시 그려지는 반응성도 Vue가 알아서 추적해 주기 때문에, 상태 관리의 초기 학습 비용이 낮은 편입니다. 아래는 Vue와 리액트의 큰 그림 차이를 정리한 표입니다.

구분	Vue.js	React
화면 작성 방식	HTML형 템플릿(지시자)	JSX(자바스크립트 안 마크업)
파일 구조	단일 파일 컴포넌트(.vue)	대개 컴포넌트당 함수 하나
반응성	프레임워크가 자동 추적	훅으로 명시적 관리
설계 성격	프레임워크(공식 라우터·상태 제공)	라이브러리(생태계 조합)
학습 곡선	완만(초반 진입 쉬움)	중간(JSX·훅 개념 필요)

Vue.js 입문·설치 가이드 + 리액트와 무엇이 다른가 관련 이미지 — Vue.js는 어떤 프레임워크인가 — Vue.js 입문·설치 가이드 + 리액트와 무엇이 다른가 관련 참고 이미지

Vue 3 설치하고 첫 화면 띄우기

요즘 Vue를 새로 시작하는 가장 표준적인 방법은 공식 빌드 도구인 create-vue로 프로젝트를 만드는 것입니다. 내부적으로 Vite를 쓰기 때문에 개발 서버가 매우 빠르게 뜹니다. Node.js가 설치되어 있다는 전제에서, 아래 한 줄이면 대화형 설정이 시작됩니다.

create-vue로 새 프로젝트 생성
npm create vue@latest my-vue-app

명령을 실행하면 타입스크립트(TypeScript) 사용 여부, 라우터(Vue Router) 추가 여부, 상태 관리 도구(Pinia) 추가 여부 등을 차례로 물어봅니다. 처음 배우는 단계라면 일단 전부 기본값으로 넘겨도 괜찮습니다. 나중에 필요할 때 라우터나 Pinia는 따로 붙일 수 있으니, 입문 시점에는 단순하게 시작하는 편이 오히려 흐름을 이해하기 좋습니다. 설정이 끝나면 안내된 대로 디렉터리로 들어가 의존성을 설치하고 개발 서버를 띄웁니다.

의존성 설치 후 개발 서버 실행
cd my-vue-app
npm install
npm run dev

서버가 뜨면 터미널에 표시된 로컬 주소(보통 http://localhost:5173)로 접속해 기본 화면이 보이면 정상입니다. 저는 새 도구를 익힐 때 항상 첫 화면의 글자 하나를 직접 바꿔 보는 것으로 설치 확인을 마칩니다. src/App.vue 파일을 열어 template 안의 텍스트를 한 줄 고치고 저장하면, 새로고침 없이도 화면이 즉시 바뀌는 핫 리로드를 확인할 수 있습니다. 이 한 번의 확인이 이후 작업에서 환경 문제로 시간 날리는 걸 막아 줍니다.

Vue.js 입문·설치 가이드 + 리액트와 무엇이 다른가 관련 이미지 — Vue 3 설치하고 첫 화면 띄우기 — Vue.js 입문·설치 가이드 + 리액트와 무엇이 다른가 관련 참고 이미지

막히는 케이스 메모. npm create vue@latest 가 동작하지 않거나 옛 명령을 안내하는 글을 봤다면, 대개 Node.js 버전이 낮은 경우입니다. 터미널에서 node -v 로 버전을 확인하고, 너무 낮으면 최신 LTS로 올린 뒤 다시 시도하세요. 한국 개발 환경에서 회사 보안 프록시 뒤에 있을 때는 npm 레지스트리 접근이 막혀 설치가 멈추기도 합니다. 이 경우 사내 프록시 설정을 npm 에 등록해야 진행됩니다.

단일 파일 컴포넌트와 JSX, 코드가 이렇게 다릅니다

Vue와 리액트의 차이를 말로만 들으면 잘 와닿지 않습니다. 같은 카운터 화면을 두 방식으로 짜 보면 구조 차이가 분명히 드러납니다. 먼저 Vue 3의 단일 파일 컴포넌트입니다. 하나의 파일에 로직(script), 화면(template), 스타일(style)이 블록으로 나뉘어 들어갑니다.

Vue 3 단일 파일 컴포넌트 (Counter.vue)
<script setup>
import { ref } from "vue"

const count = ref(0)
</script>

<template>
  <button @click="count++">눌린 횟수: {{ count }}</button>
</template>

<style scoped>
button { padding: 8px 16px; }
</style>

같은 동작을 리액트로 짜면 화면 자체를 자바스크립트 함수가 반환하는 JSX로 표현합니다. 상태는 useState 훅으로 만들고, 값을 바꿀 때는 반드시 설정 함수(setCount)를 호출해야 화면이 다시 그려집니다.

같은 동작을 React로 (Counter.jsx)
import { useState } from "react"

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      눌린 횟수: {count}
    </button>
  )
}

두 코드를 나란히 보면 차이가 보입니다. Vue는 화면을 HTML과 닮은 template에 적고 데이터를 중괄호 두 개로 끼워 넣습니다. 값을 바꿀 때도 count++ 처럼 평범하게 다루면 프레임워크가 알아서 화면을 갱신합니다. 반면 리액트는 화면이 곧 함수의 반환값이고, 상태를 바꿀 때 설정 함수를 명시적으로 호출해야 한다는 규칙을 지켜야 합니다. 어느 쪽이 절대적으로 낫다기보다, 사고방식이 다르다고 보는 게 정확합니다. 저는 HTML 작업이 익숙한 분이라면 Vue 쪽 흐름이 처음엔 더 부드럽게 읽힌다고 느꼈습니다.

Vue.js 입문·설치 가이드 + 리액트와 무엇이 다른가 관련 이미지 — 단일 파일 컴포넌트와 JSX, 코드가 이렇게 다릅니다 — Vue.js 입문·설치 가이드 + 리액트와 무엇이 다른가 관련 참고 이미지

반응성을 다루는 방식이 갈리는 지점

두 도구의 철학 차이가 가장 또렷하게 드러나는 곳이 바로 반응성, 즉 데이터가 바뀌면 화면을 어떻게 다시 그리느냐 하는 부분입니다. 입문 단계에서 이 차이를 이해해 두면 나중에 양쪽을 오갈 때 헷갈리지 않습니다.

Vue: ref나 reactive로 만든 값은 프레임워크가 내부에서 변화를 자동으로 추적합니다. 값을 그냥 바꾸기만 하면 그 값을 쓰는 화면이 알아서 갱신됩니다. 어떤 컴포넌트가 다시 그려질지 개발자가 신경 쓸 일이 적습니다.
React: 상태가 바뀌면 해당 컴포넌트 함수가 통째로 다시 실행되는 모델입니다. 그래서 불필요한 재실행을 막기 위해 useMemo, useCallback 같은 도구로 직접 최적화를 챙겨야 하는 경우가 생깁니다. 자유도가 높은 만큼 책임도 개발자에게 더 많이 넘어옵니다.

이 차이 때문에 입문자가 체감하는 난이도가 갈립니다. Vue는 초반에 자동으로 처리되는 영역이 넓어 빠르게 화면을 만들 수 있고, 리액트는 동작 원리를 더 명시적으로 다뤄야 해서 초반 학습량이 조금 더 많은 대신 큰 규모에서 통제력이 좋습니다. 제가 여러 사이트를 운영하며 느낀 점은, 혼자 빠르게 만들 때는 어느 쪽이든 큰 차이가 없지만 팀과 규모가 커질수록 명시적 모델의 장단점이 뚜렷해진다는 것이었습니다.

생태계와 풀스택 프레임워크 비교

화면 라이브러리만 보면 둘 다 충분히 성숙했지만, 실제 서비스를 만들려면 라우팅·상태 관리·서버 렌더링까지 묶은 더 큰 도구가 필요합니다. 이 층위에서 Vue와 리액트의 짝꿍이 갈립니다. 아래 표로 비교하면 선택할 때 그림이 잡힙니다.

역할	Vue 진영	React 진영
라우팅	Vue Router(공식)	React Router 등 외부
상태 관리	Pinia(공식 권장)	Redux·Zustand 등 선택
풀스택 프레임워크	Nuxt	Next.js·Remix 등
공식 제공 범위	핵심 도구를 팀이 공식 관리	핵심은 작게, 나머지는 생태계

핵심 차이는 이렇습니다. Vue는 라우터와 상태 관리 도구까지 팀이 공식적으로 관리해 묶음으로 제공하는 성격이 강합니다. 그래서 무엇을 골라야 할지 고민이 줄어듭니다. 리액트는 핵심을 작게 유지하고 나머지를 생태계 라이브러리 조합으로 채우는 방식이라 자유도가 높은 대신 선택지가 많습니다.

참고로 저는 tech.ambitstock을 포함한 사이트 대부분을 Next.js(리액트 기반 풀스택 프레임워크)와 슈퍼베이스(Supabase), 버셀(Vercel) 조합으로 굴리고 있습니다. 리액트 쪽 풀스택 도구가 워낙 빠르게 발전해 있고 버셀 배포와의 궁합이 좋아서 그쪽을 주력으로 잡았습니다. Vue를 쓴다면 같은 자리를 Nuxt가 채우게 되며, Nuxt 역시 서버 렌더링과 파일 기반 라우팅을 잘 갖추고 있어 1인 개발에 충분합니다.

국내 채용 시장에서 Vue 수요는 어느 정도일까

입문 단계에서 가장 현실적인 질문은 무엇을 배워야 취업이나 외주에 유리하냐는 것입니다. 한국 시장을 좁혀 보면 결이 조금 다릅니다. 네이버·카카오·토스 같은 대형 IT 기업과 스타트업 채용에서는 리액트 수요가 우세한 편이지만, SI·금융권·공공·중소기업 프로젝트로 가면 Vue를 쓰는 자리도 꾸준히 존재합니다. 특히 기존에 Vue로 구축된 운영 시스템을 유지보수하는 자리가 적지 않아서, Vue 수요가 사라졌다고 보기는 어렵습니다.

제가 1인 개발자로 외주와 운영을 병행하며 체감한 현실은 이렇습니다. 신규 자사 서비스를 빠르게 키우는 스타트업 쪽은 리액트·Next.js 채용이 두드러지고, 안정적으로 굴러가는 사내 시스템이나 관리 화면을 다루는 SI·중소기업 쪽은 Vue 비중이 상대적으로 높습니다. 따라서 목표 회사군이 어디냐에 따라 우선순위가 달라집니다. 채용 공고를 직접 검색해 보고, 지원하려는 회사들이 어느 쪽을 더 많이 요구하는지 데이터로 확인한 다음 정하는 게 가장 확실합니다.

리액트가 유리한 경우: 대형 IT·스타트업 신규 서비스, 자사 프로덕트 중심 팀, 글로벌 채용까지 노릴 때
Vue도 충분히 통하는 경우: SI·금융·공공·중소기업, 기존 Vue 시스템 유지보수, 짧은 학습 기간에 화면을 만들어야 할 때

Vue.js 입문·설치 가이드 + 리액트와 무엇이 다른가 관련 이미지 — 반응성을 다루는 방식이 갈리는 지점 — Vue.js 입문·설치 가이드 + 리액트와 무엇이 다른가 관련 참고 이미지

리액트 개발자가 Vue를 고를 만한 순간

리액트를 주력으로 쓰는 입장에서 굳이 Vue를 꺼내야 할 때가 있습니다. 제 기준으로는 도구를 바꾸는 결정은 취향이 아니라 상황으로 정합니다. 아래 경우라면 Vue를 진지하게 고려할 만합니다.

이미 Vue로 짜인 프로젝트를 넘겨받았을 때: 외주를 받거나 기존 시스템을 인계받았는데 코드베이스가 Vue라면, 리액트로 다시 짜는 비용보다 Vue를 익혀 이어가는 편이 훨씬 쌉니다.
HTML 친화적인 협업자가 함께할 때: 디자이너나 퍼블리셔가 마크업을 직접 손대야 하는 환경이라면, HTML과 닮은 Vue 템플릿이 협업 마찰을 줄여 줍니다.
빠르게 화면을 찍어내야 하는 내부 도구: 관리자 화면처럼 복잡한 상태 최적화보다 빠른 제작이 중요한 경우, Vue의 자동 반응성이 손이 덜 갑니다.
학습 시간이 짧은 신규 인원이 합류할 때: 진입 장벽이 낮아 새 팀원이 화면을 만들기까지 걸리는 시간이 짧습니다.

반대로 이미 리액트·Next.js로 잘 돌아가는 개인 프로젝트를 단지 새로움 때문에 Vue로 갈아엎는 건 권하지 않습니다. 도구를 바꾸는 데 드는 시간만큼 만들고 싶은 기능이 밀립니다. 저도 새 도구가 끌릴 때가 있지만, 운영 중인 사이트의 스택은 분명한 이유가 없으면 바꾸지 않습니다.

비용 메모. Vue와 리액트 둘 다 오픈소스라 프레임워크 자체에는 결제할 일이 없습니다. 깃허브(GitHub)에서 누구나 받아 쓸 수 있고, 원화 환산이나 부가세(VAT 10%)를 신경 쓸 일도 없습니다. 비용은 오히려 학습 시간과 배포 인프라에서 발생합니다. 어느 쪽을 배우든 무료라는 점은 1인 개발자에게 부담이 없는 부분입니다.

참고 자료

Vue.js 공식 빠른 시작 가이드 (vuejs.org/guide/quick-start) — create-vue로 프로젝트를 만드는 최신 절차
React 공식 학습 문서 (react.dev/learn) — 리액트의 컴포넌트와 훅 개념 정리

Vue와 리액트 중 입문자가 먼저 배우기 좋은 건 무엇인가요

순수하게 진입 장벽만 따지면 Vue가 조금 더 완만합니다. HTML과 닮은 템플릿을 쓰고 반응성을 프레임워크가 자동으로 챙겨 주기 때문입니다. 다만 국내 대형 IT·스타트업 취업을 노린다면 리액트 수요가 더 크다는 점도 함께 고려해야 합니다. 배우기 쉬운 쪽이 아니라 목표하는 자리가 요구하는 쪽을 먼저 보는 게 현실적인 선택입니다.

npm create vue@latest 명령이 동작하지 않습니다

가장 흔한 원인은 Node.js 버전이 낮은 경우입니다. 터미널에서 node -v 로 확인하고 최신 LTS로 올린 뒤 다시 시도하세요. 회사 보안 프록시 뒤에 있다면 npm 레지스트리 접근이 막혀 설치가 멈출 수 있으니, 사내 프록시 설정을 npm 에 등록해야 합니다. 옛 글의 vue create 같은 다른 명령을 안내받았다면 최신 방식인 create-vue 기준으로 다시 보는 게 좋습니다.

단일 파일 컴포넌트가 정확히 뭔가요

Vue에서 화면 한 단위를 .vue 확장자의 파일 하나에 담는 방식을 말합니다. 한 파일 안에 화면을 그리는 template, 로직을 담는 script, 스타일을 담는 style 블록이 함께 들어갑니다. 마크업과 로직과 스타일을 한눈에 보며 작업할 수 있어 입문자가 구조를 파악하기 쉽습니다. 리액트가 주로 자바스크립트 함수 안에 JSX로 화면을 표현하는 것과 대비되는 지점입니다.

리액트를 쓰고 있는데 Vue도 같이 익혀 둘 필요가 있을까요

당장 필요가 없다면 서두를 이유는 적습니다. 다만 Vue로 짜인 외주나 기존 시스템을 인계받을 가능성이 있다면 미리 기본기를 익혀 두는 게 도움이 됩니다. 두 도구의 핵심 개념인 컴포넌트와 반응성은 공통이라, 한쪽을 제대로 이해했다면 다른 쪽 학습은 생각보다 빠르게 끝납니다. 필요가 생겼을 때 단기간에 따라잡을 수 있는 정도면 충분합니다.

국내에서 Vue 채용 수요가 아직 있나요

네, 분야에 따라 다릅니다. 네이버·카카오·토스 같은 대형 IT나 스타트업 신규 서비스는 리액트 비중이 높은 편이지만, SI·금융·공공·중소기업 프로젝트에서는 Vue를 쓰는 자리가 꾸준히 있습니다. 특히 기존 Vue 시스템을 유지보수하는 수요가 적지 않습니다. 지원하려는 회사군의 채용 공고를 직접 검색해 어느 쪽 요구가 많은지 데이터로 확인하는 게 가장 확실합니다.

Vue로 서버 렌더링이나 풀스택 개발도 가능한가요

가능합니다. 리액트의 Next.js에 대응하는 도구로 Vue 진영에는 Nuxt가 있습니다. Nuxt는 서버 렌더링과 파일 기반 라우팅, API 처리까지 갖추고 있어 1인 개발로도 풀스택 서비스를 만들 수 있습니다. 라우팅은 Vue Router, 상태 관리는 Pinia가 공식 권장 도구로 자리 잡고 있어 무엇을 골라야 할지 고민이 적은 편입니다. 배포는 버셀이나 일반 호스팅 모두 무난하게 됩니다.

vue.js 설치Vue.js입문설치가이드리액트와무엇이Frontend

EXPLORE / Frontend