시각화를 배우고 정리합니다

▶[Makers] Open Street Map 그리기요즘 틈틈히 시간을 내어 OSM(Open Street Map)을 그리고 있다. 예전에 베를린에 갔을 때 외국인 친구가 '너네 나라보다 북한이 더 그려진게 많다'라는 이야기를 듣고 진짜 깜짝놀랐었다. (실제로 그렇다.) 우리나라에도 오픈스트리트맵퍼가 있어서, 종로나 강남쪽은 꽤 건물들의 형태가 보이긴한다. 아래 사진은 서촌 지역의 모습인데, 꽤 많은 건물들이 지도에 그려져있는 것을 확인할 수 있다. 사실 우리는 네이버, 다음, 구글 지도를 평소에 봤기때문에 위 사진 속 서촌 지역 처럼 빼곡히 건물이 그려진 것이 오히려 자연스럽게 느껴지고 그 외지역은 뭔가 텅텅 비어있는 느낌이 들 정도다. 그러나 사실 솔직히 말하자면, 이 영역의 지도 역시 뭔가 어떤 서비..

▶ [p5.js] 기초 :: 베지어곡선 (Bezier Curve) 활용하기 2. bezierPoint() 이번 글 역시 지난 글에이어 베지어 곡선에 대한 내용을 정리해 볼 것이다. 지난 글에서 Bezier 곡선에 대한 기본적인 내용 및 p5.js에서의 베지어 관련 기본함수인 bezier()에 대한 내용을 정리했고, 이번 글에서는 bezierPoint()에 대한 내용을 다룰 것이다. 지난글 ▶ [p5.js] 기초 :: 베지어곡선 (Bezier Curve) 활용하기 - 1. 기본내용 및 bezier() 이해 bezierPoint() 함수 지난 시간과 동일하게, 우선 최소한의 예제코드와 - 그를 통해 구현되는 형태를 나란히 놓고 살펴보자. See the Pen p5.js bezierPoint() - examp..

▶ [p5.js] 기초 :: 베지어(Bezier) 활용하기 - 1. 기본 개념 및 bezier()함수 이번 글에서는 P5.js 에서 Bezier Curve 를 활용하는 방법에 대해 정리해 보려고 한다. 시작 이 '베지어'라는 개념은 (나를 포함하여) 꽤- 많은 사람들을 긴장하게 만드는, 뭔가 묘한 매력이 있다. 잘 사용하면 그만큼 아름다운 무언가를 만들어 낼 수 있지만, 그 '잘 사용한다'라는 개념까지 이르기가 너무 어렵다. 즉, 진입장벽이 꽤 높다는 말이다. 미리 말하지만, 이 글에서 진입장벽의 높이를 보일 생각은 없다. 나도 알아가는 사람 중 한 명이기 때문이다. 글 도입부에 이렇게 '베지어 곡선'의 위대한 진입장벽에 대해 이야기하는 이유는 간단하다. '조금 어려운 단어와 개념들이 등장하더라도 당황하..

Berlin 위치정보 맵핑 - 위치정보 기록 및 데이터 맵핑 지난 2월, 베를린에 작업환경(?) 견학차 다녀왔습니다.혼자가는 여행이라 기록을 잘 못할 듯 싶어, moves라는 앱을 설치해서 이동경로를 기록해두었습니다. 제 개인정보를 제가 스스로 기록해 외부서비스를 사용하여 업로드 한다는 것은, 저로서도 굉장히 찝찝한 일이었지만, 콘텐츠를 만드는 사람으로서 의미를 찾을수는 있었습니다. 뒤늦게 cartoDB로 정성없는(?) 콘텐츠를 만들어 올립니다. 위치정보와 함께 기록시간을 기점으로 그려지는 애니메이션 맵핑 어디에 많이 머물렀는지를 볼 수 있는 히트맵 투박하지만, 공유합니다.

​ ▶Web design :: responsive full background image 예제코드 뜯어보기이 글에서는 브라우저의 크기에따라 배경이미지가 자동으로 조절되는 효과가 어떤 기능을 통해 이루어지는지에대해 살펴보려고 한다. 이를 살펴보기위해서, sixrevision.com 에서 제공하는 'responsive full background image'에 대한 데모사이트와 그에 대한 내용을 바탕으로 코드 하나하나를 뜯어보며 그 그 기능에 대해 정리해보고자 한다. 전체 뷰포트(viewport)를 다루는 background-size 속성에 대한 cover 값을 사용한다. cover 값은 브라우저가 자동으로 background image의 너비(width)와 높이(height)를 확장할 수 있도록 하는 cs..

▶ 배경이미지 크기를 조절하는 방법 : CSS의 background-size property에 대하여CSS의 background-size 속성을 이용하면 큰이미지를 작게하여 배경에 반복하여 배치하거나, 작은 이미지를 확대하여 배경에 가득 채울 수 있다. 이에대해 이글에서는 CSS background-size를 적용하는 몇가지 예시에 대해서 정리하고자한다. 이글에서 정리하는 내용목록은 다음과 같다. CSS background-size 활용 예시 background-size의 활용 ① 배경이미지 크기 조정(변경)하기 background-size의 활용 ② 이미지 늘리기 background-size의 활용 ③ 작은 이미지 크게하기 background-size의 활용 ④ contain과 cover backgro..

▶AdobeMuse :: 텍스트 또는 이미지가 뿌옇게 보이는 현상 이글에서 살펴보고자하는 것은, 어도비 뮤즈에서 웹사이트 제작시 이미지 또는 텍스트사용시 뚜렷하게 나타나지 않고, 흐릿하게 화면에 표시되는 문제과 이에대한 해결방법을 정리해보고자 한다. 어도비뮤즈는 어느정도 수준의 웹사이트를 쉽고, 빠르게 만들 수 있는 좋은 툴이다. 특히 기존 어도비프로그램(Photoshop, illustrator등)에 익숙한 사람이라면 빠르게 적응하여 활용할 수 있다는점이 큰 매력이라고 할 수 있다. 그러나, 어도비뮤즈가 시작된지 꽤 되었음에도(뮤즈는 11년8월에 첫 베타버전이나왔다.) 활용성은 다른 프로그램과 비교해보았을때 만족스럽지 않은 수준이다. 어도비뮤즈에서 시스템폰트 적용시, 텍스트 또는 이미지가 뿌옇게(선명하지..

사이트 : 대학알리미 - 올바른 대학관련 데이터를 확인하는 곳이글에서 소개하고자하는 것은 '대학알리미'입니다. 대학알리미는 위 제목에서 이야기했던 것 처럼 "올바른 대학관련 데이터를 확인하는 사이트"입니다. 전국에는 수 많은 대학교가 있으며, 그에 대한 정보역시 너무나 많다. 수능이 있는 11월 즈음만 되면 여기저기 대학관련 광고들이 넘쳐나고, 인터넷 기사에도 대학을 홍보하는 내용의 광고가 널려있다. 그런데 홍보내용을보면 저마다 취업률 1위라는둥, 심지어 어떤곳은 취업률 100%라고 해둔 곳도 많다. [대학알리미 : http://www.academyinfo.go.kr] 대학알리미는 그러한 궁금증을 해소해줄 수 있는 곳이다. 우리가 궁금해할만한 대학관련 정보는 여기에 다 있다고 보면된다. 무엇보다 대학알리..

▶ d3.js 튜토리얼 ⑨ :: d3.nest() API 활용하기 d3를 공부하다보면, 이 d3.nest() API를 자주보게 되는데, 아마 그만큼 이 API가 유용하고, 효율적이기 때문일것이라고 생각한다. mike bostock의 예제 중 트리맵, 덴드로그램 예제, 그리고 이 외에 네트워크 시각화 관련예제에서도 이 d3.nest() API가 자주 사용되기때문에, 이 API가 다른 경우보다 조금 복잡하게 느껴지는 감이 있더라도, 마음먹고 꼼꼼하게 살펴보아야 한다. d3.nest() : 데이터를 트리구조로 변환하고자할 때 유용한 APId3.nest()는 .key() method를 이용하여 '데이터의 무엇을 key로 해서 데이터를 수집할 지' 를 지정할 수 있다. 수집할 데이터를 전달하고 결과를 배열이나 맵..

▶웹 개발지식 :: 부트스트랩(Bootstrap)이란? 부트스트랩(Bootstrap)이란 무엇일까? 부트스트랩은 웹에 뭣좀 해보려고하면(?) 마주치는 개념 여러가지 중 하나다. 무시하고 그냥 넘어가기에는 너무 자주보이기때문에, 한번 쯤 정리해볼 필요가 있는 것 같다. 부트스트랩(Bootstrap)의 개념 [사진 : 부트스트랩공식페이지 캡쳐화면] 고맙게도(?) 부트스트랩은 한국어페이지도 있는데, 부트스트랩 한국어페이지에서는 부트스트랩을 다음과 같이 한줄로 정의하고 있다. 부트스트랩의 개념 위 사진에서 보는 것처럼, 부트스트랩 한국어페이지에서는 "부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다."라고 정의를 하고 있다. 여기서 "반응형이며"..