프론트엔드(Frontend)

프론트엔드(Frontend)

웹사이트의 '얼굴'을 만드는 프론트엔드에 대해 알아봅니다. 사용자가 직접 보고 상호작용하는 모든 요소를 개발하는 프론트엔드의 역할, 핵심 기술 스택, 그리고 백엔드와의 관계에 대해 정리했습니다.

목차

• 프론트엔드란?
• 핵심 기술 스택
• 프론트엔드와 백엔드의 차이
• 프론트엔드 정보 요약

---

프론트엔드란?

프론트엔드(Frontend)는 웹사이트나 애플리케이션에서 사용자가 직접 보고 상호작용하는 모든 부분을 말합니다. 🎨 사용자가 웹사이트에 접속했을 때 보이는 디자인, 레이아웃, 버튼, 이미지, 텍스트 등 시각적인 요소와 함께, 버튼을 클릭하거나 텍스트를 입력하는 등의 사용자 상호작용을 담당하는 영역입니다.

프론트엔드 개발자는 디자이너가 만든 시안을 코드로 구현하고, 사용자가 불편함 없이 웹을 이용할 수 있도록 웹 접근성과 사용자 경험(UX)을 개선하는 일을 합니다.

---

핵심 기술 스택

프론트엔드 개발의 3대 핵심 기술은 다음과 같습니다.

• ✅ HTML(HyperText Markup Language)

  웹 페이지의 뼈대를 만드는 마크업 언어입니다. 제목, 단락, 이미지, 링크 등 웹 페이지의 구조와 콘텐츠를 정의합니다.

• ✅ CSS(Cascading Style Sheets)

  HTML로 만들어진 구조에 스타일을 입히는 언어입니다. 색상, 폰트, 크기, 레이아웃 등 시각적인 디자인을 담당합니다.

• ✅ JavaScript(JS)

  웹 페이지를 동적으로 만드는 프로그래밍 언어입니다. 사용자의 행동에 반응하여 콘텐츠를 변경하거나, 애니메이션 효과를 추가하는 등 상호작용을 구현합니다.

최근에는 이러한 기본 기술 외에 React, Vue.js, Angular와 같은 자바스크립트 라이브러리 및 프레임워크를 활용하여 복잡한 웹 애플리케이션을 효율적으로 개발합니다.

---

프론트엔드와 백엔드의 차이

웹 개발은 크게 프론트엔드와 백엔드로 나뉩니다.

• 프론트엔드(Frontend): 사용자가 직접 보는 화면을 담당합니다. (예: 웹사이트의 디자인, 버튼, 레이아웃 등)
• 백엔드(Backend): 사용자에게는 보이지 않는 서버, 데이터베이스 등 웹사이트의 내부 로직을 담당합니다. (예: 회원 정보 관리, 결제 처리, 데이터 저장 등)

프론트엔드는 백엔드에서 전달받은 데이터를 화면에 보여주고, 사용자의 입력 정보를 백엔드로 전달하는 역할을 합니다. 이 둘은 API(Application Programming Interface)를 통해 데이터를 주고받으며 하나의 웹 서비스를 완성합니다.

---

프론트엔드 정보 요약

항목	설명
정의	사용자가 직접 상호작용하는 웹사이트의 시각적 영역
주요 역할	사용자 인터페이스(UI), 사용자 경험(UX) 구현
핵심 기술	HTML, CSS, JavaScript
주요 도구	React, Vue.js, Angular 등