[스타트업 취업 가이드] 5탄.
스타트업 취업직무 두 번째, 프론트엔드 개발자
여러분의 스타트업 취업을 돕기 위해 '업계 유일의 채용매니저' 강종무가 돌아왔습니다. 이번 포스팅에서는 지난 포스팅에서 잠시 언급되었던 '프론트엔드 개발자'에 대해서 말씀드릴 예정입니다. 저번에 말씀드릴 때 웹사이트에는 우리가 보는 화면인 프론트엔드가 있고, 그 화면에 표시되는 자료들을 저장해 놓는 백엔드(서버)가 있으며 그 백엔드를 구축하는 백엔드 개발자란 무엇인가!!에 대해서 설명드렸었는데요. 오늘은 그 반쪽, 프론트엔드 개발자 편이랍니다.
원본 이미지 출처 : Planet Source Code
우선 프론트엔드 개발자가 하는 일이 무엇인지 간단히 설명을 해드리도록 할게요. 프론트엔드 개발자는 웹의 '보여지는 영역' 개발하는 사람들이라고 말씀드렸죠?(코딩 결과가 바로바로 눈에 보이기 때문에 비전공자들도 상대적으로 쉽게 재미를 느끼는 영역이기도 합니다.)
프론트엔드 개발자들은 주로 세 가지 도구를 사용해서 개발을 진행합니다. 가장 중심이 되는 도구는 바로 'HTML' 입니다. 많이 들어보셨죠? 웹사이트 제작의 기본 언어가 됩니다. 그리고 'CSS' 라는 것이 또 있습니다. 여러분이 어떤 웹 사이트를 들어갔는데 하얀색 배경 위 메뉴엔 글씨만 나와있고, 화면에 떡하니 크기 조절도 안된 사진이 여기저기 놓여 있다면... 어떠시겠어요? HTML로 만든 웹 사이트는 이런 모양일 수밖에 없습니다. 화면을 예쁘게 꾸미고 사진에 효과를 주며, 적절하게 배치하는 역할을 바로 이 CSS로 하는 것이지요.
그런데 요즘 웹 사이트는 동영상도 들어가고, 클릭을 하면 화면이 바뀌고, 뉴스 피드나 검색어 순위가 실시간으로 바뀌고 하는 기능들이 구현되어 있지요? 이런 고오오오오급 기능들을 가능하게 하는 언어가 바로 'JavaScript' 라는 언어입니다. 백엔드 시간에 나왔던 'Java' 랑 이름은 비슷해도 다른 언어니 섞어서 쓰시면 아니 되어요.
원본 이미지 출처 : GitHub
쉽게 설명을 해볼까요? 네이버가 있습니다. 네이버 첫 화면을 보면 위쪽에는 검색창, 그 아래는 메뉴, 그 아래는 뉴스, 오른쪽에 로그인 뭐 이런 식으로 칸이 나눠져 있고 글씨들이 들어가 있죠. 이 틀과 내용을 넣는 일이 HTML 개발입니다. 그리고 화면 여기저기에 예쁜 그림들이 배치되어 있습니다. 어떤 그림이 어떤 모양으로 어떤 크기로 배치되는가 등을 결정하는 도구가 CSS 입니다. 그리고 뉴스나 네이버캐스트, 내 정보와 같이 좌우 화살표를 누르면 화면이 바뀌고, 움직이게 하는 '기능'을 만들어내는 일이 바로 JavaScript의 역할입니다. 더 간단히 설명드리면, 집을 짓는 일에 비유할 수 있어요. 집을 지을 때 콘크리트나 벽돌로 집을 쌓으면 회색 건물이 완성되죠. 이게 HTML로 구축한 웹 사이트에요. 여기에 벽지를 바르고, 장판을 깔고, 창문을 달고 인테리어를 하는 일을 CSS가 합니다. 그리고 여기에 수도를 끌어오고, 전기가 들어오게 하고, 가스를 들어오게 해서 보일러를 때고 하는 일이 JavaScript의 역할입니다.
프론트앤드 개발자, 네이버와 같은 웹 페이지를 만들 수 있습니다!
자, 그럼 프론트엔드 개발자로 스타트업 취업에 성공하려면 무엇을 준비해야 하는 걸까요? 바로 JavaScript입니다. HTML, CSS는 물론이고, JavaScript까지 자유자재로 다룰 수 있어야 프론트엔드 개발자로서의 역량을 발휘할 수 있는 거죠. 사실 스타트업 취업에 관심이 별로 없던 분들도 웹 디자이너나 웹 퍼블리셔와 같이 웹 사이트를 제작하는 직업에 대해서 들어본 적이 있으실 겁니다. 이분들은 엄밀히 말해 웹 사이트를 만든다기보다는 웹 사이트를 꾸며주는 일을 하신다고 보면 됩니다. '예쁘게' 만들기 위해 HTML, CSS와 같은 도구들을 배우고 사용하시긴 하지만, 기능을 구현하고 운용하는 JavaScript까지는 사용하시는 분들은 거의 없다고 보시면 됩니다. 웹 사이트와 같이 고객이 직접 대면하고 사용하는 화면은 당연히 디자이너의 미적 감각이 필수적으로 들어가야 하고, UX/UI의 중요도가 커지는 요즘에는 사용성 측면에서도 웹 디자이너의 손길이 필수이긴 하지만, 이들을 프론트엔드 개발자라고 부르지는 않습니다. 다른 업무의 영역인 것이죠.
이것도 못하면서 프론트엔드 개발자라구???
따라서 HTML과 CSS를 기본으로 배우고 여기에 어떤 기능을 어떻게 운용할 것인가를 설계하고 JavaScript를 통해 구현할 줄 알아야 프론트엔드 개발자로 스타트업 취업에 성공할 수 있습니다. JavaScript는 세계에서 가장 영향력 있는 개발 언어 중의 하나입니다. 물론 HTML이나 CSS보다는 훨씬 어렵지만, 그나마 개발 언어 중 배우기가 쉬운 편입니다. 또한, 현존하는 모든 웹 브라우저인 크롬, 사파리, 오페라 등을 가리지 않고 모두 JavaScript를 지원합니다. 심지어 모바일에서도요! 따라서 웹 사이트를 제작하는 사람이라면 당연히 한 번의 작업으로 모든 사용자가 볼 수 있게 만드는 JavaScript를 사용할 수밖에 없겠죠. 무엇보다 모바일 세상이 열리면서 같은 사이트를 모바일과 컴퓨터로 동시에 이용하는 사람들이 많아지고, 화면의 크기도 다양해지면서 프론트엔드 개발자들의 중요성이 더욱 커졌습니다. 예전에는 웹 사이트에서 "본 화면은 1024X768 화면에 최적화되어 있습니다." 와 같은 문구를 많이 볼 수 있었는데, 요즘에는 그런 문구가 싹 사라진 거 혹시 느끼셨나요? 이제는 더 이상 고정된 크기로 웹 사이트를 제작하면 안 되는 세상이 온 겁니다. 인터넷의 고속화와 동영상의 시대가 오면서 웹 사이트가 수행해야 하는 기능이 늘어나기도 했고요. 따라서 이제 사이트를 예쁘게 꾸미는 법만 고민해도 됐던 예전과 달리 전문적인 엔지니어링을 거쳐야만 하게 된 거죠.
모바일 최적화를 못 만드는 프론트엔드 개발자가 말이 됩니까?!
JavaScript는 이렇게 직관적이고 파워풀하게 웹 사이트에 필요한 기능을 불어넣을 수 있는 것은 물론이고요. 태어난 지 21년 된 JavaScript가 웹의 발달과 함께 현재에 이르는 기간 동안 좀 더 편리한 JavaScript 개발을 위해, 개발자들이 쌓아온 라이브러리나 프레임워크 등의 양도 어마어마해서 점점 더 쉽고도 파워풀한 개발 언어가 되고 있습니다. 심지어 근래에 등장한 Node.js는 이러한 JavaScript를 이용해 백엔드까지 구축할 수 있게 해줌으로써, 하나의 언어를 배워서 백엔드와 프론트엔드를 모두 제작할 수 있는 JavaScript의 인기는 하늘을 찌를 정도랍니다. 인력이 부족한 스타트업 특성상 백엔드 개발자와 프론트엔드 개발자를 따로 뽑는 것과 한 명을 뽑아놓으면 백엔드 개발과 프론트 개발을 모두 할 수 있다면 당연히 후자를 택하겠지요.
프론트엔드, 백엔드. 둘 다 잘하면 좋은 거.. 알아요..
그럼 JavaScript의 중요성에 대해선 충분히 말씀드린 것 같고요. 이걸 배워야만 프론트엔드 개발자가 되어서 스타트업 취업을 할 수 있다는 점도 아셨을 거라 생각합니다. 그럼 어떤 프론트엔드 개발자가 '좋은 개발자'일까요? 바로 디테일을 놓치지 않는 꼼꼼한 개발자가 좋은 개발자입니다. 백엔드 개발자가 전체를 바라보는 시각이 있어야 한다는 것과는 반대죠. 프론트엔드 개발자는 웹 사이트에서 구현하는 다양한 기능들.... 요즘엔 웹 사이트에서 게임도 하고, 음악도 듣고, 영화도 보고, 만화도 보고 정말 안 하는 게 없잖아요? 이 모든 기능들을 일일이 구현해야 하는 작업을 맡고 있거든요. 게다가 나름대로의 안전장치가 있어서 실제로 그런 일은 거의 없지만 하루에도 수백/수천만의 사용자가 이용하는 웹 사이트가 프론트엔드 개발자의 실수로 꺼진다거나, 화면이 깨진다거나 하면 무슨 일이 일어날지... 상상만 해도 무섭죠. 아무튼 '좋은 프론트엔드 개발자'는 '디테일에 강한 꼼꼼한 개발자'라고 할 수 있습니다.
작은 실수 하나라도 용납 할 수 없어...
기능을 화면에서 구동하기만 했던 예전에는 굳이 JavaScript로 모든 걸 설계하지 않아도 Plug-in이니 액티브X(정말 너무 싫은 녀석!!!) 하는 옵션들을 달아서 처리하는 경우도 많았습니다. 그러나 요즘에는 웹 사이트 화면 자체가 하나의 설계 대상이 되면서 JavaScript를 깊게 공부해야지만 좋은 웹 사이트를 개발할 수 있는 시대가 되었습니다. 그래서 별다른 개발 도구들을 사용하지 않고 오직 JavaScript 만으로 웹 사이트를 구현하는 이른바 "하드코딩"이 프론트엔드 개발자의 능력을 재는 척도로 사용되고 있기도 합니다. 그렇지만 모든 웹 사이트를 하드하게 코딩할 필요는 당연히 없습니다. 마라톤 선수라고 차 안 타고 모든 장소를 뛰어다니는 일은 없으니까요. JavaScript에도 그에 맞는 Tool들이나 프레임워크가 당연히 준비되어 있습니다.
하드코딩, 이런 건 다 쳐야 제맛이죠..흙흙흙
우선 대표적으로 'jQuery' 라는 라이브러리가 있습니다. 이 라이브러리라는 것은 자주 쓰는 기능들을 미리 모아놓았다가 필요할 때마다 불러와서 쓸 수 있게 해주는 도구 상자와 같은 것입니다. 자주 쓰는 도구를 손에 잘 닿는 곳에 꺼내놓는 거죠. DOM(Domain Object Model) 제어 방식은 편리하게 쓸 수 있도록 도와주지만, 데이터 관련 작업 수행에는 큰 단점을 가지고 있습니다. 그런데 요즘의 웹 페이지들은 예전에 비해 어마어마한 데이터를 운용하게 되었지요. 그래서 jQuery와 같은 라이브러리보다 한 단계 더 발달한 JavaScript 용 개발 도구로 'Angular JS', 'React JS와' 같은 웹 프레임워크들이 등장하게 되었습니다.
Angular JS는 2009년 탄생한 프론트엔드 웹 프레임 워크인데요. 구글의 지원으로 매우 큰 성장을 하며, 프론트엔드 프레임 워크 중 가장 인기 있었던 프레임워크입니다. 테스트 중심, 데이터 중심 개발이 가장 큰 특징입니다. 이로 인해 프론트엔드 개발자들은 테스트 코드와 더욱 친해지고, 데이터를 다시 뿌려줄 걱정 없이 동적인 페이지 구성이 가능해졌습니다. 프레임 워크가 가지고 있는 MVW (Model - View - Whatever) 모델을 그대로 따르고 있으며, 특이한 점은 뒤의 Whatever가 정말로 아무거나 와도 된다는 점입니다. 만들기 편하고, 고치기도 쉽고, 아무거나 다 갖다 넣어도 동작을 한다니!! 하지만 최근 성능 저하 이슈로 살짝 내리막길을 걸어서 이대로 Angular JS가 지는가 했지만, 2.0버전을 발표하면서 1.x대 버전과는 호환 불가능할 정도의 문법으로 다시 태어났답니다.
원본 이미지 출처 : 인스티즈
그럼 Angular JS의 강력한 경쟁자인 React JS를 알아볼까요? React JS는 2013년 PHP로 개발된 페이스북의 프론트엔드를 책임지기 위해 태어난 프레임워크에요. DOM 제어를 버리지 않고 DOM의 변경사항만 업데이트하는 Virtual DOM과 단 방향 데이터바인딩 등의 특징을 가지고 있어서 DOM 제어 방식을 유지하면서도 개발의 생산성을 높여주게 되었답니다. Angular JS가 MVC 패턴을 고수하는데 반해 React는 View에만 집중하고 있어서 더 직관적이구요. 특히, Node.JS가 발표되면서 서버와 클라이언트가 하나의 언어로 소통이 가능해졌을 때, React는 이 점을 활용해 서버단까지 접근 가능한 기능을 갖추어서 경쟁력을 확보했습니다. 최근에는 React Native를 활용해 네이티브 앱까지 제작할 수 있도록 진화하였어요. 하지만 제대로 된 웹 사이트를 설계하고 개발하려면 JavaScript 자체에 대한 이해와 어떤 웹 사이트건 하드코딩으로 제작할 수 있는 '실력'이 중요하다는 사실! 잊으시면 안 됩니다.
네. 여기까지 읽으시느라 고생 많으셨습니다. 아무리 스타트업 취업이 중허다고 해도, 맨날 이런 프로그래밍 이야기만 다룰 수는 없겠죠. 스타트업이 개발자들만 우글우글한 개발자 소굴도 아니... 고....요...... 아... 아마도?......
다음 포스팅에서는 머리 아픈 개발자 이야기는 잠시 쉬었다가 가기로 하고요. 그나마 좀 익숙한 마케터.... 디지털 마케터...!!!를 다뤄보도록 할게요... 우리에겐 아직 안드로이드 개발자와 iOS 개발자도 남아있고, 무엇보다.. 데이터 사이언티스트가 남아있는 걸요 ^^.. 그럼 다음 시간에 만나요~
