이전 회사의 팀원분과 이런 저런 얘기를 하다가 '우리에겐 경제머리가 없다'는 문제의식을 공유하게 되었다. 당시에는 경제 공부를 열심히 하자는 생각에 그쳤다가, 사이드 프로젝트 주제를 모색할 때쯤 이 문제의식이 다시 떠올랐다. 경제공부를 위한 플랫폼을 만들되, 경제머리를 자라게 하는 컨셉이면 어떨까?
다만 내 목표는 1-2개월 안에 포트폴리오를 만드는 것이기 때문에 ‘플랫폼’보다는 프로젝트 규모를 축소하여 간단한 테스트와 테스트 결과를 제공하는 것으로 결정하였다.
1. 프로젝트 개요
- 링크
- 기능
- 간단한 경제 퀴즈 10문제
- 결과 페이지
- 카카오톡 공유
- 결과 분석
- 등수, AI 총평, 오답노트
- 개발 기간
- 1차 : 1.17 ~ 2.25
- 기획/디자인/개발, S3 배포
- 2차 : 2.26 ~ 3.17
- 기능 확장, EC2 배포
- 1차 : 1.17 ~ 2.25
- 참여 형태
- 1인 기획/디자인/개발
- 기술 스택
- React, Next.js, tailwindCSS, AWS(EC2, Route53, RDS), PostgreSQL
2. 평가
- 사용자 평가
- 긍정: UI가 깔끔하다, 군더더기 없다. 캐릭터가 귀엽다.
- 부정: 후킹 포인트가 없다. 재방문이 있을까?
- 셀프 평가
- 긍정
- UI 관련 이슈 리포트가 없었다
- 목표로 한 기술들을 사용해 직접 배포 경험
- 부정
- 바이럴으로 이어지지는 못했다
- 긍정
3. 기술적 도전과 해결 과정
3-1. S3 배포 & CI/CD
처음 프로젝트를 구상했을 때는 사용자 결과는 따로 저장하지 않을 것이었기 때문에 서버 기능 없이도 충분히 구현 가능하리라 생각하여 정적 페이지를 빌드하고 S3에 배포하는 것으로 진행했다.
또한 github-action을 통해 특정 브랜치에 코드가 push되면 빌드 후 S3에 업로드하고 캐시를 무효화하는 과정을 자동화하였다.
구축 과정은 velog에 따로 포스트로 기록하였다. (https://velog.io/@sohaekim/Next.js-배포-with-S3CloudFrontGithub-Actions)
- 결과물
- 기능
- 간단한 퀴즈 10문제
- 결과 페이지
- 카카오톡 공유
3-2. EC2 배포, RDS 연동 & CI/CD
3-1의 결과물을 막상 완성시켜놓고 보니 기능이 부족해서 포트폴리오로서의 역할을 제대로 하지 못하리라 생각했다. 이에 따라 테스트 결과를 저장하고 사용자에게 분석을 제공하는 기능을 추가하기로 하였다.
- 추가한 기능
- 등수
- AI 총평
- 오답노트
DB 사용이 필수적이었고 이를 위해 DB와 연동할 서버가 필요했다. 다른 조합도 고민해보다가, 이전 회사에서 사용한 EC2+RDS 조합을 내가 직접 구축해보고 싶다는 생각이 들어 그대로 진행하였다.
서비스 아키텍처 구축 과정은 포스트에 작성 진행 중이다.
3-3. Server Rendering 활용
-
Static Rendering
1차 프로젝트 빌드 결과.
모든 route를 빌드 시에 미리 생성하였고, 특히 result에서는
generateStaticParams를 통해 등급별 6개 route(stone, desert, grass, plant, rice, jungle)를 미리 생성한 것을 확인할 수 있다.
-
Dynamic Rendering
기능 추가 후 빌드 결과.
userId를 파라미터로 받는 route handler(/api/*/[userId])와, result 페이지(/result/[userId])가 요청 시마다 서버에서 렌더링된다.
3-4. AI를 이용한 이미지 생성(실패)
프로젝트에 사용되는 이미지는 직접 그렸다. 사실 개발과정 중간에 이미지 컨셉이 바뀌었는데, 다시 그리려니 시간과 노력이 많이 들 것 같아서 AI로 생성해보고자 했다.
검색해보니 stable diffusion을 로컬에서 무료로 구동할 수 있다길래 신나서 설치하고 이미지 생성을 실행했다. 그런데 엔비디아 GPU를 사용하고 있지 않았기 때문에 시간이 너무 오래 걸리는 데다가(장당 1시간 이상) 결과물이 너무 … 생각대로 안 나왔다. 챗지피티를 써도, openArt에서 기존의 그림을 참고하여 생성하도록 해도 만족스럽진 않았다.
만족할 만한 결과를 얻으려면 프롬프트 조정을 위한 시간을 또 써야할 것 같았는데, 얼마나 걸릴지 모르는 데에 시간을 더이상 투입하고 싶지 않았다. 그래서 그냥 직접 다시 그렸다.
내 경우엔 총 7장의 이미지만 필요했고 그림 스타일 자체가 단순하기 때문에 직접 그려도 시간이 크게 지체되지 않았다. 하지만 다량의 이미지가 필요하고, 이미지 스타일이 정해져있는 프로젝트라면 충분한 시간을 들여서 동일한 스타일의 이미지를 생성하는 툴을 만들어보는 것도 의미가 있을 것 같다.
4. 남은 과제
- RDS에서 퀴즈 목록 읽어오기
- 현재는 json파일에 저장된 값 읽어오고 있음
- 퀴즈 출제용 백오피스
만들면서 재밌는 프로젝트였다. 다만 나는 재밌어하며 만들었는데, 정작 사용자들은 재미를 못느꼈는지 활발한 공유가 이뤄지지 않은 것은 아쉽다. 아이디어를 확인하기 위해서는 빠르게 만들어서 반응을 보는 게 확실히 좋은 방법인 것 같다.
개발 면에서는 많은 사람들에게 공유할 목적으로 만든 만큼 크로스 브라우징과 사용성, 그리고 불필요한 데이터 페칭을 줄이는 데 주의하며 진행하였다. 작은 프로젝트이지만, button이나 badge(문제 카테고리 표시) 같은 요소들이 일관성을 갖도록 컴포넌트를 개발했다.
활용도가 낮긴 하지만 openai API를 처음 써본 것도 재밌었다. 결과 상세 페이지의 ‘AI 총평’ 생성에 사용하고 있다. 현재로서는 사용자가 틀린 문제의 개수와 카테고리만 제공해서 답변을 생성하고 있고, 어차피 문제가 고정된 10개 밖에 없기 때문에 크게 개인화된 답변을 하고 있진 않지만… 똑같은 문제를 틀려도 조금씩 다르게 말해줘서 재밌다(이 프로젝트는 사용자가 거의 없기 때문에 개인별로 생성해도 비용 문제가 없는데, 만약 사용자가 많았다면 미리 생성한 답변을 돌려가며 응답하도록 수정해야 했을 것이다).
AWS를 활용해 서비스 아키텍처 구축을 직접 해본 것도 좋은 경험이었다. 이전 회사에서 사용한 것들 위주로 사용해봤는데, 다음에는 vercel이나 amplify도 경험해보고 싶다.
