(주)인실리코젠 FED팀(Front End Development)은 PC웹, 모바일웹, 반응형웹, 웹접근성 등 각 프로젝트에 적합한 기술로 UX를 해치지 않으면서 UI 퍼포먼스에 최적화된 마크업과 UI 개발을 담당하고 있습니다.

프론트엔드 프로세스는 크게 ‘관리의 효율성’, ‘성능 최적화’, ‘커뮤니케이션’ 등을 만족해야 하므로 배포할 수 있는 소스를 만들기까지 여러 단계를 거치게 됩니다. 예전에는 매번 폴더를 새로 만들고 필요한 라이브러리 파일을 웹에서 검색해서 다운받아 폴더에 넣고 HTML 문서에 해당 경로를 입력하는 것으로 프로젝트를 시작했습니다. 이미지 스프라이트, 공통 소스 분리, 소스 최소화 등 대부분 작업도 수동으로 처리했습니다.
그러나 프로젝트가 다양해지고 복잡해질수록 단순 반복 작업을 없애고 좀 더 효율적인 업무 프로세스를 만들 필요가 있습니다.

단순하고 반복적인 작업을 없애고 일관된 스타일을 유지하면서 코드 품질 향상까지 도모할 수 있는 FED팀의 스마트 업무 프로세스를 소개합니다.

 

요즘 잘 나가는 프론트엔드 자동화로 업무 효율성을 높이다!


Node.js 기반 NPM을 중심으로 업무 자동화 프로세스를 구축합니다.

NPM (Node Package Manager)
패키지(하나의 완성된 소프트웨어나, 부품으로 쓰이는 라이브러리 및 모듈)들을 설치, 업데이트, 패키지 간의 의존성과 버전 정보를 관리할 수 있습니다.

Bower
의존성 관리란 제이쿼리, 부트스트랩 등 외부 라이브러리를 가져다 쓰고 이에 대한 버전 관리를 하는 것을 말합니다. 라이브러리 간 의존성을 관리하고 라이브러리 파일을 형상관리 도구에 넣지 않아도 팀원 간 추가한 라이브러리에 대한 정보를 쉽게 공유하고 버전 업데이트도 편리하도록 Bower를 사용해서 프론트엔드 패키지만 따로 관리합니다. Bootstrap, Sass, Images 등 다양한 리소스를 하나의 패키지로 만들어서 배포할 수 있습니다.

Sass(SCSS)
강력한 CSS 확장 언어로 CSS로는 할 수 없는 변수, 함수, @import 디렉티브(Directive)로 스타일 파일을 모듈화할 수 있어 코드의 반복을 줄이고 재사용을 쉽게 합니다.

Babel
ES2015가 표준화되었지만, 아직 새 표준을 지원 못하는 구 버전 브라우저가 이해할 수 있는 신텍스(Syntex)로 변환해줍니다.

Gulp
프론트엔드 개발 관련 각종 툴들을 자동으로 실행시켜 주는 테스크 러너(Task Runner)로 프로젝트별로 필요한 환경을 자동화할 수 있습니다. gulpfile.js와 package.json은 모든 프로젝트에 바로 재사용할 수 있고 필요하면 쉽게 커스터마이징 할 수 있습니다.

 * 파일을 수정하고 저장할 때마다 브라우저 새로고침
 * 디버깅을 용이하게 하기 위한 CSS 소스맵(Source-map) 생성
 * 브라우저 지원을 위한 자동 접두사(Prefix) 추가
 * 써드파티 모듈/패키지로부터 Javascript, CSS, Image 가져옴
 * HTML 별로 인라인해야 할 자바스크립트를 가져옴
 * 자바스크립트를 난독화, Javascript, CSS, Image 최소화, 이미지 스프라이프(Sprites)
 * CSS, 자바스크립트 코딩 스타일과 에러 체크 등 코드 품질을 검증


Webpack

JavaScript 애플리케이션을 위한 패키지 번들러(Package bundler)로 JavaScript , 이미지, CSS 등 종속성을 가진 모든 정적 애셋(Static assets)을 단일 파일로 묶어줍니다. 자바스크립트를 모듈단위로 개발할 수 있어 Angular, React, VueJS 등 자바스크립트 중심 프로젝트에 적합합니다.

 * Loader를 통해 Javascript, Image file, Font, CSS, SCSS 등과 같은 자산을 하나의 모듈로 취급
 * Entry 별로 Bundle 생성 가능
 * Bundle에 대한 압축 및 난독화, 소스맵(Source-map)에 대한 옵션 제공
 * Plug-In 사용을 통한 사용자 정의 기능 수행
 * 비동기 I/O와 다중 캐시 레벨(Multiple cache levels)을 사용하기 때문에 컴파일 속도가 매우 빠름
 * CommonJS(nodejs)와 AMD(require) 스펙 지원



FED 팀은 ‘슬랙’한다!

슬랙(Slack)으로 팀 내 협업을 업그레이드 하다!!

슬랙(Slack)은 팀원 간의 의사소통 및 각종 알림을 한눈에 볼 수 있는 협업을 위한 플랫폼으로 채널별로 주제(팀 / 프로젝트별)를 나누어 관리할 수 있는 장점이 있습니다. 슬랙의 또 다른 장점은 다양한 외부 서비스와의 연동이 가능해서 디자이너와 개발자들이 활용하는 앱들을 incoming webhook을 이용해서 슬랙과 연동하면 쉽게 데이터를 가져오고 알림을 받을 수 있습니다.

깃랩(GitLab)을 슬랙과 연동시키면 GitLab에 push를 하거나, 이슈(Issues)를 등록했을 때 자동으로 즉시 알림을 제공받을 수 있고 제플린(Zeplin)과 연동하면 디자인이 변경될 때마다 즉시 업데이트가 된 내용을 알림으로 받아볼 수 있어 팀 내 또는 외부 팀(부서)과의 협업이 스마트해 집니다.



기술은 넓게 커뮤니케이션은 가깝게!!!


사용자가 사용하는 플랫폼이나 기기는 계속 변하지만, 코드는 이것을 모두 지원할 수 있도록 스킬을 갖추고 백엔드개발자와 디자이너의 경계선에서 프로젝트 내 원활한 커뮤니케이션 역할을 담당하며 고객과 시장의 요구사항에 맞춰 사용자가 가치를 느끼는 서비스를 만들기 위해 (주)인실리코젠 FED팀은 오늘도 최선을 다합니다.

인코덤(人CoDOM) 관련링크




작성자 : FED팀 김태영 주임

Posted by 人Co

2018/07/28 18:01 2018/07/28 18:01
Response
No Trackback , No Comment
RSS :
https://post-blog.insilicogen.com/blog/rss/response/286

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다



« Previous : 1 : ... 99 : 100 : 101 : 102 : 103 : 104 : 105 : 106 : 107 : ... 374 : Next »