-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
291 lines (273 loc) · 15.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html lang="ko" data-theme="winter">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전국 공보 지도 - 코드포코리아</title>
<meta property="og:title" content="전국 공보 지도 - 코드포코리아" />
<meta property="og:description" content="인터넷 시대와 함께 우리 곁에 찾아온 전자공보. 과연 시민들은 전자공보에 실린 정보를 쉽고 편하게 찾아볼 수 있을까요?" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://gongbo.kr/" />
<meta property="og:image" content="http://gongbo.kr/sns2.jpg" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
.container {
max-width: 768px !important;
padding-left: 1rem;
padding-right: 1rem;
}
</style>
</head>
<body>
<header>
<section class="hero py-20 bg-base-200" style="background-image: url(bg_b.jpg)">
<div class="hero-content">
<div class="container mx-auto">
<h4 class="font-extrabold font-title text-2xl lg:text-3xl">코드포코리아</h4>
<h1 class="mb-2 font-extrabold font-title text-6xl lg:text-7xl">전국 공보 지도</h1>
<p class="py-6">
'공보’란 국가기관과 지방자치단체가 대국민에 정부의 소식을 알려주는 소식지를 말합니다.
<br>
공보는 누구나 찾아볼 수 있도록 제공되고 있으며,
<br>
시민단체와 언론이 행정 영역을 감시할 때는 공공 감시 도구가 되기도 합니다.
<br>
그렇다면, 인터넷 시대에 '전자 공보'는 우리 시민의 곁에 얼마나 더 가까워졌을까요?
</p>
<p>
“조례와 규칙의 공포는 해당 지방자치단체의 공보에 게재하는 방법으로 한다.
종이공보와 전자공보는 동일한 효력을 가진다.” - 지방자치법 제33조
</p>
</div>
</div>
</section>
</header>
<section class="sticky top-0 z-90 bg-base-300">
<div class="container mx-auto">
<div class="justify-between overflow-x-auto justify-items-stretch tabs tabs-boxed bg-base-300">
<a href="#results" class="tab link-neutral">평가 결과</a>
<a href="#map" class="tab link-neutral">공보 지도</a>
<a href="#data" class="tab link-neutral">데이터</a>
<a href="#insights" class="tab link-neutral">인사이트</a>
</div>
</div>
</section>
<main>
<section id="results" class="py-20 bg-secondary">
<div class="container mx-auto">
<h2 class="text-4xl font-bold mb-4 text-base-100">평가 결과</h2>
<div class="grid grid-cols-3 lg:grid-cols-5 gap-4">
<div class="stats bg-accent text-accent-content shadow">
<div class="stat">
<div class="stat-title">우수</div>
<div class="stat-value">3</div>
</div>
</div>
<div class="stats bg-info text-info-content shadow">
<div class="stat">
<div class="stat-title">보통</div>
<div class="stat-value">82</div>
</div>
</div>
<div class="stats shadow">
<div class="stat">
<div class="stat-title text-accent">미흡</div>
<div class="stat-value text-accent">137</div>
</div>
</div>
<div class="stats bg-base-300 text-base-content shadow">
<div class="stat">
<div class="stat-title">열악</div>
<div class="stat-value">10</div>
</div>
</div>
<div class="stats bg-base-300 text-base-content shadow">
<div class="stat">
<div class="stat-title">미분류</div>
<div class="stat-value">11</div>
</div>
</div>
</div>
<h3 class="text-xl font-bold mt-12 mb-4 text-base-100">작업 과정</h2>
<p class="mb-4 text-base-100">
2022년 3월 오픈데이터데이를 기념해 코드포코리아 시빅해커들은
전국 243곳 지방자치단체들의 전자공보 홈페이지를 일일이 방문하며
운영실태를 조사하기 시작했습니다.
</p>
<p class="text-base-100">
그 뒤 12월까지 여러 차례의 밋앤핵(meet and hack)을 통해
모두 10명의 시빅해커들이 조사에 참여했습니다.
</p>
</div>
</section>
<section id="map" class="py-20">
<div class="container mx-auto">
<h2 class="text-3xl font-bold mb-4">공보 지도</h2>
<div class="bg-base-200 w-100 mb-10">
<iframe src="https://www.google.com/maps/d/embed?mid=1hwV-e3Xy6gRfTaz8jB4owsBRQHp8IOo&ehbc=2E312F" width="100%" height="480"></iframe>
</div>
<ul>
<li><span class="badge">0</span> 종합 점수/등급: 각 세부 평가를 종합한 결과입니다.</li>
<li><span class="badge">1</span> 상세목록 제공 여부: 조례, 고시, 공고 등 세부 정보의 목록을 제공하는지 알아봤습니다.</li>
<li><span class="badge">1.1</span> 상세목록의 제공 수준: 상세목록이 단순 1페이지인지, 각 항목이 데이터로 다뤄지는지 평가했습니다.</li>
<li><span class="badge">2</span> 제공 형식: PDF, HWPX, HWP 순서대로 높은 점수로 평가했습니다.</li>
<li><span class="badge">2.1</span> 파일 다운로드 가능 여부: 파일을 다운로드받을 수 있는지 확인했습니다.</li>
<li><span class="badge">2.2</span> 파일 내용을 문자로 복사할 수 있는지 여부: 첨부파일이 스캔한 그림인지, 문자인지 확인했습니다.</li>
<li><span class="badge">3</span> 최초 제공 호수: 최초로 제공된 전자공보의 제공호수입니다.</li>
<li><span class="badge">3.1</span> 최초 제공 날짜: 최초로 제공된 전자공보의 발행일입니다.</li>
</p>
<h3 class="text-2xl font-bold mt-10 mb-4">우수 사례</h3>
<p class="py-2">
<span class="badge badge-accent">우수사례 1</span>
<a href="https://www.busan.go.kr/news/gosiboard?articlNo=2" target="_blank" class="link link-accent">부산광역시 전자공보</a>는 공보 한 권을 통째로 PDF 파일로 올려놓지 않고,
공보의 항목별로 파일을 제공합니다.
게시물의 종류, 게재기관 등의 메타 정보를 함께 보여주고, 이러한 메타 정보로 검색할 수도 있습니다.
</p>
<p class="py-2">
<span class="badge badge-accent">우수사례 2</span>
<a href="https://www.namdong.go.kr/main/news/gazette.jsp" target="_blank" class="link link-accent">인천광역시 남동구 전자공보</a>는 공보 한 권을 PDF 파일로 그대로 올려놨습니다.
그러나 목차에서는 담당부서 등 메타 정보를 일부 보여주고 있고,
목차를 HTML Table 로 구조화해 제공하고 있습니다.
</p>
<h3 class="text-2xl font-bold mt-10 mb-4">아쉬운 사례</h3>
<p class="py-2">
<span class="badge badge-secondary">아쉬운 사례1</span>
<a href="https://www.yeoncheon.go.kr/ebook/ebookList.do?key=3617&Dir=0103000000&sort=rcode" target="_blank" class="link link-secondary">경기 연천군</a>,
<a href="https://www.wonju.go.kr/ecatalog/contents.do?key=4514&" target="_blank" class="link link-secondary">강원 원주시</a>,
<a href="https://www.seosan.go.kr/ebook/usr/ebookContentList.do?key=8290&gid=131230124334488&code=0A" target="_blank" class="link link-secondary">충남 서산시</a>
등은 전자관보를 E-BOOK으로만 제공하고 있습니다.
그런데 원본 파일을 다운로드할 수 없어 이용자 입장에서는 불편할 수밖에 없습니다.
</p>
<p class="py-2">
<span class="badge badge-secondary">아쉬운 사례2</span> 울산광역시 등 지방자치단체 11곳은 전자관보를 PDF 형태로 제공하고 있습니다.
그런데 PDF 내용은 종이관보를 스캔한 이미지로 되어 있습니다.
파일을 다운로드 받아도 키워드로 검색할 수 없어서 정보 확인과 공공 감시가 불편합니다.
</p>
</div>
</section>
<section id="data" class="py-20 bg-base-200">
<div class="container mx-auto">
<h2 class="text-3xl font-bold mb-4">공보현황목록 데이터</h2>
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTVKWvJhS68o9R5tG2Yoo-plsc4ARcDjKaJzw0sdjF563APpoDtsWSa7du3cj-7TEd6Qm0TqsnjIWEu/pubhtml?gid=295179219&single=true&widget=true&headers=false" width="100%" height="400"></iframe>
<div class="mt-4">
<a href="https://docs.google.com/spreadsheets/d/1u6GV5vnne_bOL7Jqp3RykgKGbJ4_RxWUsSqwJlfaif8/edit#gid=295179219" target="_blank" class="link link-primary">데이터 보기</a>
</div>
</div>
</section>
<section id="insights" class="py-20">
<div class="container mx-auto">
<h2 class="text-3xl font-bold mb-4">기여자들의 인사이트와 제안</h2>
<div>
<div class="chat chat-start">
<div class="chat-header">
서원
</div>
<div class="chat-bubble chat-bubble-primary">
이번 프로젝트를 접하기 전에는 공보가 있는지도 몰랐습니다. 작업하며 지역주민이 알면 좋을 정보가 공보에 꽤 많다는 사실을 알게 되었고, 그 정보에 대한 접근성이 낮아 미디어 리터러시가 높은 기자 직군의 2차 가공이 필요하다는 사실을 배웠습니다. 공보 프로젝트를 통해 개인적으로 미디어 리터러시가 높아지는 경험을 했고, 공익적으론 기자 및 공무원의 정보가공에 도움이 되었으면 합니다.
</div>
</div>
<div class="chat chat-end">
<div class="chat-header">
권오현
</div>
<div class="chat-bubble chat-bubble-secondary">
보면 볼수록 지역에 관한 중요한 결정들과 소식들이 공보에 가득하다고 느꼈습니다. 하지만 제목이나 내용을 파일을 열어보기 전까진 알 수 없는 경우가 많아서 너무나 안타까웠습니다. 더 쉽게 접근하고 더 쉽게 찾아볼 수 있도록 개선이 되길 바랍니다.
</div>
</div>
<div class="chat chat-start">
<div class="chat-header">
벤지
</div>
<div class="chat-bubble chat-bubble-accent">
지자체들의 공보들을 처음으로 보는 경험을 해볼 수 있어서 좋았지만, 공보에 시민들에게 필요한 정보들이 들어가있는데 시민들은 정작 찾아보기 힘든 것 같아 아쉬웠습니다. 이번 프로젝트로 공보가 시민들에게 좀 더 가까이 다가갈 수 있었으면 좋겠습니다.
</div>
</div>
<div class="chat chat-end">
<div class="chat-header">
서준
</div>
<div class="chat-bubble chat-bubble-info">
지방자치단체들의 공보를 수집해 데이터를 구성하는 과정에서 시보, 군보, 공보 등등 불리우는 명칭도 제각각이고 통합되어 서비스 되는 곳이 없다는 크나 큰 문제점을 발견했습니다. 이후 시빅해커로써 이러한 문제점을 해결할 수 있는 전국공보지도 프로젝트를 진행하면서 사회 문제를 탐색하는 시야를 넓힐 수 있는 좋은 경험이 되었던 것 같습니다.
</div>
</div>
<div class="chat chat-start">
<div class="chat-header">
오원석
</div>
<div class="chat-bubble chat-bubble-success">
스스로 이렇게 하나씩 하나씩 해 나가는거 참 재밌고 소중한거 같아요.
</div>
</div>
<div class="chat chat-end">
<div class="chat-header">
남반장
</div>
<div class="chat-bubble chat-bubble-warning">
한땀한땀 모은 티끌같던 데이터가 모아보니 금같은 멋진 정보가 되었네요!
</div>
</div>
<div class="chat chat-start">
<div class="chat-header">
코코 승현
</div>
<div class="chat-bubble chat-bubble-error">
공보가 일반주민뿐만 아닌 학생눈높이에 맞는 공보도 필요하다는 생각이 들었어요. 또한 공보 내용에 대한 주민들의 피드백이나 소통도 함께하면 더욱 좋을 것 같습니다
</div>
</div>
<div class="chat chat-end">
<div class="chat-header">
은수
</div>
<div class="chat-bubble chat-bubble-primary">
공보가 뭔지도 잘 모르고 시작했는데 이 프로젝트를 계기로 공공데이터가 시민-행정간 소통에 얼마나 중요한 역할을 하는지 깨닫게 되었어요. 지자체별로 '정보'와 '소통'을 대하는 태도가 전자 공보에 드러나는 것 같아요.
</div>
</div>
<div class="chat chat-start">
<div class="chat-header">
클루
</div>
<div class="chat-bubble chat-bubble-secondary">
여러 시빅해커들과 함께 작업하는 즐거운 경험이었습니다. 작업 중에 사용하기 불편한 사례를 발견할 때마다 서로 공유하고 뒷담화(!)했던 시간이 특히 즐거웠습니다. 앞으로는 소중한 세금으로 펴내는 공보가 더 읽기 쉽고, 다가가기 좋은 형태로 만들어지기를 바랍니다.
</div>
</div>
</div>
</div>
</section>
</main>
<section class="bg-base-200">
<footer class="py-10 footer text-base-content container mx-auto">
<div class="">
<h5 class="text-2xl font-bold">
<a href="https://codefor.kr" target="_blank">코드포코리아 Code for Korea</a>
</h5>
<div>
<span class="footer-title">기여한 분들 (가나다 순)</span>
<p>
권오현 남반장 달로스 바른생활
벤지 오원석 유경민 이서준
이은수 클루 황서원
</p>
</div>
<div>
<span class="footer-title">프로젝트에 참여하는 방법</span>
<p>
<a href="https://code-for-korea.slack.com/join/shared_invite/zt-1agxnwk7r-XtjOFsUYTa0q3cIGecqGqQ#/shared-invite/email" target="_blank"> 코드포코리아 슬랙</a>에 가입한 후 <code>#p-진짜전자공보</code> 채널로 들어오세요</p>
</p>
</div>
</div>
<div>
<div>
<span class="footer-title mb-0">협력</span>
<h5 class="text-lg font-bold">
<a href="https://www.mois.go.kr/" target="_blank">행정안전부 공공데이터정책과</a>
</h5>
<h5 class="text-lg font-bold">
<a href="https://www.nia.or.kr/" target="_blank">NIA 공공데이터기획팀</a>
</h5>
</div>
</div>
</footer>
</section>
</body>
</html>