이 이야기를 어디서부터 시작하면 좋을까? 결과적으로 정보공개센터 홈페이지 개편 프로젝트를 일단 마무리 지었다. 수정이 필요한 작은 수정사항들이 아직 남아있지만 일단 마무리를 지어 릴리즈를 했다. 부끄럽게도 이 프로젝트는 무려 2년이나 걸렸다.. 중간에 내가 이직도하고 육아 등으로 무한 길어지다가 이번에 정보공개센터 10주년인 한글날 전에는 무조건 오픈해야 한다는 생각으로 마무리를 하였다. 역시 마감이 있어야 일을 하게 된다.
나는 살면서 많은 분들께 빚을 지며 살고있다. 내가 나 자신과 가족의 영달을 위해서 사익추구 활동을 열심히 하고있을때, 누군가는 개인의 이익보다는 공동체의 미래를 위한 활동을 하고 있는 분들이 있다. 다양한 시민단체, 봉사단체는 물론이고 내가 살고있는 사회를 만든 민주화 운동을 하신 분들, 한국의 산업발전을 위해서 열심히 일한 윗 세대에게도 빚을 지고있다.
그렇기에 내가 가진 작은 기술들은 내가 열심히 해서 얻은것이라기보다는 배우고 성장할 수 있도록 환경 때문에 이룬것이라고 할 수 있다. 그래서 나도 종종 작은 후원과 기여활동으로 더 나은 세상을 만들기 위해 할수 있는 것들을 찾아보곤 한다. 나의 경우에는 할 줄 아는게 개발이니 홈페이지 개편같은게 되겠다. 예전에도 특정 정당의 지구당이나 중앙당의 일부 홈페이지를 만들어준 적도 있는데 오랜만에 시민단체의 작은 프로젝트를 하게 되었다.
이런 일들은 실제로 해보면 회사일과는 다른 개발이다보니 배우는 것도 많고, 시민단체 등에 계신 분들과 교류를 하면서 재미도 느끼게 된다. 내가 모르는 세상을 조금 더 알게되는 느낌이 좋아서 많이는 못해도 계속 하게 되는 것 같다.
왜 고쳐야했나
예전 홈페이지는 만들어진지 꽤 오래된 홈페이지여서 많은 역사가 그안에 쌓여있었다.
일단 메뉴가 여기저기에 혼재 되어있고, 중복도 되어 있었으며,
responsive 하지 않아서 모바일 지원을 위해서 티스토리의 모바일 홈페이지 기능 (자동으로 m.opengirok.or.kr 로 포워딩 해주어서 티스토리 스킨으로 보여주는) 을 사용하고 있었다. 나는 이렇게 모바일 용으로 URL이 나뉘는건 SEO 적으로 안좋다고 생각 한다.
그리고 사이드바가 이중으로 되어있다보니 콘텐츠 영역이 매우 좁고, 폰트 등도 가족성이 매우 안좋은 상태 였다.
표를 효과적으로 보여주고 싶은 등 고민들도 가지고 계셨다
는 내가 관심을 가지게된 이유이다. ‘참 좋은 단체인데 홈페이지가 너무 슬프네’. 그리고 마침 정보공개센터도 홈페이지 개편을 하고 싶다는 생각은 가지고 계셨다고 했다.
개발 과정
처음에는 물론(?) 워드프레스를 고려했다. 10년이된 시민단체 정도라면 호스팅비를 내가면서 직접 홈페이지를 만들면 자유도도 높은 홈페이를 만들 수 있고 운영도 할 수 있으리라 생각했다. 게다가 가끔 티스토리의 불합리한 콘텐츠 운영정책 이야기가 들리는터라 직접 운영하면 좋을 것이라고 생각했다.
하지만 티스토리 유지를 다시 선택한 이유는:
네이버 검색이 잘된다. (고 알려져있다)
서버비 제로 (돈 보다는 비용 관리를 할 필요가 없다는..)
보안문제 걱정을 덜 수 있다.
URL을 유지하면서 마이그레이션 하는 것에 대한 부담
프로젝트가 너무 커지는 것 방지
티스토리 스킨을 개발해본적은 물론 없었다. 그냥 막연하게 재미있을 꺼라고 생각했달까.. 하지만…
슬프게도 티스토리 스킨개발 과정은 요즘의 모던한 개발환경을 쓸 수 있는 그런 형태는 아니었다. 태터툴즈에서 시작되는 오랜 역사를 관찰할 수 있는 느낌은 든다. 원하는대로 HTML을 조작할 수는 없어서 필요한 형태를 만들기 위해서는 jQuery 등으로 DOM을 잘랐다 붙였다 하는 작업도 필요하다. 일부 table 레이아웃 요소라던가
결과적으로 jQuery1 latest 와 Bootstrap 3로 작업했다. jQuery 2나 Bootstrap 4를 안쓴 이유는 아무래도 한국의 열악한 브라우져 점유율을 고려해서 였다. 최종 결과물은 공개되어있으니 Github tebica/opengirok 에서 확인할 수 있다. 티스토리 스킨 개발환경 상 관리자 화면에 포함된 스킨 에디터에서 수정을 하고 그 스킨을 기록용으로 Github에 올려서 관리했다.
오래된 레거시가 많아서 힘든면도 많았다. table 레이아웃의 불편함 이외에도 HTML, CSS요소가 관리자메뉴 여기저기에 흩어져 있다는 점, 생각보다는 자주 눈에띄는 버그. 하지만 오랜만에 써보는 Bootstrap, jQuery 문서를 보면서 재미있었다. 처음에는 김슬 님이 webpack / jeet / stylus 기반으로 하는 것을 추천해주셨지만 CSS 프리프로세서를 쓸 수 있는 그런 개발환경은 아니었기에 적용 할 수는 없었어서 아쉽다.
개편 후 정보공개센터 홈페이지
정리하며
이 작업이 중간에 멈추지않게 같이해주신 정보공개센터 활동가 분들은 물론이고, 개발이나 디자인을 도와주신 동근님, 슬님 지윤님 이 없었으면 절대로 마무리 하지 못했을 것이다. 나의 미천한 실력 때문에 아직도 개선할 마크업이 많이 남아있다. 일단 선 오픈하고 계속 수정해 나가려고 한다.
아주 예전에 영국 가디언지에서 크라우드소싱으로 정치인들의 영수증을 리뷰 진행한 적이 있었는데 너무 멋였다. 아직은 한국은 그런 정보들까지 공개되어있지는 않지만 정보공개센터 활동은 꾸준히 되고있다. 한국에서도 정보공개로 더 많은 변화를 가져올 수 있다고 생각한다. 부끄럽게도 아직도 나는 정보공개청구를 한번도 안해보았다. 홈페이지를 개편했으니 이제 나도 소프트웨어 정책 관련 정보공개청구를 하러 가볼까!
Leave a Reply