웹 기본
프론트엔드(Frontend)
프론트엔드(Frontend)은(는) 바이브 코딩 중 자주 마주치는 핵심 개념입니다. 정의만 외우기보다 실제 작업 흐름에서 어떤 역할을 하는지 이해하는 것이 중요합니다.
쉬운 설명
사용자가 보고 클릭하는 화면과 상호작용을 담당하는 영역.
배경과 쓰임까지 이해하기
조금 더 자세히
프론트엔드(Frontend)는 사용자가 직접 보고 누르는 화면 쪽입니다. 보통 웹사이트나 앱에서 버튼, 검색창, 메뉴, 카드 목록, 폼, 애니메이션, 반응형 레이아웃처럼 브라우저에 보이는 부분을 담당합니다. 예를 들어 React 컴포넌트 만들기, CSS 스타일링, API 데이터 표시, 로딩 상태 처리, 모바일 화면 대응, 접근성 개선 등이 프론트엔드 작업에 들어갑니다.
사용자의 첫인상과 사용성이 많이 결정되는 영역이지만, 데이터나 비밀값 처리는 보통 백엔드(Backend)와 나누어 다룹니다. 한마디로, 프론트엔드(Frontend)는 사용자가 만지는 제품의 화면과 상호작용을 만드는 영역입니다.
실제로는 이렇게 만나요
검색창, 필터 버튼, 카드 목록, 상세 페이지 UI는 프론트엔드(Frontend)에 속합니다.
- 이런 거 할 때 나와요 바이브 코딩 결과물은 대부분 먼저 화면으로 확인됩니다. 프론트엔드(Frontend)를 이해하면 레이아웃, 상태, 접근성 문제를 더 잘 설명할 수 있습니다.
- 이렇게 생겼어요 프론트엔드(Frontend)은(는) Backend, Client, React 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
- 나오는 화면 예시 웹 기본 작업을 하다가 Backend, Client, React를 확인하는 화면
헷갈리기 쉬운 점
화면이 예뻐 보여도 데이터 로딩, 모바일 반응형, 키보드 접근성이 빠질 수 있습니다.
왜 알아두면 좋을까요?
바이브 코딩 결과물은 대부분 먼저 화면으로 확인됩니다. 프론트엔드(Frontend)를 이해하면 레이아웃, 상태, 접근성 문제를 더 잘 설명할 수 있습니다.
Checklist
실제로 볼 때 확인할 것
- 01
모바일 화면을 확인한다
- 02
버튼과 링크의 역할을 구분한다
- 03
로딩/빈 상태를 준비한다