프론트엔드 개발자가 하는 일을 표면적으로 요약 해보면 이렇게도 말할 수 있지 않을까. 서비스 기획에 따른 디자인을 웹 또는 앱 위에 구현하고 사용자로 부터 서비스에 필요한 데이터를 받아 정제해서 서버로 보내고 그에 따른 결과를 다시 사용자에게 응답 하는 역할 이라고 말이다.
프론트엔드
디자인 가이드에 맞게 실제로 구현하고 동작하게 하려면 HTML, CSS, JS(JavaScript) 는 기본이고 어느 하나라도 빠질 수 없다.
HTML(Hypertext Markup Language)은 웹페이지를 만들기 위한 가장 기본이 되는 언어이다. 주의할 점은 태그 마다 의미를 잘 이해하고 웹 표준에 맞게 사용 할수 있어야 하겠다.
CSS(Cascading Style Sheets)는 HTML을 시각적으로 꾸며주는 역할을 하는 언어 이다. 디자인 가이드에 맞게 웹페이지를 잘 스타일링 하기 위해서는 CSS 속성과 활용 방법에 대해 잘 알아야 하고, 사용자들의 다양한 디바이스 사이즈를 고려해서 각 사이즈 마다 최적화된 모습을 위한 반응형 스타일링도 필수다. 그리고 웹페이지 규모가 커질수록 CSS 코드 양도 점점 많아지고 관리와 유지보수가 만만치 않게 된다. 이를 위해 CSS 방법론을 알고 상황에 맞게 적절히 사용 할수 있어야겠다.
JS(JavaScript) 자바스크립트는 HTML과 CSS로 만들어진 웹페이지를 동적으로 만들어주는 언어로 슬라이드, 팝업, 탭, 드래그&드롭, 서버와 통신 등 많은 것을 가능하게 해준다. 자바스크립트는 객체 기반언어로 클래스와 상속 개념은 없지만 ES6+ 최신 문법에서는 비슷하게 구현이 가능하다. 자바스크립트는 쉽게 사용 할수 있지만 언어의 특징, 동작원리 그리고 클로저, 호이스팅, 비동기처리 처럼 등 다양한 개념들을 알고 사용 할수 있어야 하겠다.
프론트엔드 개발을 하다보면 jQuery를 필수과정 처럼 접하게 된다. 하지만 jQuery를 사용하지 않아도 자바스크립트 만으로도 구현 가능하다. 자바스크립트로 먼저 구현을 해 본다음 jQuery를 사용한다면 코드를 이해와 문제 해결력에 도움이 될 것이다.
대부분 애플리케이션은 사용자와 정보를 주고 받으며 많은 소통을 이룬다. 소통의 양이 많을 수록 액션도 다양하고 많은 이벤트가 발생하게 된다. 사용자 행동에 따른 빠른 대응이 필요했고 이를 충족하기 위해 SPA(Single Page Application)가 보편화 되었으며 SPA를 좀더 쉽게 구현 하기 위해서는 React, Vue, Angular 와 같은 UI 라이브러리/프레임워크가 필요하다. 적어도 하나 정도는 다룰 수 있어야 하겠다. 이러한 도구를 잘 이해하고 사용한다면 어느정도 수준 있는 코드 레벨과 사용하기 쉬운 인터페이스 그리고 디자인 패턴 등 공학적 측면에 대한 이해도도 높일수 있을 것이다.
브라우저 종류는 Chrome, Safari, Explorer, Firefox, Opera 등 이외에도 많은 브라우저가 있다. 디자인 가이드에 맞게 개발을 하고 각 브라우저 마다 띄워보면 예상치 못한 문제들을 마주 할 수 있다. 나라 마다 다른 언어를 사용하는 것처럼 각 브라우저 마다 엔진과 환경이 다르다. 서비스를 지원하고자 하는 브라우저에 동일한 기능과 디자인을 구현하기 위해서 브라우저의 특징고가 차이점을 이해하고 대응 할수 있어야 하고 이러한 작업을 크로스 브라우징(Cross Brouwsing)이라 한다.
모든 서비스는 홍보와 마케팅으로 사용자에게 노출 되면서 부터 시작 된다. 온라인에서 사용자에게 컨텐츠를 노출 시키고 보다 쉽게 찾을수 있도록 하는 작업이 필요하다. 이러한 작업을 검색엔진최적화(SEO: Search Engine Optimization)라고 한다. SEO는 웹페이지와 콘텐츠를 검색 결과의 상단에 노출 되도록 하는데 시간이 걸리지만 비용이 들지 않고 지속적인 노출이 가능하다.
그외 프론트엔드 개발자는
- 디자이너와의 원활한 소통.
- 개발 스펙, 컨벤션, 요구사항 등 설정.
- 컴포넌트 구성, 기능과 데이터 흐름에 대한 설계.
- 디바이스, 브라우저, 화면에 대한 기준 정의.
- 품질 향상을 위한 테스트와 QA 계획 및 가이드 제시.
- 적절한 리소스 관리와 퍼포먼스 최적화.
- 점진적 기능 향상 및 표준에 따른 호환성 고려.
- API 데이터 구조 설계.
- 빌드 및 배포 자동화.
- 일정에 맞는 기준 제시와 데드라인 준수.
- UI/UX 관점에서 편리한 사용성을 위한 의견 제시.
- CORS를 고려하고, 외부 공격에 대한 안전성 확보.
빠르게 변하는 프론트엔드 최신동향 파악하면서 끊임없는 자기계발을 하는 노력이 필요하다.
