(주)인실리코젠 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) 스펙 지원

(출처: 직접제작, iF 프로젝트 중, 2018 INSILICOGEN)

(출처: 직접제작, iF 프로젝트 중, 2018 INSILICOGEN)

이 외에도 다양한 생물정보 서비스를 디자인하고 있으며 Bioinformatics 전문기업으로서 저희만의 아이콘 제작 방법론(methodology)이 있습니다. 오랫동안 바이오 분야에서 UX 및 브랜딩을 담당해 오신 정은미 이사님이 개발하신 프로세스입니다. 생물정보 관련 아이콘을 디자인할 때 충족해야 하는 요소들에 대해 체크리스트를 만들어 디자인 후 고객이나 생물정보 전문가를 대상으로 설문조사를 하는 것입니다. 디자인한 아이콘의 의미전달력을 다시 한 번 평가하며 사용성 측면에서 고려될 수 있기 때문입니다. 아이콘 방법론에 대해 더 자세히 알고 싶으시면 “생물정보학 소프트웨어를 위한 사용자 인터페이스의 아이콘 개발에 관한 연구”를 참조해주세요.

그리고 저는 인실리코젠 UX/UI 디자이너입니다. 캐나다 밴쿠버에서 Interaction Design을 전공하였고 바이오/생물 분야의 UX/UI 디자이너로 성장하고 싶어 인실리코젠에 지원하게 되었습니다. 아래 보이시는 이미지는 학창시절 작업한 프로젝트입니다. 부모와 아이들이 근처 공원에서 함께 자연놀이를 하며 식물, 생물 등의 정보 및 과학정보를 배울 수 있도록 UI를 기획하였습니다. 콘텐츠를 구성할 때 아이콘을 같이 배치하여 어떤 상황에서도 빨리 원하는 정보를 찾을 수 있게 디자인하였습니다.

(출처: 직접제작, Naturly, 2015)

이 외에도 sushi라는 콘셉트로 영문폰트를 디자인하였습니다. 초밥을 보면 위에 회가 얹어져 있는 특징을 모티브로 디자인했습니다.

(출처: 직접제작, Sushi, 2013)

이제 저는 인실리코젠에서 더 많은 생물정보 아이콘을 디자인할 계획입니다. 지금까지의 경험과 정이사님의 노하우를 바탕으로 생물정보 및 바이오 디자인 분야를 확장하며 최신 디자인 동향도 적용하여 효과적으로 생물데이터를 보여주는 기업으로 성장하는 모습 보여드리겠습니다. 앞으로 인실리코젠 디자인에도 많은 관심 부탁드리고 다음에는 색상 사용에 대한 팁을 알려드릴게요 ~

관련 자료:

• Iconutopia: http://iconutopia.com/6-steps-to-make-your-icon-set-cohesive/

• https://historyoficons.com/

• 생물정보학 소프트웨어를 위한 유저 인터페이스의 아이콘 개발에 관한 연구, 정은미, 2003: https://academic.naver.com/article.naver?doc_id=79621016