https://github.com/depromeet/antoon-web

📈 개미는툰툰 :: 웹툰 독자를 위한 커뮤니티 플랫폼
https://github.com/depromeet/antoon-web

axios emotion eslint hotjar husky mixpanel nextjs prettier react-query recoil storybook stylelint

Last synced: 1 day ago
JSON representation

📈 개미는툰툰 :: 웹툰 독자를 위한 커뮤니티 플랫폼

• Host: GitHub
• URL: https://github.com/depromeet/antoon-web
• Owner: depromeet
• License: mit
• Created: 2022-04-02T08:30:08.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-10T18:19:39.000Z (over 1 year ago)
• Last Synced: 2024-12-19T10:13:39.191Z (8 days ago)
• Topics: axios, emotion, eslint, hotjar, husky, mixpanel, nextjs, prettier, react-query, recoil, storybook, stylelint
• Language: TypeScript
• Homepage:
• Size: 26.3 MB
• Stars: 51
• Watchers: 7
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        


    

    


    
antoon

    
웹툰의 새로운 덕질 문화

    


    


        Behance

        ·

        Final Presentation

    





## 개미는 툰툰

### 💡 서비스 개요

![서비스-개요](https://user-images.githubusercontent.com/48766355/188390871-42bf5a97-9222-4532-9679-a93ad176fc50.png)

웹툰 플랫폼 댓글, 커뮤니티에서 독자들이 스토리 전개와 등장인물, 이들 간의 관계를 주식 용어로 표현하며 소통하는 걸 볼 수 있습니다. 주식 용어로 웹툰을 소비하는 형태에서 아이디어를 얻어 서비스 기능을 주식 컨셉으로 표현한 색다른 웹툰 커뮤니티 서비스를 만들고자 했습니다.

> **개미는 툰툰**은 주식 컨셉을 바탕으로 웹툰의 새로운 덕질 문화를 만들고자 하는 웹툰 커뮤니티 서비스입니다.




### 🎯 프로젝트 목표

![프로젝트-목표](https://user-images.githubusercontent.com/48766355/188391428-82b5599c-b245-4be3-b903-1f9fd5672fa8.png)




### 🌳 IA

![IA](https://user-images.githubusercontent.com/48766355/188391446-ed8b5c46-61dd-4df8-bb75-8b5b2a97a4a1.png)




### 💯 서비스 핵심 포인트

![서비스-핵심-포인트](https://user-images.githubusercontent.com/48766355/188391461-ea033e1d-5644-407a-b721-e1a729bad5d9.png)

다양한 주제로 소통할 수 있는 투표에 댓글과 좋아요 반응을 남길 수 있습니다. 실제 주식처럼 웹툰, 최애 인물/커플에 탑승해 순위를 올리고 투표/탑승을 통해 안트코인을 모을 수 있습니다. 주식 컨셉을 더한 기능이 생소할 수 있는 사용자들에게 서비스의 개념과 기능을 친절하게 알려주는 온보딩도 제공합니다.




## 메인 기능

### 📊 웹툰 탑승/하차 그래프 💬 댓글

![웹툰-탑승-하차-그래프-댓글](https://user-images.githubusercontent.com/48766355/188391509-e4e41a83-a524-49d6-9e11-71182574471a.png)

재미있는 웹툰에는 탑승, 아쉬웠던 웹툰에 하차로 웹툰 차트를 움직일 수 있습니다. 웹툰 점수는 웹툰 플랫폼 별점, 탑승/하차 수와 댓글 수를 합산한 점수입니다. 최근 1시간 집계로 차트에 반영되고, 1일/1주/1달/3달 주기로 상승/하락 그래프를 볼 수 있습니다. 댓글 기능을 '개미들의 행진'으로 표현했습니다. 웹툰을 보는 다른 개미들과 소통하며 웹툰 감상평, 스토리 전개, 궁금한 떡밥 등 다양한 정보를 공유할 수 있습니다.




### 🗣️ 커뮤니티

![커뮤니티](https://user-images.githubusercontent.com/48766355/188391536-a6b90e96-cd98-4c10-a8f5-9f3d5415afa2.png)

웹툰뿐만 아니라 내 최애 웹툰의 인물과 커플에 탑승할 수 있습니다. 다양한 주제의 투표도 참여할 수 있습니다.




### 🚗 등장인물/커플 탑승   📬 투표

![등장인물-커플-탑승-투표](https://user-images.githubusercontent.com/48766355/188391562-5e9ad39e-35d8-492b-bfe3-2dec49de9b27.png)

최애 인물/커플에 하루 한 번 안트코인을 투자해서 탑승하면 내 최애의 순위를 직접 올릴 수 있습니다. 다양한 웹툰 캐릭터의 재밌는 주제들을 확인하고 안트코인을 사용해서 투표할 수 있습니다. 본인이 투표한 결과가 이기면 30 안트코인을 보상으로 지급합니다.




### 🪙 안트코인 🙍 마이페이지

![안트코인-마이페이지](https://user-images.githubusercontent.com/48766355/188391592-99840fe2-0f5f-48e7-9199-eda88455a847.png)

안트코인은 개미는 툰툰에서 사용하는 화폐 단위입니다. 안트코인을 모아 거지개미에서 일개미를 거쳐 여왕개미까지 도달할 수 있습니다. 보유한 안트코인을 이용해 더 많은 투표에 참여할 수 있습니다. 안트코인 지갑에서 사용 내역을 확인해볼 수 있습니다.




## 프론트엔드

### 🛠 개발 스택

![개발-스택](https://user-images.githubusercontent.com/48766355/188400668-3e378826-4744-4002-b282-58645a3cd852.png)

TypeScript와 Next.js, React Query, Recoil 등을 사용하였고, Lint와 Husky를 통해 팀의 코드 컨벤션을 유지하고 있습니다. UI 컴포넌트 테스트와 디자이너 파트의 QA 작업을 원활하게 진행하기 위해 Storybook을 사용하였습니다.




### ⚙️ 인프라

![인프라](https://user-images.githubusercontent.com/48766355/188400891-41f078de-d14f-4be2-9178-45286d37fa04.png)

AWS에 여러 환경으로 배포하기 위해 Serverless Framework로 IaC 하였고, GitHub Actions를 통해 3개의 환경으로 배포되고 있습니다.




### 🖥 모니터링

![모니터링](https://user-images.githubusercontent.com/48766355/188400909-058e688b-cc1e-4230-ab1f-b2c2a34b1326.png)

Sentry, Hotjar, Mixpanel 등을 사용하여 개발과 기획을 용이하게 하려고 했습니다. Hotjar와 Mixpanel의 데이터를 기반으로 MVP 2차 진행 방향을 결정하였습니다.




## 개발자

| 이병현 | 김민지 | 최푸름 |

| :---: | :---: | :---: |

|  |  |  |

| [Tolluset](https://github.com/Tolluset) | [mnxmnz](https://github.com/mnxmnz) | [choipureum](https://github.com/choipureum) |