본문 바로가기

a memorandum/개발자 패스

프론트엔드 개발, 뭐하는 직종이야?

"프론트엔드(Front-End) 개발이란, 웹이나 앱을 사용하는 유저가

눈으로 보는 모든 화면의 요소들을 개발한다."


프론트엔드 개발의 사전적 수행 직무는,

백엔드(Back-End) API (Application Programming Interface)에서 가져온 데이터의 출력, 입력을 통한 비지니스 로직 구성과 유저가 사용하는 유저 인터페이스를 개발한다.

 

실무에서 경험한 수행 직무는,

백엔드 개발자가 건네주는 API 문서 혹은 API 정보를 공유 받아 서버에서 제공해주는 데이터를 가져와서 화면에 나타나게 해주는 것이 기본이며, 서비스를 사용하는 흐름에 따라 데이터를 가공하거나 선별하여 해당 단계에서 필요한 데이터만 유저가 볼 수 있도록 한다.

 

1. 프론트엔드 개발자가 되려면?

프론트엔드 개발자를 목표로 한다면, 웹 퍼블리싱(HTML, CSS, javascript)에 대한 공부는 물론이고, UI/UX와 네트워크에 대한 공부를 해야한다. 갑자기 뜬금없이 UI/UX가 나오고 네트워크가 나온다. UI/UX는 디자인과 밀접하고, 네트워크는 서버와 밀접하다고 생각하고 있지 않나? 반은 맞고 반은 틀렸다. 

 

1.1 프론트엔드의 UI/UX

먼저 프론트엔드에서 말하는 UI/UX는 모양적인(Visual) 부분이 아니다. 사용자가 원하는 정보를 얻기 위해 필요한 화면을 제공해주는 것이다. 예를 들어 유저가 사용하는 서비스에 회원가입을 하려고 하는데 자신의 정보를 입력할 수 있는 창이 없다면? 회원가입을 하지 못한다. 그래서 프론트엔드 개발자는 입력창, 즉 UI(User Interface)를 유저에게 제공해야 한다.

 

잠깐만, 그러면 프론트엔드 개발자는 웹 퍼블리셔와 비슷한데? 맞다. 하지만 프론트엔드 개발자는 취급하는 기술적 범위가 더욱 넓다. 이 부분은 글의 마지막에서 정리하겠다.

 

다시 돌아와서, 회원가입에 필요한 정보를 입력하는 창을 유저에게 제공했다. 지금이야 웹사이트(WebSite)나 모바일 앱(App)은 보편적이 되어 회원가입이 익숙하지만, 처음 사용하는 유저일 경우, 올바른 정보를 입력하여 회원가입을 할 수 있어야 한다. 이를 안내해주기 위해 UX(User Experience)도 알아야 한다.

 

1.2 프론트엔드의 네트워크

네트워크는 왜 알아야 할까? 프론트엔드 개발자가 서버를 구축할까? 아니다. 데이터베이스와 통신을 할까? 아니다. 그런데 필요한 이유는 무엇일까. 답은 서버와 데이터베이스를 다루는 백엔드 개발자와 일하기 때문이다.

 

실제로 내가 회사에서 근무하며 프론트엔드 개발 병아리 시절에 있었던 일이다. 백엔드 개발자가 API 정보를 내게 공유해줬고, 나는 그 정보를 토대로 화면에 데이터를 나타내기 위해 데이터 바인딩(Data Binding) 작업을 진행했다. 그런데 왠걸, 데이터가 화면에 나오지 않았다. 코드가 잘못되었는지 지우고 다시 작성해도 동일한 현상이 있었다.

 

그래서 오류를 분석해보니, 400 Bad Request 라는 메시지를 보여줬다. 그래서 나는 당당하게 백엔드 개발자에게 해당 메시지가 나온다고 확인해달라고 요청했고, 백엔드 개발자가 실소를 머금었던 기억이 있다.

 

400 Bad Request는 클라이언트에서 서버에 요청하는 정보가 잘못되었을 때 나오는 에러 코드다. 무슨 말인지 이해가 안되는가? 주방에서 김치볶음밥을 준비해놨는데, 나는 제육볶음을 달라고 한거다. 즉, 잘못된 정보를 내가 보내고 있으면서 백엔드 개발자에게 오류를 확인해달라는 미스를 범한 거다.

 

위 에러 코드는 HTTP Status Code라는 네트워크의 기본적인 지식만 알았더라면 해당 오류는 내가 알고 처리할 수 있는 수준이었다. 지금 이 글을 적고 있는 순간에도 이 당시 일을 떠올리면 얼굴이 화끈거린다.

 

협업을 하기 위해서는 협업하는 사람의 직무를 어느정도 이해하고 있어야 협업하기가 수월하듯, 프론트엔드 개발자도 백엔드 개발도 어느정도 알아둘 필요는 있다. 그 중에서 필수적으로 알아야하는 부분은 바로 네트워크다.

 

2. 프론트엔드가 갖춰야 할 기술적 소양

지금까지 프론트엔드 개발자가 되기 위해 무엇을 공부해야 되는지 알았다면, 프론트엔드 개발자가 갖춰야 할 기술적 소양을 소개한다.

 

웹사이트를 구성하는 트리오, HTML(좌) - CSS - javascript(우)

위 이미지처럼 HTML, CSS, javascript는 웹 퍼블리셔의 핵심 역량으로, 프론트엔드 개발자가 옵션으로 가지고 있으면 좋은 기술들이지만, 개인적으로는 필수적으로 익혀두라고 권하고 싶다. 외주 프로젝트를 진행하면서 웹 퍼블리싱을 담당했었는데, 프론트엔드 개발자가 데이터를 연결하는 과정에서 HTML 구조를 완전히 무너뜨린 적이 있었다. 프론트엔드 개발자는 사용자가 필요한 데이터를 보여주는 역할을 한다. 이는 HTML을 필연적으로 건드릴 수 있음을 의미한다. 

 

내가 작업해둔 것을 누군가 망가뜨린다고 생각해보자. 스트레스 받지 않는가? 더욱이 프론트엔드 개발자는 클라이언트 단에서 일어나는 모든 이슈에 대해 책임을 져야 하는 포지션이다. 그런데 웹 퍼블리싱에 대한 지식이 없어 프론트엔드 개발이 원활하지 않다? 프론트엔드 개발자로서의 자격이 없다!

 

이미 웹 퍼블리싱에 대한 지식이 충분하다면, 더 필요한 기술적 소양은 무엇일까?

 

1) 네트워크 (Network)

네트워크의 중요성은 위 문단에서 설명했으니 넘어가도록 하겠다.

 

2) 버전 관리 (Version Control)

버전 관리는관리 측면에서 필요하다. 프론트엔드 개발을 한다는 것은 클라이언트와 서버가 분리된다는 것을 의미하기 때문에, 클라이언트 버전 관리는 프론트엔드 개발자에게 책임이 있다. 그러므로 버전 관리에 대한 지식은 필수적으로 필요하다. 대표적으로 Git을 많이 사용한다.

 

3) 웹 프론트 프레임워크 (Web Front Framework)

Web Front Framework 3대장, 리액트(좌) - 앵귤러 - 뷰(우)

개발자들 사이에는 그런 말이 있다. "개발 환경만 세팅하면 일단 50%는 진행한거야". 맞는 말이다. 예전에는 웹사이트 개발 환경을 구축하려면 많은 시간과 노력이 필요했다. 하지만 개발자들이 누군가. 한 없이 게을러지고 싶은 사람들이다. 명령어 몇 줄만으로 웹사이트 개발 환경을 구축할 수 있도록 프레임워크를 만들어버렸다.

 

대표적으로 리액트(React), 앵귤러(Angular), 뷰(Vue)가 있다. 많은 커뮤니티에서 앵귤러가 낫니, 리액트가 낫니, 뷰가 낫니 하지만 프로젝트 방향성에 맞게 사용하면 된다. 프레임워크는 목적에 맞게 사용하는 도구지, 어떤 프레임워크가 좋고 안좋고가 아니다.

 

웹 프론트 프레임워크는 다음에 별도로 다뤄보도록 하겠다.

 

4) modern javascript

자바스크립트면 자바스크립트지, 모던 자바스크립트는 뭔가 할 것이다. 자바스크립트는 지속적으로 업데이트 되어 오고 있고, 웹 개발에 있어 독보적인 웹 프로그래밍 언어다. 하지만 한계점이 분명히 존재했고 꾸준한 버전 업데이트를 통해 발전해왔는데, ECMA Script 6 (ES6)가 명세가 발표되면서 자바스크립트에 극적인 변화가 일어났다.

 

기존 자바스크립트와 다른 부분이 많아져서 ES6 이후 자바스크립트를 modern javascript라고 명명하기 시작했다. 그리고 웹 프로그래밍 언어의 한계를 벗어나 응용 프로그램 쪽으로도 영역을 넓히고 있어 프론트엔드 개발자는 필수적으로 갖춰야 한다.

 

이외 다른 필요한 것들은 여전히 많지만, 이정도만 익혀둬도 프론트엔드 개발자 초입에는 다다랐다고 보면 된다!

 

2. 웹 퍼블리셔와 프론트엔드 개발자, 뭐가 더 좋을까?

웹 퍼블리셔와 프론트엔드 개발자 중 혼동하고 있는 사람들이 분명히 있을 것이다. 필자 또한 그랬다. 이 글을 쓰고 있는 지금도 프론트엔드 개발보다는 웹 퍼블리싱 비중이 더 높지만, 언젠가는 프론트엔드 개발의 비중이 더 높아지길 희망하고 있다.

 

웹사이트를 열었을 때 나타나는 애니메이션들이나 인터랙션 등을 심도있게 하고 싶다면 웹 퍼블리셔가 되는 것을 추천한다. 디자인적인 관점에서 밀접한 것은 프론트엔드 개발보다는 웹 퍼블리셔가 더 시간을 할애할 수 있기 때문이다.

 

웹사이트의 구조나 형상관리 등 아키텍처 개념에 더 집중하고 싶다면 프론트엔드 개발자로 커리어를 쌓는 것을 추천한다. 그리고 백엔드 쪽으로도 좀 더 범위를 넓혀서 공부한다면, 프론트와 백을 모두 아우르는 풀스택 개발자를 향해 한 단계 더 업그레이드 할 수 있을 것이다.

  • 다 할순없나요? 2020.09.24 15:40 댓글주소 수정/삭제 댓글쓰기

    인터랙티브와 디자인을 아우르면서 프론트개발도 하고싶은데.. :& 너무 욕심인가요?

    • 불가능한 건 아니에요 ㅎㅎ 단지 시간은 누구에게나 공평하죠.
      인터랙티브, 디자인, 개발 모두 깊이가 있는 분야이기 때문에 모든 부문에서 스페셜리스트가 되기는 힘들 거라고 생각합니다^^;
      개인적인 의견이니 참고만 하시고, 도전해보시는 것도 좋을 것 같아요!

  • 하드코딩 2021.02.21 00:10 댓글주소 수정/삭제 댓글쓰기

    현재 국비교육으로 디자인과퍼블리싱 과정을 듣고 있는데요
    웹퍼블리셔로 방향을 잡는다면 일해보면서 적성에 맞거나 좀 더 발전하고 싶다고 마음이 들면 프론트엔드 까지 생각을 하고 있어서 정보들이 궁금해 찾다 보니 글을 보게 되었어요..
    보았던 글들중에 가장 깔끔하게 잘 정리해주신것 같아요.. 정보가 많은 도움이 될꺼 같아요 감사합니다~

    그리고 한편으로는 고민도 있는데 저가 29살 경상지방권에 살고있으면서 지방에서 국비교육을 듣고 있습니다
    아무래도 나이가 마음에 쫌 걸리긴 해요.. 인터넷에 찾아보면 늦었다는 말도 있지만 30살 넘어서 준비하시는 분들도 있어서 힘을내보려고하는데요
    그래도 같이 수업 듣는 학생들은 저보다 훨씬 어리고 저가 나이가 젤 많은것 같아요..ㅜ
    이런 상황이 모든 지역에 있다고 생각해보고 대학교졸업생까지 가만하면 아무래도 나이에서의 경쟁력이 쫌 떨어진다고 느껴서
    과연 내가 취업이 가능할까..라는 의문이 자꾸 들긴하네요..물론 실력에 따라 달라질수도 있겠지만..위축감에 의지도 좀 떨어지기도 해요..
    어떻게 하면 좀 극복 할 수 있을까요? 해주실 조언이나 현실을 좀 말씀해주시면 감사드리려요

    그리고 웹퍼블리셔 업무환경에서 야근 없는 일자리 , 자유로운 분위기의 회사 를 저도 원하는데 .. 물론 초반에는 공부를 해야된다면
    야근은 할수도 있다고 생각합니다
    그래도 그런 분위기의 일자리를 구하고싶은데 나이를 고려하고 일자리를 찾아보면 그런 곳이 있나요?
    만약 있다면 어떤 구직사이트에서 어떤 구인정보로 글을 봐야하고 회사를 봐야하는지 팁좀 주실수 있을까요?

    일자리를 보니 저가 사는 지방권에는 일자리가 너무적고 원하는 분위기의 회사는 찾아 볼 수 없더라고요..
    첫시작을 서울쪽으로 시작하는게 맞는 선택이겠죠?
    이부분에 대해서도 어떻게 생각 하시는지 듣고 싶어요..
    저가 사는 지역에는 일자리가 없어
    경력을 쌓기위한 첫 서울상경... 처음첫해보는 분야... 첫자취를 감당 하긴 해야됩니다
    그래도 시도는 해볼려고 하는데 저가 성격이 대차고 적응도 잘하고 걱정없이 해나가는 스타일이 아니다보니
    마음적으로나 생각들이 자꾸 위축되는 쪽이되거나 어려울것 같다는 생각으로 자꾸 가는것 같아요

    글정리 해주신글을 다 보니 신뢰가 많이 가시는 분이라 조언을 구할수 있지 않을까 해서 또,저가 방향을 잡고 싶은 부분을 미리 경험하셧고 여전히 하고 계신것같아 질문 드려요
    혹시나 보신다면 긴글이라도 읽어주면 감사드리고 답변 해주시면 더욱 감사드립니다
    짧게라도 괜찮으니 조언을 좀 구해봅니다
    아무쪼록 건강하시고 이렇게 좋은 글 남겨주셔서 감사합니다~

    • 댓글이 조금 늦게 확인했네요^^; 좋게 읽어주셔서 감사합니다.

      걱정하시는 부분에 대해 조언을 드리자면,
      회사는 우선 서울 쪽으로 오시는게 좋아요. 아무래도 인프라가 서울에 몰려 있으니까요.

      나이는 사실 문제되진 않습니다. 신입 치고는 나이가 많을 순 있지만, 개발 쪽은 정말 실력으로 승부하는 곳이라서 그만한 실력을 갈고 닦아 두시면 취업하는 데는 문제 없습니다.

      우선 취업을 하셔야 하니 취업 맞춤형으로 포트폴리오를 만드시고, 처음 회사는 에이전시로 가시는 걸 추천드립니다.

      에이전시가 평가는 좋지 않지만, 역설적이게도 실력을 올리기엔 에이전시만한 곳이 없습니다. 다양한 경험을 해볼 수 있기 때문이에요. 단시간에 실력 쌓기는 정말 좋은 환경입니다. 1~2년은 단련한다고 생각하시면 됩니다.

      그리고 사이드 프로젝트도 많이 진행해보세요. 개발 방법론, 트렌드에 대해서도 꾸준히 공부하시면 좋을 거에요 :)