[토이프로젝트] TimeLine 2.0 개선 오픈

설계, 운영 모든면에서 실패

토이프로젝트 TimeLine을 만들어서 오픈했었다. 

개발의 목표는 단순하게 개발 블로그, 채용등에 대해 한번에 볼 수 있는 개발자를 위한 통합 페이지를 만드는 것이었다.

https://wedul.site/626

[토이 프로젝트 소개] 개발자 채용, 기술 블로그 정보를 모아주는 TimeLine

하지만 사용하는데 생각보다 불편한 부분이 많았고 설계부분에도 현재 시스템을 고려하지 않고 만들었던게 운영에 걸림돌이 되어버렸다. 그래서 서비스를 잠정적 중단하고 2.0을 만들어서 오픈하기로 했다.

 

 

설계 실패 요인

실패 요인 1.

- 젠킨스를 실행시키면 별도의 관리포인트가 생길것으로 우려해 batch application을 계속 실행시켰던 부분이 큰 문제였다. 내 서버는 배치, db, api모두 하나의 서버에서 돌아가는데 4기가라는 부족한 메모리 상황에서 불필요한 batch application을 실행시켜서 다른 애플리케이션에서 메모리가 많이 부족하게 만들었다. 그래서 젠킨스를 작은 메모리를 할당하여 실행시키고 batch job을 세분화하여 batch application이 계속 실행되지 않게 하였다.

 

 

 

각 모듈을 build하는 jenkins job

rss, 스크래핑 등을 진행하는 indexing job

현재 api를 교체하는 job

 

 

 

실패요인 2.

실패요인1과 같이 시스템의 리소스가 많이 부족한 상황에서 api에 호출이 늘어나면 부하가 걸렸다. 그래서 이를 조금이라도 줄여보기 위해서 api에 비동기를 붙이기로 했다. 하지만 사용하고 있는 rdb에서는 비동기가 지원을 하고 있지 않은 상황에서 어떻게 해야하지 고민했는데 마침 r2dbc mysql이 정식 release했다. 굿굿 그래서 이를 사용해서 적용했다. 실제로 드라마틱하게 api 성능이 오른건 아니지만 그래도 확실히 속도가 더 빨라졌다.

 

실패요인 3.

욕심이 생겨 batch에서 긁은 데이터를 writer를 통해 업데이트 하는게 아니라 별도 kafka에 메시지를 보내서 별도 모듈에서 업데이트를 했다. ㅋㅋ 결국 그 욕심이 적은 리소스에 또 문제를 일으켰고 애플케이션이 메모리부족으로 많이 죽었다 에휴 작은 환경에서 무리한 오버스펙은 오히려 문제를 야기한다는걸 더욱 느끼게 되었다. (심지어 필요없는 레디스도 실행시켰다.)

 

실패요인 4.

UI구성을 router, component 구분없이 하나의 컴포넌트에 구분없이 추가하여 확장성 고려도 path구분도 되지 않는 상황이었다. 이를 해결하지 못해서 결국 기능추가도 공유하기도 어려웠다. 그래서 router를 추가하고 페이지를 만들고 각 page에서 사용할 공통 component를 만들어서 편하게 가져다 쓸 수 있도록 구성했다. 그 결과 이제 페이지 하나 늘려서 컴포넌트를 추가하고 빼는건 일도 아니게 되었다. 그리고 하단의 footer를 없애고 vue-sidebar-menu 라이브러리를 사용하여 보는 페이지 뷰를 늘려주었다. 

 

 

변경된 UI

기존의 UI에는 몇 가지 문제가 있었다. 

 

UI 문제 1.

데이터를 보여주는 영역은 가지고 온 제목, 로고, 데이터등을 다 보여주는데 데이터 유형이 모두 달라서 같은 유형으로 보여주기 어려웠다. 채용의 경우 큰 문제가 되지 않았지만 개발 블로그 경우에는 컨텐츠 표시 형식이 모두 달라서 보여주는 영역마다 다 깨졌다. 그래서 채용은 기존틀을 유지하고 테크는 타이틀과 컨텐츠 대표 이미지를 사용해서 리스트를 모여줬다.

좌, 테크 (기술블로그) 영역 리스팅 우, 채용영역 컨텐츠

 

UI 문제 2.

결국 모든 데이터를 아웃링크로 보내다보니 트래픽이 많이 빠졌다. 이를 해결하려면 내부에서 화면을 보여주는게 좋다고 생각했다. 그래서 iframe을 사용해서 화면을 보여주도록 변경했다. 하지만 iframe을 막은 사이트에 경우에는 아웃링크로 가서 볼 수 있도록 아웃링크로 가는 링크를 만들어주었다.

 

 

 

 

 

UI 문제 3.

보고 싶은 업체만 보고 싶은 경우에 볼 수 있는 방법이 없었다. 그래서 이를 해결하기 위해서 상단의 리스트 바를 만들어서 자유롭게 골라서 볼 수 있도록 구성했다.

 

 

업체 리스팅

 

 

 

 

회고

2.0을 만들겠다고 생각했을 때 나 혼자서 만들기는 어렵다고 판단해서 같이 전직장에서 일했던 친구에게 부탁했다. 친구(https://lelecoder.com/)가 마침 이직을 하기 전이라 놀고 있어서 업무를 많이 진행해줬고 그래서 더 많은 컨텐츠를 가져올 수 있었고 수집된 컨텐츠 정보와 에러 정보를 slack으로 받는 기능등을 추가 받을 수 있었다. 함께하니 더 재밌고 좋았다. 나중에 같이 일할 수 있는 기회가 또 왔으면 좋겠다.

 

 

수집한 컨텐츠 정보를 알려주는 slack과 에러 발생시 알려주는 slack

 

 

 

추가된 정보와 변경된 구조 그리고 ui가 모두 맘에 든다 많은 분들이 구경와서 더 좋은 컨텐츠를 모아서 보여줄 수 있는 서비스가 되었으면 좋겠다.

해당 프로젝트는 비영리적 목적으로 해당 코드를 가지고 수정하거나 상업적 용도로 사용하는 것을 금지한다.

http://wedul.space

 

 

새로워진 TimeLine 2.0