[후기] 종합프로젝트 설계1 - 종프는 학점받는 외주 ?

개요

안녕하세요. 오늘은 무려 2년전 프로젝트에 대한 회고를 해보려고합니다. 

너무도 오래된 프로젝트라 기억이 날까 싶기도 하지만 ... 해당 프로젝트로 어떤 것을 배울 수 있었는지, 어떤 점이 바뀌었는지는 짚고 넘어가보고 싶어 이렇게 글을 쓰게되었습니다.

 

아무 것도 몰랐지만 열심히 했던, 뭘 위해 열심히 했는지도 모르겠지만 맹목적으로 열심히했던 그때가 왠지 그리워지는 요즘입니당 ㅜㅜ 

요즘은 열심히 해야겠다는 마음이 들지만, 왜 이리도 막상 하려하면 하기가 싫어지는지 ...

그래서 풋풋했던 그 때를 기억하며 .. 마음을 다 잡아보고자 글을 적는 것도 있습니다 ... 하하하

 

종합프로젝트설계?

 

아마 컴퓨터공학을 전공하는 대부분의 학교에서는 4학년 과목으로 설계과목이 편성되어 있을 겁니다. 흔히들 캡스톤과목이라고 하나요?

제가 졸업한 학교의 경우 3학년 2학기에 종합프로젝트 설계1, 4학년 1학기에 종합프로젝트 설계2를 수강하도록 편성되어있었습니다. 

사실 종합 프로젝트 설계1과 종합 프로젝트 설계2는 완전히 독립된 과목으로, 연관성은 없으나 ... 1,2로 분리해두어 뭔가 이어서 프로젝트를 진행해야할 것만 같은 혼란을 주기도 합니다 .;;

 

종합프로젝트설계는, 다른 설계과목과 마찬가지로 특정 서비스를 개발하는 과목이었습니다.

그러나 특별한 점이 있다면, 지역 기업체와 연계하여 프로젝트를 진행한다는 것이었습니다. 평소 프로젝트를 진행할 때에 팀원 간에 임의로 주제를 선정하곤 했었는데, 기업체가 원하는 서비스 개발을 한다는 점에서 참 신선한 과목이었다고 생각합니다.

또 한 학기 동안 기획에서 설계 구현까지 완료해야했고, 그 과정동안 기업체와 지도 교수님의 피드백을 받을 수 있었습니다. 중간 중간 기업체와 회의를 하기도 했고, 중간 발표, 최종발표를 통해 교수님께 피드백을 받으며 진행했습니다.

 

뭐 .. 이런 표현이 맞는지는 모르겠습니다만, 학점을 받는 외주를 하는 느낌이었습니다..

 

다른 팀들을 보니 기업체의 성격마다 진행과정이 다른 것 같긴 했으나, 저희와 함께한 기업체는 "확실히 원하는 요구사항"이 있으셨고, 그래서 회의도 다른 기업체들에 비해 빈번히 진행했습니다. 그 때 당시에는 회의를 자주해야한다는 점에서, 수정을 빈번히 해야한다는 점에서, 조금 귀찮다는 생각을 하기도 했었으나, 돌이켜 생각해보니 참 좋았다고 생각합니다. 현업에서 일하는 분과 학생의 관점은 다를 것이 자명하고, 또 얻을 수 있는게 현저히 많기 때문입니다. 아마 이 프로젝트를 계기로, 사용자에게 불편을 최소화하는 서비스를 구현하는 눈이 조금은 더 밝아졌다고 생각합니다. 

 

팀구성

팀은 친한 동기들과 구성하였습니다. 

총 4명의 인원이었고, Frontend와 Backend 각 2명씩 배정되어 프로젝트를 진행했습니다.

 

주제.. 그리고 선택 이유

 

그 당시 저희에게 주어졌던 기업체들의 프로젝트 제안 과제명은 다음과 같았습니다.

 

• 교통 체증 상황 전달을 위한 스마트 폰 스트리밍 응용 개발 및 통신 방법 연구
• Person-owned Health Record 시스템 개발
• 실내 위치 정확도 최적화를 위한 자동 거리 교정을 사용한 가중 사각형 위치 알고리즘 개발/연구
• 인공지능 기반 장애인 주차표시 인식 시스템
• 시맨틱 검색을 위한 지식 임베딩 기반 하이브리드 인덱스 구조 개발
• 모바일 사용자를 위한 딥러닝 기반 적응형 비디오 스트리밍
• 실내에서 여러 카메라를 이용한 소수인원 트래킹
• 푸른들소프트 온라인 동영상 플랫폼 솔루션 개발
• 블록체인 기반 분산 신원증명 기술을 도입한 주차 관제 플랫폼 개발
• 생체 신호를 활용한 콘텐츠 서비스 기획 및 개발
• 모바일 단말기 보안 인증과 미디어 서버 컨트롤 앱 개발

 

저희가 선택한 주제는 "모바일 단발기 보안인증과 미디어서버 컨트롤 앱 개발" 이었습니다.

 

해당 주제를 선택한 이유는, 저희가 가진 개발 스택내에서 가장 완벽하게 구현해낼 수 있을것이라는 자신감이 있었기 때문입니다.

다른 주제들의 경우 너무 생소했기에, 처음으로 하나의 프로젝트로의 구현을 시작하는 학부생 입장으로서는 해당 주제가 저희에게 가장 알맞다고 생각했습니다.

 

준비 과정

 

조은캠프라는 회사가 참여했고, 조은 캠프에서 제시한 주제에 맞추어 프로젝트를 진행했습니다.  

 

https://www.saramin.co.kr/zf_user/company-info/view/csn/L3VQVklKMDRlN0Z5WEJxaTdYTlNlUT09/company_nm/(%EC%A3%BC)%EC%A1%B0%EC%9D%80%EC%BA%A0%ED%94%84 

(주)조은캠프 2023년 기업정보 | 사원수, 회사소개, 근무환경, 복리후생 등 - 사람인

 

아래 사진은 저희가 주제 선정 당시 받은 제안서 입니다.

주제 선정 이후, 회사 대표님을 만나뵙고 회의를 가졌습니다. 최종적으로 해당 기업체에서 저희에게 요구한 것은, 본인의 회사에 이미 사용자에게 제공되는 웹사이트가 있으니 이를 앱으로 접근이 가능하도록 앱을 만들어줬으면 좋겠다는 것이었습니다.  특히 안드로이드 및  IOS에서도 작동이 가능하도록 했으면 좋겠다고 말씀하셨습니다. 또한 조은 캠프의 경우 온라인 강의를 제공해주는 기업체인데, 아이디 공유 등의 부정한 방법으로 콘텐츠를 사용하는 사용자가 없도록 모바일 단말기 인증 시스템을 구축해달라고도 하셨습니다.

 

 

 

해당 요구에 맞추어 크로스 개발 프레임 워크인 Flutter를 이용해 웹/앱 에서 모두 사용가능하도록 제작할 것을 목표로 하였습니다.

또한 모바일 단말기 인증 시스템 구축을 위해 UUID를 통해 사용자를 식별하고 서버로 전공하여 인증하는 방식을 통해 해킹/부정 수강 행위를 방지하는 것을 계획했습니다.

 

저희가 크게 수행하고자 했던 목표를 정리하면 위와 같았습니다.

(최종 발표 PPT에 있던거 훔쳐왔어요 ㅎ)

 

아래의 그림은 실제 저희가 썼던 개발 프레임 워크입니다.

서버는 기업에서 제공했기에 기업체에서 제공하는 ASP와 SQL을 기반으로 진행했고, Client 단은 Flutter를 통해 프로젝트를 진행했습니다.

 

그래서 니가 한건 뭐니?

 

논문 작성 및 제출

 

네 ... 논문도 썼답니다 ...

수행 계획에 있었던 부정 시청 방지를 위한 설계 기법을 기반으로 논문을 작성했습니다. 사실 종합프로젝트 설계 과목에서 논문 제출은 필수는 아니었지만,  프로젝트의 실적을 증빙하는데에는 도움이 된다고 생각했기에 추진하게되었습니다.

 

(사진에 스티커 말고 모자이크 하고 싶은데 .. 모자이크만 하면 사진이 사라지네요 .. ㅜㅜ)

 

 

해당 논문에는 온라인 강의 시장의 증가와, 문제점들을 제시한 후 사용자 인증에 필요한 설계 방법을 제안하였습니다.

기기 등록 과정 및 동시 시청 방지 과정 (논문 삽입)

 

그리고 운이 좋게도 .. 상도 받았답니다 ..?

이거 다주는건가요 ???

UUID 를 이용한 사용자 인증 시스템 구축

 

논문 작성 후에는 본격적인 개발로 돌입했습니다. 

 

그 중 저는 UUID 관련 부분을 맡았습니다. 참고로 UUID란 다음과 같습니다.

 

기기고유값인 IMEI가 있지만, 이는 보안상의 문제로 현재 사용하고 있지 않기에 저희는 개인 정보 사용에 대한 문제도 해결하고, 고유 기기를 인식 할 수 있는 UUID를 활용하기로 했습니다. 이 값을 통하여 개별 기기를 인식 할 수 있었습니다.

 

특히 로그인 시에 UUID 관련 플로우를 추가할 예정이었기에 그에 수반되는 모든 기능을 구현해야했습니다. 늦은감이 있는 듯 하지만, 저는 프론트엔드 부분을 맡았기에 Flutter를 기반으로 진행했습니다. 

 

참고로 동시시청 방지 전에 이러한 기기 등록 과정을 별도로 두는 이유는, 기기 등록을 2대의 기기로 제한함으로써 동시 시청을 미연에 방지하는 효과를 두고자했기 때문입니다.

 

 

정리해보면, 제가 맡은 부분은 크게 2가지 였습니다.

 

1. 로그인 기능 구현
2. OTP 인증 구현

이렇게 보면 작아보이지만 ... ㅜㅜ

Flutter도 처음인데다가 프로젝트 관련 경험이 없으니 처음부터 끝까지 다 찾아봐야했습니다.

그 당시에는 할 일이 어찌나 많던지 ... 그 때를 생각하면 약간의 우울감도 느껴지는 것 같습니다 ㅜㅜ

 

• 로그인 기능 구현

아래의 사진은 로그인 기능개발과 관련한 UI입니다. 

로그인 기능 UI

사실 로그인의 경우 특별한 Auth 를 사용하지 않고 서버에 바로 통신을 날린터라 크게 어려움은 없었습니다.

 

• OTP 인증 기능

그러나 로그인 이후에는 기기등록과정이 있었습니다.

이는 UUID를 이용하여 사용자가 로그인을 시도 할 때 해당 기기가 등록되어있는 기기인지 확인하고, 등록되지 않은 기기라면 기기 등록 과정을 수행하도록 하였습니다.

이 때 기기 등록 방법은 현재 기기의 UUID를 읽어온 후, 사용자가 회원가입 시 저장해놓은 휴대전화를 통해 서버와의 인증 절차를 거치도록 합니다. 해당 사용자가 실제 유저가 맞다는 것을 확인 한 후에 기기의 UUID를 데이터베이스에 저장이 되도록 하였습니다. 

사용자 인증 UI

 

참고로 문자 전송을 위해서는 Firebase 문자 전송 기능을 사용했습니다. 사실 이부분이 가장 어려웠습니다.

우리 서버의 DB에 있는 회원이 맞는지 인증을 하기 위해, DB에 저장된 핸드폰 번호로 문자 인증을 해오는 과정이 필요했는데, 해당 프로젝트를 할 당시(2021년 3월)에는 Flutter가 아주 따끈 따끈한 프레임 워크 였기 때문에 문자 전송 서비스와 연동되지 않았습니다 ..

연동은 되었을 수 있으나, 문자 전송 서비스 업체에서 Flutter에 대한 가이드라인은 없었습니다 ㅜㅜ

 

그래서 제가 수 많은 구글링 중에 채택을 했던 방식은 FirebaseAuth를 사용하는 것이었습니다.

이를 위해 로그인 시 Firebase에도, 기업체에서 제공하는 웹서버에도 통신을 진행하습니다 .. 즉 문자 전송을 위해서 Firebase를 별도로 쓰는 ... 그런 방법을 채택한 것입니다 ㅜㅜ 

지금 와서 생각해보니 기업체에서 제공하는 웹 서버 말고, 그냥 Auth를 썼더라면 .. 이라는 생각과 또 지금 개발을 했더라면 다른 문자 인증 서비스를 쓸 수 있어서 이런 복잡한 작업을 거치지 않아도 될 텐데..(네이버 클라우드 문자 서비스)라는 생각이 듭니다 ....

 

그리고 만약 사용자가 새로운 기기로 로그인을 시도할 때 이미 2개 이상의 기기가 등록되어 있는 경우, 사용자가 기존에 등록된 기기들 중 삭제할 기기를 선택할 수도 있도록하였습니다. 이때 기존에 등록된 기기들은 서버와의 통신을 통해 전달받았습니다.

그런데 프로젝트를 진행하면서 다소 아쉬운 점을 발견했습니다.

이는 업체에서 제공하는 웹서버가 HTTP로 통신을 제공한다는 것이었습니다. 사실 완벽한 서비스를 구현한다는 입장에서 HTTP를 기반으로 통신을 할 경우, 손해가 되는 점이 너무 많았기에 해당 부분을 개선하고 싶다는 생각이 들었습니다.

특히 HTTP는 사용자 정보가 평문(plaintext)로 전송되기 때문에 타인이 통신 내용을 볼 수 있기 때문에, 보안상으로 큰 문제를 일으킬 수도 있기 때문입니다.

따라서 프로젝트 진행 도중 웹 서버에 TLS 기반의 HTTPS를 도입하여 보안을 강화하기로 했습니다.

 

 

이를 위해 인증 기관에서 SSL 인증서를 발급받아 직접 설정해주는 과정을 거쳤습니다. 

 

사실 순조롭게 인증서를 설치해주었던 것은 아닙니다.. 제공 받은 서버와의 호환에 문제가 있었기 때문입니다.

2020년 상반기부터 TLS 1.0및 1.1 보안 프로토콜에 대한 지원이 공식적으로 종료 되었습니다. 하지만 저희가 제공 받았던 서버는 Window Server 2008 R2 로 기본 설정 프로토콜이 TLS 1.0으로 되어 있습니다. 따라서 TLS 1.2 버전을 기본 사용하기 위하여 별도의 설정이 필요했습니다.  이를 통해 HTTPS는 클라이언트와 서버가 서로 인증을 하기 때문에 악의적인 사용자의 개입을 차단할 수 있는 효과를 기대할 수 있었습니다.

 

이 뿐만 아니라 중복 시청 방지를 위해 현재 해당 아이디로 강의를 수강 중인 기기가 있는지에 대한 데이터 관리를 했습니다. 이를 위해 Class 및 데이터 베이스 테이블을 생성했고, 지속적으로 통신을 통해 이를 관리해주었습니다. 다만 해당 부분은 제가 전적으로 맡은 부분이 아니기에 간단하게 짚고만 넘어가겠습니다.

 

아래의 사진과 같이 사용자가 강의 재생 버튼을 클릭하면 서버 측에서 미디어 재생 관련 데이터와 현재 시청 중인 기기가 있는지에 대한 정보를 받고 다음과 같은 과정으로 미디어를 실행하였습니다. 이미 기존에 다른 기기로 강의를 시청 중이었다면, 기기 변경 여부를 묻고 사용자가 원한다면 플레이어를 실행하도록 했습니다.

 

마무리

 

아래에 삽입한 기대효과 및 활용방안의 최종 발표를 위해 구구절절히 작성한 것입니다 .. 

아까우니 한번만 읽고 가주세요 ..

 

 

사실 이 때까지만 해도, 언제 git push를 날려야할지, 언제 commit을 해야할지 조차 모르는 상태였습니다.

그래서 보시면 알겠지만 (wlwl1011 이 접니다) 추가된 코드 수에 안맞게 commit이 매우 적습니다 ...

git 사용도 능숙하지 않았기에 삽질을 많이한 기억도 있네요 ...

 

처음으로 진심을 다했던 프로젝트라 그런지, 지금 보면 별로 형편없는 코드지만, 엄청 애정이 갑니다.

그래서 은근슬쩍 ... 여기에 두고 가겠습니다 :)

 

https://github.com/thing-zoo/edutopik

GitHub - thing-zoo/edutopik: 2021-2 산학협력 프로젝트 | 모바일 단말기 보안인증과 미디어서버 컨트롤

 

말의 서두에서 해당 프로젝트로 어떤 것을 배울 수 있었는지, 어떤 점이 바뀌었는지는 짚고 넘어가보고 싶어 이렇게 글을 쓰게되었다고 언급했었습니다.

그렇다면 어떤 점을 배울 수 있었고 바뀌었는지 찬찬히 짚어볼까합니다. 

 

우선 실제 사용자가 있는 서비스를 만든게 처음이었기에 엄청 공을 들여 개발을 했습니다. 그래서 예외 처리에도 굉장히 신경을 썼구요. 이런 부분이 제가 프로젝트를 임하는 태도와, 실력 향상에 큰 도움을 주었다고 생각합니다. 실제 사용자가 있다는 것이 프로젝트를 임하는데에 있어 큰 책임감을 주었던 것 같습니다.

 

또 깃허브를 사용하는 방법에 대해 공부하게 되었습니다.

기존에도 깃허브를 사용하기는 했으나, 사실 보여주기 용으로만 존재했습니다. 그저 토이 프로젝트를 전시하는 용으로 깃허브를 두었었다면, 해당 프로젝트 이후에는 팀원과의 협업을 위해 깃허브를 사용하는 방법을 익히려고 노력했습니다.

따로 말을 하지 않더라도, 깃 커밋만 보고 현재 내가 어디까지 개발을 했는지, 개발시 어떤 에러 사항이 있었는지에 대해 보고 하기 위해서 말이죠.

 

또 Fronted와 Backend 가 하는 일에 대해 차이를 극명하게 느낄 수 있는 계기가 되었습니다. 

기존에 프로젝트를 진행하다보면, 그냥 Front 단에서 처리 할 수 있는 일이라서 행동을 자처 할 때가 많았는데, 해당 프로젝트를 하면서 그 때에 했던 것들이 Back에서 처리해줘야할 일들이구나 라는 것을 알 수 있는 계기가 되었습니다. 

 

그리고 문서정리의 중요함도 알게되었습니다.

프로젝트 완료 후, 해당 기업체에서는 개발자 문서를 써줄 것을 요청해왔습니다. 사실 처음 개발자 문서를 써달라고 요청을 받았을 때는 막막했던 것이 사실입니다. 처음 해보는 일이었으니까요 .. 

해당 과제를 처음 접한 개발자도 이해 가도록, 정말 A-Z까지 상세히 기록했습니다. 

.

.

 

좋은 팀원들과 함께해 합이 아주 잘 맞았던 프로젝트였던 것 같습니다.

언제 또 기회가 되면 또 좋은 프로젝트로 만났으면 하는 바램입니당

 

모두 화이팅