프론트엔드 개발 공부,
비전공자도 도전해 볼 만한 이유
글 미리보기
1. 소비자와 맞닿은 부분을 만드는 프론트엔드 개발자
2. 뒷단과 앞단, 앞단과 사용자를 연결하는 역할의 중요성
3. 게임 퀘스트 깨듯 단계별로 공부해 보기
4. 실력 있는 프론트엔드 개발자가 되는 지름길
1. 소비자와 맞닿은 부분을 만드는 프론트엔드 개발자
프론트엔드(front-end)는 ‘앞’을 의미하는 프론트(front)와 ‘끝’, ‘단면’을 의미하는 엔드(end)를 합쳐서 ‘앞면’, ‘앞단’이라는 뜻입니다. 그렇다면 백엔드(back-end)는 ‘뒷면’, ‘뒷단’을 의미하겠죠. 즉, 프론트엔드는 프로세스의 첫 단계, 백엔드는 마지막 단계입니다.
여기서 ‘앞’이란 무엇일까요? 바로, 사용자와 직접 만나는 접점입니다. 사용자 눈에 보이고 체험할 수 있는 모든 부분을 가리킵니다. 예를 들어, 커널 아카데미 웹사이트에 접속했을 때 처음 보이는 메인 화면이나 강의 정보를 담은 이미지와 텍스트, 상단에 있는 카테고리, 움직이는 배너 이미지, 강의 정보를 클릭하기 위한 버튼, 강의마다 세심하게 추가되어 있는 해시태그 등 이러한 모든 것이 프론트엔드이며, 프론트엔드 개발자들이 만든 결과물입니다.
사진: Freepik
2. 뒷단과 앞단, 앞단과 사용자를 연결하는 역할의 중요성
구체적으로 프론트엔드 개발자가 어떤 일을 하는지 알아보겠습니다. 프론트엔드 개발자는 뒷단과 앞단을 연결하고, 앞단과 사용자를 연결하는데요. 최적화를 위한 웹과 앱 성능 개선, 다양한 OS(운영체제)와 브라우저 호환 작업, 서비스 기능 구현, 디자인 구현 등의 업무를 합니다.
웹사이트나 모바일 앱의 로딩 속도를 개선하기 위해는 이미지와 코드를 최적화하는 등의 과정을 거칩니다. 최종적으로 사용자가 원활하게 서비스를 이용할 수 있게 토대를 만드는 건데요. 스마트폰 기종에 따라 나뉘는 안드로이드와 iOS 운영 체제, 크롬과 사파리 등 여러 브라우저에서 모두 작동되도록 하는 역할도 프론트엔드 개발자가 합니다. 어느 곳에서나 해당 서비스를 체험 가능하게 만들어 사용률을 높이는 것입니다.
또한, 사용자가 경험할 모든 서비스 기능과 디자인을 구현합니다. 사용자 경험(UX, User eXperience)을 고려하여 사용자 인터페이스(UI, User Interface)를 만드는 것이죠. 이때 HTML, CSS, 자바스크립트(JavaScript) 등의 언어를 사용합니다. 이처럼 프론트엔드 개발자는 중간에서 데이터를 관리하고 시각화합니다.
보이지 않는 부분과 보이는 부분을 모두 관여하며, 궁극적으로 해당 서비스를 사용자가 더 편리하게 더 자주 이용하게 하는 중요한 역할을 합니다.
IT 산업이 발전하여 웹 생태계 성장 및 인터넷 접근성 향상을 이뤘고, 스마트폰 기기 보급이 보편화되어 모바일 생태계가 커졌고, 온라인 쇼핑몰 등 오프라인 사업을 온라인화하려는 시도가 많아지면서, 그에 따라 프론트엔드 개발자의 수요도 점점 증가했습니다. PC 웹을 시작으로, 모바일 웹, 모바일 앱, 게임 개발 등 다양한 형태의 서비스에 프론트엔드 개발자가 필요합니다.
사진: Freepik
3. 게임 퀘스트 깨듯 단계별로 공부해 보기
프론트엔드 개발의 수요 증가도 알겠고, 중요한 역할이라는 점도 이해했습니다. 하지만 그만큼 방대하게 느껴지고 복잡해 보여서 겁이 날 수 있는데요. 무엇을 먼저 하면 좋을지 모를 분들을 위해서, 게임 퀘스트를 깨는 콘셉트로 초보자, 중급자, 전문가 단계별로 나눠 프론트엔드 개발 내용을 어떻게 공부하면 좋을지 쉽게 소개하겠습니다.
퀘스트 ➊ 초보자 단계
먼저, 첫 퀘스트를 선보이겠습니다. 단어만 들어도 어렵게 느껴지는 HTML, CSS, 자바스크립트 등의 언어는 어쩌다 생겼을까요? 무작정 언어 공부를 시작하기 전에, 전반적으로 언어가 어떤 상황에서 왜 생겼는지를 알면, 어떻게 쓰이는지 이해하는 데에 도움이 될 거예요.
이렇게 뼈대를 만들고 디자인을 입힌 다음에 움직이게 만드는 겁니다. 각 언어의 개념과 기초 문법을 익히고, 웹 페이지의 구조와 디자인 기초 지식을 이해한 후, 웹 페이지를 만들어 봅니다. 이론을 실행에 옮겨보는 연습까지 하면, 첫 퀘스트 완수입니다.
사진: Freepik
퀘스트 ➋ 중급자 단계
중급자 레벨이 되신 것을 축하드리며, 두 번째 퀘스트입니다. 언어를 배웠으니, 언어를 써먹을 도구를 배워 볼까요? 본격적으로 프론트엔드 개발에 필요한 프론트엔드 개발 도구를 알아봅시다. 자바스크립트 프레임 워크는 리액트(React), 뷰(Vue.js), 앵귤러(Angular) 등이 있고, CSS 프레임 워크는 테일윈드 CSS(Tailwind CSS), 부트스트랩(Bootstrap) 등이 있습니다.
언어와 개발 도구로 생명을 불어넣었으니, 이제 예쁘게 만들어줄 차례입니다. 첫 퀘스트에서 얻은 디자인 기초 지식을 바탕으로 UX/UI 디자인 지식을 더해, 사용자들이 서비스를 더 매력적이고 편리하게 경험하게 만드는 겁니다. 데이터베이스를 활용해 쿼리를 작성하는 법도 배우고, 개인 포트폴리오와 개인 프로젝트까지 완수하면, 두 번째 퀘스트 성공입니다.
퀘스트 ➌ 전문가 단계
마지막 퀘스트입니다. 프론트엔드 개발자는 다양한 환경에 적합하게 개발할 줄 알아야 하는데요. 스마트폰이 보편화되면서 모바일 앱 개발 역시 빼놓을 수 없는 분야가 되었습니다. 따라서 리액트 문법과 자바스크립트 언어로 모바일 앱을 개발하는 프레임 워크 ‘리액트 네이티브(React Native)’, 다트 (Dart) 언어로 개발하는 프레임 워크 ‘플러터(Flutter)’를 이번 단계에서 학습합니다.
여기서 끝이 아닙니다. 무엇이든 탄생 후 개선과 성장이 필요하죠. 서비스 또한 마찬가지입니다. 프론트엔드 개발자는 서비스 구현뿐 아니라, 오류와 버그를 수정하여 유지 보수하는 역량, 그리고 기능 동작을 위해 서버를 이해하고 다루는 역량이 있어야 합니다. 서버리스 아키텍처인 AWS 람다(AWS Lambda), 파이어베이스 펑션(Firebase Functions) 등을 학습하고, 인공지능 및 머신러닝 기술을 어떻게 활용하는 지도 습득합니다.
학습할 내용의 난이도에 따라, 독학을 위해 추천하는 도서(교재) 및 강의를 살펴보고 자신의 현재 학습 수준에 맞게 공부를 시작하는 것이 좋습니다. 특히 프론트엔드 독학을 처음 시작하는 분이라면, Web, 브라우저나 네트워크, 터미널, 깃 등 로드맵 상의 낯설기만 한 개발 개념과 개발 환경을 먼저 이해하고 학습 방향을 설정하는 것이 좋습니다. HTML과 CSS, JavaScript 같은 개념은 당연히 이해해야 하고요.
출처: Unsplash
4. 실력 있는 프론트엔드 개발자가 되는 지름길
이제 거의 다 왔습니다. 마지막 퀘스트의 꽃은 협업과 실전 연습인데요, 여럿이 함께 협업하고 서비스를 실제로 완성해 보는 연습이 중요합니다. 커뮤니케이션 능력과 적응력, 문제 해결 능력과 창의력을 키워 보세요.
혼자 이 과정을 해결하기 어렵다면, 부트캠프와 같은 프로그램을 활용하는 방법도 추천할 만합니다. 커널 아카데미 프론트엔드 개발 부트캠프는 미니 프로젝트, 협업 프로젝트, 기업 연계 프로젝트 등 동료와의 협업 활동 프로그램이 탄탄합니다. 특히 비전공자로 시작해서 우아한형제들 기술이사, 프론트엔드 개발 그룹장까지 맡았던 김민태 강사와 함께 할 수 있다는 큰 장점이 있죠. 김민태 강사는 2013년 5월 60만 명이던 방문자를 2023년 12월 1,900만 명까지 끌어올리며 배달업계 1위를 달성한 이력이 있는데요, 이러한 성과를 바탕으로 현재 개발 교육 11년차, 1,500명 이상의 주니어 개발자를 교육해온 베테랑 강사이기도 합니다.
탄탄한 커리큘럼과 베테랑 강사진의 퀄리티 높은 강의가 제공되는 건 물론, 이러한 결과물과 경험을 포트폴리오와 면접에 유용하게 활용할 수 있습니다. 수강생 그룹 스터디도 있는데요. 정규 수업이 끝난 후에도 그룹 스터디를 취업 스터디로 이어서 진행해서 취업과 사업 등 실질적인 성과를 이뤄낸 학생들도 있습니다. 또, AI 시대를 맞아 필수적인 ‘트렌드 습득력 / 활용력’을 기르기 위해 AI 활용 실습 및 프로젝트를 진행하기 때문에 가장 트렌디한 부트캠프로 손꼽히기도 합니다.
비전공자라서, 비개발자라서 프론트엔드 개발 공부를 망설이고 있나요? 배움에는 환경과 나이보다 의지와 열정이 더 중요합니다. 패스트캠프의 온라인 국비 지원 부트캠프 커널 아카데미에서 차근차근 단계별로 학습하고 따로 또 같이 성장해 보세요!
