[2022 신입 공채] 코코아웹툰 - 웹툰 서비스를 간단히 만들어보기

프로젝트명 : 웹툰 서비스를 간단히 만들어보기
팀명 : 코코아웹툰
팀원 : Cloto, Harvey, Lauren
멘토 : Dann, Rion, Dino, shiren, Lukas

 

안녕하세요, 

저희는 2022 신입 개발자 공채 코코아웹툰팀의 클로토, 하비, 로렌입니다. 

 

테크온보딩 기간 동안 진행했던 토이프로젝트 '웹툰 서비스를 간단히 만들어보기'를 소개하려고 합니다.

 

먼저 '코코아웹툰'이라는 팀명을 짓게 된 이유는,

'카카오웹툰 서비스의 장점을 가져오고 보완할 점을 보완해보겠다'는 의미로, 카카오웹툰과 유사한 이름인 '코코아웹툰'이라 지었습니다.

 

저희 서비스를 간단하게 소개하자면!

1️⃣ 웹툰 감상 플랫폼
2️⃣ 기다리면 무료, 광고 보고 코인 얻기와 같은 비즈니스 모델 적용

 

 

그럼, 상세 내용 보시죠 😀

 

 

프로젝트 설계

 

📍 카카오웹툰 분석

• 장점 👍
  • 어디에도 없는 UI/UX
  • 기다리면 무료
    
    
• 있었으면 좋겠다 🥺
  • 반응형 디자인 → 환경에 구애받지 않는 디자인
  • 메인화면에 최근 본 작품 노출 → MZ 세대에게 익숙한 소셜 네트워킹 서비스인 인스타그램의 ‘스토리’를 벤치마킹하여 구성

 

 

📍 와이어프레임 설계

• 작품 리스트 페이지
• 작품 홈 페이지
• 회차 뷰 페이지
  
  

  

  피그마를 활용한 와이어 프레임 설계

 

📍 계획 수립 

일정과 다를 수 있습니다 🥲

 

 

인프라 구성

 

📍 Backend

 

• CI/CD
  개발자가 레포지토리에 push 하면 Github Action에서 빌드와 테스트를 실행합니다. 정상적으로 통과하면 AWS ECR에 docker 이미지를 배포합니다. 배포된 이미지는 AWS ECS에서 새로운 컨테이너를 생성하고 기존 컨테이너와 교체합니다.
  
  
• Routing 
  HTTPS 프로토콜에 대한 처리가 필요하기 때문에 ALB를 이용하여 HTTPS 요청을 서버로 전달하고 Route53을 이용해 DNS 구성을 하였습니다.
  
  
• Server
  

  서버는 ECS가 생성한 EC2 내부의 컨테이너에서 동작합니다. 웹툰 파일이 저장된 S3와 AWS 관계형 데이터베이스 RDS와 통신하며 클라이언트의 요청을 처리합니다.

   

• 기술 스택
  서버는 Springboot와 Java, JPA, Docker 등을 이용해 구성했고, DB는 팀원 모두에게 익숙한 Mysql을 사용했습니다.
  

   

   

📍 Frontend 

• React.js, Three.js를 사용했고, S3의 정적 호스팅 사용과 CloudFront를 통해 CDN 서비스를 제공했습니다.
  
  

  

 

 

화면 설계

 

📍 작품 리스트  

• 최근 본 작품과 요일별 작품 리스트를 확인할 수 있습니다.
• 광고를 눌러 무료 코인을 얻을 수 있습니다.
• 최근 본 작품 리스트에서 업데이트된 작품, 기다리면 무료가 사용 가능한 작품을 확인할 수 있습니다.
• 작품 이미지 클릭 시 작품 홈 페이지로 이동합니다.
  
  

  

📍 작품 홈 

• 작품의 정보와 에피소드 리스트를 확인할 수 있습니다.
• 첫 화부터, 최근화부터 볼 수 있는 정렬을 사용할 수 있습니다.
• 기다무 사용 시 작품별로 기다무 활성까지 얼마나 남았는지 시간을 확인할 수 있습니다.
  
  

  

📍 회차 뷰 

• 회차 이미지를 볼 수 있습니다.
• 이전화, 다음화를 클릭하여 회차를 이동할 수 있으며 회차 이동시 코인 결제, 기다무를 사용할 수 있습니다.
  
  

  

📍 3D 뷰  

• 회차 이미지를 볼 수 있습니다.
• 이전화, 다음화를 클릭하여 회차를 이동할 수 있으며 회차 이동시 코인 결제, 기다무를 사용할 수 있습니다.
• 3D 공간에서 작품을 탐색할 수 있습니다.
  
  

  

  3D 보기 페이지

 

프로젝트 리뷰

 

Cloto 🙆🏻‍♂️

• 웹툰 서비스가 기본적으로 어떻게 구성되어있고 어떤 기술들이 적용되어있는지 알 수 있어서 좋았습니다.
• 3D 페이지를 만들어 보고 싶었는데 이번 기회에 적용할 수 있어서 좋았습니다.
• 이번 프로젝트에서 프론트엔드 쪽에서 많이 쓰이는 기술이나 설계를 적용해보고 싶었는데 기능 구현을 우선적으로 하고 리펙토링 하지 못해서 아쉬웠습니다.

 

Harvey 🙋🏻‍♂️

• 평소에 AWS 인프라와 DevOps에 관심이 많았는데 이번 기회를 통해 다양한 시도를 해볼 수 있어서 너무 좋았습니다. 처음 시도하는 것들이 많아서 막힐 때가 있었는데 그때마다 멘토님들의 도움을 받아 쉽게 해결할 수 있었습니다.
• 카카오웹툰의 BM 기다무를 직접 구현해 볼 수 있어서 재밌었습니다.
• 좋은 팀원들을 만나 편하게 했습니다.

 

Lauren 💁🏻‍♀️

• 평소 가장 좋아하던 서비스인 웹툰 서비스를 처음부터 끝까지 만들어볼 수 있어 좋았습니다.
• 기다리면 무료, 코인 결제 등 다른 서비스에서는 만나보기 힘든 기능들을 구현해볼 수 있어 좋았습니다.
• 단순한 기능 구현을 넘어 아키텍처, 테스트 코드 작성 등을 팀원들과 고민해 볼 수 있어 인상 깊은 프로젝트 경험으로 남을 것 같습니다.

 

로렌, 클로토, 하비