소프트웨어 사용자 5만명 달성 기념, '555' 이벤트를 진행합니다.
HOT한 가격, COOL~ 하게 즐기세요!



Posted by 人Co

2018/08/01 09:07 2018/08/01 09:07
Response
No Trackback , No Comment
RSS :
https://www.insilicogen.com/blog/rss/response/287




(주)인실리코젠 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://www.insilicogen.com/blog/rss/response/286

POWERFUL LANGUAGE, ICON & HOW TO DESIGN IT BETTER?


요즘처럼 컴퓨터와 모바일 기기가 보편화 되어있는 환경에서 우리는 아이콘을 많이 접할 수 있습니다. 네이버 Map을 통해 원하는 장소를 찾을 때나 Toss로 송금할 때와 같이 다양한 상황 속에서 신속한 의사결정을 내릴 수 있도록 도와줍니다. 긴 설명이 필요 없이 다양한 사람들에게 의미를 전달하기 때문에 효율적인 커뮤니케이션 도구이기도 하지요.


아이콘은 이미지를 뜻하는 Greek 단어 ‘eikon’에서 파생되었으며 컴퓨터 아이콘은 1970년대 Xerox PARC(제록스 팰러앨토 연구소)에서 개발한 개인용 미니컴퓨터인 Xerox Alto 제품에서 최초로 사용되었습니다. 사용자들이 컴퓨터 인터페이스를 좀 더 쉽게 다룰 수 있도록 도와주기 위해서입니다. 이후 1980년대에 Apple Macintosh와 Microsoft Window를 통해 컴퓨터 운영환경에서의 아이콘 사용이 대중화되었습니다.



다양한 스타일의 아이콘이 많지만, 대표적으로 6가지 종류가 있습니다.
A. Outlined Icon : 선만을 사용하여 그린 아이콘
B. Filled Icon: 선을 사용하여 아이콘을 그린 뒤 색상을 채운 버전
C. Glyph Icon: 한 색상으로 채워 디자인한 아이콘
D. Flat Icon: 색상을 채운 아이콘(Filled Icons)과 유사하며 사용성을 고려하여 단순화된 2D 아이콘
E. Hand-Drawn Icon: 손으로 직접 그린듯한 느낌을 살려 디자인한 아이콘
F. Skeuomorphic Icon: 스티브 잡스 때문에 유명해진 스큐어모픽은 그림자 텍스처, 반사, 엠보싱 등의 효과를 주어 실제 사물과 유사하게 디자인한 아이콘


추가로 요즘 트렌드인 Isometric icon도 또 다른 아이콘 스타일입니다.



(출처:
http://iconutopia.com/)


다양한 스타일의 아이콘을 디자인할 때 무엇을 고려해야 할까요?
정보 전달력과 아이콘 디자인의 완성도 측면에서 context에 대한 이해와 아이콘 스타일의 일관성(cohesiveness)이 중요합니다. 먼저, 아이콘은 문자보다도 정보를 전달하는 데 있어 중요한 요소이기에 디자인하기 전 전달하고자 하는 메시지에 대해 이해해야 합니다. 예를 들어 미생물 분양 신청이라는 의미를 담고 있는 아이콘을 디자인할 때, 문서를 표현하는 픽토그램(pictogram)만 그리게 되면 어떤 분양을 하는지 명확하게 전달되지 않습니다. 그래서 문서에 미생물 픽토그램과 신청한다는 느낌의 펜을 결합해야 구체적으로 어떤 신청을 하는지 인지할 수 있습니다. (하단의 소재분양신청 부분의 아이콘을 참조해 주세요~) 


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

일괄적으로 아이콘을 디자인하기 위해서 스타일을 정하는 단계가 필요합니다. 선만 사용할지, 색상을 채울지 아님 스큐어모픽 스타일처럼 디테일하게 디자인할지 결정하기 위해서입니다.

인실리코젠 디자인팀은 리서치를 통해 아이콘 스타일을 정하고 조형미를 높이기 위해 아이콘의 비율에도 신경을 씁니다. 색상을 적용할 때 다채로운 색상보단 한두 가지의 포인트 컬러로 세련되며 일관적으로 보이도록 디자인합니다.

인실리코젠에서는 어떻게 아이콘을 디자인하고 있을까요?
생물정보를 제공하는 회사인만큼 다양한 바이오 정보들을 명료하게 표현하면서도 미적으로 아름답게 디자인하려 노력하고 있습니다. 최근에 iF SKIN을 위한 리포트 디자인을 하였습니다. iF SKIN은 유전자 검사를 통해 개개인의 피부 상태를 검사하고 맞춤형 음식 및 화장품을 추천해 주는 서비스입니다. 스킨 아이콘을 디자인할 때, 선의 두께를 조정하여 Simple 하면서도 디테일이 보존된 아이콘을 디자인하였습니다. (좌측은 아이콘을 적용한 iF SKIN 리포트 표지 디자인, 우측의 이미지는 iF SKIN 아이콘)



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

iF 시리즈 중 하나인 iF OBESITY 아이콘을 디자인할 때도 Skin 버전과 같은 스타일로 제작하여 같은 서비스라는 것을 사용자들이 인지할 수 있게 디자인하였습니다. (좌측은 아이콘을 적용한 iF OBESITY 리포트 표지 디자인, 우측의 이미지는 iF OBESITY 아이콘)



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

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

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



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

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



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

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

관련 자료:

작성자: Descign(= Design + Science + Management)팀 김지인

Posted by 人Co

2018/07/12 09:09 2018/07/12 09:09
Response
No Trackback , No Comment
RSS :
https://www.insilicogen.com/blog/rss/response/285

2018 CultureDay

더운 여름이 시작되는 6월의 끝자락이었습니다.
부산스러운 사무실을 뒤로하고 영화관으로 향했습니다.
그렇습니다. 바로 人Co의 공식 문화행사 'CultureDay' 입니다~!!

이번에는 가까운 영통에 있는 메가박스에서 영화를 관람했습니다.
삼삼오오 짝을 지어 영화관으로 고~고~.

오늘의 영화는~~~ 두~둥 헐리우드판 도둑들~! 오션스 8 이었습니다.

오션스 시리즈의 명성을 이어 이번에는 9명의 여성 헐리웃 배우들이 채웠습니다.
(영화선정은 올해부터 진행하고 있는 설문 조사를 통해 결정하였습니다~~.)
뉴욕 메트로폴리탄 박물관에서 열리는 미국 최대 패션 행사인 메트 갈라에 참석하는 톱스타 ‘다프네’(앤 해서웨이)의 목에 걸린 1천 5백억 원의 다이아몬드 목걸이를 훔치는 것이 목표! 모두가 한 장면, 한 장면에서 함께 웃고, 울고, 놀랐습니다.
한 공간에서 人Co인 서로가 감정을 공유할 수 있다는 점이 좋았습니다~.
영화관람을 끝내고 기념사진 찰칵~!

영화가 끝나니 출출해졌네요~.
맛있는 식사를 위해 회식장소로 이동했습니다.
맛있게 고기가 익는 동안 단체사진 한 컷 찰칵~!

먹음직스런 생고기가 항아리에 담겨 나오는 것이 독특했습니다.

막고기스럽게 투박하지만 생생한 생고기의 신선함이 눈, 코, 입을 감동시켰습니다~.
벽면의 카피도 재미있습니다. 어차피 인생은, 거기서 고기다! ㅎㅎ

사이드메뉴로 제공되는 조개탕의 진한 육수는 회식의 흥을 돋구었습니다.
파견, 출장에 계셨던 분들께서도 힘든 걸음이지만 참석하셔서 더욱 뜻깊은 날이었습니다.



함께해서 행복한 하루였습니다~.



그럼 다음 행사에서 봬요~ 안녕~~.

작성자 : 브랜드위원회 경동수

Posted by 人Co

2018/07/09 09:34 2018/07/09 09:34
Response
No Trackback , No Comment
RSS :
https://www.insilicogen.com/blog/rss/response/284

북극성 프로젝트

영화 '아이언 맨'의 자비스가 현실로? 립 모션의 '북극성 프로젝트(Project NorthStar)' 발표




위 사진을 영화에서 보신 분들은 앞으로 다룰 주제에 대해 다른 분들에 비하여 조금은 더 빠르게 주제를 머릿속으로 그리실 수 있을 것입니다.
영화 '아이언 맨' 의 한 장면으로 이러한 영화 속에서나 가능할 법한 일들을 현실에서도 가능하게 하는 디바이스를 제작하고 있는 회사가 있습니다. 바로 '립 모션(LEAP MOTION)' 이라는 회사입니다. 립 모션(LEAP MOTION)사는 'Michael Buckwald'와 'David Holz'가 공동 설립한 회사로 VR 제품(PC와 연결할 수 있는 인식 판을 이용해 3차원의 입력을 가능하게 만들었던 제품)을 출시 한 후 오랫동안 준비해오던, 증강현실로 가는 key가 될 수 있는 디바이스와 기술들을 하나씩 드러내며 올해 '프로젝트 북극성(Project NorthStar)'을 발표하였습니다.
길을 찾는 사람들에게 하나의 이정표로 이용됐던 북극성에서 따온 프로젝트 이름인 만큼 성과가 다소 부진하고 느린 이 증강현실 시장에 한줄기 밝은 빛, 이정표가 되어 이끌겠다는 의도가 담긴 것 같습니다.



지금의 증강현실 시장의 새로운 변화를 가져올까?


이미지 출처 :http://blog.leapmotion.com 

증강현실의 예를 들자면 가장 성공적인 예시로는 '포켓몬 고'를 떠올리게 되는데요, 이를 포함한 현재의 증강현실 서비스는 모바일 환경에서만 가능한 한계점에 부딪혀 있었습니다. 이러한 한계를 극복하기 위해 립 모션에서는 초당 120프레임을 표시하는 2개의 1600 × 1440 디스플레이가 있는 AR 헤드셋을 만들었습니다. 이 디바이스를 대중화를 위한, 헤드셋 대량 생산 시 개당 단가를 100달러 수준으로 맞추겠다는 야심 찬 계획을 하고 있습니다. 시장에서 기술과 가격에 경쟁력을 갖기 위해서도 노력하고 있는 이 프로젝트의 진행 상황은 Keiichi Matsuda의 트위터에 영상으로 소개가 올라오고 있고 또한 립 모션의 블로그를 통해서도 알아볼 수 있습니다.


디바이스 사용자의 손을 감지해 다양한 이벤트를 헤드셋을 통해 눈으로 보여주는 이 프로젝트는 올해 3월 트위터를 통해 처음 비공식적으로 공개되어 많은 이들의 궁금증을 자아냈습니다. 이 디바이스이 핵심 기술인 Hand Tracking 기술은 오래전부터 개발이 진행되었습니다.
립 모션사의 블로그에는 2013년 Three.js 를 소개하며 이들의 기술 소스를 공개하였습니다. 이후 2014년 LeapJS 프레임워크를 개발하여 v2 tracking 영상을 블로그에 공개 많은 이들을 이 프로젝트에 참여시키도록 유도하였고, 약 40명의 Contributor 들은 이 오픈소스를 이용하여 모션 제어 로봇, 손을 이용한 교육프로그램 등을 만들어 내었습니다. 이후 카메라와 이들의 기술을 접목시켰고 가상현실에서 손을 이용해 큐브를 만들고 던지는 등의 interaction 기술을 최근까지 개발하여 개발 진행 상황들을 블로깅 하였습니다. 그리고 현재에 이르러 올해 6월 6일 이들의 블로그를 통해 자신들의 기술력의 집합체인 AR 헤드셋에 관한 소스를 처음 GitHub를 통해 공개하였습니다. 현재는 헤드셋 최적화, 고도화 관련 이슈가 주된 이슈로 이야기가 오가고 있으며 다음 공식적 발표에는 어떤 새로운 기술을 보여줄지, 립 모션사의 'science fiction to life' 에 한발자국 다가갈 수 있을지 기대됩니다.

이미지 출처 : http://blog.leapmotion.com

핸슨 로보틱스(Hanson Robotics)의 AI 로봇 '소피아', 립 모션의 '북극성 프로젝트' 등 현대의 기술력이 높아짐에 따라 영화 '메트릭스','마이너리티 리포트','레디 플레이어 원','아바타' 등 사람의 무한한 상상력들을 그려낸 작품들이 더는 작품들로 남지 않고 우리 실생활 속으로 들어올 날이 얼마 남지 않았다고 생각됩니다.
이 디바이스를 통해 의사들은 큰 수술을 앞두고 실전처럼 수술을 연습할 수 있고, 한 팔을 잃은 사람들은 잃었던 팔을 다시 쓸 수 있게 되는 등 증강현실의 발전은 무한한 가능성을 잠재하고 있다고 생각합니다. 인류 과학기술의 한 변곡점에 살아가는 지금 현세대들의 끝에 얼마나 발전된 과학기술들이 펼쳐질지 그리고 언젠간 진짜 현실에서의 삶과 가상현실 속의 삶, 이 2가지 인생이 함께 존재하는 시대에 저도 살 수 있을지…. 이 기술들을 누리며 살아갈 세대들이 부러워지는 건 감출 수 없습니다.

참고자료

1. LEAP MOTION BLOG
2. Keiichi Matsuda 트위터

작성자 : BS실 김성진 개발자


Posted by 人Co

2018/06/14 09:17 2018/06/14 09:17
Response
No Trackback , No Comment
RSS :
https://www.insilicogen.com/blog/rss/response/283



« Previous : 1 : 2 : 3 : 4 : 5 : 6 : 7 : 8 : ... 58 : Next »