프론트엔드 개발자

프론트엔드 커리어 길잡이:
공부부터 채용까지

글 미리보기

1. 프론트엔드 개발자가 하는 일과 미래 유망성
2. AI 시대, 프론트엔드 개발이 경쟁력 있는 이유
3. 프론트엔드 개발자가 되기 위한 기술 스택
4. 현실적인 프론트엔드 공부 방식 세 가지
5. 채용을 위한 프론트엔드 포트폴리오 작성 비법
6. 커뮤니티와 네트워킹의 힘

1. 프론트엔드 개발자가 하는 일과 미래 유망성

사용자와 맞닿아 있는 영역을 만드는 사람, 사용자 경험(UX, User eXperience)을 고려하여 사용자 인터페이스(UI, User Interface)를 구현하는 사람, 프론트엔드 개발자는 어떤 일을 할까요?

프론트엔드란?

먼저, 프론트엔드 뜻을 알아보겠습니다. 프론트엔드(front-end)는 ‘앞’을 의미하는 프론트(front)와 ‘단면’을 의미하는 엔드(end)를 합쳐서 ‘앞면’, ‘앞단’이라는 뜻입니다. 백엔드(back-end)는 ‘뒷면’, ‘뒷단’을 의미합니다. 즉, 프론트엔드는 프로세스의 첫 단계, 백엔드는 마지막 단계입니다.

여기서 ‘앞’이란, 사용자와 직접 만나는 접점입니다. 사용자 눈에 보이고 체험할 수 있는 모든 부분을 가리킵니다. 예를 들어, 프론트엔드 개발을 공부하기 위해 커널 아카데미에 접속했다고 생각해 보세요. 웹사이트 메인 화면에 보이는 좌우로 움직이는 이미지 배너, 상단에 있는 카테고리, 강의 내용을 소개하는 섬네일 이미지와 텍스트, 눈에 잘 보이게 만든 버튼 등 모든 것이 프론트엔드이며, 프론트엔드 개발자들이 만든 결과물입니다.

2. AI 시대, 프론트엔드 개발이 경쟁력 있는 이유

AI가 대체할 수 없는 프론트엔드 개발자의 근본적인 역할과 매력은 여전히 존재합니다. AI가 코드를 빠르게 만들더라도 서비스에 적용하고 책임지는 역할은 사람이 합니다. 돌발 상황을 파악하여 문제를 정의하고 해결책을 제시하는 능력, 디자인 이해 능력, 소통력과 협동심을 가진 프론트엔드 개발자가 필요합니다. 서비스 기획력과 비즈니스 마인드도 갖춘다면, 앞으로 경쟁력 있는 프론트엔드 개발자로 인정받을 수 있습니다.

프론트엔드 개발자의 장점
프론트엔드 개발자는 코드 작성만 하는 사람이 아닙니다. 그 이상의 복합적인 업무를 담당합니다. AI 답변만으로는 채울 수 없는 것들을 인간 개발자가 채울 수 있습니다. 코드 작성 외의 일도 수행할 수 있는 역량을 기르면 AI 시대에 경쟁력 있는 프론트엔드 개발자가 될 수 있다는 의미이기도 합니다.

사람들과 의견을 나누고 소통하며 가장 적합한 결론을 도출하는 일 역시 인간 개발자만이 할 수 있습니다. 웹 서비스를 만들기 위해서는 기획자, 디자이너, 백엔드 개발자, QA(Quality Assurance) 등 여러 실무자들과 협업하기 때문이죠. 업무 소통뿐 아니라 공감과 격려와 같은 인성 역시 귀중한 역할입니다. 또, 실무자들의 상황과 프로젝트의 요구 사항을 고려하여 전체적인 일정을 조율하는 역량도 있어야 합니다. 다른 분야 지식이 있다면 더 원활한 소통으로 상호를 배려하는 상생 관계가 가능합니다.

3. 프론트엔드 개발자가 되기 위한 기술 스택

프론트엔드 개발자가 되려면 어떤 기술 스택(Tech Stack)이 있어야 할까요? 크게 나누자면, 기본 언어, 개발 도구인 프레임워크, 기타 기술을 알아야 합니다.

프론트엔드 언어

먼저, 언어를 알아보겠습니다. 각 언어의 개념과 기초 문법을 익혀야 하는데요. HTML(Hyper Text Markup Language) 언어는 콘텐츠 구조를 정의하고, CSS(Cascading Style Sheet) 언어는 웹 페이지 스타일을 꾸미고, 자바스크립트(JavaScript) 언어는 웹 페이지가 동적으로 기능하게 합니다. 이러한 언어를 이용해 뼈대를 만들고 디자인을 입힌 다음에 움직이는 순서로 개발합니다.

프론트엔드 개발 도구

다음으로, 언어를 써먹을 개발 도구를 배워 볼까요? 자바스크립트 프레임 워크는 리액트(React), 뷰(Vue.js), 앵귤러(Angular) 등이 있고, CSS 프레임 워크는 테일윈드 CSS(Tailwind CSS), 부트스트랩(Bootstrap) 등이 있습니다.

이렇듯 프론트엔드 개발자는 중간에서 데이터를 관리하고 시각화합니다. 보이지 않는 부분과 보이는 부분에 모두 관여하며, 궁극적으로 해당 서비스를 사용자가 편리하게 자주 이용하도록 하는 중요한 역할을 합니다. 스마트폰이 보편화되면서 모바일 앱 개발 역시 빼놓을 수 없는 분야가 되었는데요. 따라서 프론트엔드 개발자는 다양한 환경에 적합하게 개발할 줄 알아야 합니다. 리액트 문법과 자바스크립트 언어로 모바일 앱을 개발하는 프레임 워크 ‘리액트 네이티브(React Native)’, 다트 (Dart) 언어로 개발하는 프레임 워크 ‘플러터(Flutter)’도 학습해야 합니다.

그 밖에, 소스 코드의 변경 사항을 관리하는 코드 저장 관리 시스템 ‘깃(Git)’, 프로젝트가 의존하고 있는 패키지를 설치, 관리, 갱신, 삭제 등으로 관리하는 시스템 ‘패키지 매니저(NPM, Yarn)’, 개발 도구인 코드 에디터(VSCode, Sublime Text), 디자인 툴(Figma, Sketch) 같은 다양한 도구를 활용하는 법도 습득합니다.

4. 현실적인 프론트엔드 공부 방식 세 가지

프론트엔드 로드맵

프론트엔드 개발 공부, 어디서부터 어떻게 시작해야 할까요? 앞서 소개드렸던 기술 스택뿐 아니라, ‘프론트엔드 로드맵’을 확인하길 추천합니다.

큰 그림을 파악하면, 본인이 다룰 줄 모르는 기술 스택이 무엇이고, 앞으로 어느 단계를 거쳐 프론트엔드 개발자가 될지 알 수 있을 것입니다.

프론트엔드 개발자로 일하고 있는 실무자가 운영하는 블로그, IT 기업이 운영하는 블로그를 살펴보는 것도 좋습니다. 현업에서의 실제 사례를 담은 이야기를 통해 현실을 간접 경험하고, 동기 부여도 받을 수 있습니다. 본인이 직접 블로그를 운영하며 프론트엔드 개발자로서의 도전 과정을 기록, 공부 내용을 복습하는 방법도 있습니다.

국비 지원 강의도 하나의 방법입니다. 국비 지원 교육제도란, 고용노동부가 직업 훈련이 필요한 취업 준비생과 이직 예정자들에게 교육비를 지원하는 제도인데요. 말 그대로 국비를 지원하기 때문에, 경제 자립을 하기 전인 취업 준비생이나, 비용을 아끼고 싶은 이직 예정자에게는 비용 부담이 없는 점이 장점입니다. 또한 비전공자로 독학을 꿈꾸고 있다면, 단계별 공부 방법을 통해 프론트엔드와 친해지는 것도 좋은 방법입니다.

5. 채용을 위한 프론트엔드 포트폴리오 작성 비법

프론트엔드 개발자 채용 준비

프론트엔드 개발자로 채용되기 위한 준비는 어떻게 하면 좋을까요? 프론트엔드 개발자 포트폴리오는 개발 능력과 디자인 경험을 증명하는 자기 홍보 수단입니다. 포트폴리오는 이름, 연락처 등 기본 정보와 본인의 강점을 표현하는 간단한 소개 문구, 본인이 보유한 기술과 활용 수준, 대표 프로젝트 내용과 성과, 프로젝트와 연관된 링크, 본인이 운영하는 블로그 링크로 구성합니다.

프론트엔드 포트폴리오 작성 비법

신입 프론트엔드 개발자는 포트폴리오를 통해 부족한 실무 경험을 보완하고 창의성과 잠재 역량을 어필해야 합니다. 단순히 개인 정보를 나열한 이력서와 자기소개서보다 포트폴리오를 더 유심히 보는 기업 채용 담당자가 많은 편입니다. 채용 담당자는 프론트엔드 개발 직무 신입 지원자에게 경력자 수준의 기술을 기대하지도 요구하지도 않습니다. 성실하게 쌓은 기본기, 프로젝트를 통한 최선의 경험, 커뮤니케이션 방식과 인성을 궁금해합니다.

그렇다면, 채용 담당자가 매력을 느낄만한 프로젝트는 무엇일까요? 자신이 관심이 있고 쉽게 접근할 수 있는 주제로 서비스를 만들어 보고 그 과정을 포트폴리오로 기록하길 추천합니다. 혹은 지원하고자 하는 회사가 운영하는 서비스와 연관된 프로젝트를 진행해 보거나, 해당 회사의 서비스를 프론트엔드 개발자의 눈으로 분석하여 개선점을 제안하는 내용을 넣는 것도 좋습니다. 분석력과 문제해결 능력, 적극적이고 능동적인 성향을 어필할 수 있습니다.

프론트엔드 포트폴리오는 경험과 결과물을 바탕으로 작성해 설득력을 강화해야 합니다. 실무 경험이 없다고 해서 절망하지 마세요. 실제 업무 경험이 없더라도, 본인이 실제 겪은 경험을 토대로 근거를 마련합니다. 실패한 이야기는 실패한 이유와 극복 과정을, 성공한 결과는 성공 비결과 성과로 채웁니다. 단순히 결과만 기록하지 않고, 문제를 해결하기 위해 어떤 고민을 했고 어떤 행동을 했는지 과정을 포함해야 합니다.

독학을 했다면 실전 프로젝트를 할 기회가 없고 포트폴리오의 매력도 떨어지겠죠? 따라서, 실전 프로젝트를 할 수 있는 강의를 수강하는 게 더 유리합니다. 포트폴리오 자체를 검토받고 수정하는 기회 또한 강의 수강을 통해 가능한 점입니다.

6. 커뮤니티와 네트워킹의 힘

비전공자가 프론트엔드 개발자가 되기 위해서는 기초적 실력뿐 아니라, 자신만의 특색이 중요합니다. 자신의 현재 수준이 어느 정도인지, 다른 개발자들과 차별화하는 독특한 경력이 있는지, 보완할 점은 무엇인지를 살펴볼 필요가 있습니다. 자신이 적합한 인재라는 근거와 비전공자인데 프론트엔드 개발이 간절히 하고 싶은 이유를 바탕으로 채용 담당자를 설득해야 합니다.

프론트엔드 부트캠프가 가진 강점

이러한 사항을 파악하기 위해서, 온라인 커뮤니티, 오프라인 모임 등으로 같은 목표를 바라보는 사람들과 교류하는 것을 권합니다. 커널 아카데미 프론트엔드 개발 부트캠프는 미니 프로젝트, 협업 프로젝트, 기업 연계 프로젝트 등 동료와의 협업 활동 프로그램이 탄탄합니다. 특히 비전공자로 시작해서 우아한형제들 기술이사, 프론트엔드 개발 그룹장까지 맡았던 김민태 강사와 함께 할 수 있다는 장점이 있죠. 김민태 강사는 2013년 5월 60만 명이던 방문자를 2023년 12월 1,900만 명까지 끌어올리며 배달업계 1위를 달성한 이력이 있는데요, 이러한 성과를 바탕으로 현재 개발 교육 11년 차, 1,500명 이상의 주니어 개발자를 교육해 온 베테랑 강사이기도 합니다.

수강을 하며 배운 프론트엔드 개념과 기술 스택을 바로 적용해 보도록 실전 프로젝트까지 경험할 수 있어 개념 학습과 기술 활용 능력을 모두 얻어갈 수 있습니다. 또한, 프로젝트 과정에서 다진 탄탄한 기본기를 녹여 포트폴리오까지 잘 만들어 둔다면 취업에도 도움이 될 수 있습니다. 정규 수업이 끝난 후에도 그룹 스터디를 취업 스터디로 이어서 진행해서 취업과 사업 등 실질적인 성과를 이뤄낸 학생들도 있습니다.

서비스는 결국 많은 사람이 함께 완성해 나가는 여정입니다. 여럿이 함께 협업하고 서비스를 실제로 완성해 보는 연습이 필수입니다. 강의에서 만난 사람들과 같이 커뮤니케이션 능력과 적응력, 문제 해결 능력과 창의력을 키워 보세요.

아직도 프론트엔드 개발 공부를 망설이고 있나요? 배움과 성장에는 그 무엇보다 의지와 열정이 더 중요합니다. 커널 아카데미의 온라인 국비 지원 교육 강의와 부트캠프에서 단계별로 학습하고 차근차근 같이 성장해 보세요!

*패스트캠퍼스 부트캠프가 '커널 아카데미'로 명칭이 변경되었습니다.