프론트엔드 기술 선택 가이드
8. 프론트엔드 기술 선택 가이드
앞서 HTML, CSS, JavaScript의 기초를 배우셨습니다. 바이브 코딩을 하다보면 Claude Code가 이렇게 순수한 HTML, CSS, JavaScript를 사용하지 않는 경우도 발생됩니다.
결론부터 말씀드리자면, 대부분의 바이브 코딩을 해서 개발하는 분들에게는 바닐라 JavaScript 만으로도 충분합니다. 여기서 '바닐라'라는 용어는 '순수하게'라는 용어로 사용을 합니다. 별도의 언어가 아닙니다.
그러면 왜 React, Vue와 같은 어려운 기술들이 등장하게 된 것일까요? 개발자인 사람과 개발자가 아닌 사람은 무엇을 이용하면 좋을까요?
순수한 HTML, CSS, JavaScript를 사용하게 되면 프로젝트가 규모있게 되었을 때 재사용성이나 프로젝트 관리, 유지보수가 힘들어질 때가 많습니다. 이런 문제를 해결하고자 나온 기술들입니다.
개발자가 아닌 사람은 2가지 측면에서 해당 기술을 접하지 않아도 될 가능성이 큽니다. 첫번째로는 규모입니다. 해당 기술을 도입할만큼 규모있는 프로젝트가 아니라는 것이죠. 두번째는 기술의 도입 비용입니다. 해당 기술을 도입하게 되면 아무래도 공부해야 할 것이 많이 생깁니다. 빌드라는 새로운 개념도 익혀야하고, 노드라는 환경이 친숙해지는 것만 해도 꽤나 오랜 시간이 걸립니다.
개발자라면, 개발자를 꿈꾸는 분이라면 이 기술을 써야 합니다. 규모있는 프로젝트는 반드시 만나게 되어 있고, 작은 프로젝트에서부터 경험치를 쌓아갈 필요가 있습니다.
이 두가지 그룹의 필요성, 적정성을 판단하면서 아래 글을 필요에 맞게 읽으시는 것을 권해드립니다.
1. 프레임워크와 라이브러리
프레임워크와 라이브러리 모두 코드 덩어리 입니다. 개발 분야의 거인들이 엄청난 코드를 만들어 놓았고, 우리는 거인들이 만든 코드를 가지고 편하고 안전하게 개발할 수 있습니다. 다만 이러한 프레임워크와 라이브러리가 쉬운것은 아닙니다. 그렇기에 초급자들은 이 교육비용이 넘기 힘든 벽이 되곤 합니다.
프레임워크는 집을 지을 때의 기본 뼈대와 같습니다. 프레임워크는 기본 틀, 전체적인 구조를 미리 제공해 줍니다. 개발자들은 이 틀 안에서 자신이 원하는 기능을 추가할 수 있습니다. 내 코드가 '주'가 되는 것이 아니라 '부품'이 되는 것이라 생각해주시면 됩니다.
이 방식은 큰 규모의 복잡한 프로그램을 만들 때 유용합니다. 프레임워크를 사용하면 프로젝트 구조, 데이터베이스 연결과 같은 기본적인 부분에 대해 고민할 필요 없이 중요한 기능 개발에 집중할 수 있기 때문입니다.
프론트엔드 프레임워크 중에 가장 유명한 것은 Nextjs, Vue가 있습니다.
라이브러리는 도구 상자입니다. 프로그래밍에서 자주 사용되는 유용한 기능들을 모아놓은 것이죠. 라이브러리를 사용하면 개발자는 필요한 기능을 직접 만들지 않고도 쉽게 가져와 사용할 수 있습니다. 상자에서 도구를 꺼내는 것처럼 개발자는 원하는 기능을 라이브러리에서 골라 사용할 수 있습니다. 프레임워크와 다르게 여기서는 내 코드가 '주'이고 라이브러리가 '부품'이 됩니다.
프론트엔드 라이브러리 중 가장 유명한 것 중 하나는 React입니다.
3. 주요 프레임워크 소개
3.1 React
React는 세계에서 가장 인기있는 라이브러리로 Facebook(현 Meta)에서 만든 라이브러리입니다. 특징으로는 UI를 조각조각 나누어 개발이 가능하다는 것입니다. 예를 들어, 버튼 하나하나를 아래와 같이 만들어 재사용 할 수 있다는 것이 가장 큰 장점 중 하나입니다.
위니브에서 실제 사용하고 있는 버튼이 어떤 모습인지, 순수한 HTML로는 어떻게 그려지는지 확인하면서 그 차이를 느껴보시면 좋을 것 같습니다. 먼저 HTML 입니다.
<button>버튼!</button><button>버튼!</button>위와 같이 간단히 만들 수 있습니다. 하지만 다크모드에서 색이 반전되거나, 모바일에서 크기가 변하거나 하는 작업은 여기서 코드를 짤 수 없습니다.
아래는 위니브에서 실제 사용하고 있는 React를 사용한 버튼입니다. 버튼 하나를 만들기 위해 수십줄의 코드가 들어가 있습니다. 다크모드에서 색이 반전되거나, 모바일에서 크기가 변하거나, 버튼이 들어가는 위치에 따라 모양이 변하기도 합니다. 이 모든 것을 JavaScript로 컨트롤합니다.
// React 버전 (참고용 - 실제로는 복잡한 설정 필요)
export default function Btn(props) {
const {
children,
href,
// ... 생략 ...
bordernone,
onClick = null,
} = props;
const btnStyle = classNames(
solid && styles.solid,
// ... 생략 ...
styles.btn,
);
if (href) {
return (
<Link {...props} href={href} className={btnStyle}>
{children}
</Link>
);
}
return (
<button {...props} type={type} className={btnStyle} onClick={onClick}>
{children}
</button>
);
}// React 버전 (참고용 - 실제로는 복잡한 설정 필요)
export default function Btn(props) {
const {
children,
href,
// ... 생략 ...
bordernone,
onClick = null,
} = props;
const btnStyle = classNames(
solid && styles.solid,
// ... 생략 ...
styles.btn,
);
if (href) {
return (
<Link {...props} href={href} className={btnStyle}>
{children}
</Link>
);
}
return (
<button {...props} type={type} className={btnStyle} onClick={onClick}>
{children}
</button>
);
}이렇다보니 코드가 매우 길어질 수밖에 없습니다. 복잡하지만, 오히려 규모가 커졌을 때에는 관리하기가 좋습니다. 디자인의 일관성을 유지하기도 좋고요.
만약 초급자가 Claude Code에게 어떠한 프로젝트를 만들어달라고 했을 때 아래와 같은 파일 구조를 만들었다면 'HTML, CSS, JavaScript로 만들어줘.'라고 다시 요청하시는 것을 권합니다.
# React의 폴더 구조
my-react-app/
├── node_modules/ # 설치된 패키지들
├── public/ # 정적 파일들
│ ├── index.html # 메인 HTML 파일
│ └── favicon.ico # 파비콘
├── src/ # 소스 코드
│ ├── components/ # React 컴포넌트들
│ │ ├── Header.jsx
│ │ ├── Footer.jsx
│ │ └── Button.jsx
│ ├── pages/ # 페이지 컴포넌트들
│ │ ├── Home.jsx
│ │ └── About.jsx
│ ├── styles/ # CSS 파일들
│ │ └── App.css
│ ├── App.jsx # 메인 앱 컴포넌트
│ └── index.js # 진입점
├── package.json # 프로젝트 설정 및 의존성
├── package-lock.json # 의존성 버전 고정
└── README.md # 프로젝트 설명# React의 폴더 구조
my-react-app/
├── node_modules/ # 설치된 패키지들
├── public/ # 정적 파일들
│ ├── index.html # 메인 HTML 파일
│ └── favicon.ico # 파비콘
├── src/ # 소스 코드
│ ├── components/ # React 컴포넌트들
│ │ ├── Header.jsx
│ │ ├── Footer.jsx
│ │ └── Button.jsx
│ ├── pages/ # 페이지 컴포넌트들
│ │ ├── Home.jsx
│ │ └── About.jsx
│ ├── styles/ # CSS 파일들
│ │ └── App.css
│ ├── App.jsx # 메인 앱 컴포넌트
│ └── index.js # 진입점
├── package.json # 프로젝트 설정 및 의존성
├── package-lock.json # 의존성 버전 고정
└── README.md # 프로젝트 설명만약 개발자가 되시려고 하시는 분이라면 가벼운 프로젝트라도 React 경험을 충분히 쌓으시는 것을 권합니다.
2. Vue
Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크입니다. '프로그레시브'라는 말은 점진적으로 적용할 수 있다는 의미로, 기존 프로젝트의 일부분에만 Vue를 도입하거나 처음부터 Vue로 전체 애플리케이션을 구축할 수 있습니다. Vue는 Evan You가 Google에서 AngularJS를 사용하며 느꼈던 불편함을 개선하여 2014년에 만든 프레임워크입니다. React보다 학습 곡선이 완만하고, Angular보다 가볍다는 특징이 있어 많은 개발자들에게 사랑받고 있습니다.
Vue의 가장 큰 특징은 HTML과 매우 유사한 문법을 사용하기 때문에 HTML을 알고 있는 분들이라면 상대적으로 쉽게 접근할 수 있다는 점입니다. 예를 들어 간단한 카운터 기능을 만든다고 생각해보겠습니다. 순수한 HTML과 JavaScript로는 버튼을 클릭할 때마다 숫자를 증가시키고, 그 값을 화면에 표시하기 위해 JavaScript를 사용해서 문서를 직접 조작해야 합니다.
<!DOCTYPE html>
<html>
<head>
<title>카운터</title>
</head>
<body>
<div>
<p id="count">0</p>
<button onclick="increase()">증가</button>
</div>
<script>
let count = 0;
function increase() {
count++;
document.getElementById('count').innerText = count;
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>카운터</title>
</head>
<body>
<div>
<p id="count">0</p>
<button onclick="increase()">증가</button>
</div>
<script>
let count = 0;
function increase() {
count++;
document.getElementById('count').innerText = count;
}
</script>
</body>
</html>같은 기능을 Vue로 구현하면 데이터와 화면이 자동으로 연결됩니다. count 값이 변경되면 화면이 자동으로 업데이트되는 것이죠. 이를 반응형(Reactive) 시스템이라고 합니다. Vue 버전이 더 길어 보일 수 있지만, 프로젝트가 커질수록 이러한 구조화된 방식이 관리하기 훨씬 편해집니다.
<template>
<div>
<p>{{ count }}</p>
<button @click="increase">증가</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increase() {
this.count++
}
}
}
</script><template>
<div>
<p>{{ count }}</p>
<button @click="increase">증가</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increase() {
this.count++
}
}
}
</script>Vue는 HTML과 유사한 템플릿 문법으로 진입 장벽이 낮다는 것이 큰 장점입니다. 공식 문서가 매우 잘 되어 있고 한국어 지원도 훌륭합니다. 또한 파일 하나로도 컴포넌트를 만들 수 있어 관리가 편하며, 중국과 아시아 지역에서 특히 인기가 높아 관련 자료가 풍부합니다. 다만 React에 비해 생태계가 작고, 대규모 애플리케이션에서는 React나 Angular가 더 선호되는 경향이 있습니다. 국내 채용 시장에서도 React보다 수요가 적은 편입니다.
Vue가 특히 적합한 경우는 HTML, CSS를 잘 알고 있고 프레임워크를 처음 시작하는 경우입니다. 중소 규모의 웹 애플리케이션을 빠르게 개발해야 하거나, 기존 프로젝트에 점진적으로 프레임워크를 도입하고 싶을 때도 Vue는 좋은 선택입니다. 팀원들의 JavaScript 실력이 다양한 수준일 때도 Vue의 낮은 진입 장벽이 도움이 됩니다.
만약 초급자가 Claude Code에게 어떠한 프로젝트를 만들어달라고 했을 때 .vue 확장자 파일들이 보이거나 아래와 같은 복잡한 폴더 구조가 생성된다면, "순수한 HTML, CSS, JavaScript로 만들어줘"라고 다시 요청하시는 것을 권합니다.
my-vue-app/
├── node_modules/ # 설치된 패키지들
├── public/ # 정적 파일들
│ ├── index.html # 메인 HTML 파일
│ └── favicon.ico # 파비콘
├── src/ # 소스 코드
│ ├── components/ # Vue 컴포넌트들
│ │ ├── HelloWorld.vue
│ │ └── BaseButton.vue
│ ├── views/ # 페이지 컴포넌트들
│ │ ├── Home.vue
│ │ └── About.vue
│ ├── router/ # 라우터 설정
│ │ └── index.js
│ ├── store/ # 상태 관리 (Vuex/Pinia)
│ │ └── index.js
│ ├── assets/ # 이미지, 폰트 등
│ │ └── logo.png
│ ├── App.vue # 메인 앱 컴포넌트
│ └── main.js # 진입점
├── package.json # 프로젝트 설정 및 의존성
├── vite.config.js # Vite 빌드 도구 설정
└── README.md # 프로젝트 설명my-vue-app/
├── node_modules/ # 설치된 패키지들
├── public/ # 정적 파일들
│ ├── index.html # 메인 HTML 파일
│ └── favicon.ico # 파비콘
├── src/ # 소스 코드
│ ├── components/ # Vue 컴포넌트들
│ │ ├── HelloWorld.vue
│ │ └── BaseButton.vue
│ ├── views/ # 페이지 컴포넌트들
│ │ ├── Home.vue
│ │ └── About.vue
│ ├── router/ # 라우터 설정
│ │ └── index.js
│ ├── store/ # 상태 관리 (Vuex/Pinia)
│ │ └── index.js
│ ├── assets/ # 이미지, 폰트 등
│ │ └── logo.png
│ ├── App.vue # 메인 앱 컴포넌트
│ └── main.js # 진입점
├── package.json # 프로젝트 설정 및 의존성
├── vite.config.js # Vite 빌드 도구 설정
└── README.md # 프로젝트 설명하지만 프론트엔드 개발자를 목표로 하신다면, Vue는 React보다 학습하기 쉬운 첫 번째 프레임워크로 충분히 좋은 선택이 될 수 있습니다. 가벼운 프로젝트라면 Vue 경험을 쌓아보시는 것도 좋습니다.
3. 기술 선택 가이드
바이브 코딩으로 웹 개발을 시작하면서 가장 많이 받는 질문 중 하나가 "어떤 기술을 사용해야 하나요?" 입니다. 정답은 없지만, 여러분의 목적과 현재 위치에 따라 적절한 선택이 달라집니다. 이 챕터에서는 세 가지 그룹으로 나누어 각각에게 맞는 기술 선택 가이드를 제시하고자 합니다.
3.1 개발을 처음 접하는 사람을 위한 가이드
개발을 처음 접하시는 분들께는 순수한 HTML, CSS, JavaScript를 권합니다. 프레임워크나 라이브러리 없이 웹의 기본 기술만을 사용한다는 뜻입니다.
왜 처음부터 React나 Vue 같은 멋진 기술을 사용하지 않느냐고 물으실 수 있습니다. 이유는 간단합니다. 복잡합니다. 수정이 어렵고, 오류를 찾기 쉽지 않습니다. 배포 할 때에는 빌드라는 작업을 해야하죠. 초급자에겐 넘기 힘든 허들입니다.
개발을 처음 접하시는 분들이 만들게 될 프로젝트의 규모도 고려해야 합니다. 대부분 개인 포트폴리오 사이트, 간단한 계산기, 투두 리스트 같은 작은 프로젝트일 것입니다. 이런 프로젝트에 React나 Vue를 도입하는 것은 적절치 않습니다. 이것을 쓴다고 UI가 더 화려해지거나, 편의성이 올라가진 않습니다. 바닐라 JavaScript만으로도 충분히 멋진 결과물을 만들 수 있습니다.
3.2 개발자가 되려는 분을 위한 가이드
개발자를 목표로 하신다면 이야기가 달라집니다. 바닐라 JavaScript로 기초를 다진 후에는 반드시 프레임워크나 라이브러리를 익히셔야 합니다. 현업에서는 거의 대부분 React, Vue, Angular 같은 기술을 사용하기 때문입니다.
그렇다면 무엇을 선택해야 할까요? 국내 취업 시장만 놓고 본다면 React가 압도적입니다. 채용 공고의 대부분은 React를 요구하고 있으며, 대기업과 스타트업 모두에서 React를 선호합니다. React를 배우면 React Native를 통해 모바일 앱 개발로도 영역을 확장할 수 있다는 것도 큰 장점입니다.
하지만 React가 처음 배우기에는 다소 어렵다고 느끼신다면 Vue부터 시작하는 것도 좋은 전략입니다. Vue는 HTML과 유사한 템플릿 문법을 사용하기 때문에 바닐라 JavaScript에서 프레임워크로 넘어가는 과정이 상대적으로 부드럽습니다. Vue로 컴포넌트 기반 개발, 상태 관리, 라우팅 같은 개념을 익힌 후 React로 넘어가면 학습 곡선을 완만하게 만들 수 있습니다.
Claude Code를 활용할 때도 적극적으로 프레임워크 기반 코드를 요청하고 분석해보세요. 생성된 코드의 구조를 이해하고, 왜 그렇게 작성되었는지 고민해보는 것이 중요합니다. 모르는 부분이 있다면 Claude에게 설명을 요청하고, 주석을 달아달라 요청하고, 코드를 수정해가며 동작 원리를 파악해보세요.
3.3 현업 개발자를 위한 가이드
이미 개발자로 일하고 계신 분들에게는 기술 선택이 더욱 전략적이어야 합니다. 단순히 유행하는 기술을 따라가는 것이 아니라, 프로젝트의 요구사항과 팀의 역량, 장기적인 유지보수를 모두 고려해야 합니다.
프로젝트의 규모와 복잡도를 먼저 평가하세요. 간단한 랜딩 페이지나 프로토타입이라면 바닐라 JavaScript나 가벼운 라이브러리로도 충분합니다. 오히려 프레임워크를 도입하면 개발 속도가 느려질 수 있습니다. 반대로 수백 개의 화면과 복잡한 상태 관리가 필요한 엔터프라이즈 애플리케이션이라면 React나 국내에서는 잘 사용하지 않지만 Angular 같은 프레임워크가 적합할 수 있습니다.
팀의 기술 스택과 학습 곡선도 중요한 고려사항입니다. 팀원 대부분이 React에 익숙하다면 Vue가 아무리 좋아도 React를 선택하는 것이 현명합니다. 새로운 기술을 도입할 때는 팀 전체의 생산성이 일시적으로 떨어진다는 것을 염두에 두어야 합니다. 정말 필요한 경우가 아니라면 검증된 기술 스택을 유지하는 것이 좋습니다.
또한 프로젝트 규모와 개발 안정성을 고려한다면 TypeScript도 좋은 선택지입니다. TypeScript가 익숙하지 않더라도 TypeScript를 도입함으로 얻는 개발 안정성 등을 팀 내 교육비용과 함께 저울질 해볼 필요가 있습니다.
현업 개발자들은 Claude Code를 다르게 활용할 수 있습니다. 요구사항 문서부터가 다릅니다. 회사 컨벤션에 맞게 요구사항 문서를 더 세부적으로 작성하세요. 골격을 갖추기 시작했으면 화면 단위가 아니라 기능단위나 함수 단위로만 요청을 해서 내부 생산성을 높일 수 있는 방법을 강구해야 합니다. Claude Code를 써서 개발 속도가 오히려 낮아질 수 있습니다.
마지막으로 기술 선택은 절대적인 것이 아니라는 점을 기억하세요. 상황과 요구사항은 계속 변하고, 새로운 기술은 계속 등장합니다. 중요한 것은 현재 상황에서 최선의 선택을 하고, 필요하다면 유연하게 전환할 수 있는 역량을 기르는 것입니다. 프레임워크는 도구일 뿐입니다. Claude Code를 적절하게 사용해서 필요에 따라 리펙토링 할 수 있도록 개발하면서 문서를 잘 정리해두세요.