12. 프런트 엔드 개발자, 동작하는 화면의 개발
웹 화면에 생명을 불어넣는 화면 개발자
프런트엔드(Front End)는 웹 서비스에 있어 화면을 말한다. 따라서 프런트엔드 개발자는 화면 개발자를 말한다(현장에서는 화면개발자라고 한다). 웹 화면 개발은 웹 퍼블리셔와 프런트 엔드 개발자가 나누어서 한다. 경우에 따라 프런트 엔드 개발자가 둘 다하는 하기도 한다. 웹 퍼블리셔가 html과 CSS로 화면을 만들어 놓으면, 그 화면이 사용자와 인터랙션 하여 동작하게 개발하는 것이 프런트엔드 개발자이다.
프런트엔드 개발자
프런트 엔드 개발자는 앞 공정 웹 퍼블리셔가 작업한 html 화면을 프로그래밍하여 사용자 인터페이스(UI) 즉, 화면을 완성하는 개발자이다. 디자이너가 디자인한 화면을 웹 퍼블리셔가 html로 만들고, 프런트엔드 개발자는 프로그래밍을 하여 화면의 기능을 완성한다.
｜수행 업무｜
프런트엔드 개발자의 역할프런트엔드 개발자는 웹 및 모바일 화면을 사용하기 좋게 구현하는 개발자이다. 웹 퍼블리셔가 만든 웹 화면 html에 동작을 불어넣기 위해 크게 두 가지의 개발이 필요하다. 첫째, 화면에서 슬라이더, 드롭다운 메뉴와 같은 시선을 사로잡는 동적인 요소를 개발하여 사용자 경험을 확장하는 것이다. 둘째, 서버 프로그램을 호출하여 화면에서 입력된 데이터를 전달하여 서버 프로그램이 처리하도록 한다. 서버 프로그램이 처리결과를 전달하면 사용자가 볼 수 있도록 html화면에 맞게 표현한다.
프런트 엔드 개발자는 UI/UX기획자와 디자이너가 화면에서 요구하는 위 두 가지 기능을 구현하는 개발자이다. 웹 퍼블리셔가 디자이너의 화면을 웹이라는 문서를 만드는 일이라고 하면, 프런트엔드 개발자는 그 웹에 프로그램을 하여 생명 즉 동작을 넣는 일을 한다고 보면 된다.
프런트엔드 개발자는 웹 화면의 동작과 기능을 개발하는 개발자이다.
일부 작업은 웹 퍼블리셔와 중복되는 부분이 있다. 따라서 현장에서는 웹 퍼블리셔와 프런트 개발자의 일이 명확하게 나누어지지 않아 갈등 요소가 되기도 한다.
예를 들어 화면 동작 구현을 위해 자바스크립트 개발이 필요한데, 웹 퍼블리셔가 하느냐 아니면 프런트 엔드 개발자가 하느냐를 두고 신경전을 벌이기도 한다. 웹 퍼블리셔가 자바스크립도 모르냐는 비난과 그것은 웹 퍼블리셔 일이 아니고 프런트개발자의 일이라고 부딪치는 경우이다. 보통 현장의 상황에 맞게 역할이 조정되는데, 어쨌든 자바스크립트를 잘 다루는 웹 퍼블리셔라면 환영받는 것은 사실이다.(프런트엔드 개발자가 자바스크립트 개발을 맡는 경우에도 웹 퍼블리셔가 자바스크립트를 잘한다면 간단한 수정은 웹 퍼블리셔가 할 수 있어 서로 좋은 관계를 유지할 수 있다.)
웹 퍼블리셔와 일이 중복되어 갈등 요소가 되기도 하지만, 프런트엔드 개발자와 웹 퍼블리셔의 일은 떼려야 뗄 수 없다. 웹 퍼블리셔가 기본 화면을 만들어야 프런트엔드 개발자가 거기에다 프로그래밍을 할 수 있다. 따라서 프런트엔드 개발자는 웹 퍼블리셔가 만든 html페이지를 제대로 이해를 하여야 한다. 개발과정에서 항상 수정과 변경이 있을 수 있으므로 작업 결과물을 서로 주고받아야 한다. 원활한 작업이 진행되려면 서로 간의 협력은 필수다.
화면에서 입력한 데이터를 서버로 전달하기 때문에 서버 개발자와의 소통 또한 중요하다. 서로 협력하지 않으면 정확한 데이터를 주고받을 수 없다. 따라서 뒷 단, 즉 서버 프로그램에서 진행되는 것을 잘 파악하는 것이 필요하다.
｜필요한 기술｜
HTML(Hyper Text Markup Language), CSS(Cascading Style Sheets)
프런트엔드 개발자도 웹 퍼블리셔와 마찬가지로 웹 화면을 개발하기 때문에 웹에 대한 기본 기술을 갖추어야 한다. 기본적으로 HTML, CSS를 다룰 수 있어야 한다.
자바스크립트(JavaScript), 제이쿼리(JQuery)
기본 기술들이 웹 퍼블리셔와 동일하다는 생각이 들 것이다. 계속 말하고 있지만 둘 간에는 중복되는 부분이 많다. 프런트엔드 개발자는 화면 개발을 완성하는 개발자이므로 웹 퍼블리셔에 비해 자바스크립트와 제이쿼리에 대해 더 깊은 기술적인 역량이 요구된다.
프런트엔드 프레임워크(Front End Framework)
프런트 엔드 개발자에게 가장 중요한 기술은 자바스크립트(JavaScript)이다. 제이쿼리(JQury) 또한 자바스크립트를 위한 라이브러리이므로 역시 중요한 기술이다.
웹 서비스의 발전에 따라 모바일 UI의 사용자 경험이 더욱 중요해지면서 화면 개발에 대한 요구가 복잡해졌다. 따라서 화면개발 프로그래밍인 자바스크립트의 중요성도 더욱 부각되었다. 자바스크립트 다양한 기능을 제공하는 제이쿼리가 어느 정도 그 요구를 충족했지만 더 효율적이고 체계적인 화면 개발 도구를 생각하게 되었다. 이것이 프런트엔드 프레임워크이다.
｜소프트웨어 프레임워크｜
컴퓨터 프로그래밍에서 소프트웨어 프레임워크(software framework)는 복잡한 문제를 해결하거나 서술하는 데 사용되는 기본 개념 구조이다. 간단히 뼈대, 골조(骨組), 프레임워크(framework)라고도 한다.(위키백과)
프레임워크는 개발에 있어 매우 중요한 개발 툴이다. 대부분 사이트에서 서버 개발도 프레임워크를 사용한다. 따라서 프레임워크를 이해하는 것은 매우 중요하다.
프레임워크를 어떻게 쉽게 설명할까. 정확한 비유는 아니지만 '플랫폼'을 생각해 보자. 브런치라는 플랫폼을 떠 올려보자. 브런치에 글을 쓰기 위해 브런치가 제공해 주는 것들이 많다. 문서 작성 기본 틀이 있어 사용자는 글에만 신경 쓸 수 있다. 그렇지 않으면 여백, 사진 위치 등 매번 그런 설정을 해야 한다. 브런치가 이미 그런 것을 제공해 주므로 작가는 글에 온전히 집중할 수 있다. 개발 프레임워크도 마찬가지이다. 프로그램 개발을 하기 위해 매번 해야 하는 기본적인 것이 있다. 이런 기본적인 프로그램을 갖추고 있는 것이 프레임워크이다. 그 틀에서 개발자는 업무 로직 위주의 프로그램을 할 수 있다. 브런치작가가 브런치 틀에 대해 알고 있어야 하듯, 개발자도 그 프레임워크가 제공하는 프로그램에 대해 잘 알아야 그 프레임워크에서 개발이 가능하다.
제대로 갖춘 IT 조직이라면 프레임워크를 활용한다. 프런트엔드 개발자는 이런 프런트엔드 프레임워크를 할 줄 알아야 한다. 프레임워크는 IT의 기술의 변화에 따라 다양해지고 있으며, 또 인기도 변하고 있다. 프레임워크 개발환경에서는 프로그래밍만 할 줄 안다고 개발이 가능하지 않다. 프레임워크를 제대로 활용할 줄 알아야 한다. 이는 디자이너가 일러스트를 잘 그린다고 해서 디자이너 일을 제대로 할 수 없는 것과 마찬가지이다. 아무리 실력이 좋은 디자이너라도 포토샵과 같은 디자이너 툴을 사용하지 못하는 디자이너를 채용할 수 없다. 마찬가지로 프런트엔드 개발자라면 자바스크립트는 물론 프런트엔드 프레임워크 하나 정도 할 수 있어야 한다.
프런트엔드 개발의 변화
현재 현장에서 활용되는 주요 프런트엔드 프레임워크는 세 가지 정도이다(더 많다는 의미). 각자 나름의 특징이 있다. 필자가 재직했던 회사에서도 단순 자바스크립트 개발에서 프런트엔드 프레임워크를 도입하였는데 여러 가지 테스트를 거쳐서 선정한 것이 Vue.js였다. 이후 프런트엔드 개발자 대상으로 교육을 실시했다. 실력을 갖춘 화면 개발자가 되기 위해 단순 자바스크립트와 제이쿼리 외에 이들 프레임워크 공부가 필요하다.
*프런트엔드 개발 프레임워크에 대한 자세한 사항은 인터넷 자료를 참조하기 바란다.(자료 많음)
｜갖추면 좋은 것들｜
모바일 화면에서의 사용자 경험이 중요해지다 보니 화면 개발 기술이 서버 개발에 대한 기술보다 더 빨리 변하고 있다. 개발 프레임워크도 버전이 높아짐에 따라 기술적인 구조도 변하는 경우도 많다. 따라서 이런 기술의 변화를 잘 감지하고 이해하여야 한다.
기술적 변화 대응을 위한 다양한 정보의 수집과 이해
웹 화면에 대한 기본적 구조나 기술에 대한 깊은 이해
프런트 개발의 앞공정인 웹 퍼블리셔와 디자인 작업에 대한 이해
프런트 개발의 뒷공정인 서버 개발 대한 지식(서버 개발도 가능하면 더욱 좋다)
화면은 특히 고객의 요구사항이 집중되는 곳이라 고객과 원활한 커뮤니케이션 소양과 능력
｜프런트엔드 개발자의 특징｜
예전에는 화면 개발은 초급 개발자가 하는 영역이었다. 지금도 그런 부분이 있지만, 모바일 웹 환경이 되면서 많이 변했다. 잘 기획하고 잘 만든 모바일 화면은 서비스의 성공에 직결된다. 따라서 웹 화면 개발이 더 중요해졌다. 실력 있는 화면 개발의 전문성이 부각되고 있다. 시선을 끄는 멋진 화면의 동작을 개발하는 것은 쉽지 않다. 좋은 기획과 디자인도 개발이 불가능하면 이면지로 될 수밖에 없다. 실력 있는 프런트엔드 개발자는 UI/UX기획자의 의도를 충분히 구현가능하도록 한다.
그러나 화면 개발자의 일은 성가시다. 서버개발자가 개발하고 난 코딩을 수정하는 일이 10이라고 하면 프런트엔드 개발자는 100이라고 할 수 있다. 눈에 보이는 화면은 오픈 전까지 변경된다. 따라서 개발의 끝이 없다. 이런 점에서 프런트엔드 개발을 기피하기도 한다.
그러나 화면개발은 빠른 피드백을 받을 수 있다. 고객 요구 사항을 바로 반영하고 피드백을 받고 확인할 수 있다. 또 반영의 결과 고객이 만족한다면 개발자로서의 보람을 느낄 수 있다. 미적인 감각과 개발의 재미, 고객과의 소통을 좋아한다면 프런트엔드 개발자로서 도전하는 것도 나쁘지 않을 것이다. 모바일 서비스에서 사용자의 경험(UX)을 중요해지는 시기에 실력 있는 프런트엔드 개발자를 찾기는 쉽지 않다.
웹 퍼블리셔로 시작을 해서 개발 실력을 점차 늘려간다면, 실력 있는 프런트엔드 개발자로 성장할 수 있을 것이다.
체계적이고 보완된 내용으로 브런치 글과 같은 이름으로 출간을 하게되었습니다. 아래의 링크를 통해 자세한 내용을 확인할 수 있습니다.
교보문고
나에게 맞는 IT 직업 찾기
예스24
나에게 맞는 IT 직업 찾기
알라딘
나에게 맞는 IT 직업 찾기
