입문Frontend · 프론트
프론트엔드
사용자 눈에 보이고 직접 만지는 화면 쪽 영역이에요. 버튼·글자·색이 다 여기죠.
한 줄 비유
식당의 홀이에요. 손님이 앉는 자리, 메뉴판, 인테리어 — 눈에 보이는 전부죠.
바이브코딩에서 언제 만나나
'프론트는 됐고 백엔드가…'라는 말에서 처음 갈려요. 이 둘을 왜 자꾸 나누나 싶죠.
앱을 만들다 보면 “프론트는 됐고 이제 백엔드”라는 말을 들어요. 하나였던 게 갑자기 둘로 갈리니까 어라 싶죠. 이 구분부터 잡으면 이후가 훨씬 쉬워져요.
프론트엔드는 사용자 눈에 보이고 직접 만지는 화면 쪽이에요. 버튼, 글자, 색깔, 배치 — 우리가 화면에서 보는 전부가 여기죠. 식당으로 치면 홀이에요. 손님이 앉는 자리, 메뉴판, 인테리어처럼 겉으로 드러나는 부분이요.
사용자가 “예쁘다 / 불편하다”를 느끼는 건 대부분 프론트엔드예요.
바이브코딩으로 만드는 대부분의 첫 결과물이 프론트엔드예요. 화면이 뜨고 버튼이 눌리는 그 부분이죠. 그러다 “로그인 상태를 저장해야 해”, “데이터를 어딘가 보관해야 해” 같은 게 필요해지면, 그때 뒤쪽 영역인 백엔드가 등장해요.
30초 확인 퀴즈
'프론트엔드'가 담당하는 영역으로 가장 알맞은 건?
프론트엔드는 사용자가 보고 만지는 화면(버튼·글자·레이아웃)을 담당해요. 뒤에서 처리하는 쪽은 백엔드예요.