바이브 코딩을 시작하면 곧 낯선 단어들이 몰려옵니다. React, Next.js, API, CSR, SSR, NPM, 빌드, 번들링…. 처음에는 전부 외워야 할 것처럼 보입니다.
그런데 실제로 중요한 것은 단어 암기가 아닙니다. “이 기술이 왜 생겼는가”를 아는 것입니다. 그래야 AI가 짜준 코드가 어디에서 동작하고, 무엇을 고쳐 달라고 해야 하는지 감이 잡힙니다.
이 글은 양실장의 바이브코딩대학 영상 「비개발자 바이브코더를 위해 만든, 가볍게 들어도 깊게 남는 프론트엔드 기본 지식」을 바탕으로, 초보자가 먼저 알아야 할 프론트엔드 개념을 쉬운 말로 정리한 글입니다.
1. 인터넷과 웹은 다르다
가장 먼저 헷갈리는 말이 인터넷과 웹입니다.
인터넷은 전 세계 컴퓨터를 연결한 거대한 통신망입니다. 도로, 전기망, 수도관처럼 기반 시설에 가깝습니다. 반면 웹은 그 인터넷 위에서 문서를 주고받고, 링크를 따라 이동하게 만든 서비스입니다.
쉽게 말하면 이렇습니다.
- 인터넷: 컴퓨터들이 서로 연결되는 길
- 웹: 그 길 위에서 문서와 화면을 주고받는 서비스
- 브라우저: 웹을 보기 위해 사용하는 앱
그래서 “웹사이트를 만든다”는 말은 인터넷 자체를 만드는 것이 아닙니다. 인터넷이라는 기반 위에서 사용자가 볼 수 있는 문서와 기능을 설계한다는 뜻입니다.
2. 웹의 출발은 문서와 링크였다
웹은 처음부터 지금처럼 복잡하지 않았습니다. 팀 버너스리가 만든 초기 웹의 핵심은 연구 문서를 서로 연결하는 것이었습니다. 문서 안의 특정 단어를 누르면 다른 문서로 이동하는 방식, 즉 하이퍼링크가 핵심이었습니다.
이때 필요한 기본 기술이 세 가지였습니다.
- HTML: 문서의 구조를 표시하는 언어
- URL: 문서의 주소
- HTTP: 브라우저와 서버가 문서를 주고받는 약속
이 세 가지는 지금도 웹의 뿌리입니다. React나 Next.js를 쓰더라도 결국 브라우저는 HTML을 해석하고, URL로 위치를 찾고, HTTP로 데이터를 주고받습니다.
3. HTML은 뼈대, CSS는 옷, JavaScript는 행동이다
초보자가 프론트엔드를 이해할 때 가장 쉬운 비유는 사람입니다.
HTML은 뼈대입니다. 제목, 문단, 이미지, 버튼, 입력창처럼 화면에 무엇이 있는지를 정합니다.
CSS는 옷과 분위기입니다. 색상, 크기, 위치, 간격, 글꼴처럼 어떻게 보일지를 담당합니다.
JavaScript는 행동입니다. 버튼을 눌렀을 때 메뉴가 열리고, 입력값이 검사되고, 장바구니 수량이 바뀌는 동작을 만듭니다.
처음 웹은 거의 문서에 가까웠습니다. 예쁘게 꾸미는 문제 때문에 CSS가 필요해졌고, 사용자의 클릭과 입력에 반응해야 하면서 JavaScript가 중요해졌습니다.
4. 브라우저는 코드를 그림으로 바꾼다
프론트엔드 코드는 사람이 보는 화면이 아닙니다. 브라우저가 해석해야 하는 재료입니다.
브라우저는 대략 이런 과정을 거칩니다.
- HTML과 CSS를 읽는다.
- 화면에 어떤 요소가 있는지 구조를 만든다.
- 각 요소의 크기와 위치를 계산한다.
- 픽셀로 칠해서 화면에 보여준다.
이 과정을 렌더링이라고 합니다. 화면의 요소가 바뀌면 브라우저는 다시 계산해야 합니다. 위치 계산이 다시 일어나는 일을 리플로우라고 부르고, 다시 그리는 일을 리페인트라고 부릅니다.
이 개념을 알면 AI에게 더 구체적으로 말할 수 있습니다. “버튼 색을 바꿔 줘”와 “버튼을 누를 때 레이아웃이 흔들리지 않도록 수정해 줘”는 전혀 다른 요청입니다.
5. jQuery와 React는 서로 다른 문제를 풀었다
예전에는 브라우저마다 JavaScript 동작 방식이 조금씩 달랐습니다. 개발자는 같은 기능을 여러 브라우저에서 맞추느라 고생했습니다. 이 문제를 쉽게 만들어 준 도구가 jQuery였습니다. DOM 조작을 더 간단하고 일관되게 해준 것입니다.
그 뒤 웹은 더 복잡해졌습니다. 단순히 버튼 하나를 움직이는 수준이 아니라, 로그인 상태, 장바구니, 알림, 실시간 데이터처럼 화면 전체가 계속 변하게 됐습니다.
React는 이 복잡성을 “상태” 중심으로 다루게 해줍니다. 상태란 화면이 기억해야 하는 현재 값입니다. 예를 들어 로그인 여부, 장바구니 개수, 선택된 탭, 검색어 같은 것입니다.
React식 사고는 이렇습니다.
- 상태가 바뀐다.
- 화면은 그 상태에 맞게 다시 그려진다.
- 같은 UI 조각은 컴포넌트로 재사용한다.
바이브 코딩에서 React 코드를 자주 만나는 이유도 여기에 있습니다. 요즘 웹앱은 상태가 많고, 재사용할 UI가 많기 때문입니다.
6. Node.js와 NPM은 프론트엔드를 ‘생태계’로 만들었다
JavaScript는 원래 브라우저 안에서만 움직이는 언어였습니다. 그런데 Node.js가 등장하면서 JavaScript를 서버나 개발 도구에서도 실행할 수 있게 됐습니다.
NPM은 JavaScript 패키지를 설치하고 관리하는 도구입니다. 패키지는 누군가 만들어 둔 코드 묶음입니다. 우리가 직접 모든 기능을 만들지 않고도 날짜 처리, 화면 구성, 아이콘, 빌드 도구를 가져다 쓸 수 있게 해줍니다.
초보자에게 NPM은 조금 무섭게 느껴질 수 있습니다. 하지만 핵심은 간단합니다.
- Node.js: JavaScript를 브라우저 밖에서도 실행하게 해주는 환경
- NPM: 필요한 코드 묶음을 설치하고 관리하는 창고
- package.json: 이 프로젝트가 어떤 패키지에 의존하는지 적어 둔 목록
7. 빌드는 개발용 코드를 배포용 코드로 정리하는 과정이다
요즘 프론트엔드 프로젝트에는 파일이 많습니다. JavaScript, TypeScript, CSS, 이미지, 폰트, 라이브러리가 함께 들어갑니다. 이 상태 그대로 브라우저에 던지면 비효율적입니다.
그래서 빌드가 필요합니다. 빌드는 개발자가 작업하기 좋은 코드를 사용자가 빠르게 볼 수 있는 코드로 정리하는 과정입니다.
대표적인 작업은 다음과 같습니다.
- 트랜스파일링: 최신 문법을 더 넓은 브라우저가 이해할 수 있게 바꾼다.
- 번들링: 여러 파일을 적절히 묶는다.
- 트리쉐이킹: 실제로 쓰지 않는 코드를 덜어낸다.
- 최적화: 파일 크기를 줄이고 로딩 속도를 높인다.
AI에게 “빌드 오류를 고쳐 줘”라고만 말하면 범위가 너무 넓습니다. “NPM 패키지 충돌인지, TypeScript 변환 오류인지, 번들링 단계 오류인지 확인해 줘”라고 말하면 훨씬 정확한 답을 받을 수 있습니다.
8. MPA와 SPA는 페이지를 바꾸는 방식이 다르다
전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 새 HTML을 받아왔습니다. 이것을 MPA, 즉 Multi Page Application이라고 부릅니다.
반면 SPA는 처음에 앱 껍데기를 받아온 뒤, 필요한 데이터만 주고받으며 화면을 바꿉니다. 페이지 전체가 매번 새로고침되지 않기 때문에 앱처럼 부드럽게 느껴집니다.
둘 중 하나가 무조건 좋은 것은 아닙니다.
- MPA: 구조가 단순하고 검색엔진이 이해하기 쉽다.
- SPA: 사용자 경험이 부드럽지만 초기 로딩과 SEO가 어려울 수 있다.
바이브 코딩으로 웹앱을 만들 때 “왜 화면은 바뀌는데 주소는 그대로인가”, “왜 검색엔진에 잘 안 잡히는가” 같은 문제가 생긴다면 이 차이를 떠올리면 됩니다.
9. CSR, SSR, 하이드레이션은 ‘누가 먼저 그리느냐’의 문제다
CSR은 Client Side Rendering입니다. 브라우저가 JavaScript를 받아서 화면을 그리는 방식입니다. 사용자는 처음에 빈 화면을 잠깐 볼 수 있고, 검색엔진도 내용을 늦게 이해할 수 있습니다.
SSR은 Server Side Rendering입니다. 서버가 미리 HTML을 만들어서 브라우저에 보내는 방식입니다. 첫 화면이 빠르게 보이고 검색엔진에도 유리합니다.
하이드레이션은 서버가 먼저 그려 준 HTML에 JavaScript 기능을 붙이는 과정입니다. 겉으로 보이는 화면은 이미 있지만, 버튼 클릭이나 상태 변경 같은 상호작용을 나중에 연결하는 것입니다.
Next.js 같은 프레임워크가 주목받는 이유도 여기에 있습니다. 페이지 성격에 따라 CSR, SSR, 정적 생성 같은 방식을 섞어 쓸 수 있기 때문입니다.
10. API는 프론트엔드와 백엔드 사이의 약속이다
프론트엔드는 사용자가 보는 화면을 담당합니다. 백엔드는 데이터 저장, 인증, 결제, 권한 같은 뒤쪽 일을 맡습니다. 둘 사이에는 데이터를 주고받는 약속이 필요합니다. 이것이 API입니다.
예를 들어 사용자가 로그인 버튼을 누르면 프론트엔드는 백엔드에 “이 아이디와 비밀번호가 맞나요?”라고 요청합니다. 백엔드는 결과를 돌려줍니다. 프론트엔드는 그 결과에 따라 화면을 바꿉니다.
초보자는 API를 “화면과 데이터 창고 사이의 주문서”로 이해하면 됩니다. 어떤 주소로, 어떤 형식의 데이터를 보내고, 어떤 응답을 받을지 정한 약속입니다.
바이브 코딩 초보자가 기억할 핵심 체크리스트
프론트엔드 용어가 쏟아질 때는 아래 질문으로 정리하면 좋습니다.
- 이 기술은 구조, 디자인, 동작, 데이터 중 무엇을 다루는가?
- 이 문제는 브라우저에서 생긴 문제인가, 서버에서 생긴 문제인가?
- 화면이 느린 문제인가, 데이터가 안 오는 문제인가, 상태가 꼬인 문제인가?
- 지금 필요한 것은 기능 구현인가, 빌드 오류 해결인가, 배포 최적화인가?
- AI에게 요청할 때 문제 위치와 기대 결과를 함께 말했는가?
이 다섯 가지를 구분하면 프롬프트가 달라집니다. “잘 안 돼요”가 아니라 “React 상태가 바뀌었는데 화면이 갱신되지 않습니다. 원인을 찾아 주세요”라고 말할 수 있습니다.
함께 읽으면 좋은 글
- 바이브 코딩 입문자가 막히는 이유, 코딩보다 먼저 알아야 할 IT 지도
- AI 시대의 메타인지: 똑똑한 답보다 중요한 ‘내 생각 점검법’
- AI 네이티브 전환법: 디지털 두뇌와 AI 에이전트로 일하는 방식 바꾸기
- 에이전틱 AI 시대, 기업과 개인은 무엇을 바꿔야 살아남을까
FAQ
바이브 코딩을 하려면 프론트엔드를 꼭 배워야 하나요?
전문 개발자처럼 모든 문법을 외울 필요는 없습니다. 다만 HTML, CSS, JavaScript, API, 렌더링 방식 같은 기본 개념을 알면 AI에게 훨씬 정확한 요청을 할 수 있습니다.
React와 Next.js는 같은 건가요?
같지 않습니다. React는 UI를 만들기 위한 라이브러리이고, Next.js는 React를 기반으로 라우팅, 서버 렌더링, 정적 생성, 배포 구조까지 더 넓게 다루는 프레임워크입니다.
CSR과 SSR은 왜 중요한가요?
화면을 브라우저가 그리느냐, 서버가 먼저 그려 보내느냐의 차이입니다. 초기 로딩 속도, 검색엔진 노출, 사용자 경험에 영향을 줍니다.
빌드 오류가 나면 무엇부터 봐야 하나요?
먼저 오류가 패키지 설치 문제인지, 문법 변환 문제인지, 타입 검사 문제인지, 번들링 문제인지 나눠 봐야 합니다. 그다음 오류 메시지와 실행한 명령어를 함께 AI에게 알려 주면 좋습니다.
초보자가 가장 먼저 익혀야 할 프론트엔드 개념은 무엇인가요?
HTML·CSS·JavaScript의 역할, 브라우저 렌더링, 상태, API, 빌드, CSR·SSR의 차이를 먼저 잡는 것이 좋습니다. 이 개념들이 잡히면 React나 Next.js 문서도 덜 낯설게 보입니다.
참고자료
- 양실장의 바이브코딩대학, 비개발자 바이브코더를 위해 만든 프론트엔드 기본 지식
- MDN Web Docs, HTML 기본
- MDN Web Docs, CSS 기본
- MDN Web Docs, JavaScript 기본
- Next.js 공식 문서, Rendering
프론트엔드는 외울 단어가 많은 분야처럼 보이지만, 실제로는 웹이 겪어 온 문제 해결의 역사에 가깝습니다. 문서를 연결하던 웹이 디자인을 입고, 상호작용을 얻고, 앱처럼 움직이고, 다시 검색성과 속도를 고민하게 된 흐름입니다.
바이브 코딩 입문자에게 필요한 것도 바로 이 흐름입니다. 흐름을 알면 AI가 만든 코드를 더 잘 읽고, 더 구체적으로 질문하고, 더 안전하게 수정할 수 있습니다.