DEVOCEAN

Turtled 개발 수행기

DEVOCEAN YOUNG 개발 미션으로 6월~11월 프로젝트를 진행하였고,

지난 11/3(금)에 SKT타워 SUPEX 홀에서 최종 발표를 한 개발과제를 소개드려요!

당신의 거북목! 제가 고쳐드릴게요 Turtled

글을 읽으시기 전에 지금! 거북목 자세이셨다면 목을 쭈우욱…🐢쭈우욱…🐢넣..어..볼까요!?

Turtled는 이렇게 잊고 있던 거북목 자세를 필 수 있도록 알림을 주는 거북목 스트레칭 타이머입니다.

자세 교정 서비스! 다들 한 번쯤은 상상해보셨던 서비스일 것 같습니다.

저희도 마찬가지로 현대인들의 고질병인 비대칭 자세의 교정이 필요하다 느껴 주제를 선정하게 되었습니다.

좀 더 빠른 요약을 원하신다면, 서비스에 대한 소개를 SK 판교에서 열린 Tech Day 발표 영상에서 보실 수 있습니다.

(🔗 Tech Day 발표 자료: https://youtu.be/zKsfbGFqK70?si=h-5knP86XoZkZ9uX )

Turtled를 만드는 Swimmers 팀원들

안녕하세요! DEVOCEAN YOUNG 2기 Swimmers조입니다. Swimmers는 이번에 DEVOCEAN YOUNG 개발 과제로 Turtled라는 거북목 스트레칭 사이트를 개발하였습니다.

팀원(Role)은 🤖 현아(안드로이드), 🛠️ 민주(서버), 🌐 지수(웹), 🍎 희찬(ios)로 다양한 개발 분야 관심사를 가진 팀입니다.

처음에는 어떤 플랫폼으로 서비스를 개발할까 고민하다가, 모두의 관심사를 살리는 대신, 서로 다른 플랫폼을 배울 수 있도록 공유하는 것을 하나의 과제로 설정하였습니다.

모두가 원하는 플랫폼으로 작업을 진행하니, 서로 다른 분야에 있지만 Turtled란 하나의 목표를 향해 함께 나아가는 느낌이 들었습니다.

그렇지만 각자가 서비스의 전체 요구사항을 개발하면서, 각 플랫폼에 맞게 개발을 진행하는 것이 하나의 챌린지가 되기도 했습니다.

모두 다른 플랫폼인데, UI가 잘 통일이 될까? 걱정이 앞서기도 했지만, 그런 걱정이 무색할 수 있도록 Frontend 팀원들이 열심히 소통하였습니다.

그렇게 해서 Turtled는 3개의 클라이언트와 1개의 서버 구조를 갖추게 되었습니다.

3쌍둥이 행성 같은 3개의 클라이언트, 그리고 하나의 서버

태양과 행성처럼 저희는 서버와 3개의 클라이언트로 이루어져있습니다.

아키텍처가 구현되기까지 클라이언트 UI 개발, 클라이언트에서 FCM을 사용한 Cloud messaging service 사용,

HTTPS 보안 설정 및 Proxy Server 설정, Cloud instance에서 서버 배포 등의 개발기를 다뤄보고자합니다.

i. Turtled 주요 기능

Turtled의 주요 기능에는 (1) 스트레칭 스탑워치, (2) 스트레칭 달성 기록, 그리고 (3) 거북목 측정 기능이 있습니다.

저희는 각 기능을 어떻게 User들에게 보여줄까?를 고민하며 디자인과 설계에 반영하였고, 주요 기능을 구현하였습니다.

ii. 클라이언트 UI 구현

a. 타이머 x FCM(Firebase-cloud-messaging)

1차 개발 때에는 초기에 기획했던 대로 거북목 스트레칭을 위한 알림 기능에 집중했습니다.

사실 이전에는 기본적인 CRUD 기능들을 이용하여 대중적인 앱을 구현했던 경험이 많았어서, 타이머 기능을 처음 개발해보는 것이었는데요.

따라서 1차 개발에서는 타이머와 FCM의 조합 자체가 첫 챌린지가 되었습니다.

b. 커스텀 달력 View

달력을 구현할때 꽤나 많이 고민했습니다!

그냥 Library를 들고 와서 사용하면 편하게 년도/월/일 관리가 가능했지만 저희가 원하는 것은 해당일자를 클릭했을때 해당 일자 안에 스트레칭 정보가 있는 것이였고,

이를 가시화하기 위해 스트레칭 한 날짜에는 일자 밑에 점이 찍혀야합니다.

기존 라이브러리로 구현하기 위해서는 라이브러리를 뜯어서 수정해야하는 번거로움이 있었기에 "그냥 직접 구현하자!"는 마음으로 처음부터 구현을 시작했습니다.

그래서 달력을 구현할때 정말 많은 것을 생각했습니다.

바로 매 달마다 날짜가 다른 경우도 있고, 요일도 신경써야하고.. 엄청 많았습니다.

그래서 처음에는 조건문을 10개 정도 사용하였더니 엄청 느렸고 이를 간소화시키면서 사이드 이펙트 없이 구현하는 방법을 곰곰히 생각하고 계산해서 성공적으로 구현했습니다 ;)

c. 거북목 측정 AI 기능 연동

SKT 워크샵에서 중간 발표 이후 거북목 스트레칭 알림을 받기 이전에 거북목 정도를 객관적으로 알 수 있다면 더 좋을 것 같다는 피드백을 받았고,

이를 반영하여 2차 개발을 하게 되었습니다.

여기서는 오픈 소스 모델을 활용하여 AI 기능을 연동하였는데요, 사진 처리와 달리 영상을 처리하는 부분이 또 다른 챌린지가 되었습니다.

실제로 기능을 구현하고 나서는 유저들이 원하는 기능이었을지, 저희가 피드백을 잘 반영하였는지 궁금해지기도 했습니다.

다음으로 진행했던 Tech Day 부스에서는 훨씬 더 많은 분들의 피드백을 들어볼 수 있었습니다.

감사하게도 좋은 피드백 역시 많이 받을 수 있었고, 측정한 거북목 결과에 대한 분석 혹은 이를 바탕으로 하는 스트레칭 방법을 추천해줄 수 있으면 좋겠다는 의견이 다수였습니다.

이에, 거북목 측정 결과에 따라 다른 스트레칭 방법을 제시할 수 있도록 3차 개발을 이어갈 수 있었습니다.

자세한 피드백 반영 사항은 뒤에서 이어지는 '유저 피드백 수집과 앱 개선 여정'에서 다루었습니다.

d. 방명록

유저의 피드백을 받을 때, 피드백을 받을 수 있는 form을 직접 만들면 더 재밌고 의미있을 것이란 생각을 많이 했습니다!

빠른 구현을 위하여 파이어베이스의 storage를 연결하였고, 원하는 거북이 모양을 선택한 후 피드백을 작성할 수 있는 기능을 구현했습니다.

방명록 url은 아래와 같으니, 혹시 이 글을 보고 궁금하신게 계셨다면 이쪽으로 남겨주셔도 환영합니다. ㅎㅎ

🔖 방명록 url: https://www.turtled.site/guest-book

iii. 백엔드 개발기

a. HTTPS 및 Nginx 설정

서버를 배포하기 위해서, Ubuntu 20.04.6 LTS (GNU/Linux 5.4.0-99-generic x86_64) 환경의 cloud instance를 사용하였습니다.

로그인 기능이 있기 때문에, User의 정보를 암호화하여 보내야할 필요가 있었습니다.

도메인을 DNS에 등록하고, HTTPS로 연결하기 위해서 SSL과 Nginx를 사용하였습니다.

b. 서버 로깅 및 Gunicorn 설정

서버 환경에서 FastAPI 서버를 실행하기 위해서 처음에는 uvicorn을 사용하여 백엔드 프로그램을 돌리고, 리눅스의 bg 명령어로 백그라운드에서 프로세스를 실행시켰습니다.

그러다보니 request와 response 관련 log를 실시간으로 확인하고 싶을 때, 다시 프로세스를 껐다가 uvicorn을 키는 것이 번거롭게 느껴졌습니다.

따라서, 로깅 파일을 만들어서 서버의 info level 로그를 수집해서 볼 수 있게 uvicorn의 --log-config 옵션을 사용하였습니다.

하지만, background에서 실행시킨 프로세스는 terminal이 어쩌다가 종료되어버리면 프로세스도 같이 종료되는 현상이 있었습니다.

따라서 uvicorn을 백그라운드로 실행할 수 있는 방법을 찾아보다가 Gunicorn을 알게되었고, 리눅스의 Service로 Gunicorn을 등록하여 백엔드 애플리케이션을 실행시켰습니다.

유저 피드백 수집과 앱 개선 여정

i. [1차 피드백] DEVOCEAN 캔미팅 중간 발표

8/24일 SK 연수원에서 DEVOCEAN 캔미팅이 있었습니다.

중간발표 진행 때까지 저희 서비스의 형태는 유저들이 거북목 스트레칭을 잊지 않게 수행할 수 있도록 하는 (1) 스트레칭 알림 제공과 (2) 기록 및 달성이 주요 기능으로 이루어졌습니다.

이때 프로젝트 중간 발표에서 첫 피드백을 받을 수 있었습니다. 중간발표 진행 후 다음과 같은 피드백을 받았습니다.

• 거북목 측정 기능이 있는건 어떤지? 구체적인 거북목 수치를 알고 싶어요

• 타이머 알림이 유저들에게 더 노이즈가 되지 않고 친숙하게 울릴 수 있는 방안이 있을까요?

• 스마트 헬스 시장에서는 요즘 개인 맞춤형 서비스를 제공하는 트랜드가 있고 개인 맞춤형 서비스가 될 수 있는 부분이 있을까요?

• 거북이 캐릭터를 개인마다 다르게 시작하도록 설정하면 어떨까요?

• 사용자 데이터를 수집 뿐 아니라 활용할 수 있는 방향을 생각해볼 수 있을 것 같아요!

저희도 알림 서비스 이외의 추가적인 서비스 생각을 하고 있어 피드백을 긍정적으로 보고 이를 반영하기로 했습니다.

따라서 현재 서비스의 세번째 주요 기능인 (3) 거북목 측정하기 페이지를 만드는 방향을 추가하였습니다.

다음과 같은 2가지의 이유에서 오픈소스 AI 모델을 활용한 거북목 자세 측정할 수 있는 로직이 추가되었습니다.

1. 거북목은 육안으로 확인하기 쉬운 장점이 있다.

2. 유저의 현재 거북목 상태가 거북목 타이머 알림을 사용할 수 있도록 동기부여가 될 수 있을 것 같다.

MediaPipe의 Posture-analysis-system-using-MediaPipe-Pose를 활용하여 유저가 자세 영상을 업로드하면,

목의 각도를 90도를 기준으로(유저의 거북목 각도) / 90 * 100 퍼센티지 반환값을 계산하게 됩니다.

모든 피드백을 다 반영할 수 있었다면 더 좋았겠지만, 이 과정에서 기존에 없던 기능이 유저 피드백을 통해서 생겼던 부분이 신기하였고, 좋은 의견을 받을 수 있어서 감사했습니다.

ii. [2차 피드백] Tech Day 데모 부스 운영

중간 발표 이후 1차 피드백을 반영하여 개발을 하고,

10/20일 판교에서 진행하는 Tech Day 장소 앞에서 부스를 운영하였어요! 처음으로 유저들에게 실시간으로 데모를 해야한다는 생각에 처음에는 떨렸습니다..ㅎㅎ

부스를 운영하면서 유저 분들의 반응과 피드백을 얻고 싶었는데 감사하게도 많은 분들이 관심을 가지고 피드백을 주셨습니다.

a. 서버 운영 환경 개선 필요성

제일 우려하였던 부분은 거북목 측정 기능의 속도와 파일 업로드 및 전송 시간이었습니다.

이 2가지 부분은 실시간으로 거북목인지 판단하기 위해 유저들의 측면 영상을 찍고, 서버에 파일을 올려서 모델이 거북목 측정 여부를 반환하는 구조에서 병목이 될 수 있는 부분이 있었습니다.

역시나 파일을 업로드하고 나서, openCV를 사용하여 영상을 분석할 때 로딩 시간이 많이 소요되었고,

이를 분석하기 위해 데모를 하면서 서버 log를 확인하려고 할 때마다 terminal이 종료되면 서버가 다운되어 지연되는 시간도 있었습니다.

따라서 부스 운영에서의 이러한 부분을 Painpoint로 삼았고, 이후에는 사용자 경험에서 실시간성을 유지할 수 있도록

서버의 api 프로그램이 gunicorn으로 실행하게 변경하고, ec2가 아닌 더 좋은 배포 환경을 사용하도록 반영할 수 있었습니다.

b. 서비스 피드백

또한, 부스에 설치해둔 방명록에 부스에 왔다가신 많은 분들이 의견과 응원의 메시지를 남겨주셨습니다!

저희 앱이 잘하고 있는 부분과 채워야할 부분을 한 번 더 정리할 수 있었어요.

• 장점: 스트레칭을 까먹을 때 알림을 주는 기능

• 보완할 부분: 거북목 측정 기록을 활용하는 부분

따라서 피드백을 반영해서, 거북목 상태를 1회성으로 측정하는 것 뿐만 아니라 측정 기록을 저장하고, 측정 기록에 따라 스트레칭 자세를 제시할 수 있도록 변형하였습니다.

여기에 반영은 못했지만, 데모 부스를 들려서 질문과 의견을 주셨던 내용들은 모두 아까워서, 추후에 깊이 공부해나가면서 채워보고 싶습니다.

iii. [최종 반영] 최종 발표

그렇게 해서, 최종 발표 때까지 피드백을 반영하여 구현을 하였고, 실시간 데모 때 앱 동작의 안정성에 대해 기존보다 자신감을 갖고 데모를 시연할 수 있었습니다.

서버가 다운되지 않고, 빠르게 유저의 측정 기록을 계산할 수 있겠다는 생각이 들었고, 다행히도 클라이언트에서 구현 내용들을 모두 시연할 수 있었습니다.

앞으로 저희가 해결해야할 문제점은 데모처럼 유저가 1명이 아니라 동시 접속하는 유저가 여러 명일 때도 잘 동작할까?에 대한 의문입니다.

그러한 환경에서도 안정적으로 서비스를 운영하려면 어떤 요소가 필요할까? 고민하게 되었고, 이 부분이 저희가 발전시킬 수 있는 부분이라고 생각합니다.

데보션영 미션과 개발 과제를 위한 21차의 회의와 45개의 done 리스트

이렇게 프로젝트 회고를 마치며, ’설계구현배포’까지의 한 사이클을 돌아볼 수 있었습니다.

열정적인 팀원들과 함께한 덕에 3월부터 10월까지 시험기간 및 연휴를 제외하고 매주 회의를 진행할 수 있었습니다.

그 과정에서 부스 운영, 세미나, 미션 과제 등 다양한 커뮤니티 활동을 지원해주셨던 데보션영에 감사드립니다!

서비스를 만드는 경험을 통해서, 유저들이 필요한 부분이 무엇이고 저희 서비스가 차별점이 되려면 어떤 부분이 필요함을 깨달을 수 있었습니다.

또한, 개발과 구현의 관점에서도 많은 부분을 배울 수 있었기 때문에, Turtled는 앞으로 개발 및 공부의 목적으로 꾸준히 유지보수를 해나가고 싶습니다.

🐢 Turtled 홈페이지 🔗: https://www.turtled.site/

회고

🤖 현아

사실 주된 개발은 큰 발표들을 앞두고 짧게 며칠 동안만 진행했습니다..ㅎㅎ

다들 바쁘기도 하고 그만큼 또 능력있는 팀원들이라 가능했던 일인 것 같습니다.

이전에도 많은 프로젝트들을 경험해 보았지만, SKT 데보션 영으로서 진행한 이번 프로젝트는 더욱 특별했는데요.

바로 피드백을 반영하여 지속적인 업데이트를 해나갔다는 점입니다.

스프린트 형식으로 SKT 워크샵 전에 1차 개발, 테크데이 부스 진행 전에 2차 개발, 마지막 최종 발표 전에 3차 개발을 진행하며 실제 유저들의 피드백을 반영한 개발을 해볼 수 있었습니다.

3차에 걸친 피드백과 업데이트를 마치고 지난 11월 3일, 드디어 최종발표까지 마치게 되었는데요.

발표가 끝나고 “이 팀은 실제 유저를 통해 피드백을 받고 그것을 꾸준히 반영하여 기능을 업데이트 해나간 점이 인상적이다.” 라는 말씀이 기억에 남습니다.

프로젝트를 하는 동안에는 그저 피드백이 있으니 반영하고, 더 필요하다고 생각되니 개발했던 것 뿐인데 돌아보니

‘이론으로만 접했던 애자일 방식을 내가 직접 경험해보았구나’ 라는 생각에 많은 것을 배울 수 있었다는 생각이 듭니다.

이 모든 경험을 할 수 있도록 좋은 프로그램 만들어주신 SKT 데보션에 감사드리며, 모든 과정을 함께하며 고생해온 우리 팀원들에게도 너무 고맙다는 말 전하고 싶습니다 :)

🛠️ 민주

데보션영을 하면서, 발표할 수 있는 자리가 많았는데, 그때마다 많이 긴장했어요.

하늬님의 피드백과 팀원들에게서 많이 배우면서 발표력을 기를 수 있게 되어서 좋았습니다.

앞으로도 익숙하지 않은 것에 꾸준히 부딪혀보며 성장할 수 있는 시간을 보내도록 노력하겠습니다.

그리고 스위머즈!! 다들 너무 고생했고, 고마웠습니다. 😊

🌐 지수

한 프로젝트를 여러차례에 걸쳐 발전시켜나갈 수 있어서 정말 뜻깊었습니다.

진심을 다해 피드백해주신 분들이 많이 계셔서 참 감사했고, 피드백을 반영한 서비스를 많은 분들이 사용해보시면서

‘정말 귀엽고 좋은 프로덕트라고 생각한다.’라고 말씀해주실 때마다 큰 뿌듯함이 있었습니다.

알림이나 달력을 구현해내는 과정도 쉽지는 않았지만, 밤을 새가며 결국은 구현해낸 과정에서 큰 성취감을 느꼈습니다.

또한 그 많은 새벽을 함께한 Swimmers 팀원들이 있었기에, 더 힘을 낼 수 있었습니다! 😊

🍎 희찬

예전부터 구현하고싶었던 아이디어를 하나의 플랫폼에서만 구현하는 것이 아니라 다양한 플랫폼에서 높은 완성도를 가지고 구현할 수 있어서 좋았습니다!

그리고 무엇보다 팀원 모두 열정적이고 참여도 100퍼센트로 다같이 함께하며 완성할 수 있어서 정말 행복했습니다🙂

이렇게 좋은 팀 프로젝트를 또 할 수 있을까 싶네요 ㅎㅎ

그리고 한번 하고 끝나는것이 아니라 매 순간순간마다 피드백을 반영하고 성장해나가는 것이 마침 저희와 같아서 더욱더 애착이 가는 프로젝트를 마무리한거같습니다!

팀원과 마스터님들 모두 감사합니다!