[Nuxt 3] 사이드 프로젝트 만들기 - 기획편

올해 첫 개발 관련 주제를 뭘로할까 고민하다가 사이드 프로젝트 아이디어가 떠올라서 그걸 같이 만들어볼까 합니다. 하지만 이미 잘 알고 있던 기술을 사용해서 만들면 재미없겠죠. 사이드 프로젝트는 역시 신기술을 이용해서 만드는게 가장 좋습니다. 나만의 프로젝트를 만들면서 최신 기술도 마음껏 써볼 수 있으니까요.

신기술로 알아볼 것은 바로 Nuxt 3입니다. 아직 베타 버전이기는 하지만, 클라우드 플랫폼인 Vercel과 조합해서 사용해보니 아주 쉽게 서버 없이 서버 사이드 렌더링을 구현할 수가 있더라구요. 서버 없이 서버 사이드 렌더링을 한다는 게 이해가 안가실 수도 있어서 간단히 설명해드리면, 그냥 서버리스 함수 1개로 기존 서버를 대체한다는 말입니다. 뭐 이해 안가셔도 괜찮습니다.

저는 개발자로 일하면서 AWS를 꽤 오래 사용했습니다. 특히 EC2, RDS같은 서버 컴퓨팅을 주로 사용했는데, 서버를 관리한다는 건 정말 짜증나는 일입니다. 왜냐면 서버를 임대하는 순간부터 24시간 스트레스에 시달려야 하니까요.

그동안 서비스를 많이 만들고, 없애고 하다보니 서버 없이 사이드 프로젝트를 운영할 수만 있다면 진짜 너무 좋겠다 라는 고민을 항상 했고 계속해서 그것에 대한 답을 찾고 있습니다. 어쨌든 꽤 저렴한 비용으로 그것을 가능하게 해주는 착한 플랫폼 서비스들이 많이 생겨나고 있어서, 저만의 노하우를 공유하면서 새로운 기술도 알아보자 뭐 이런 취지의 시리즈입니다.

기획하기

그래서 제가 여러분들과 같이 만들어 볼 사이드 프로젝트는 바로 경품 이벤트 빌더입니다.

사실 혼자 드로우비트이라는 경품 홍보 플랫폼을 사이드 프로젝트를 운영 중입니다. 단순히 네이버, 인스타와 페이스북 등 여러 SNS에 흩어져있는 기업 경품 이벤트를 모아주는 서비스입니다.

현재 회원가입한 유저는 300명정도 되는데, 그 동안 무수히 많은 경품 이벤트를 수집하고 데이터를 가공해본 결과 나름 경품 시장에 대한 인사이트가 생겼고 그 인사이트와 사이드 프로젝트의 개발 방향성을 공유해드리려고 합니다.

일단 응모하는 사람들은 꽤 쉽게 회원가입을 했습니다. 아시다시피 소비자층은 그냥 회원가입하라고 하면 절대 안합니다. 그래서 응모자가 실제 응모하는 페이지로 이동하기 위해선 회원가입을 하도록 강제시켰습니다. 대신 회원가입을 쉽게 할 수 있도록 카카오톡으로만 인증이 가능하게끔 UX를 쉽게 설계했습니다. 소셜 로그인 많으면 나중에 뭘로 로그인했는지 헷갈리니까요.

로그인/회원가입 페이지를 1개로 처리했다

어쨌든 응모자들은 이 서비스를 사용하는 명확한 목적이 있고 나름 유용하게 사용하고 있어서 당장은 크게 더 개선할 부분은 없습니다.

문제는 이벤트를 진행하는 기업측입니다. 경품 이벤트를 수집하면서 우리 플랫폼에 올려도 되냐고 DM을 많이 보냈는데 응답해준 기업들에게 열심히 설문조사한 결과, 이 서비스의 장점과 개선점을 파악하게 됐습니다.

먼저 장점은 회사측 이벤트를 보기 좋게 정리할 수 있고, 자체 SNS 채널에 경품 이벤트를 한다는 게시글을 작성할 필요가 없다는 점입니다. 그리고 이벤트 페이지가 생기는 것도 좋아하셨구요. SNS에 게시글 올리는 부분은 호불호가 좀 갈리긴 했는데 이건 채널 성향에 따라 조금 갈린다고 생각하고 있습니다. 피드 콘텐츠를 빡세게 관리하는 기업이라면 경품 이벤트 게시글을 작성하긴 어려우니까요.

경품 상세 페이지. 로그인을 해야지만 응모하러 갈 수 있다

가장 많이 받았던 개선점은 당연히 더 많은 홍보가 됐으면 좋겠다는 점이었고, 기업측 대시보드가 필요하다는 것과 당첨자 선별과 경품 발송을 도와주면 좋겠다는 의견이 꽤 있었습니다. 사실 홍보는 유저가 늘어나면 자연스럽게 해결될 문제입니다.

그래서 저는 기업측이 사용할 대시보드, 빌더를 만들면 좋겠네 싶어서 이걸 같이 만들어볼까 합니다.

서론이 참 길었네요. 😅

기술 스택

일단 프론트엔드에선 Nuxt3와, Vue의 차세대 상태 관리 라이브러리인 Pinia를 중점적으로 사용할 생각입니다. Vue3가 나오고나서 다들 TypeScript와 Composition API를 사용하다보니 기존 Options API 위주로 개발됐던 라이브러리들이 대체되고 있는 것 같습니다. (Vuex야 그 동안 고마웠어)

근데 서버는 그냥 Express.js를 쓰겠습니다. 이유는 기존 API 서버를 Express.js로 만들었는데 이거 API 서버 분리하면서 새로 만들긴 좀 그러니까요..

데이터베이스는 Supabase를 사용하겠습니다. 예전같으면 RDS로 사용했을텐데, Supabase를 사용해보고 나선 이거만 씁니다. 참고로 이건 PostgresDB 기반입니다.

마지막으로 프로젝트를 배포할 클라우드 플랫폼은 Vercel입니다.

사이드 프로젝트 주제에 뭐 기술이 엄청 들어가는데, 웹 서비스를 운영한다는 게 이렇게 힘듭니다. 근데 이것도 제가 진짜 시간과 비용을 엄청 줄일 수 있게끔 고민한겁니다. 전통적인 방법으로 서비스하려고 하면 진짜 몇 배는 더 수고스럽습니다. 그리고 Vue랑 React의 발전도 한 몫합니다.

필요한 기능

가장 제품을 단순화시키면 기업측에게 필요한 건 다음과 같습니다.

1. 인증
2. 경품 이벤트 만들기
3. 당첨자 선별하기

1. 인증

일단 대시보드니까 로그인과 회원가입이 필요하겠죠.

이것도 그냥 카카오톡 로그인으로 만들까했는데 생각해보니 기업측은 좀 무리가 있는게, 카톡은 다들 개인용으로 사용하는데 개인 계정을 업무용 계정으로 사용하라고 할 순 없습니다. 그래서 업무용으로 쓸 수 있는 이메일 로그인만 지원하면 됩니다.

이건 Supabase의 이메일 인증 기능을 사용하면 쉽게 해결됩니다.

2. 경품 이벤트 만들기

가장 핵심 기능입니다. 근데 사실 구글 폼을 만드는 것과 크게 구조가 다를 건 없습니다.

보통 경품 이벤트는 설문 조사나 퀴즈 맞추기가 가장 많고, 거기에 SNS 계정 팔로우를 늘리고 싶은 기업들은 검증을 위해 SNS 계정도 양식에 포함시킵니다.

그리고 양식에 반드시 포함시켜야 하는 응모자 개인정보입니다. 보통 이름과 핸드폰 번호를 받습니다. 경품을 발송하기 위해서죠. 거의 대부분 기프티콘으로 보낼 수 있는 상품을 보내기 때문에 이름, 핸드폰 번호로 충분합니다. 기프티콘 이외의 상품에 대해선 지금은 고려하지 않겠습니다.

UI가 대충 이런 형태면 될 것 같다

결과적으로 커스텀 필드를 계속해서 붙여나갈 수 있는 그런 모양새면 됩니다. 여기서 저는 이 툴의 포지션이 경품 이벤트를 위한 구글 폼 정도로 떠올랐습니다. (더 좋은 아이디어 있으면 댓글 부탁드려요!)

3. 당첨자 선별하기

필수적으로 들어가야할 기능은 당연히 알림입니다. 당신이 당첨됐으니 기뻐하세요 같은 알림을 대신 보내주면 기업측이 편하겠죠. 선별은 수동 선정을 기본 옵션으로 두고, 선택적으로 자동으로 추첨하기 기능 같은걸 나중에 만들어도 좋을 것 같습니다.

기프티콘을 대신 보내주면 가장 베스트지만 그건 일단 제외하겠습니다. 왜냐면 기프티콘 보내주는 외부 서비스에서 API를 제공받으면 되는데, 결제가 들어가야해서 복잡해지니까요.

마무리

기능을 최대한 줄였는데도 각 기능마다 고려해야할 게 많죠? 하지만 사소한 기능 하나라도 사용자 입장에서 생각하면 꽤 쉽게 방향을 잡을 수 있습니다. 항상 (개발 역량이 가능한 선에서) 유저 입장을 고려하는 시각을 가져보도록 노력해보세요.

어쩌면 코딩을 안하고도 문제를 해결할 수도 있습니다. 심지어 기존 코드를 지울 수도 있어요. 그러면 장기적으로 유지보수가 편해지니까 좋겠죠.