오해
프론트엔드 개발자를 찾기 어려운 중요한 이유는 이 분야에 대해 오해하고 있기 때문이다. 대부분의 사람들은 프론트엔드를 "상대적으로 쉬운 분야"로 보고 있다. "대부분의 사람들이.."로 시작하는 구닥다리 방식을 사용해 프론트엔드 엔지니어가 하는 일을 상세하게 설명해본다.
대부분의 사람들이 생각하는 프론트엔드 엔지니어링
1) 포토샵 파일, 이미지, 와이어프레임 등을 가지고 웹 페이지를 만드는일
2) 때로는 앞서 나온 포토샵 파일, 이미지, 와이어프레임을 그리는 일
3) 웹 페이지에 애니메이션을 만들고 트랜지션 효과를 주기 위해 자바스크립트를 작성하는 것
4) 콘텐츠를 정의하고 이를 꾸미는 HTML과 CSS를 작성하는 것
프론트엔드 개발자가 실제로 하는 일
1) 디자이너와 엔지니어 간의 시각적 언어 확립
2) 시각 디자인으로부터 콘텐츠, 브랜드, 기능 들을 표현할 컴포넌트 세트 정의
3) 컨벤션, 프레임워크, 요구 사항, 시각적 언어, 스펙 면에서 웹 애플리케이션의 기준 확립
4) 웹 애플리케이션의 범위를 기기, 브라우저, 화면, 애니메이션의 측면에서 정의
5) 브랜드 충성도, 코드 품질, 관계자의 상품 리뷰를 위한 품질 보증 가이드라인 개발
6) 적절한 간격, 타이포그래피, 헤딩, 글꼴, 아이콘, 여백, 그리드 등을 사용해 웹 애플리케이션 꾸미기
7) 디자인 가이드라인을 따르며 다양한 해상도에 대응하는 이미지, 디바이스별 목업 등을 사용해 웹 애플리케
이션 꾸미기
8) 시맨틱, 접근성, 검색엔진 최적화, 스키마, 마이크로포맷 등을 고려하여 웹 애플리케이션 마크업하기
9) API에 접근하여 사용하기 편하고 배터리 소모가 없는 디바이스 및 클라이언트가 인지하는 방식으로 정보
가져오기
10) 부드러운 애니메이션, 트랜지션, 게이른 로딩(lasy loading) 인터렉션, 애플리케이션 워크플로우를 수행하는 클라이언트 사이트 코드 개발. 대부분 점진적 기능 향상 및 하위 표준 호환성까지 고려
11) CORS(Cross Origin Resource Sharing) 을 고려하는 한편 XSS(Cross Site Scripting)와 CSRF(Corss Site Request Forgery) 공격을 막아낼 수 있도록 백엔드 접속에 대한 안전성 확보
12) 엄격한 데드라인, 관계자들의 요구, 기기별 제한에도 불구하고 항상 사용자가 최우선이라는 점을 잊지 않기
이러한 목표 달성을 위해 프론트엔드 엔지니어들은 시각 디자인 도구(포토삽, Adobe, Macaw, Sketch)부터 프로그래밍 도구까지 다양한 도구를 사용한다. 심지어 간혹 마케팅, UX부터 콘텐츠 수정(가독성, 색상)까지 신경써야 한다.
나쁜 프론트엔드 엔지니어
프론트엔드 엔지니어링은 진입장벽이 정말 낮다, 자바스크립트, CSS, HTMl은 이해하기 어려운 프로그래밍 언어가 아니다. 누구라도 CodeAcademy나 CodeSchool 에 가서 며칠 안에 기초를 배울 수 있다. 웹 페이지에 있는 색상과 이미지를 바꾸는 것은 정말 쉽다. 웹의 기저까지 이해하는 것과는 오나전히 다르다.
결국 프론트엔드 엔지니어 시장은 다음과 같은 사람들 때문에 몸살을 겪을 것이다.
1) 자바스크립트 라이브러리를 남용하는 사람. 자바스크립트 내부를 제대로 알지 못하기 때문에 라이브러리를 남용한다. ex)모든 작업에 jQuery 가져다 붙이기
2) 자바스크립트 플러그인을 남용하는 사람. 다른 사람의 코드를 읽을 능력도 없이 가져다 쓰는 경우 ex) jQuery.doParallaxPis.js
3) 전체 CSS/JS 기능의 5% 밖에 안 쓰면서 요구사항이나 디자인도 안보고 성능 비교/평가도 안하고 웹 애플리케이션 CSS 프레임워크를 붙이는 사람
4) CSS 프레임워크만 가져다 붙이면 "반응형" 웹 사이트가 된다고 생각하는 사람. 또는 이러한 반응성이 웹 애플리케이션에 언제든 뿌리기만 하면 되는 양념으로 생각하는 사람.
5) "반응형 웹 디자인" 에 대해 말하면서 서버측 기법에 대해서는 알지 못하는 사람.
6) 컨벤션, 전처리도구(preprocessor), 네이밍 표준, 모범 예시없이 CSS 코딩을 하면서 셀렉터, 아이디, 매직 넘버, !important를 과하게 사용하는 사람
7) 성능, 메모리 누수(+메모리 누수가 무엇인지 잘 모르는 점)에 대해 무시하고 자신의 코드를 검사하거나 측정하지 못하는 사람.
8) 아무런 기준없이 제품을 보여주는 사람
9) 30년 된 소프트웨어 엔지니어링을 무시하면서 소프트웨어를 작성하는 사람
숙련된 프론트엔드 엔지니어가 알아야 하거나 작업시 해야할 일
1) DNS Resolution, CDN 사용, 여러 호스트 이름을 통한 리소스 요청 성능 향상
2) HTTP 헤더 (Expires, Cache-Control, If-MOdified-Since)
4) PageSpeed, YSlow, 크롬 개발자도구 Timeline 에서 보여주는 문제를 해겷하는 법
5) 작업을 서버에서 해야할 때와 클라이언트에서 해야할 때 구분
6) 캐시, 프리 페칭(pre-fetching) 및 지연 로드 기법
7) 네이티브 자바스크립트. 직접 바닥부터 코드를 작성해야 할 때 혹은 다른 사람의 코드를 가져다 써야 할 때를 아는 것. 그리고 두 작업의 장점과 단점을 평가할 수 있는 능력.
8) 최신 MVC 자바스크립트 라이브러리 (AngularJS, EmberJS, ReactJS), 그래픽 라이브러리(D3, SnapSVG), DOM 관련 라이브러리 (jQuery, Zepto), 게으른 로딩 또는 패키지 관리 라이브러리(RequireJS, CommonJS), 테스크 관리자(Grunt, Gulp), 패키지 관리자 (Bower, Compotentjs), 테스팅 (Protractor, Selenium) 에 대한 지식과 사용
9) 이미지 포맷과 장점, 언제 무엇을 어떻게 써야 하는가에 대한 지식. 이미지 최적화 기법과 사용계획 (스프라이트, 게으른 로딩 기법, 캐시 비움, 인터레이스등 PNG)
10) CSS 표준, 최신 컨벤션과 기법에 대한 지식과 사용
11) 자바스크립트의 컴퓨터 과학
결론
현재, 그리고 앞으로도 계속 웹에서 프론트엔드 엔지니어가 필요할 것이다. 다양한 디바이스, 브라우저, 웹 표준의 변화로 인해 웹 애플리케이션에서 사용자 부분을 담당해 줄 사람을 급히 찾게될지도 모른다. 프론트엔드 엔지니어와 개발자들은 우리가 식당의 메뉴를 보거나 영업 시간 따위르 보는 곳으로 생각했던 웹의 한계를 벗어나는 흥미진진한 제품을 만들 수 있다.
사용자 수천명의 생활에 영향을 끼칠 수 있는 기회가 있으며 인터넷 접속을 통해 누구에게나 신나는 서비스를 제공할 수 있따. 이 모든 것이 브라우저 위에서 이루어지고, 때로는 브라우저가 제약이 되기도 하지만 그 위에서 어떤 아이디어라도 분석하고 그리고 보여줄 수 있다. 프론트엔드 엔지니어들이여 건승하시길.
