"세월호는 왜"

소개

http://taogi.net/special/sewolho/background

세월호 참사가 일어난지 170여일이 지났습니다. 아직도 우리는 세월호가 왜 진도에 가라앉았는지 정확한 진상을 알지 못합니다. 그리고 지난 9월 30일, 세월호 특별법은 유족의 동의 없이 여야간 야합이 이루어졌습니다. 돌아보면 4월 16일 이후 우리는 많은 일들이 겪어야 했습니다. 주류 언론들은 연일 유족들과 정치권을 개싸움으로 몰아가고 있습니다. 그럼에도 우리가 여전히 잊지말아야 할 세월호 사건의 핵심은 **'진도 앞 차디찬 바다에 목숨을 잃은 그 아이들과 시민들에게, 대한민국이라는 공동체를 이루고 있는 우리 모두는 책임이 있다'**는 것 입니다.

그동안 많은 언론보도와 세월호 관련 검찰수사와 재판, 그리고 국회의 세월호특조와 감사원의 감사도 있었습니다. 아직 부족하지만, 그동안 세월호 관련하여 공개되었던 자료들 중 세월호 참사의 사회구조적 문제들에 대해 타임라인으로 재구성해보려 합니다. 이 타임라인은 첫번째 결과물입니다. 이후 추가 내용이 나오는대로 계속 업데이트될 예정입니다.

아직 부족한게 많습니다. 타임라인을 보시고 오작동 여부가 있거나 내용을 수정 또는 추가할 것들이 있으시면 언제나 의견주시기 바랍니다. 그리고 이 사이트는 gitHub를 통해 소스와 타임라인 데이터가 모두 공개되어 있습니다. 누구나 수정/업그레이드 해서 자신의 사이트에 게시할 수 있습니다. 단 저희가 사용한 라이브러리중에는 영리적 목적으로 사용할때 문제의 소지가 있는 소스도 포함되어 있으니, 참고하시길 바랍니다.

세월호 참사의 구조적 원인을 총 4개의 chapter로 나누었습니다.

선박산업의 보호와 육성을 빌미로 선박연령 규제를 20년에서 30년으로 늘리는 등, 일련의 선박관련 규제가 완화되면서 국내 연안에 중고선박의 갯수가 급증합니다. 그 중 하나의 배가 세월호입니다.
청해진 해운은 중고선박 도입후 불법 증축을 합니다. 이를 관리감독할 해양수산부 산하 기관들. 즉 한국선급, 해양경창, 인천항만청등이 아무런 역할을 하지 못하거나 오히려 눈감아줍니다. 결국 바다에 떠서는 안될 배. 세월호가 운항을 시작합니다.
선박연령을 30년까지 늘리는 조건은 바로 일상적인 선박관리의 강화였습니다. 하지만 이런 선박검사 그리고 불법관적 단속은 이루어지지 않았습니다. 그리고 해양수산부와 해양경찰의 재난시 구난 훈련은 형식화되었습니다. 한편 국회는 국난구조에 있어 민관합동 모델을 추구한다며 국난구조법을 개조해 구난구조를 상당부분 민간에 위탁하려 했습니다. 그렇게 탄생한 것이 한국해양구조협회이지만, 오히려 국가의 구난구조 능력만 사라지는 결과를 만들었습니다.
2014.4.16 오전 8시 58분경 세월호는 동력을 잃고 진도 울돌목에서 표류하기 시작한지 2시간만에 완전 침몰하였습니다. 선원들과 구조에 나선 해경과 정부의 제대로된 대처만 있었어도 거의 대부분의 아이들과 시민들은 구조될 수 있었습니다. 그러나 구조를 위한 골든타임을 완전히 놓치며 대한민국도 함께 침몰했습니다.

제작진

'세월호는 왜' 는 '진보네트워크센터'와 '투명사회를 위한 정보공개센터' 두 단체가 연대하여 만들어졌습니다.

콘텐츠 기획: 정보공개센터 강성국
디자인: 진보네트워크센터 뎡야핑
프로그램: 진보네트워크센터 황규만
연락처: truesig@jinbo.net / 02) 774-4551

사용 설명(Manual)

PC를 통해 타임라인을 보시는 분들은 키보드의 화살표키를 사용하실 수 있습니다. 위,왼쪽 화살표키는 이전 내용으로, 아래,오른쪽 화살표키는 다음 내용으로 넘어갑니다.
PC를 통해 타임라인을 보시는 분들은 키보드의 페이지업/다운 키를 사용하실 수 있습니다. PageUp은 이전 Chapter로, PageDown은 다음 Chapter로 넘어갑니다.
모바일을 통해 보시는 분들은 왼쪽 하단 노란색 메뉴버튼을 활용하시면 다양한 내용을 보실 수 있습니다.
각 내용중에 행위 주체라는 버튼이 있습니다. 해당 사건과 관련된 주요 담당부처나 법령을 표시하고 있습니다. 이 버튼을 클릭하시면, 해당 부처나 법령이 연관된 모든 사건들을 4분할 화면에서 일목요연하게 보실 수 있습니다.
IE8 이하 브라우져에서는 보실 수 없습니다. 크롬이나 파이어폭스등 대체브라우져를 사용하세요.

기술 설명(Document)

Required

PHP 5.0 이상. PHP는 특별한 역할을 하지 않고 JSon 파일을 읽는 역할만 하기 때문에 PHP Version에 크게 좌우되지 않습니다. DB도 Json 파일을 사용합니다. 따라서 MySQL같은 별도의 DBM이 필요없습니다. 따라서 다른 언어로 포팅하는데 크게 문제는 없을 것입니다.

사용된 jquery plugin 오픈소스

세월호는 왜는 PHP 5.2와 jquery로 동작하며, 외부 라이브러리들을 일부 사용하고 있습니다. 사용 중인 라이브러리들의 목록과 라이선스, 저장 위치는 다음과 같습니다.

라이브러리	라이선스	디렉토리
BookBlock	Codrops	fsbb/BookBlock
perfect-scrollbar	MIT	fsbb/perfect-scrollbar
OpeningSequence	Codrops	fsbb/OpeningSequence
actual	Copyright 2011, Ben Lin	contrib/jquery.actual

브라우져 지원

'세월호는 왜' 는 IE8 및 이하 버젼 IE 브라어져를 전혀 지원하지 않습니다. HTML5 를 지원하는 브라우져에서만 정상동작합니다.

소스 설명

four-slide-book-block
- 폴더: fsbb
- BlockBlock은 각 chapter별 내용을 책처럼 넘길수 있는 인터페이스를 제공합니다.
- four-slide-book-block은 기존의 오픈소스인 BookBlock 인터페이스에 4개의 슬라이드 모드로 서로 전환할 수 있도록 만들어진 jquery plugin 입니다.
- 전체 콘텐츠를 4개의 chapter로 나누고 기본 모드를 4 Chapter에 대한 간략한 설명이 담긴 표지 역할을 합니다.
- 동시에 각 chapter중에 서로 연관 있는 내용들을 4개의 슬라이드 화면에서 한꺼번에 볼 수 있도록 지원합니다.
- 4분할 모드(four-slide) 보드와 bookblock 모드로 자유롭게 오갈 수 있도록 만들어졌습니다.
- 각 모드별로 auto-scroll 문제를 해결하기 위해 또 다른 jquery plugin perfect-scrollbar를 사용합니다.
- 사이트 첫번째 오프닝 에니메이션을 위해 OpeningSequence 컴포넌트를 사용했습니다.
- 이 소스는 출처와 라이센스만 명시한다면 누구나 재배포, 수정배포가 가능합니다.
- 상세한 메뉴얼을 하단 6번에서
- License: MIT License
jquery.sewol-timeline.js
- 폴더: js/jquery.sewol-timeline.js, css/sewol.timeline.css
- 각 chapter는 타임라인 형식으로 구성되어 있습니다. 이 각각의 타임라인들을 실제로 콘트롤하는 jquery plugin 입니다.
- 이 소스 역시 출처와 라이센스만 명시한다면 누구나 배포, 재수정 배포할 수 있습니다.
- 상세한 메뉴얼을 하단 7번에서
- License: MIT License
marsa.php
- 폴더: marsa.php, js/jquery.marsa-diagram.js, css/marsa.diagram.css
- '한국해양구조협회'에 참여하고 있는 정부부처와 기관들의 관계도를 페이지입니다.
- jquery.marsa-diagram은 marsa.php에 있는 관계도를 responsive 하게 보여주기 위해 만들어진 jquery plugin 입니다.
- 이 소스는 '한국해양구조협회'에 특화되어 있어 범용성이 없지만, 누구나 가져다 범용적으로 개조하여 출처표기 없이 새로 배포할 수 있습니다.
app.js
- 폴더: js/app.js
- 위에서 설명한 3개의 jquery plugin들을 실제로 적용하는 javascript 입니다.
- 가장 중요한 역할은 각 타임라인이나 '한국해양구조협회' 관계도에 등장하는 정부부처, 기관들이 4분할 모드에서 구체적으로 어떤 연관이 있는지 한번에 보여주는 기능입니다.
- 하단 footer의 메뉴들에 대한 동작을 콘트롤합니다.
layout.css
- 폴더: css/layout.css
- '세월호는 왜' 사이트의 기본 레이아웃과 하단 footer의 버튼에 대한 디자인입니다.
style.css
- 폴더: css/style.css
- 전체 콘텐츠와 요소들에 대한 스타일시트입니다.
icomoon
- 폴더: css/fonts
- 이 사이트에서 사용하는 이미지 폰트입니다. 주로 정부부처와 기관의 아이콘을 표시하기 위해 만들어졌습니다. 이 font는 icomoon 사이트의 무료 서비스를 이용하여 만들었습니다.
타임라인 데이터

폴더: data/timeline.json
json 형태로 만들어졌습니다. 기본 json 포멧은 진보넷의 프로젝트인 '따오기'의 기본 데이터 Json 포멧을 계승합니다.
내용을 수정하고 싶으신 분은 이 파일을 수정하시면 됩니다.
data/timeline.json 내용은 정보공유라이선스 2.0: 영리금지 http://freeuse.or.kr/htm/main1_32.htm 라이선스를 따릅니다.

four-slide-book-block 사용법

기본 사용법: $('element').fsbb(options);

옵션

{
   mode: 'cover(표지모드) / quart(4분할로 내용 한꺼번에 보기모드) / bookblock(책모드)',
   theme: 'sewol' (테마),
   tearse_speed : '1s' (transition animate speed),
   title: ''(표지 타이틀 element),
   title_pos: {'left' : 0(표지 타이틀 left position), 'top' : 0(표지 타이틀 top position) },
   background: ''(바탕 이미지),
   Opening: 오프닝 에니메이션을 사용하고 싶을 경우 오프닝에 들어갈 메세지(문자열),
   useCoverAniate: true(표지모드일때 커버타이틀의 animate 활성 옵션),
   bb_before: function(page) {} (four slide mode에서 bookblock 모드로 전환될때 onBefore Event function. argument: 활성화되는 chapter번호 1~4),
   bb_after: function(page) {} (four slide mode에서 bookblock 모드로 전환될때 onAfter Event function. argument: 활성화되는 chapter번호 1~4)
}

method
- init(options)
  - $('element').fsbb('init',{options});
  - 위 기본 옵션과 동일
  - 주로 중간에 options 을 변경할때 사용.
- bb_activate(options)
  - $('element').fsbb('bb_activate',{options});
  - Chapter(options.chapter)를 bookblock 모드로 전환시킨다.
  - 옵션
```
{
    chapter: 1(활성화되는 chapter 번호 1~4),
    bookblock_after: function() {} (bookblock 모드로 전환된후 afterEvent)
}
```

HTML markup

<div id="" class="four-slide">
    <h1 id="" class="fsbb-title">커버타이틀(<img> / <svg> / 문자열</h1>
    <div class="four-item" data-title="chapter1 제목(아래 chapter navigation 자동완성시 사용)">
        <div class="item-wrapper">
            <h2 class="subject">chapter1 제목(<img> / <svg> / 문자열</h2>
            <section class="summary">chapter1 요약문</section>
            <section class="content">chapter1 내용</section>
        </div>
    </div>
    <div class="four-item" data-title="chapter2 제목">
        <div class="item-wrapper">
            <h2 class="subject">chapter2 제목(<img> / <svg> / 문자열</h2>
            <section class="summary">chapter2 요약문</section>
            <section class="content">chapter2 내용</section>
        </div>
    </div>
    <div class="four-item" data-title="chapter3 제목">
        <div class="item-wrapper">
            <h2 class="subject">chapter3 제목(<img> / <svg> / 문자열</h2>
            <section class="summary">chapter3 요약문</section>
            <section class="content">chapter3 내용</section>
        </div>
    </div>
    <div class="four-item" data-title="chapter4 제목">
        <div class="item-wrapper">
            <h2 class="subject">chapter4 제목(<img> / <svg> / 문자열</h2>
            <section class="summary">chapter4 요약문</section>
            <section class="content">chapter4 내용</section>
        </div>
    </div>
</div>

jquery.sewol-timeline.js 사용법

기본 사용법: $('element').sewoltm(options);

required library: perfect-scrollbar

옵션

{
   theme: 'sewol' (테마),
   mode: 'full(전체화면 사용. 상세내용 보기를 오른쪽으로) / overlay(부분화면 사용. 상세 내용보기를 overlay형태로 보기)',
   tag: ''(특정 tag를 가지고 있는  타임라인 항목만 보여줌),
   scrollElement : ''(타임라인을 전체화면에서 사용할수도 있지만, 경우에 따라서는 작은 영역안에서만 동작할 필요도 있습니다. 이때 overflow scroll을 처리할 상위부모 element object selector),
   showContentAnimate: 'opacity'(타임라인의 상세내용을 보여주는 창이 활성화될때 사용할 animation effect. default: opacity),
   slideContentAnimate: 'horizontal-slide'(타임라인의 상세내용간 이전/다음 내용보기시 활용할 animation effect. default: horizontal-slide),
   eventHandle : true(타임라인의 event handler(click/hover etc..) 를 활성화할지 여부),
   autostart : false(타임라인 시작시 첫번째 항목을 자동으로 활성화하는 옵션)
   onBefore: function() {} (타임라인의 활성화되기 전 beforeEvent),
   onShowContent: function() { return false; } (타임라인의 개별 항목이 상세보기할때 beforeEvent),
   onHideContent: function() { return false; } (타임라인의 개별 항목 상세보기를 닫을때 beforeEvent),
   onFirstContent: function() { return false; } (타임라인 내용보기에서 첫번째 항목일때 발생하는 Event),
   onLastContent: function() { return false; } (타임라인 내용기에서 마지막 항목일때 발생하는 Event),
   onResize: function(uniqueID) { return false; } (화면이 resizing Event가 일어날때 동작처리, uniqueID는 타임라인에 자동으로 부여되는 unique ID 값)
}

method
- init(options)
  - $('element').sewoltm('init',{options});
  - 위 기본 옵션과 동일
  - 주로 중간에 options 을 변경할때 사용.
- activeElement(idx)
  - $('element').sewoltm('activeElement',i);
  - 타임라인의 idx번째 항목을 활성화시킨다.
- showContent(idx)
  - $('element').sewoltm('activeElement',i,j);
  - 타임라인의 i번째 항목의 j번째 내용을 보여준다.
- setStart(i,j)
  - $('element').sewoltm('setStart',i,j);
  - 타임라인을 시작할 때 시작항목을 수동으로 지정합니다.
- stop()
  - $('element').sewoltm('stop');
  - 타임라인의 Event(click,hover,resize etc..)를 비활성화시킨다.
- start()
  - $('element').sewoltm('start',{options});
  - 타임라인의 Event(click,hover,resize etc..)를 재활성화시킨다.

HTML markup

<ul class="sewol-timeline">
    <li class="timeline-item">
        <div class="date">날짜</div>
        <article class="item-content tagClass">
            <h3 class="headline">제목</h3>
            <div class="text">
                <div class="text-wrap">
                    본문
                </div>
            </div>
        </article>
    </li>
    ....
</ul>

Version History

v.1.1 -- 2014.10.10 각 타임라인 항목마다 고유주소 부여.
- v.1.0 -- 2014.10.02 첫 공개
데이터 수정, 추가 내역
- 2014.10.02 첫 공개
- 2014.10.06 검찰 수사결과 발표에 따른 업데이트
- 2015.04.09 김창근 시민님의 의견에 따라 3장 '불법과적단속과 안전진단 미비'에 '해운법 일부개정안법률안' 부실통과 항목 추가.
- 2015.04.20 한겨레21 '세월호 참사 1주기 특별판' 이 발행되었고, 이 특별판에 세월호 침몰당시 해경의 통신내역이 잘 정리되어 있어 4장 '진도해역 침몰과 구조실패' 부분 대대적으로 내용 수정.

Name		Name	Last commit message	Last commit date
Latest commit History 56 Commits
contrib/jquery.actual		contrib/jquery.actual
css		css
data		data
fsbb		fsbb
images		images
js		js
libs		libs
.gitignore		.gitignore
.gitmodules		.gitmodules
README.md		README.md
ie8.html		ie8.html
index.php		index.php
marsa.php		marsa.php

jinbonetwork/sewolho-background-timeline

Folders and files

Latest commit

History

Repository files navigation

"세월호는 왜"

소개

제작진

사용 설명(Manual)

기술 설명(Document)

Version History

About

Resources

Stars

Watchers

Forks

Languages