Frontend
프론트엔드
웹사이트나 앱에서 사용자가 직접 보고 만지는 화면 부분을 만드는 영역으로, 버튼·메뉴·애니메이션처럼 눈에 보이는 모든 것을 다루는 개발 분야입니다.
쉽게 말하면?
음식점에 비유하면 프론트엔드는 '홀'입니다. 손님이 앉는 자리, 메뉴판, 종업원의 응대 — 직접 보고 경험하는 모든 것이 프론트엔드입니다. 한국에서 토스·당근·배민의 화면을 만드는 사람들이 모두 프론트엔드 개발자입니다. 2010년대 초반까지는 단순히 HTML·CSS·JavaScript만 알면 됐지만, 지금은 React·Next.js·TypeScript·Tailwind 같은 도구가 표준이 됐습니다. AI 시대에는 v0·Cursor 같은 도구가 화면 코드를 자동으로 그려 주어, 비전공자도 프론트엔드를 직접 만들 수 있게 됐습니다.
한 줄로 비유하면?
프론트엔드는 식당의 '홀'이고, 백엔드는 '주방'입니다. 손님은 홀에서 모든 것을 경험합니다.
어디에 쓰이나?
당근마켓 · 모바일 웹
당근마켓 웹 화면은 React + Next.js로 만들어진 프론트엔드입니다.
결과: 사용자가 떠나지 않고 머무는 시간이 길어집니다.
v0 · AI가 만든 프론트엔드
Vercel의 v0는 'AI for Everyone 같은 사이트 만들어 줘'라고 한 줄 입력하면 즉시 Next.js 프론트엔드 코드를 생성합니다.
결과: 비전공자가 1시간 안에 첫 화면을 가질 수 있습니다.
주의할 점은?
프론트엔드가 AI 시대에 가장 빠르게 바뀌고 있는 분야인 이유는 세 가지입니다.
첫째, AI가 가장 잘 만드는 코드가 프론트엔드 코드입니다. 화면은 패턴이 반복되고 정답이 비교적 명확해서 AI가 정확한 결과를 냅니다. v0·Bolt·Lovable 같은 도구가 한 줄 설명만으로 완성된 화면을 만듭니다.
둘째, 표준이 명확합니다. React가 사실상 표준이 되었고, Next.js·TypeScript·Tailwind CSS 조합이 대형 서비스의 기본 스택입니다. State of JS 2024에서 한국 응답자의 78%가 이 조합을 쓴다고 답했습니다 [State of JS 2024].
셋째, 비전공자가 가장 먼저 도전할 수 있는 영역입니다. Figma·v0·Vercel 조합만 있으면 디자이너·기획자가 직접 코드를 만지지 않고도 화면을 띄울 수 있습니다.
어떻게 발전해 왔나?
Frontend vs Backend — 무엇이 다른가?
관련 태그
참고 자료
- MDN — 프론트엔드 학습 공식 가이드 · Mozilla · 2026 접속 — https://developer.mozilla.org/ko/docs/Learn/Front-end_web_developer
- State of JS 2024 — 프론트엔드 도구 통계 · Devographics · 2025 — https://stateofjs.com/
- React 공식 문서 — 표준 프레임워크 · Meta · 2025 — https://react.dev/
- Vercel Blog — v0 사용자 통계 · Vercel · 2024 — https://vercel.com/blog
- 당근 기술 블로그 — 프론트엔드 운영 사례 · 당근마켓 · 2024 — https://medium.com/daangn
- Stack Overflow Survey 2024 — 프론트엔드 개발자 비율 · Stack Overflow · 2024 — https://survey.stackoverflow.co/2024/
대표 출처
MDN Web Docs이 페이지에 대한 의견을 남겨주세요
여러분의 의견은 다음 갱신에 반영됩니다.