프론트엔드에 관심이 있다면 기본적으로 HTML, CSS, JAVASCRIPT 등의 용어는 들어보셨을 텐데요. 비전공자&입문자라면 뭐부터 공부해야 할지 막막한 경우가 많습니다. 이번 글에서는 전체적인 프론트엔드 로드맵을 살펴보고, 웹 개발자로서의 성장 과정을 조망해 보겠습니다.

회원가입을 하면 원하는 문장을
저장할 수 있어요!

프론트엔드 로드맵과 프론트엔드 개발자가 하는 일

길벗

8분

2023.11.03.

네트워크와 인터넷

프론트엔드 개발자라면 클라이언트와 서버의 통신 과정에 적용되는 네트워크와 인터넷기초 지식을 알고 있어야 합니다. 특히 DNS, IP, 도메인 네임 같은 기초 개념은 기본으로 이해하고 있어야 합니다.

HTML, CSS, 자바스크립트

HTML, CSS, 자바스크립트는 프론트엔드 개발자가 되기 위해 반드시 배워야 하는 언어입니다. HTML과 CSS는 무난하게 배우지만 자바스크립트는 어려워서 중간에 포기하는 경우가 많은데, 진정한 프론트엔드 개발자가 되려면 자바스크립트를 다룰 줄 알아야 합니다.

HTML, CSS, 자바스크립트 심화 기술

HTML 전처리기: HTML에 익숙해졌다면 HTML 언어의 불편함을 느낄 수밖에 없습니다. HTML은 마크업 언어(markup language)라서 불필요하게 정형화된 작성 규칙이 로드맵 있고, 반복하거나 유사하게 작성해야 하는 경우도 많습니다. HTML 전처리기는 이러한 불편함을 해소해 좀 더 편리하고 효율적으로 코드를 작성할 수 있게 해 줍니다. 대표적인 HTML 전처리기에는 함엘, 슬림, 퍼그 등이 있습니다.
CSS 전처리기/후처리기: HTML을 좀 더 편리하고 효율적으로 작성하기 위한 HTML 전처리기가 있듯이 CSS에도 전처리기와 후처리기가 있습니다. 대부분의 실무에서는 단순하게 CSS를 사용하기보다 CSS 전처리기나 후처리기를 사용하는 경우가 많습니다. 대표적인 CSS 전처리기로 SCSS, 후처리기로 PostCSS가 있습니다.
CSS 방법론: CSS에 익숙해졌다면 CSS를 효율적으로 작성하는 데 필요한 여러 가지 방법론을 배워야 합니다. 처음부터 방법론에 관심을 가질 필요는 없지만, 고급 기술을 구사하는 개발자가 되려면 반드시 거쳐야 하는 학습 과정입니다. 대표적인 CSS 방법론으로 OOCSS, SMACSS, BEM 등이 있습니다.
타입스크립트: 타입스크립트는 고급 프론트엔드 개발자가 되기 위해 반드시 배워야 하는 언어 중 하나입니다. 타입스크립트는 자바스크립트를 기반으로 하므로 자바스크립트를 알면 쉽게 배울 수 있지만, 자바스크립트를 아예 배우지 않고 타입스크립트만 배우는 것도 가능합니다. 그러나 자바스크립트를 배우고 나서 타입스크립트를 배우는 것이 좋습니다.

개발 도구

프론트엔드 개발 시 활용할 수 있는 개발 도구가 많은데, 대표적으로 소스 코드 에디터,버전 관리 시스템, 코드 포매터, 린터, 패키지 매니저, 모듈 번들러가 있습니다. 이러한 도구는 실무에서 자주 활용되므로 언제 배우냐는 시기의 문제일 뿐 반드시 알아야 합니다.

자바스크립트 프레임워크, CSS 프레임워크

자바스크립트 프레임워크: 실무에서는 대부분 자바스크립트 프레임워크를 사용하기 때문에 가장 인지도 높은 몇 가지 프레임워크를 이해하고 다룰 줄 알아야 합니다. 대표적으로 앵귤러, 리액트, 뷰가 있습니다.
CSS 프레임워크: CSS를 기본으로 하는 프레임워크가 굉장히 많은데, 실무에서 가장 많이 사용하는 프레임워크는 부트스트랩과 테일윈드 CSS입니다.

네트워크 통신

프론트엔드에서 백엔드와 데이터를 주고받을 때는 HTTP 프로토콜을 사용해 통신합니다. HTTP 프로토콜 자체만 놓고 보면 네트워크 개발에 더 가깝지만, 그래도 백엔드와의 데이터 교환을 위해 기본 지식을 알고 있어야 합니다.

API

API(Application Programming Interface, 응용 프로그래밍 인터페이스)는 HTTP 프로토콜로 데이터를 교환할 때 사용하는 기술입니다. API는 프론트엔드 개발 시 많이 듣게 되는 용어이므로 개념을 확실히 알고 있어야 실무가 편해집니다.

테스트

하나의 웹 애플리케이션을 만드는 과정은 생각보다 어렵습니다. 아무리 개발을 잘한다고 해도 버그나 예상치 못한 문제가 불거지게 마련인데, 이러한 문제를 최소한으로 줄이기 위해 테스트 과정을 거칩니다.

배포

웹 애플리케이션이 완성되면 다른 사용자가 접근할 수 있도록 인터넷에 공개하는 과정인 배포를 해야 합니다. 배포는 프론트엔드 개발의 끝이자 새로운 시작입니다. 배포 후 웹 애플리케이션이 공개되더라도 해야 할 일이 많기 때문입니다. 이렇게 배포까지 공부했다면 실무에 필요한 기본적인 로드맵을 전부 살펴봤다고 할 수 있습니다.

프론트엔드 개발을 담당하는 인력을 프론트엔드 개발자(front-end developer)라고 합니다. 프론트엔드 개발자가 하는 일은 다음과 같이 크게 일곱 가지로 구분할 수 있습니다.

UI/UX 개발

프론트엔드 개발자는 기본적으로 UI(User Interface, 사용자 인터페이스)와 UX(UserExperience, 사용자가 웹 사이트를 이용하면서 느끼고 생각하는 총체적 경험)를 개발합니다. 웹 1.0 시대에는 정적인 콘텐츠만 제공했기 때문에 UI만 신경 써도 괜찮았습니다. 하지만 웹 2.0 시대가 도래하자 사용자와의 상호작용이 중요해졌습니다. 오늘날의 프론트엔드 개발자는 UI는 물론이고 UX까지 고려한 웹 페이지를 만들 줄 알아야 합니다.

재사용이 가능한 UI 개발

프론트엔드 개발자는 앵귤러, 리액트, 뷰 등의 자바스크립트 프레임워크(JavaScriptframework)를 가지고 재사용할 수 있는 UI를 만듭니다. 재사용할 수 있는 UI를 만들어놓으면 향후 프로젝트를 진행하면서 UI의 일관성을 유지할 수 있고, 프로젝트 전반의 생산성 향상에도 도움이 됩니다.

애니메이션 구현

프론트엔드 개발자는 CSS 또는 자바스크립트를 사용해 다양한 효과가 포함된 애니메이션을 만듭니다. 이러한 애니메이션 효과는 웹 사이트를 방문하는 사용자의 흥미를 유발하고 사용자 경험을 긍정적으로 바꿀 수 있습니다.

웹 사이트 성능 최적화

웹 사이트 성능 최적화란 사용자가 웹 사이트를 쾌적하게 이용할 수 있도록 로딩 속도, 반응 속도, 안정성 등의 요소를 개선해 사용자 경험을 향상하는 것을 말합니다. 프론트엔드 개발자는 사용자가 웹 사이트에서 좋은 경험을 하도록 웹 브라우저의 개발자 도구나 라이트하우스(Lighthouse, 웹 사이트 성능 측정 테스트 도구) 등을 이용해 웹 사이트의 성능을 최적화합니다. 웹 사이트 성능 최적화에 사용되는 기술로는 캐싱, 압축, 이미지최적화 등이 있습니다.

테스트 코드 작성

프론트엔드 개발자는 작성한 코드의 품질을 유지하기 위해 테스트 코드를 작성합니다. 테스트 코드는 웹 사이트의 올바른 동작 여부를 테스트하기 위해 작성하며, 테스트 코드를 잘 만들면 다양한 브라우저와 기기에서 안정적인 서비스를 제공할 수 있습니다.

디버깅

프론트엔드 개발자는 다양한 문제를 해결하기 위해 문제가 발생하는 코드를 추적하는 디버깅(debugging, 소스 코드의 오류 또는 버그를 찾아 수정하는 것)을 수행합니다. 디버깅 훈련이 잘된 개발자는 다양한 상황에서 발생하는 오류에 대처하는 능력이 뛰어나 안정적인 서비스를 제공할 수 있습니다.

다른 개발자와 협업

프론트엔드 개발자는 프로젝트를 빠르고 정확하게 끝내기 위해 다른 개발자와 협업하기도 합니다. 예를 들어 프로젝트와 관련된 코드, 문서, 데이터 등의 자원을 공유해 개발속도를 높입니다. 또한 협업을 위한 버전 관리 도구(Git, SVN)를 사용해 전문적으로 소스 코드를 관리하며, 이슈 트래커(Jira)와 같은 도구를 사용해 체계적으로 업무를 할당하고 관리하기도 합니다. 프론트엔드 개발자가 되면 메신저, 화상 회의, 전화 등을 통해 업무와 관련된 소통을 신속하고 명확하게 해야 합니다.