프론트엔드

프론트엔드(frontend)는 사용자 브라우저에서 돌아가며 눈에 보이는 화면과 버튼 반응을 만드는 부분이에요. 식당으로 치면 손님이 앉는 홀, 메뉴판, 주문 받는 직원이에요.

글 서순명(솔리드그루 이사 · 퓨쳐인프라 운영) · 2026-10-29 작성 · 예시는 2026-10-29 Windows 11 · 크롬 헤드리스로 직접 확인

프론트엔드 화면은 어떻게 생겨나요?

주소창에 사이트 주소를 넣으면 서버가 파일 몇 개를 보내 줘요. 브라우저는 그 파일을 받아 위에서부터 읽고 화면을 그려요. 그다음 자바스크립트를 실행해 목록을 채우거나 버튼에 반응을 붙여요.

MDN 웹 문서는 이 과정을 이렇게 설명해요. 웹 페이지를 열면 브라우저가 화면 쪽 코드를 내려받아 실행하고 보여 준다고요(MDN 자바스크립트란). 그래서 같은 사이트라도 컴퓨터마다, 브라우저마다 조금씩 다르게 보일 수 있어요.

HTML·CSS·자바스크립트는 각각 뭘 해요?

MDN은 세 가지를 층층이 쌓인 케이크에 빗대요. 아래층이 있어야 위층을 올릴 수 있어요.

자바스크립트 자체가 궁금하면 자바스크립트 뜻을 이어서 읽어 보세요.

직접 해 보면 어떻게 나오나요?

2026-10-29 Windows 11 PC에서 크롬 155.0.8059.39 를 화면 없는 모드(헤드리스)로 돌려 확인했어요. 세 가지 언어가 한 파일에 다 들어 있는 메뉴판이에요.

$ cat menu.html   (HTML·CSS·자바스크립트 세 가지가 한 파일에)
<!doctype html>
<html lang="ko"><head><meta charset="utf-8"><title>메뉴</title>
<style>body{font-family:sans-serif} .sold{color:#999;text-decoration:line-through}</style></head>
<body>
<h1>오늘의 메뉴</h1>
<ul id="menu"></ul>
<script>
  const items = [{ name: "아메리카노", price: 4000 }, { name: "라떼", price: 4500, sold: true }];
  document.getElementById("menu").innerHTML = items
    .map(i => `<li class="${i.sold ? "sold" : ""}">${i.name} ${i.price.toLocaleString("ko-KR")}원</li>`).join("");
</script>
</body></html>

$ grep -c "4,000원" menu.html   (파일 안에는 "4,000원"이라는 글자가 없어요)
0

$ chrome --headless --dump-dom menu.html   (브라우저가 자바스크립트를 돌린 뒤 화면, 메뉴 부분만)
<ul id="menu"><li class="">아메리카노 4,000원</li><li class="sold">라떼 4,500원</li></ul>

• 파일 안에서 "4,000원"을 찾으면 0개예요. 파일에는 숫자 4000만 있고, 빈 목록 칸(ul)만 있어요.
• 브라우저가 자바스크립트를 실행하자 "아메리카노 4,000원" 줄이 생겼어요. 쉼표를 찍은 것도 브라우저가 한 일이에요.
• 라떼 줄에는 "sold" 표시가 붙어서, CSS가 회색 취소선으로 바꿔 보여 줘요.

정리하면 서버가 보낸 건 "재료와 조리법"이고, 화면을 완성하는 건 사용자 브라우저예요. 이게 프론트엔드의 핵심이에요.

React 같은 건 뭐예요?

화면이 커지면 HTML·자바스크립트를 손으로 다 짜기 힘들어요. 그래서 화면을 부품(컴포넌트)으로 나눠 조립하게 도와주는 도구를 써요. React, Vue, Angular 같은 이름이 여기에 들어가요.

AI가 만든 프로젝트에 React 같은 이름이 보이면, 화면을 부품으로 나눠 만들었다는 뜻이에요. 이름만 알아 둬도 폴더 구조가 덜 낯설어요. 도구별 차이는 바이브코딩 툴 비교에 정리해 뒀어요.

프론트엔드와 백엔드는 어디서 나눠요?

기준은 하나예요. "사용자가 고쳐도 괜찮은 일인가?" 괜찮으면 프론트엔드, 안 되면 백엔드예요.

둘을 다 만들고 데이터베이스까지 잇는 걸 풀스택이라고 불러요.

AI에게 화면을 부탁할 때는 어떻게 말해요?

클로드 코드나 커서는 말 한마디에 여러 파일을 고쳐요. 범위와 기준을 같이 주면 결과가 훨씬 안정적이에요. 특히 휴대폰 화면 기준을 꼭 말해 주세요. 말하지 않으면 PC 화면에서만 예쁘게 나올 때가 있어요.

자주 하는 오해와 주의할 점

• "프론트엔드 = 디자인" — 디자인은 어떻게 보일지 정하는 일이고, 프론트엔드는 그걸 실제로 움직이는 코드로 만드는 일이에요.
• 화면 코드에 API 키 넣기 — 브라우저에서 "페이지 소스 보기"만 눌러도 보여요. 키는 백엔드에 둬요(API 키 뜻).
• 사용자 글을 innerHTML로 바로 넣기 — 위 예시는 내가 정한 메뉴 이름이라 괜찮아요. 손님이 쓴 글을 그대로 넣으면 남의 스크립트가 실행될 수 있어요. 글자는 textContent로 넣어요(MDN innerHTML 보안 안내).

퓨쳐인프라에서는 어떻게 올리나요?

만든 화면을 도커 이미지로 묶어 퓨쳐인프라 앱 호스팅에 올리면 주소와 HTTPS가 함께 붙어요. 앱 하나를 켜 두면 월 5,500원(부가세 포함)이고, 분 단위로 계산해요. 내 도메인을 연결하면 HTTPS 인증서도 같이 받아요.

나중에 백엔드와 데이터베이스가 필요해지면 같은 앱에 데이터베이스를 붙이면 돼요(월 2,200원 추가).

자주 묻는 질문

프론트엔드와 퍼블리셔는 뭐가 달라요?

퍼블리셔는 주로 디자인 시안을 HTML·CSS로 옮기는 일을 해요. 프론트엔드 개발자는 여기에 자바스크립트로 동작을 붙이고 서버와 데이터를 주고받는 일까지 해요. 회사마다 나누는 선은 조금씩 달라요.

프론트엔드만으로 만들 수 있는 건 뭐예요?

회사 소개 페이지, 계산기, 간단한 게임처럼 데이터를 남과 나누지 않는 것은 화면만으로 돼요. 회원가입이나 주문처럼 저장이 필요하면 백엔드가 있어야 해요.

내 화면이 휴대폰에서 깨져 보이면 뭘 고쳐요?

대부분 CSS 문제예요. AI에게 '휴대폰 너비 375px에서 깨지는 부분을 찾아 고쳐 줘'라고 화면 너비를 숫자로 말하면 찾기 쉬워요.

프론트엔드 코드를 숨길 방법은 없어요?

브라우저가 실행하려면 코드를 받아야 해서 완전히 숨길 수는 없어요. 읽기 어렵게 압축할 수는 있지만, 숨겨야 하는 것은 처음부터 백엔드에 두는 게 맞아요.

관련 용어

• 백엔드 — 화면이 보낸 요청을 검사하고 저장하는 서버 쪽
• 풀스택 — 화면·서버·데이터베이스를 한 번에 만드는 것
• 자바스크립트 — 화면에 움직임을 붙이는 언어
• React — 화면을 부품으로 나눠 만드는 도구
• 바이브코딩 — AI에게 말로 앱을 만드는 방식