[개발후기] 알지미디어 ALZi.me (FANZEEL.COM 리뉴얼)

API 서버 - PHP 

AWS - Elastic Beanstalk + Load Balancer  ,  S3 + Cloud Front , Certification Manager

프론트엔드 - React + next.js

-

기존에 있던 fanzeel.com 을 리뉴얼 하라는 명령이 떨어졌다.

-  디자인과 UI/UX 의 개선을 가장 크게 변경했다. 사실 기존 팬질은 빠르게 만드는데 방점을 찍느라, 디자인에 큰 고민없이 회사 이쁘지도 않는 외국 사이트와 유사하게 급하게 만들었었다. 그래서 이참에 좀더 깔끔하게 만들기로 했다.

-  이 Fanzeel.com 이 생기기까지, 많은 시스템을 거쳐서 왔는데, 그중 가장 큰 영역이였던 '문장별 수정 기능' 과, subdomain 을 활용한, 컨텐츠별 미니 홈페이지 퍼블리싱 시스템이였다. 그런데 그 두가지 기능이 가장 크고 무겁고, 쓸모없다는 판단하에, 모두 걷어내기로 했다.  이와 관련된 내용은 서브도메인을 활용한, 콘텐츠별 미니 홈페이지 퍼블리싱 시스템 - 이 글에 기록해 두었었다. 꽤 공을 들여서 만든 시스템이였지만, 서비스에 큰 도움이 되지도 않았고, 오히려 복잡한 구조로 인해 유지보수에 걸림돌이 될 뿐인 시스템이라 판단되어, 과감하게 모두 걷어내고 제거하기로 하였다.

-  SEO 개선. - 기존에 PHP + Angular 로 만들은 프로젝트가, SEO 와 궁합이 잘 안맞기 때문에, SEO 를 고려하여 개선하기로 했다.

-  고민 & 우여곡절 끝에  기존 Angular 였던 프레임을 모두 버려버리고, React + Next 로 완전히 갈아엎었다. Angular 에서 React 로 갈아엎는데 했던 시행착오와, 느낀점등은 'Angular5 -> React + next.js 로 프로젝트 갈아 엎은 썰 (Angular vs React 개인적 비교)' 이 글에 적어 두었다.

1. 디자인이 매우 많이 개선되었다.

왼쪽이 기존 -> 오른쪽 개선.

- 반응형 작업. 역시, 우리회사는 반응형을 좋아한다.

- 디자이너의 요구에 따라, 헤더에 많은 공을 들였다. 스크롤에 따라 리액티브한 헤더를 많이 만들었다. 아주 귀찮았다.

     

- 데스크탑에서도 마찬가지였는데, 카테고리별로 헤더에 색상도 변하고, 이미지도 콘텐츠에 따라 오버랩되게 했다.

- Material-UI 라이브러리를 사용했다. Bootstrap 과는 다르게, CSS 커스터마이징이 굉장히 어렵고 귀찮다.

- 투고게시판이 새로 생겼다. 사용자가 직접 글을 투고하면, 선정된 글을, 회사에서 동영상으로 만들어준다.