[개발후기 - WEB] FANZEEL.COM - 서브도메인을 활용한, 콘텐츠별 미니 홈페이지 퍼블리싱 시스템

FANZEEL.COM

프로젝트 참여

백엔드 (서버) - 100%

프론트 (Angular4) - 80%

0. 개요

- 팬들의 글들을 동영상으로 만들어주는 플랫폼이다.

- 실제 서버는 하나만 돌린다. - 회원 DB 운영은 FANZEEL.COM 하나로 통합한다.

- 서브도메인을 구분해서, 각각의 콘텐츠마다 개별의 미니홈페이지를 운영하는것처럼(?) 보이게 만든다.

- 게시글을 문장별로 split 한 후, 문장 수정요청을 할 수 있는 크라우드 라이팅(?) 시스템을 구축한다.

1.

요새는 영화마다 홈페이지를 따로 제작하지 않는댄다. 그냥 '네이버 영화' 에 올리는 정도라고...

일단 '스파이더맨 - 홈커밍' 의 팬질 미니홈 을 개발했다. https://shc.fanzeel.com . 여기서 서브도메인 shc 는 "Spiderman Home Coming" 이랜다.

- 여기에 영화에 관한 기본정보들(사진,트레일러,보도자료 등)을 보여주는 곳이 있다.

- (주)알려줌이 만든 스파이더맨에 관련된 영상을 보여준다.

- 팬들이 작성한 글을 기준으로 영상을 제작해 준다.

shc.fanzeel.com 으로 들어오면, 이런 스파이더맨의 홈페이지가 나오고,

thor3.fanzeel.com 으로 들어오면, '토르'의 홈페이지가 나와야 하는것이다.

문제는, 콘텐츠는 계속해서 무한정 늘어날 것이고, 그때마다 각각의 홈페이지를 돌리기 위한 서버를 새로 추가할 순 없다. 서버를 무한정 늘리면, 돈도 돈이지만, 유지보수/관리 가 불가능해질 것이 뻔하기 때문이다.

그래서, 서버는 하나로 돌리면서,  서브도메인을 이용, 이런 각각의 콘텐츠 미니홈페이지를 무한정 퍼블리싱할 수 있는 시스템을 만들기로 했다.

환경.

- AWS - ElasticBeanstalk, 로드밸런서, S3, CloudFront 등...

- Route53 에서 서브도메인 레코드를 "*"(와일드카드)로 등록하고, Elastic Beanstalk 로 연결시킨다. 이렇게 하면 서브도메인을 뭐라고 입력해도 그냥 Beanstalk 로 운영하는 서버로 연결된다.

- 그러면 서버에서  서브도메인을 구분한후, 그에 맞는 콘텐츠 데이터를 불러오고, 미리 만들어놓은 템플릿에 연결하여 동적으로 웹페이지를 생성해서 응답해준다.

2. 문장 수정 요청 기능.

- 팬지 게시글을 작성해서 올리면, 문장 단위로 잘라서, 수정이 필요한 문장인 경우, '수정요청'을 할 수 있는 시스템이 필요하댄다. 대표님이 크라우드 라이팅(?) 이라 명명하신 아주 거창한 이름의 기능이다.

- 일반 게시글 처럼 보이지만, 문장마다 끊어서 마우스 Hover 하면 선택할 수 있게 되어있다. 문장을 선택하고 저렇게 수정을 요청할 수 있다. 수정 요청이 된 문장은 형광펜을 칠한 효과를 주었다.

- 이 기능을 구현하기 위해서, 사용자가 <textarea> 에 글을 입력하면, 글을 문장 단위로 split 해야 했다. 그 '줄바꿈, 마침표, 느낌표, 물음표 따옴표' 등을 기준으로 자르기로 결정 하였고, 정규식을 만들어서 Javascript 의 String.match() 메소드를 사용하였다.

- 일반적인 게시글은 하나의 테이블에 내용들을 다 집어넣을 텐데... 문장별로 수정요청을 가능하게 했기에, '문장' 을 저장할 테이블이 필요했다. 그래서 각 문장마다 P.K 를 가지고 있으며, 이 문장의 모음이 하나의 게시글을 이루게 설계하였다.

3. Angular4 와의 결합.

- 현재 우리 회사의 웹 프론트는 모두 Angular 를 이용하고 있다. 백엔드와 클라이언트가 완전히 나누어져 있기 때문에 좀더 유지관리가 편하다고 할까... 컴포넌트 단위의 개발도 맘에 들고 해서 그렇다.

- 이 프로젝트랑은 약간 궁합이 안맞는거 같기도 하다... 같은 템플릿을 사용하긴 하겠다만, 서브도메인마다 다르게 표현해줘야 하는 부분이 생각보다 많았기 때문이다. Angular 에서 보통은 API 통신을해서 데이터를 불러온 후, 템플릿에 데이터를 끼워넣어서 페이지를 렌더링하는데, 배경화면이나 전체레이아웃 같은부분 까지 lazy loading 이 되버리면... 그참 어색할것 같다. 그래서, 뒷배경, 전체 레이아웃, 테마색상등, 기본적인 골격은 서버사이드에서 렌더링해서 보내주고, 게시글 같은 내용은 API 통신으로 클라이언트사이드 렌더링을 하도록 하였다. 이 결정이... 둘의 장점을 섞은것 같기도 하고, 둘의 단점을 섞은것 같기도 하다. ㅋㅋ 그러나 앵귤러의 개발생산성을 포기할 수 없었다.

4.

- shc.fanzeel.com 은 우리가 시험삼아 만들어본 프로젝트였다. "당신의 글을 영상으로 만들어드립니다." 라는 캐치프레이즈가, 과연 사용자에게 리워드로 동작할 것인가. 이것을 검증해보고자 한 프로젝트였다. 그런데 실제로 꽤 양질의 글들이 올라왔고, 그 글들 중 3편을 골라서 실제로 영상을 만들고 자체 채널로 유통시켰다. 그 모든 동영상들이 네이버 메인에 장식하게 되면서, 기대 이상의 반응을 얻게 되었다. 

- 이게 영화홍보사의 마음에 들었나보다. 토르3 - 라그나로크를 개발하기로 계약하였다. 일 복 터졌네