명태균 게이트 페이지 개발 후기
혼자 보기 아까운 '판도라의 상자'
12월 3일 계엄 선포 직후 계엄 타임라인 페이지와 부역자 기록 페이지를 빠르게 오픈하고 잠시 숨을 고르고 있었는데, 대통령 부부와 명태균 대화 캡처 이미지(검찰 수사보고서)를 입수했다. 계엄이 아니었다면 펑펑 터질만한 내용들이 가득 담겨있는.
#명태균 #불법여론조사 #대통령부부소통 #공천개입 #김영선 #창원산단
수사보고서 원본만 공개해도 되지만 복사본이라 품질이 너무 떨어져 고민이 많았다. 몇 장 정도면 그래픽으로 하나하나 만들겠지만 화면 캡처 이미지 개수만 280개가 넘었다.
ai의 도움을 받아 데이터의 베이스를 만들고 데이터팀 기자들과 리서처 알바들이 눈으로 한 땀 한 땀 ai가 낸 오타를 찾아 수정하고, 링크 및 유튜브 영상 링크를 찾아냈으며 대화에서 사용한 이모티콘도 찾아 gif로 복원했다. (체리따봉.gif)
데이터는 스프레드 시트를 거쳐 json 형식으로 바꾼 뒤 프론트에서 뿌렸다.
시원시원한 쿨톤 디자인(항상 그렇듯) 최대한 빨리 오픈해야 해서 디자인을 따로 할 시간도 없었다. 개발을 하며 바로바로 디자인을 만들어 가는데 next.js + tailwind 가 한 몫했다. tailwind 처음에는 지저분해서 뭐 이 딴 게 있나 했지만 쓰면 쓸수록 편하다. 이제 css(scss)가 넘 불편. 명태균 폰 화면도 tailwind로 휘리릭.
80장의 캡처 이미지를 담은 1차 오픈을 4일 만에 했고 약 일주일 뒤 281장 전부를 담아서 2차 오픈을 했다.
#피땀눈물 #야근 #목디스크_아파
흑백의 캡처 이미지를 진짜 텔레그램 메시지 화면처럼 그럴싸하게 복원했다. 이모티콘이 살이 있어서 생생하군. 수사보고서는 정말 보기 힘든 수준.
실제 대화의 띄어쓰기와 이상한(?) 콤마, 오타까지 그대로 복원하여 생생하게 그들의 대화를 엿볼 수 있다. 재밌으면 안 되는데 재밌는 대화도 많다... 웃프다고 해야겠지?
인물 및 키워드 선택 기능을 추가하여 특정한 대화를 찾아보기 편하게 만들었다. 이렇게까지 할 일인가 싶기도 하지만 대화의 분량이 많아서 꼭 필요한 기능이다.
오픈 후에 추가된 기능인데, 달력 팝업을 넣어서 실제 카카오톡 서비스처럼 보일 수 있게 만들었다. 개인적으로 카카오톡 대화창에서 날짜를 누르면 달력 팝업이 뜨는 것을 이번에 알았다. 윽...
실제 대화가 오간 날짜만 활성화되어있고 날짜 선택 시 해당 메시지로 넘어간다.
그 외에도 유튜브 영상 재생이나 이미지 확대 기능도 넣었다. 그들이 주고받은 pdf 파일이나, 기사 링크도 최대한 찾아서 작동하게 만들었다.
명태균 게이트 판도라의 상자를 열다는 단순한 카톡 대화 복원 페이지가 아니다. 계엄 타임라인, 내란 부역자에 이은 기록 시리즈 3탄이라 할 수 있을 만큼 중요한 프로젝트이고 그래서 더 많은 사람들이 봤으면 했다. 그런데! 이렇게 반응이 뜨거울 줄이야!
정확히 페이지뷰를 밝힐 수는 없지만 (밝혀도 되나?) 뉴스타파에서 나온 특별 페이지 중 가장 높은 것으로 안다. 역시나 모바일 비율이 압도적으로 높군.
예전부터 페이지뷰가 많이 나오려면 '공유'가 잘 되어야 한다고 떠들고 다녔는데 이번에도 X(전 트위터) 및 커뮤니티에서 뜨거운 반응이 이어졌다.
아직 못 보신 분들이라면 아래 링크를 클릭하여 보시기를... 혼자만 보기 아까운(?) 내용들이 가득하다.
