이 개발자는 춤을 좋아합니다 - MEI.DANCER

현조형님·2024년 4월 12일

MEI의서비스썰모음 PocketBase aws kpop mei.dancer 개발 댄스 릴리즈 서비스 컨텐츠 회고

MEI의 서비스 썰 모음

목록 보기

1/3

🙂 서비스 요약 - MEI.DANCER

💃🏻 mei.dance
📅 2024.03.14 ~ 24.03.24 출시 완료
개요
: 300개 넘는 댄스영상을 아티스트별로 세분화한 아카이브 사이트
부제
: 개발자가 K-POP을 미친듯이 좋아한다면?
기술
- Front-End: Next.js+TailwindCSS
- Back-End: Node.js+Pocketbase
- Infra: AWS Amplify

작은 스타트업에 근무하면서 신입 프론트엔드가...
백엔드 api 개발을 하게 되었고,
DBA 업무를 잠깐 맡으면서 DB를 관리하게 되었고,
혼자서 AWS EC2 배포도 하고
혼자서 나름 '하나의 서비스'를 만드는 응애 풀스택 개발자(???)로 자라나게 되었다.

다른 이유로 퇴사를 했지만,
지금 생각해봐도 워라밸도 좋았고 개발 능력치를 키우며
월급 모아서 맥북 구매에 8키로 감량까지 성공한 여러모로 나쁘지 않은 첫 회사였다...

퇴사하고 시간도 남겠다,,,
이직 준비랑 개발 공부하는 측면에서도, 그리고
이제서야 혼자서 하나의 서비스를 개발할 수 있겠다는 생각이 들어서
그동안 개발하고 싶었던 아이디어 리스트를 하나씩 꺼내봤다.
아이디어를 메모하는 노션 페이지도 따로 있음

원래 블로그를 안하는 사람인데,
퇴사 이후에 3달간 개인 플젝만 4개를 만들고 운영하게 되어서
내 서비스를 홍보하기 위해서 하나씩 풀어보려고 한다!
(SEO를 위한 처절한 몸부림)

💡 개발 지식 <<<<<<<<< 썰풀기

그리고 이 포스트는, 59번째 아이디어에 대한 서비스를 소개한다. 진짜 아이디어 메모 인증

🎯 왜 MEI.DANCER를 기획했는가?

본인은 춤을 매우 좋아해서 꾸준히 릴스에 업로드를 함

하지만, 릴스는 단순하게 Stack만 쌓이는 형식으로 과거의 특정 영상을 찾아볼 수 없음

내가 좋아하는 세븐틴 노래에 얼마나 춤을 췄고, 무슨 노래에 춤을 췄는지 궁금해짐. 이외 아티스트별로 릴스 목록이 보고 싶어짐

이러한 엄청난 이유로 기획 시작!
프로젝트를 기획할 때, 항상 "왜" 서비스가 필요한지 그리고 "어떻게" 해결해서 풀어나갈지 가장 고민한다.
최대한 문제와 해결이 key-value, 1:1로 떨어지도록 기획하는게 깔끔한듯

🖍️ 와이어프레임 샤샤샥 그리기

본인은 나름 디자인이 가능한 프론트이기 때문에,
와이어프레임으로 간단하게 밑그림을 그리고 개발하면서 디자인을 적용한다.

물론, 개인이 진행하는 토이프로젝트에서 가능한 방법이다
직접 해봄 인증

팀 프로젝트에서 직접 와이어프레임으로 먼저 개발 시작하니까 디자이너가 괴로워한다.
모두 주의하세요

💎 본인의 UX 가치관

최대한 간단하고, 메인 기능이 무엇인지 바로 알 수 있도록 직관적으로 구성하기
왜? 조금 복잡해지면 사용자가 서비스를 이탈할 가능성이 높다..!
그렇기 때문에, 간단한 UX를 위해서 기획 또한 간단하게 구성한다

숏폼 플랫폼의 UIUX를 많이 찾아보고, 비슷하지만 조금은 다르게 설계했다.

📸 인스타그램 API와 친해지기

450개가 넘는 릴스 데이터를 가져오기 위해서
인스타그램 API 연동이 "필수적"인 상황,,,ㅎㅎ

살다 살다 (live live) 인스타그램 API를 사용할 일이 많을까?
사용할 일이 많지 않아서 구글링을 해도 많은 정보를 얻을 수 없었지만,
그래도 페이스북 데벨로퍼 공식 문서와 몇몇 velog 포스트를 통해 최소한으로 필요한 정보를 참고할 수 있었다.

먼저, 페이스북 데벨로퍼에 계정을 생성하고 엑세스할 인스타그램 계정을 연동한다.
이후 하단의 문서 따라가면 손쉽게 연동할 수 있다.
https://developers.facebook.com/docs/instagram-basic-display-api/getting-started

인증 코드를 토큰으로 교환하게 되는데, 본인은 postman을 사용하여 기간이 2달짜리인 장기토큰으로 업그레이드시켜서 활용했다.

인스타그램 API 연동 자체는 인증코드와 토큰 발급 처리만 신경 쓰면 간단하다!
API 연동은 성공했지만, 그럼에도 불구하고 페이스북의 공식 인스타그램 API로 릴스 400개 넘게 호출할 때 "사용제한"이 걸려서 결국에는 다른 api를 사용하여 모든 릴스 데이터를 Pocketbase DB로 옮겼다.
(페이스북은 api로 릴스 400개 넘는 릴스를 호출하려는 개발자가 있을 것이라고 예측하지 못한듯 ㅎ;)

💽 DB설계

1. Artists

아티스트 정보를 나타내는 테이블 (collection)
대부분 아이돌이라서 group 칼럼에 그룹명을 적고,
name에는 솔로 가수(ex. 청하), 또는 유닛명 (ex. 부석순) 등 다양한 경우의 수를 열심히 고려했다

2. Videos

릴스 정보를 나타내는 테이블 (collection)
썸네일, 가수명, 노래명, 업로드 날짜, 인스타그램 코드 (링크), 릴스 게시글 내용 등

아무튼 DB도 매우 간단하다 ㅎㅎ

🛠️ API 연동 이후 메인 로직 구현하기

일단 메인 기능 완성이 중요하기 때문에, 로직부터 짜고 이후에 디자인 등 UI를 입힌다.
상단에는 아티스트 목록이 보여지고, 해당 아티스트를 클릭하면 릴스 데이터 정보가 보이도록 한다.

기존에는 메인 페이지에 보여지는 영상들이 모두 autoplay && loop되도록 구성했는데,
수많은 릴스 영상들이 페이지에서 재생되면 페이지 렌더링이 낭비되고 로딩 속도와 서비스 성능이 저하되기 때문에, 썸네일 이미지 사진으로 대체했다.
(기능적인 결함이 생겼을 때, UX로 풀어갈 수 있다고 생각한다)

🔎 릴스 정보 페이지

(당연함) id를 통해서 index/:id 페이지로 이동하도록 구성했다
정보 페이지는 영상이 autoplay && loop 속성으로 숏폼 형식을 따라했고, 혹시나 싶어서 다운로드 방지를 걸어뒀다.

하단에는 실제 릴스 URL이 있으니까, 관심 있는 분들은 따스한 좋아요와 댓글, 칭찬과 팔로우를 해주시면 좋을 거 같다 :)

🖇️ 메인 기능 이외

1. MEI의 댄스 차트

메인 페이지에는 데이터 시각화 라이브러리 ApexCharts.js 를 통해서 아티스트별로 릴스 갯수를 표시했다.
시각적으로 예쁘게 표시해서 메인 페이지를 잘 장식한 것 같아서 기분이 좋다.
무엇보다 압도적으로 우리 세븐틴 영상이 많아서 아주 NICE.

2. 최근 댄스 영상

초반에 연동한 Instagram API가 아까워서 활용해봤다.
평균 주4회 헬스장을 가면서 마무리 유산소 운동으로 춤을 추기 때문에, 최근에 업로드된 7개의 릴스 데이터를 자동으로 불러오고, 해당 썸네일을 선택하면 info 페이지로 이동한다.

또한, 확실히 해당 항목을 통해서 MEI.DANCER 서비스가 어떤 서비스인지 바로 보여주는 역할을 한다.

⚙️ 도메인 구매, 그리고 릴리즈

주변에 좋은 백엔드 친구 덕분에, 냅다 도메인부터 장악(?)하는 마인드를 갖게 되었다.
mei.dance
도메인을 보고 '아 이건 내껀데?' 싶어서 바로 구매했고, 서비스 이름도 "MEI-DANCER"가 되어버렸다.
그리고 AWS Amplify 로 릴리즈 완료!

📢 컨텐츠 중독자의 마케팅

대학교 1학년 때, 유기동물 사회봉사동아리에서 홍보부 임원진으로 냅다 가입하면서 익힌 컨텐츠 만들기...
생각해보니까 처음으로 ppt로 카드뉴스 만드는 방법을 알려준 동아리 선배이자 친구는... 지금 토스 개발자다.
이후 5년 넘게 컨텐츠를 만들다보니까 영상 편집도 익히고 3D 그래픽도 익히고 거의 컨텐츠 중독자가 되어버렸다.
그래서 서비스 개발을 마치고 열심히 홍보 컨텐츠를 만드는 재미에 빠졌다 ㅎㅎ

먼저 서비스 메인 컬러로 화려하고, 열정적이고, 힙한 댄스 느낌이 나는 핫핑크 #FF32AD로 정했다 이후 전반적인 Layout UI와 로고를 같이 만든다 MEI.DANCER