프론트엔드 기술 선택 가이드

이 장에서는 프레임워크와 라이브러리의 차이, React와 Vue의 특징을 다룹니다. 이 책의 독자가 어떤 기술을 고르면 되는지, 그리고 Code 탭이 다른 기술을 골라 버렸을 때 어떻게 되돌리는지를 안내합니다.

앞서 HTML, CSS, JavaScript의 기초를 배우셨습니다. 바이브 코딩을 하다 보면 Code 탭이 이렇게 순수한 HTML, CSS, JavaScript를 사용하지 않는 경우도 발생됩니다.

결론부터 말씀드리자면, 이 책의 독자에게는 바닐라 JavaScript 만으로도 충분합니다. 여기서 '바닐라'라는 용어는 '순수하게'라는 용어로 사용을 합니다. 별도의 언어가 아닙니다.

그러면 왜 React, Vue와 같은 어려운 기술들이 등장하게 된 것일까요? 개발 전문가가 아닌 우리는 무엇을 이용하면 좋을까요?

순수한 HTML, CSS, JavaScript를 사용하게 되면 프로젝트가 규모있게 되었을 때 재사용성이나 프로젝트 관리, 유지보수가 힘들어질 때가 많습니다. 이런 문제를 해결하고자 나온 기술들입니다.

개발자가 아닌 사람은 2가지 측면에서 해당 기술을 접하지 않아도 될 가능성이 큽니다. 첫 번째로는 규모입니다. 해당 기술을 도입할만큼 규모있는 프로젝트가 아니라는 것이죠. 두 번째는 기술의 도입 비용입니다. 해당 기술을 도입하게 되면 아무래도 공부해야 할 것이 많이 생깁니다. 빌드라는 새로운 개념도 익혀야 하고, Node.js라는 별도 프로그램도 설치해야 하고, 파일을 더블클릭해서 바로 열어 보는 방식도 통하지 않게 됩니다. 이 책이 터미널을 걷어낸 이유와 같은 이유로, 이 기술들도 걷어냅니다.

1. 프레임워크와 라이브러리

구분	정의	내 코드 역할	대표 예시
프레임워크	기본 틀과 구조 제공	부품 (틀 안에서 작성)	Next.js, Vue, Angular
라이브러리	필요한 기능 도구 모음	주인 (필요한 것만 가져다 사용)	React, jQuery

프레임워크와 라이브러리 모두 코드 덩어리입니다. 개발 분야의 거인들이 엄청난 코드를 만들어 놓았고, 우리는 거인들이 만든 코드를 가지고 편하고 안전하게 개발할 수 있습니다. 다만 이러한 프레임워크와 라이브러리가 쉬운 것은 아닙니다. 그렇기에 초급자들은 이 교육비용이 넘기 힘든 벽이 되곤 합니다.

프레임워크: 집을 지을 때의 기본 뼈대와 같습니다. 프레임워크는 기본 틀, 전체적인 구조를 미리 제공해 줍니다. 개발자들은 이 틀 안에서 자신이 원하는 기능을 추가할 수 있습니다. 내 코드가 '주'가 되는 것이 아니라 '부품'이 되는 것이라 생각해주시면 됩니다. 이 방식은 큰 규모의 복잡한 프로그램을 만들 때 유용합니다. 프레임워크를 사용하면 프로젝트 구조, 데이터베이스 연결과 같은 기본적인 부분에 대해 고민할 필요 없이 중요한 기능 개발에 집중할 수 있기 때문입니다. 프론트엔드 프레임워크 중에 가장 유명한 것은 Next.js, Vue가 있습니다.

라이브러리: 도구 상자입니다. 프로그래밍에서 자주 사용되는 유용한 기능들을 모아놓은 것이죠. 라이브러리를 사용하면 개발자는 필요한 기능을 직접 만들지 않고도 쉽게 가져와 사용할 수 있습니다. 상자에서 도구를 꺼내는 것처럼 개발자는 원하는 기능을 라이브러리에서 골라 사용할 수 있습니다. 프레임워크와 다르게 여기서는 내 코드가 '주'이고 라이브러리가 '부품'이 됩니다. 프론트엔드 라이브러리 중 가장 유명한 것 중 하나는 React입니다.

2. 주요 프레임워크 소개

이름은 알아 두어야 합니다. Code 탭이 만든 폴더에서 이 이름들이 보이면 "아, 내가 원한 것보다 무거운 기술을 골랐구나"라고 알아차릴 수 있어야 하기 때문입니다.

2.1 React

React는 세계에서 가장 인기 있는 라이브러리로 Facebook(현 Meta)에서 만든 라이브러리입니다. 특징으로는 UI를 조각조각 나누어 개발이 가능하다는 것입니다. 예를 들어, 버튼 하나하나를 아래와 같이 만들어 재사용 할 수 있다는 것이 가장 큰 장점 중 하나입니다.

위니브에서 실제 사용하고 있는 버튼이 어떤 모습인지, 순수한 HTML로는 어떻게 그려지는지 확인하면서 그 차이를 느껴보시면 좋을 것 같습니다. 먼저 HTML 입니다.

<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>
  );
}

이렇다보니 코드가 매우 길어질 수밖에 없습니다. 복잡하지만, 오히려 규모가 커졌을 때에는 관리하기가 좋습니다. 디자인의 일관성을 유지하기도 좋고요.

만약 Code 탭에게 어떠한 프로젝트를 만들어달라고 했을 때 아래와 같은 파일 구조를 만들었다면 '순수한 HTML, CSS, JavaScript로 다시 만들어줘.'라고 요청하시는 것을 권합니다. node_modules, package.json, .jsx 같은 이름이 보이면 React입니다.

# 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            # 프로젝트 설명

2.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>

같은 기능을 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>

Vue는 HTML과 유사한 템플릿 문법으로 진입 장벽이 낮다는 것이 큰 장점입니다. 공식 문서가 매우 잘 되어 있고 한국어 지원도 훌륭합니다. 다만 React에 비해 생태계가 작고, 대규모 애플리케이션에서는 React나 Angular가 더 선호되는 경향이 있습니다.

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            # 프로젝트 설명

3. 이 책의 독자를 위한 기술 선택

바이브 코딩으로 웹 개발을 시작하면서 가장 많이 받는 질문 중 하나가 "어떤 기술을 사용해야 하나요?"입니다. 이 책의 답은 한 줄입니다. 순수한 HTML, CSS, JavaScript를 쓰세요. 프레임워크나 라이브러리 없이 웹의 기본 기술만을 사용한다는 뜻입니다.

상황	추천 기술	이유
이 책의 독자	바닐라 HTML, CSS, JavaScript	단순, 수정 쉬움, 빌드 불필요, 더블클릭으로 열림
개발자를 목표로 하는 분	React (또는 Vue 먼저)	취업 시장 수요, 실무 필수

왜 처음부터 React나 Vue 같은 멋진 기술을 사용하지 않느냐고 물으실 수 있습니다. 이유는 간단합니다. 복잡합니다. 수정이 어렵고, 오류를 찾기 쉽지 않습니다. 배포할 때에는 빌드라는 작업을 해야하죠. 파일을 더블클릭해서 브라우저로 여는 방식도 통하지 않습니다. 초급자에겐 넘기 힘든 허들입니다.

여러분이 만들게 될 프로젝트의 규모도 고려해야 합니다. 대부분 개인 포트폴리오 사이트, 가게 소개 페이지, 간단한 계산기, 투두 리스트 같은 작은 프로젝트일 것입니다. 이런 프로젝트에 React나 Vue를 도입하는 것은 적절치 않습니다. 이것을 쓴다고 UI가 더 화려해지거나, 편의성이 올라가진 않습니다. 바닐라 JavaScript만으로도 충분히 멋진 결과물을 만들 수 있습니다.

그래서 Code 탭에 첫 요청을 할 때 아래 한 줄을 붙이는 습관을 들이세요. 기술 선택을 Claude의 판단에 맡기지 않고 우리가 정하는 것입니다. 2장에서 이야기한 'AI의 간섭'을 줄이는 가장 값싼 방법입니다.

순수한 HTML, CSS, JavaScript로 만들어줘. 별도 설치가 필요한 도구는 쓰지 말고, index.html을 더블클릭하면 바로 열리게 해줘.

개발자를 목표로 하신다면 이야기가 달라집니다. 바닐라 JavaScript로 기초를 다진 후에는 프레임워크나 라이브러리를 익히셔야 합니다. 국내 취업 시장만 놓고 본다면 React가 압도적이고, React가 어렵게 느껴진다면 Vue부터 시작하는 것도 좋은 전략입니다. 이 길로 가실 분은 터미널과 Node.js를 다루는 위니북스의 바이브 코딩 에센셜 with claude code 책으로 이어가시기 바랍니다.

링크: https://www.books.weniv.co.kr/essentials-vibecoding

마지막으로 기술 선택은 절대적인 것이 아니라는 점을 기억하세요. 상황과 요구사항은 계속 변하고, 새로운 기술은 계속 등장합니다. 프레임워크는 도구일 뿐입니다. 지금은 가장 단순한 도구로 만들고, 정말 규모가 커져서 필요해지는 순간에 Code 탭에 "이 프로젝트를 React로 옮기면 무엇이 좋아지고 무엇이 어려워지는지 설명해줘"라고 물어보면 됩니다. 그때 결정해도 늦지 않습니다.