(이미지출처: https://www.google.com/intl/ko/earth/desktop/)
구글 어스의 관련 기술은 구글 지도에서도 통합적으로 제공된다.

지도의 원형이 탄생한 건 기원전 7,000년경입니다. 하지만 지도는 오랫동안 종이라는 2차원 공간에 3차원인 지구를 표현했고, 그로 인해 필연적인 오류가 있었습니다. 구글 지도는 그런 오류를 해결하는 전자 지도의 대명사가 되었습니다. 그뿐 아니라 온라인으로 무료 제공하는 지도 서비스에 기능을 더해 확장성을 부여하고 있는 것입니다.

스트리트뷰, 거리로 내려온 지도

구글이 2007년 추가한 스트리트뷰가 대표적인 예입니다. 위에서 내려다본 것 같은 평면 지도 외에도 실제로 도로에 서 있는 시점에서도 볼 수 있도록 한 것입니다. 유적지나 원하는 방문지를 마치 그 위치에 서 있는 것처럼 둘러볼 수 있는 것입니다. 화살표로 방향을 제시해 위치를 이동할 수도 있습니다.

2006년부터 실제로 카메라와 레이저를 탑재한 전용 차량을 이용해 미국 내 거리를 달리게 하면서 360도 사진을 촬영하고, 2007년 스트리트뷰 서비스를 시작하였습니다. 이는 자동차를 이용해 실제 거리를 촬영하고 지도의 역할 자체를 확장 시키는 단초가 되었습니다. 가상 여행을 하듯 사람을 지도 안으로 데려갈 수 있게 된 것입니다.

구글은 이 서비스 제공을 위해 2007년 미국 내 5개 도시에서 스트리트뷰 차량을 운행하기 시작했고, 2008년부터는 자전거에 카메라를 얹은 스트리트뷰 트라이크를, 다시 2011년에는 길 뿐 아니라 박물관 내부까지 촬영하기 시작했습니다. 여기에 자동차가 달릴 수 없는 장소라면 카메라를 직접 짊어진 사람이 걸어서 촬영하는 구글 스트리트뷰 트래커를 진행하고, 스마트 폰으로 촬영한 파노라마 사진을 올릴 수 있는 포토 스피어 기능도 나올 전망입니다.

(이미지출처: http://comfunny.pe.kr/530)
구글은 2007년부터 스트리트뷰 서비스를 시작했다.

스트리트뷰가 확장한 지도의 세계는 촬영지가 늘어날수록 마치 PC나 스마트폰만으로 세계를 여행하는 듯한 체험 쪽으로 영역을 확장합니다. 구글맵 스트리트뷰 플레이어 같은 기능을 이용하면, 1인칭 시점으로 목적지까지 경로를 볼 수도 있습니다. 지도만 들고 걷다보면 방향이 헷갈릴 수 도 있지만 이럴 때 유용할 수 있습니다. 또한, 가상 여행이 가능하다는 점도 재미있는 포인트입니다. 실제로 이 기능에는 트래블 모드를 통해 자동차나 자전거, 대중교통, 도보 같은 옵션을 선택할 수도 있습니다.

그뿐만 아니라 가상 여행의 경우 지난 2016년 구글어스를 통해 가상현실을 지원한다는 발표를 한 바 있습니다. 구글어스 VR을 이용하면 전 세계 여행을 360도 가상 환경으로 즐길 수 있다는 것입니다. 가상현실 헤드셋을 이용하면 집안에서 전 세계 원하는 곳을 가상 체험, 여행할 수 있게 해준다는 것입니다. 가상현실 헤드셋을 쓴 상태에서 컨트롤러를 이용해 지도 위 상공을 비행할 수도 있습니다.

다시 구글 스트리트뷰 기능으로 돌아가면, 거리 같은 단순 외부 풍경에 머물지 않고 건물까지 촬영하기 때문에 집에서도 박물관 같은 곳을 견학하거나 요세미티 같은 곳에 오르는 간접 체험을 할 수 있습니다. 구글은 이를 위해 지난해 구글어스에 가이드 투어 기능인 보이저를 추가하기도 했습니다. 또한, 같은 해 360도 카메라 지원을 발표했습니다.

(이미지출처: http://o2zon.tistory.com/372)
구글 스트리트뷰를 이용하면 몽블랑 같은 산이나 심지어 국제우주정거장 같은 곳을 가상체험해 볼 수 있습니다.

단순 시점 이외에도 구글 지도의 활용도는 2015년 아클리마가 구글과 제휴, 도시 대기 오염 수준을 시각화하는 프로젝트를 시도한 것에서 알 수 있듯이 지도를 기반으로 다양한 정보를 더할 가능성을 기대할 수 있습니다. 당시 양사는 도시 내에서 스트리트뷰를 촬영하는 구글 차량에 센서를 탑재하고 도심 대기 환경을 측정해 이를 시각화하겠다고 밝힌 바 있습니다.

여행의 필수 요소 중에 구글 지도는 빠질 수 없다고 생각합니다. 실제 해외여행 중에 구글 지도의 활용 비중이 상당히 높았던 만큼 이동수단, 이용시간 등의 정보를 구글 지도만을 통해서 얻을 수 있었습니다. 또한, 생각하지 못했던 맛집 정보에 대해서는 감동이 느껴질 정도였습니다. 앞으로는 게임의 배경에 구글 지도가 활용되어 시간과 돈을 소비하지 않고도 모든 나라를 직접 느낄 수 있는 날이 왔으면 좋겠습니다.

대전지사 문익수 개발자

Posted by 人Co

Posted by 人Co

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

 * 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) 관련링크

• JavaScript, Node.js

• Sass(SCSS), Webpack, Gitlab

• 웹접근성, 웹표준, 반응형웹

Posted by 人Co

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

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

(출처: https://design.tutsplus.com/articles/know-your-icons-part-1-a-brief-history-of-computer-icons--psd-9805)

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

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

추가로 요즘 트렌드인 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)

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

관련 자료:

• 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
  

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

Posted by 人Co

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

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

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

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

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

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

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

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



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



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

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

Posted by 人Co