DEVOCEAN

안녕하세요! 데보션영 2기 니빵내빵조입니다.

저희는 개발과제로 ChatGPT를 활용한 만다라트 계획관리 웹 서비스인 '꿈틀'을 개발했는데요, 주제 선정 배경과 개발 과정을 소개해 드리려고 합니다!

개발 주제 선정 배경

'갓생'이라는 단어가 많이 쓰이는 것을 보면 자기관리가 하나의 트렌드로 떠오르고 있다는 것을 알 수 있습니다.

개발 공부, 운동, 퍼스널 브랜딩, 투자 공부 등등 다양한 형태의 갓생을 위해서 계획을 세우게 되는데, 저희는 이 때 느끼는 어려움을 문제로 정의했습니다.

• 어디서부터 어디까지 계획을 세워야 할 지 어렵고,

• 해야할 일이 많아서 우선순위를 세우기 어렵고,

• 목표는 있지만 동기가 생기지 않는

그래서 이러한 문제들을 해결하는데 도움을 줄 수 있는 계획 관리 서비스를 만들고자 했습니다!

'만다라트 계획표'라는 형식을 차용했고, 기존의 일정 관리 서비스와 다르게 장기 계획 달성에 집중했습니다.

중간 발표 피드백 이후

8월 SK 사내 연수원에서 중간점검과 함께 피드백을 받을 수 있었습니다.

가장 큰 문제는 사용자가 자신의 만다라트 계획표를 생성한 후, 서비스를 이탈하게 되는 서비스 흐름을 가지고 있다는 것이었는데요,

수익성과 서비스 유지 측면을 생각하지 못해 아차 싶었던 순간이었습니다ㅎㅎ;;

그래서 최종 발표 전까지는

• 계획표 이미지 저장 기능을 삭제하고,

• 회원 시스템을 도입해 지속적인 유입과

• 계획표 저장 및 달성 여부 체크로 달성률을 확인할 수 있게

변화를 주어 사용자가 지속적으로 서비스에 머무를 수 있게 고민했습니다.

서비스 소개

처음 서비스에 진입하면 보게 되는 화면인데요,

카카오 로그인 후 첫로그인시에만 사용자 정보 입력 후, 목표를 입력하면 만다라트 계획표가 만들어집니다.

아무래도 꽤 많은 양의 정보를 가져오다 보니 평균 5-10초 정도의 시간이 소요되는데,

로딩 화면을 도입해서 프로세스가 진행 중이라는 것을 사용자에게 보여주려고 했습니다!

다음으로 완성된 계획표를 볼 수 있는데,

1. 꿈틀 나무로 시각화된 계획표

2. 만다라트 계획표 형태

두 가지가 존재합니다. 꿈틀 나무의 경우 감성적인 요소와 시각적인 재미를 더하기 위해 도입한 부분입니다.

그리고 만다라트 계획표에서는 기본적으로 4x4의 계획이 제공되고, 계획 자체를 수정하거나, 달성 여부를 체크할 수 있습니다.

'3년 이내에 전문적인 프론트엔드 개발자 되기'라는 목표를 제시했을 때,

'인턴십 참여하기', '개발자 커뮤니티에 참석하기', '오픈소스 프로젝트에 기여하기' 등 현실적이고 도움되는 세부 목표들을 제시해 주는 것을 볼 수 있습니다.

홈 화면에서는 만들었던 전체 계획표를 확인할 수 있고, 세부 목표의 달성률 퍼센트를 함께 확인할 수 있습니다.

실제 시연은 시연 영상 링크를 첨부하도록 하겠습니다.ㅎㅎ

시연 영상 링크

개발 과정

아키텍처와 기술 스택

프론트엔드의 경우 JavaScript에서 발생했던 참조 오류를 방지하기 위해 TypeScript를 사용했고,

페이지가 많지 않고 컴포넌트 단위로 개발 및 재사용이 가능한 점을 고려해 SPA 구조인 React를 메인으로 사용했습니다.

상태관리 라이브러리로는 러닝커브가 적고 React와 호환성이 좋은 Recoil을 채택했습니다.

그리고 PWA를 적용해 앱처럼 설치해 사용할 수 있도록 했습니다!

백엔드의 경우 JavaScript와 Node.js를 사용했고, 배포는 AWS EC2를 사용했습니다.

📌 CI/CD 파이프라인 구축

개발 기간이 아무래도 학기 중이었고 개발 시간이 많지 않아 최대한 효율적으로 작업하려고 노력했습니다.

그래서 개발 초반 프론트엔드를 AWS S3에 미리 배포한 후, CI/CD 프로세스를 구축했습니다.

git 브랜치 전략으로 git flow를 사용했는데,

develop 브랜치에서 PR이 쌓이고 배포 시 main 브랜치에 push하게 되면 빌드 후 AWS S3 버킷에 자동으로 업로드가 되고 있습니다.

또 한가지는 Storybook이라는 UI 컴포넌트 개발 도구를 사용했는데,

UI 개발 후 develop 브랜치에 push가 일어나면 Storybook 페이지가 github-pages를 통해 자동으로 배포되고 있습니다.

한 번 파이프라인을 구축해 놓으니 매번 다시 배포할 필요도 없고 개발 시간을 단축할 수 있었습니다.

다음에는 백엔드까지 CI/CD를 해보는 것이 목표입니다!

📌 Storybook

아마 처음 들어보시는 분들도 있을텐데, Storybook이라는 UI 컴포넌트 개발 도구가 있습니다.

컴포넌트 문서화 도구로 사용하거나, 디자인 시스템 개발에도 사용할 수 있습니다.

프로젝트 초반 와이어프레임 작업 후에 반복되는 UI 컴포넌트들 먼저 개발 후 Storybook으로 문서화 했습니다.

예를 들어 버튼 컴포넌트의 경우 Storybook에서 미리 지정한 width, height, 배경 색 등등을 바꾸며 테스팅할 수 있습니다.

문서화가 귀찮은 작업일 수도 있지만, 이번에 Storybook을 도입하면서

오히려 개발 규모가 커지고 길어질 수록 더 효율적으로 작업할 수 있는 방법이라는 것을 체감했습니다.

프롬포트 엔지니어링

꿈틀의 prompt engineering에서 가장 고민했던 것은 "어떻게 보면 복잡한 구조의 9*9 만다라트 계획표를 GPT에게 이해시킬 수 있을까?" 였습니다.

아무리 설명해도 표의 개념은 잘 인식하지 못했고,

여러 시행착오를 거쳐 결국은 만다라트계획표 형태의 직접 짠 JSON 스키마를 기반으로 GPT가 응답을 한것으로 클라이언트에게 넘겨주었습니다

그 이후에는 finetuning 같은 성능 최적화라는 것을 하려는 시도를 했습니다.

하지만 비용적인 측면에서 finetuning된 모델과 성 능최적화를 하기위한 번역 API 또한 돈이 들어 BM에 맞지 않았고 때문에 코드를 간결하게 함으로써 토큰 최적화를 했습니다.

이 과정에서 생성형 AI가 지금 과도기에 접어들었다는 것을 인지했습니다.

모델과 사람을 이해하고 창의적인 생각을 하며 변화를 추구하는 것이 여러 서비스에서도 적용될 개념이라고 생각하기에

여전히 저는 꿈틀에서 "더 나은 프롬프트가 있지않을까?" 라는 물음을 던지며 앞으로 나아갈 것입니다.

🌊 마무리

데보션영 개발과제의 첫 아이디어 회의부터 최종발표까지 약 5달 정도의 여정이 끝났는데요,

아이디어를 갈아 엎기도 하고 우여곡절이 있었습니다.

그럼에도 니빵내빵 팀원들 모두 최선을 다한 덕분에 개발과 발표까지 잘 마무리할 수 있었습니다!

긴 글 읽어주셔서 감사하고, 피드백과 조언은 언제나 환영입니다 :)