seoul/opengov

서울시가 또 한건 했네요!

다들 많이 회자 되고 있을 서울시의 opengov입니다. 많은 사람들이 이야기를 나누고 있을테니 저는 다른 관점에서 이야기를 좀 해볼까 합니다. 즉 깃헙을 모르시는 분들이 깃헙을 어떻게 사용할 지의 관점입니다.

개발자 분들에게는 이 포스팅이 크게 의미가 없을 수 있으니까 스킵하셔도 됩니다

2016/05/26 Editor’s choice

seoul-opengov/opengov
_opengov - 서울시 행정정보 공개 깃허브입니다.(서울 정보소통광장) Github for the Seoul government information disclosure._github.com

I.OPEN.U ㄷ ㄷ

깃헙이란 무엇인가요?

깃헙은 오픈 소스 개발자들이 자기들의 소스들을 공유하며 피드백을 주고 받는 개발자들의 SNS 이자, 소스코드 저장소라고 생각하시면 됩니다.

위와 같이 생겼고 이메일과 패스워드만 넣으면 간단하게 가입이 가능합니다.라고 생각하면 경기도 오산. 개발자들이 쓰는 탓에 일반인들이 접근하려면 몇가지 툴이 필요합니다.

시작할 때에 소스코드 저장소라고 했죠? 이 저장소에 있는 파일들을 가지고 오기 위해 git이라는 걸 사용합니다.

Github도 Git+Hub의 줄임말인 셈이죠.

Git이란 무엇인가요

Git에 관련된 더 자세한 내용을 위해서는 아래 링크를 참조하세요.

Git을 이용한 버전 관리 【Git의 기본】 | 누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog
_Git을 이용한 버전 관리 【Git의 기본】 | 누구나 쉽게 알 수 있는 Git에 입문하신 것을 환영합니다. Git을 사용해 버전 관리를 할 수 있도록 함께 공부해봅시다!_backlogtool.com

이 단계는 그냥 배경지식으로만 아셔도 무방합니다. 언제나 그렇듯이 쉽게 이해할 수 있는이란 말은 개발자에게 쉽게~ 입니다. 바로 아래 설치하기로 가셔도 무방합니다.

Git 다운 받기

git을 다운 받기 위해서는 아래 링크에 접속하시면 OS 별로 설치할 수 있습니다.

Git
_Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion…_git-scm.com

설치 하시고 나시면 윈도우즈의 경우 시작-> 명령어 혹은 Windows키+R 조합을 사용하셔서 cmd 명령어를 치시거나 설치된 git bash를 통해 git 을 실행할 수 있는 터미날로 들어옵니다.

터미날이라고 하는 것은

이런 형태의 명령어를 칠 수 있는 프로그램이고 일반인들은 DOS다 라고 이해하고 있는 그것입니다.

어쨌든 명령창이 나오고 나면

git clone [https://github.com/seoul-opengov/opengov.git][anchor6]

를 그냥 타이핑 하세요. 그러면

이런 과정을 거쳐 깃헙에 있는 파일들을 폴더에 가져오게 됩니다.

무슨 폴더에 있냐구요?

PWD

명령어를 치면 폴더를 찾을 수 있을 겁니다.

데이타가 정말 많기는 하군요. 31% 상황에서 250 메가가 넘다니, 테더링 중인데 엉엉.

데이타를 보는 방법

크게 세가지 정도를 지원합니다. xlsx, json, csv

결재문서, 사전정보공표목록, 정책연구자료목록 세가지 정보가 공개 되어 있고 csv,xml,json,xlsx 의 4가지 포맷을 가지고 있습니다.

여기서 xlsx를 통해 보실 수 있고, 사실 행정정보공개는 다른 방식으로 해 오던 포맷이 있었을 것이라 원래 활용하시던 분들에게는 별 의미가 없을 수 있습니다.

다른 포맷들을 짧게 설명드리면 csv는 엑셀의 열 기준으로 , 혹은 : 같은 구분자를 두는 텍스트 파일 포맷으로 변환이 됩니다.

이렇게 보이는 엑셀파일이

6410038,제3기 서울시 지역…, 2015…, 정책연구자료,2014

등으로 간단하게 표현이 되는 것이죠.

XML (Extensible Markup Language)은 많이들 알고 계실텐데

6410038

제3기 서울시 지역사회복지계획 수립 연구

20151022000009

정책연구자료

2014

복지

서울시전체

서울시복지재단

윤**

20150127

CC BY-NC-ND

I

http://opengov.seoul.go.kr/research/6410038</url>

와 같이 스키마들을 표현하는 형태로 보여지고 json은 Javascript Object Notation의 약자로

[“6410038”,”\uc81c3\uae30 \uc11c\uc6b8\uc2dc \uc9c0\uc5ed\uc0ac\ud68c\ubcf5\uc9c0\uacc4\ud68d \uc218\ub9bd \uc5f0\uad6c”,”20151022000009”,”\uc815\ucc45\uc5f0\uad6c\uc790\ub8cc”,”2014”,”\ubcf5\uc9c0”,”\uc11c\uc6b8\uc2dc\uc804\uccb4”,””,”\uc11c\uc6b8\uc2dc\ubcf5\uc9c0\uc7ac\ub2e8”,”\uc724\ud76c\uc219”,”20150127”,”CC BY-NC-ND”,”I”,”http:\/\/opengov.seoul.go.kr\/research\/6410038”]

와 같이 보여집니다. \uc81c3은 인코딩 문제 땜에 이렇게 보입니다.

개발자들은 이 데이타들을 XML파싱을 하거나 json데이타 파싱을 거쳐서 데이타 베이스나 메모리에 올려 작업을 할 수 있습니다.

데이타의 크기.

데이타는 기본적으로 큰 편입니다. 기본적으로 40,50 메가 정도의 텍스트 파일이니까 하나를 집어 넣는데 시간이 걸리겠네요.

시간이 좀 나면 클라우드 DB 같은데 넣고는 쿼리를 빼는 작업들을 하고 싶네요.

데이타의 유용성

데이타 사이언티스트가 아닌 저로서는 좋은 데이타인지 나쁜 데이타인지를 파악할 깜냥은 안됩니다.

하지만, 일반 개발자들이 씹고 뜯고 맛보고 즐기기에 좋은 형태로 잘 뽑아져 있는 거 같습니다.

이런 흐름은 아무래도 시민들의 자발적인 데이타를 이용한 새로운 사회이익 모델을 창출하고 싶어하는 서울시의 노력이라 보여지고 굉장히 훌륭한 첫발을 떼고 있다고 평가해도 괜찮을 거 같습니다.

담당자가 고생 많이 했겠네요. 담당관 이름을 적어두셨으면 더 좋았을텐데 말이죠. 메일은 있군요~

By Keen Dev on May 25, 2016.

Exported from Medium on May 31, 2017.

Spectre

5월 25, 2016

007 스펙터는 아닙니다.

개발자에게 가장 힘든 건 뭘까요? 여러가지가 있겠지만 같은 모듈을 계속 쓰는 권태로움도 그 중 하나죠.

Bootstrap에게 “이제 그만 쓰고 싶어” 라고 차마 말하지 못하는 여러가지 이유가 있지만 손쉽고 편하게 사용할 수 있는게 부트스트랩만한 녀석이 없는 것은 사실입니다.

2016/05/25 Editor’s choice

오늘은 이 권태로움을 벗어나게 해주는 새로운 대안이 될 지도 모를 css 프레임워크 spectre 입니다.

picturepan2/spectre
_spectre - Spectre.css - a lightweight, responsive and modern CSS framework._github.com

스펙터가 아이언맨이라니… ㄷ ㄷ

설치하기

npm install 옵션과 bower install 옵션 두가지를 지원합니다.

여기서 많은 개발자 들이 어랏! image와 font는 어쩌고. 라고 하실 것 같습니다. 네, css 밖에 없기 때문에 css만 따로 다운로드 받으셔도 됩니다.

$ npm install spectre.css

$ bower install spectre.css

실행해 봅시다.

Spectre.css - a lightweight, responsive and modern CSS framework
_There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM…_picturepan2.github.io

이 샘플 페이지를 한번 죽 훑어 보시는 게 아마 도움이 되실 듯 합니다.

이미지 처리

일단 image 와 font에 대한 부분을 먼저 짚고 넘어가면, bootstrap과 달리 spectre는 순수 css 만을 지향합니다. 그래서 이미지가 들어가야하는 부분은

<div class="chip-sm"\>  
<span class="chip-name"\>Crime</span\>  
<button class="btn btn-clear"\></button\>  
</div\>  

<div class="chip-sm"\>  
<span class="icon icon-favorite\_border"\></span\>  
<span class="chip-name"\>Drama</span\>  
<button class="btn btn-clear"\></button\>  
</div\>  

<div class="chip-sm"\>  
<img src="img/avatar-1.png" class="avatar" /\>  
<span class="chip-name"\>Yan Zhu</span\>  
<button class="btn btn-clear"\></button\>  
</div\>

이렇게 img src 로 표현하는 것을 원칙으로 하고 있습니다.

위의 소스는 chips 인데 다음과 같은 그림이 만들어집니다.

Asian Font

아주 자랑스럽게 아시안 폰트 지원을 강조 하고 있습니다. 바탕이나 굴림은 아니구요.

어떻게 보이십니까?

숨은폰트 찾기

네, Malgun Gothic. 맑은 고딕입니다.

맑은 고딕에 관해서는 다음을 참조하세요.

맑은 고딕
_이 문장과 아래 문장은 HTML 태그로 직접 맑은 고딕을 적용한 문장입니다. 키스의 고유 조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다 다람쥐 헌 쳇바퀴에 타고파 The Quick Brown Fox…_namu.wiki

네비게이션 바도 훌륭하게 지원하고

그리드 레이아웃도 최근의 flexbox 레이아웃까지 적용합니다.

서두에는 개발자의 권태로움이라는 측면에서 리뷰를 시작했습니다. 그런데, 리뷰를 하며 살펴보면 볼 수록 상당히 세련되었다는 것과 CSS 프레임워크로써의 자리에 충실했다는 점에서 HTML,CSS,JS 를 엄격하게 구분하는 개발자들은 좋아하겠다는 생각이 드는군요.