프론트엔드 스터디 첫 시간입니다. 이번 주에는 프론트엔드 개발자가 실무에서 어떤 일을 하는지, 기술 스택은 어떻게 변하고 있는지, 그리고 우리가 앞으로 뭘 배울 건지 전체적인 그림을 잡아보겠습니다.
다음 주부터 매주 올라가는 스터디 자료는 아래와 같은 구조로 되어 있습니다.
프론트엔드 개발자가 하는 일을 기본 업무부터 심화 업무까지 정리해봤습니다.
프론트엔드 생태계는 변화가 빠릅니다. "자바스크립트 피로감(JS Fatigue)"이라는 말이 있을 정도예요. State of JS 2024 설문에 따르면 응답자의 67%가 JavaScript보다 TypeScript를 더 많이 쓴다고 답했고, Vite와 Vitest가 빌드·테스트 도구 만족도 1위를 차지했습니다.
이걸 다 배워야 하나 싶겠지만, 도구는 계속 바뀌어도
자바스크립트의 동작 원리와 브라우저가 화면을 그리는 원리는 변하지 않습니다.
그래서 기초가 중요합니다.
프론트엔드를 배우고 나면 갈 수 있는 방향은 여러 가지입니다.
| 방향 | 설명 |
|---|---|
| 웹 프론트엔드 | 가장 일반적인 경로입니다. 기본기와 성능 최적화 경험이 차별 포인트가 됩니다. |
| 디자인 시스템 엔지니어 | 디자인과 개발의 간극을 줄이는 역할입니다. UI 아키텍처를 전문적으로 설계합니다. |
| PWA / 웹앱 전문가 | 앱스토어 없이 브라우저만으로 네이티브 앱 수준의 경험을 제공하는 영역입니다. |
| 풀스택 | Next.js 덕분에 프론트엔드 개발자가 서버 로직까지 다루기 쉬워졌습니다. 스타트업에서 선호합니다. |
| PM / PO | 기획·디자인·기술을 모두 이해하는 프로덕트 오너로 전향하는 경우도 있습니다. |
아래 수치는 그룹바이, 코드트리 등 여러 채용 플랫폼의 2025년 데이터를 종합한 것입니다.
| 구분 | 평균 연봉 (추정치) | 비고 |
|---|---|---|
| 신입 ~ 1년차 | 약 3,200 ~ 4,000만 원 | 대기업·빅테크는 6,000만 원 이상에서 시작하기도 합니다. |
| 2 ~ 4년차 | 약 4,500 ~ 7,000만 원 | 이직을 통한 연봉 점프가 가장 활발한 구간입니다. |
| 5 ~ 10년차 | 약 7,000만 원 ~ 1억 이상 | 시니어는 코드만 잘 짜는 게 아니라 시스템을 설계하는 역할입니다. |
최근 IT 채용 시장은 신규 채용 규모가 줄고, 신입보다 경력직을 선호하는 경향이 뚜렷합니다. 2025년 네카라쿠배당토 가운데 네이버를 제외한 나머지 기업들은 올해 신입 IT 개발자 공개 채용 계획이 없다고 밝혔습니다. AI가 단순 코딩 업무를 대체하면서 3년 이상 경력자에 대한 수요는 유지되지만, 신입 채용의 문턱은 높아지고 있습니다.
그래서 자신만의 기술적 고민과 트러블슈팅 경험, 문서화 역량, 탄탄한 자바스크립트 기본기를 꾸준히 보여주는 것이 중요합니다. 프로젝트 경험이 가장 핵심적인 평가 요소라는 점도 기억해두세요.
매주 스터디 자료 마지막에는 조금 고민이 필요한 질문을 하나씩 낼 예정입니다. 단순 암기가 아니라, 왜 그런지 스스로 생각해보는 과정이 중요하거든요. 맛보기로 하나 내보겠습니다.
Q. JavaScript에서 1 + 1 === 2의 결과가 false가 될 수 있습니다. 어떤
경우에 그럴까요?
(힌트: 자바스크립트에서 숫자를 다루는 방식, 특히 소수점과 관련이 있습니다.
0.1 + 0.2 === 0.3을 콘솔에 찍어보세요.)
이런 식으로 "당연하다고 생각했는데 왜?" 같은 질문을 낼 거예요. 정답보다는 고민하는 과정이 중요합니다.
<strong> 태그를 사용한 것입니다. 눈에는 똑같이 보이는데, 왜 실무에서는 <strong> 같은 시맨틱 태그를 써야 한다고 할까요?(힌트: 검색 엔진과 스크린 리더기가 이 둘을 다르게 인식합니다.)
전부 읽을 필요는 없습니다. 제목 보고 끌리는 것부터 하나씩 읽어보세요.
브라우저 렌더링 원리 (MDN 공식 문서): Critical Rendering Path를 깊이 알고 싶다면. 한국어 번역이 되어 있습니다.
State of JavaScript 2024: 전 세계 개발자들이 어떤 도구를 쓰는지 데이터로 확인할 수 있습니다. 영어지만 차트만 봐도 트렌드가 보입니다.
개발자 연봉 및 채용 관련: 연봉이 궁금하거나 취업 준비 방향을 잡고 싶을 때 참고하세요.
프론트엔드 트렌드: 기술 스택 변화와 AI 시대의 프론트엔드 흐름을 정리한 글들입니다.
웹 렌더링 방식 비교 (web.dev): SSR, CSR, SSG 같은 용어가 나중에 나올 때 참고할 구글 공식 가이드입니다. 지금 당장은 안 읽어도 됩니다.
다음 주부터는 HTML 기초 문법과 구조를 배웁니다. 각 태그의 역할과 웹 페이지를 구성하는 기본 원리를 다룰 예정입니다.
아래 영상의 1주차 진도 구간(00:00:00 ~ 01:36:21)을 시청해주세요. 개발 환경 세팅부터 표(Table) 만들기까지의 내용입니다.
제대로 파는 HTML & CSS - 1주차 구간 시청하기