by
Aug 05. 2023
(9)대대적인(?) 업데이트를 하다.
지면 기사 보기(갤러리) 기능 등 추가
지난번 기자협회보 인터뷰를 기점으로 단독의숲 이용자가 눈에 띄게 늘었다.
많을 때는 하루 300~400명, 적을 때는 100명 안팎이 접속하고 있다. 이용자가 많다고 하기는 어렵지만 나름 번듯한 앱이 된 셈.
빨간 부분이 인터뷰 보도가 나간 시점이다.그런 까닭에 지난 며칠 간 한동안 바쁘다는 핑계이유로 손놓고 있었던 각종 기능 개발에 착수했다.
사실 파이썬 뉴스 스크래퍼의 유지보수만 해도 꽤나 귀찮고 번거로운 일이었던 터라 추가 개발은 엄두가 잘 나지 않았다. 그러나 이렇게 많은(?) 사람들이 내가 만든 서비스를 찾고 있는데 가만히 앉아있을 수만은 없는 일. 나 역시 그에 걸맞는 희생(?)이 필요하지 않을까 하는 생각에 밤샘 코딩에 돌입했다.
https://dandoc.kr/archive
이번에 새로 유입된 유저 대부분이 언론계 쪽일 것이란 생각에 우선은 아카이브 쪽 UI/UX 개선에 공을 들였다.
1) 회사 아이콘(이름) 검색 기능
기존 DB(postgresql)에는 회사 table을 따로 만들지 않았는데, 추후 검색이나 추천 등으로 기능이 확장될 여지를 고려해 새롭게 company 테이블을 만들고 기존 아카이브들에 맵핑시켰다. 프론트엔드단에서는 회사별 아이콘을 노출(랜덤)시켜 아이콘을 클릭하면 자동으로 회사명으로 검색이 되도록 만들었다.
그 위 태그 아이콘도 마찬가지이지만 유저 사용성 측면을 고려해 버튼을 클릭하면 버튼이 중앙으로 스크롤 이동하도록 애니메이션 기능을 추가했다. pc 화면에서 가로 스크롤 액션이 어렵고, 의식하지 않으면 잘 이뤄지지 않는다는 점을 감안했다.
2) 아카이브 작성자 추가
기존 아카이브 모델에는 따로 작성자(author) 속성(attribute)이 없었다. 기능 개발의 번거로움도 있었지만 나 말고 누가 또 이걸 하겠느냐는 생각에 따로 만들지 않았던 것. 하지만 얼마 전 한 기자 친구가 기사 업데이트를 도와주기로 하면서 새로 속성을 만들어 기존 user 모델과 연결시켰다. 아직은 2명에 불과하지만 추후 기사 수집자 늘어난다면 '모아보기' 등 기능이 추가될 수 있고, 수집자들에게 기사의 바이라인처럼 일종의 심리적 보상을 주는 효과도 있을 것 같다.
3) 지면 기사 보기(갤러리) 기능
이번 업데이트의 핵심이자 하이라이트. 이것 때문에 한 이틀 밤을 꼴딱 세운 것 같다. 언뜻 보기엔 그리 어려운 작업이 아닌 거처럼 보이는데, 기존에 알려진 jquery, js 갤러리 라이브러리들이 은근히 작동을 안 하거나 자체 결함이 있어 테스트를 반복해야 했다. 내가 테스트했던 라이브러리들은 다음과 같다.
photoswipe, unitegallery, ligthgallery, VenoBox2...(몇 개 더 있었는데 까먹었다)
가로 스크롤은 swiper 라이브러리를 활용했다.pc에선 작동을 하지만 모바일에선 먹통(라이브러리 자체 문제)이거나 flask 렌더링 시스템과 충돌, swiper와 충돌 등등 예상치 못한 온갖 문제들이 발생하면서 결국 가장 심플한 모달modal 팝업 스타일의 VenoBox2로 최종 결정하게 되었다. pc와 모바일 모두 정상적으로 잘 작동한다.
이렇게 지면이 등록된 기사는 아카이브 메인 페이지에서 작은 아이콘으로 노출이 되도록 했다.
지면이 올라간 기사들은 메인 화면에 아이콘으로 노출되도록 했다.4) 사진 업로드 기능(관리자)
당연한 얘기지만 이미지를 호스팅 서버에 보내고, 호스팅 서버 이미지 url을 gallery DB에 추가하는 기능도 함께 개발했다. 이를 위해 gallery 모델을 새롭게 만들어 기존 아카이브 모델에 매칭시켰고, 업로드는 드롭존이라는 라이브러리를 활용했다. 이번에 처음 써본 것이라 잠시 헤맸는데, 복수 업로드 옵션의 기능을 착각한 탓에 처음에는 자꾸 이미지가 뒤죽박죽 순서로 올라갔다. 문제를 인지한 뒤 하나씩 순차적으로 올라가도록 코드를 수정했고, 이미지 파일 수십개를 한번에 올릴 수 있도록 만들어 반복작업 시간을 크게 줄일 수 있었다.
관리자만 접근 가능한 이미지 업로드 페이지. 오른쪽은 기사 인덱스.