2021 졸업 작품 개발 일지

 

2020년 11월에 시작해 2021년 10월에 졸업전시회를 하며 마친 1년간의 졸업 작품 개발 일지를 어찌 한 포스팅에 담을 수 있겠냐만은 그래도 최선을 다해 보려고 한다.

 

 

11월

팀을 꾸리고 지도교수님을 찾아가 아이디어를 말씀드렸다. 일단 지도교수님을 배정받고 나면 학기가 끝날 때까지는 잠시 안심할 수 있어 추가로 아이디어 회의를 하지는 않았다. 팀을 구성할 때 이런저런 아이디어를 냈지만 내가 낸 키오스크 아이디어로 진행하게 됐다. 나는 프랜차이즈 음식점이나 휴게소 등에 놓을 음성 인식 키오스크를 만들고 싶었다.

 

12월

어떤 작품을 만들지 1차 계획서를 작성하고, 어떤 기술을 쓸지 정하기 시작했다.

 

1월

학기를 마치고 주 1번씩 회의를 하기 시작했다. 이 때쯤 스마트 미러를 하면 어떨까 하는 아이디어가 나왔다. 솔직히 탐탁지 않았다. 사람이 서 있으면 AR로 옷을 대 보는 작품을 하면 좋지 않을까 생각했는데 일단 그만한 크기의 미러와 모니터를 구하는 것도 일이었고, 우리 팀원 중에 누구도 AR 하기를 원하지 않았기 때문이었다. 이왕 졸업 작품을 만들 거라면 팀원 각자가 향후 희망하는 직무와 비슷한 작업을 해야 한다고 생각했기 때문이다. 그런데 한 번 시도라도 해보자는 의견이 너무 커서 마지못해 허락은 했지만 언제든 프로젝트를 다시 뒤엎을 준비를 하고 있었다.

 

2월

결국 스마트 미러 아이디어를 엎고, 다시 키오스크로 돌아왔다. 대신 이번에는 음성인식만 넣는 게 아니라 다른 인공지능 기술도 포함했으면 좋겠다는 의견에 오케이했다. 그래서 픽스한 주제는, 올리브영이나 랄라블라 같은 드럭스토어에 비치할 목적의 뷰티 키오스크를 만들자는 거였다. 음성 인식으로 상품이 있는지 검색해서 재고를 확인하고, 색조 화장품을 키오스크에서 즉석으로 테스트하고, 물건을 장바구니에 담아 결제하면 직원이 포장해서 바로 받아서 갈 수 있다는 그런 아이디어였다.

한이음 공모전에 별로 내기 싫다는 Y의 의견을 잠깐 따져봤다. 공모전에 참여한다고 나쁠 건 없지만 서류 작업이 늘어난다는 게 부담이었고, Y는 한이음 공모전에 작품을 한 번 출품해본 경험이 있어서 그 서류 작업이 매우 귀찮다고 했다. 그래도 나는 이왕 만든 거 공모전에 내면 좋겠다고 생각을 해서 은근슬쩍 돌려서 계속 물어봤다.

이 때부터 본격적인 개발이 시작됐다. 작년 9월에 웹페이지 외주를 받았을 때 UI를 만들어 쓰던 피그마 서비스를 이용해 UI를 만들었다. 이 작업은 팀원 D와 같이 했지만 대부분 내가 했다.

 

 

이 작업과 함께 Python3와 selenium으로 웹페이지 크롤링을 했다. 올리브영 크롤링을 하고 싶어서 robots.txt를 확인했는데 크롤링을 막고 있는 것 같길래 예의상 올리브영 크롤링은 하지 않았다. 대신 랄라블라 홈페이지를 봤는데 딱히 막아둔 것도 없고, 우리가 어뷰징만 하지 않으면 괜찮을 것 같아서 사람들이 잘 접속하지 않는 시간대에 프로그램을 켜뒀다. 카테고리별로 코드를 분류하고, 상품의 각종 정보를 수집해 정리해 json 파일로 저장한 다음 MySQL 데이터베이스에 넣는 작업까지 한 큐에 할 수 있도록 코드를 작성했다. 

이 작업에서 코드를 작성하는 건 별로 어렵지 않았지만, 실제 실행했을 때 내가 원하는대로 동작하지 않는 게 문제였다. 상품 몇 개를 건너뛰거나 해서 카테고리별로 일정한 갯수의 상품 정보가 저장되는 것이 아니라 띄엄띄엄 저장되어서 쓰기 좋지가 않았다. 왜 그런가 했더니, 웹드라이버로 브라우저를 켜서 크롤링하는 과정에서 sleep을 시키거나 해서 대기를 해야 했는데 그러지 않아서 너무 빨리 상품을 넘어가는 일이 일어났기 때문이었다. 대기 코드를 추가시키고 좀 인내심을 갖고 지켜봤고, 결과는 성공적이었다. 

GitHub - dev-dain/Lalavla-Crawling: 졸업하자!!!!!

 

그리고 프로젝트에 있어 가장 중요한 그것, 서류를 작성했다. 설계도를 만들고, 어떤 것이 필요하며 무슨 기술을 쓸 계획인지 등을 작성했다. 사실 그것보다 더 어려웠던 건 기획 의도와 기대되는 효과인 것 같다. 아니... 좋겠지... 이런 생각을 했지만 이런 게 다 소프트웨어공학에서 강조하는 요구 사항 정립과 바로 연결되는 것 아니던가. 그래 열심히 할 수밖에... 팀원들과 머리를 맞대고 열심히 고민해서 적었다. 

 

3월

데이터를 준비하고 UI를 준비한 다음 할 일은 메인 페이지를 실제로 만드는 일이었다. 내 입으로 이런 말하기 좀 그렇지만 난 CSS로 웹페이지를 꾸미는 데에는 도사다. 원하는 건 어떻게든 구현할 수 있고, 못 한다면 방법을 찾아내기 때문에 어떻게든 미리 계획해둔 UI와 비슷하게 꾸미려고 노력했고, 실제로 이행했다. 쉬운 기능이었지만, 백엔드와 연결하는 부분에서는 좀 애를 먹었다. 나는 주로 정적 웹페이지를 만들어서 백엔드와 연동할 일이 별로 없었고, 나는 Node.js를 이용했는데 Y는 스프링부트를 사용한 데다가 thymeleaf라는 템플릿 엔진을 사용해서 더 어려웠다. 하지만 한 번 사용법을 익히고 나니 어느 정도 적응할 수는 있었다.

그리고 3월 말에 발표를 했다. 내가 혼자 10분 정도 발표를 했는데 꽤 괜찮게 잘 했다. 교수님들도 악평을 하지 않으셨고 재밌다고 웃으셨다. ㅋㅋㅋ 그래 난 만담 개그를 해야돼.. 어쩌면 개발 말고 그게 내가 밥을 잘 먹을 수 있는 방법인지도?

 

4, 5월

2차 발표를 준비하면서 다른 페이지 개발을 했다. 사실, 4월부터 6월까지는 계속 아직 완료되지 않은 페이지를 개발하는 데 시간을 쓴 게 다다. 3월부터는 진짜 '개발' 단계에 들어선 것이다. 

음성 인식은 생각보다 쉬웠다. p5.js의 speech-recognition API를 사용하니 한국어 음성 인식을 아주 잘했다. 네이버나 카카오의 음성 인식은 어느 정도 이상으로 사용하면 서비스 사용료를 지불해야 했는데 우리 같은 가난한 학생들에게는 그럴 돈이 없어서 어쩌나 했는데 지도 교수님께서 2월에 미리 해답을 주셔서 우린 그걸 사용했다.

하지만 얼굴 인식은 얘기가 좀 달랐다. 4, 5월의 이 단계에서 많이 고민했던 건 얼굴 인식이었다. 처음에는 p5.js의 face-recognition API를 사용하려고 했는데, 얼굴의 여러 부위를 너무 큰 덩어리(?)로 잡아서 미세한 얼굴 부분 위에 색조 화장품을 가상으로 올리는 작업에는 부적합했다. 가상 메이크업 서비스를 구현한 자료를 여러 개 찾아보다가 ml5.js의 face-mesh API라는 걸 찾았다. 얼굴 여기저기에 녹색 점을 찍고, 실시간으로 트랙킹도 해주는데 우리가 찾던 바로 그 서비스였다. 사실 이 부분은 교수님께서 정말 많이 도움을 주셨다. 나는 프론트단의 화면을 주로 개발하느라 D에게 이 부분을 맡겼다. D가 잘 구현해줘서 고맙다.

 

6월

6월은 중간고사 성적을 매기기 위한 중간 발표가 있는 달이었다. 때문에, 어느 정도 완성도가 있어 교수님들께서 보고 평가할 수 있는 작품을 내놔야 했다. 우리는 지도 교수님께 터치 모니터를 빌렸고, 모니터암과 웹캠을 학생지원비로 구매했다. 이 때부터는 학교에 자주 나가서 터치모니터에 맞게 웹앱의 스타일을 개조하는 작업을 했다. 사실, 기능이 바뀌는 건 아니고 그냥 CSS에서 크기 조정을 하는 단순 작업이라 별로 어렵지는 않았다. 

중간 발표날, 우리는 별로 발전한 게 없다고 욕을 먹을까봐 걱정했지만 다행히도 교수님께서는 잘 보고 가셨다. 그리고 우리는 A+을 받았다.

 

7월

사실 우리는 6월에 개발의 85% 이상을 완료했고, 7월에는 거의 100% 완성도를 찍었다. 여름 방학에는 팀원들끼리 서로 잘 연락을 하지 않았다. 이 때, Y는 thymeleaf로 급하게 메운 데이터 전달 방식을 REST API로 바꾸고 싶다고 말했다. 나도 결국 완성도 높은 작품을 위해서는 코드를 정리해야 한다는 데에 동의했기 때문에 우리는 합의하고 코드를 조금씩 변경하기 시작했다.

타입스크립트를 적용해보고 싶다는 욕심이 생겨서 타입스크립트를 빨리 배워서 자바스크립트로 짠 코드 대부분을 타입스크립트로 변경했다. 타입스크립트는 정말 좋았다. 자바스크립트는 유연해서 좋지만, 너무 유연한 탓에 함수를 호출하거나 함수 안에서 인수를 갖고 어떤 작업을 처리할 때 이 변수가 정확히 무슨 타입인지 확신할 수 없어서 코드 동작 결과가 다소 복불복이라는 단점이 있었다. 타입스크립트는 그 단점을 완전히 보완해줬다. 컴파일하기 전에는 빨간 줄이 꽤 떠서 걱정했지만(주로 한 디렉터리 내에 겹치는 변수 이름이 있다는 경고였다) 자바스크립트 코드로 컴파일하고 나니 문제 없이 동작하는 걸 보고 안심했다.

 

8월

thymeleaf로 데이터를 받는 코드를 걷어내고 fetch API를 사용하기 시작했다. fetch API를 공부하면서, 자연스럽게 프로미스와 async-await도 같이 공부하게 됐다. 백엔드와의 데이터 통신은 정말 중요한 영역인데 이 기회에 새로 공부하고, 또 바로 적용할 수 있게 되어 정말 좋았다.

느긋하게 작업해서 리팩토링은 대략 한 달 정도 걸렸다. 우리가 의도했던 결과 그대로 코드를 더 깔끔하게 정리할 수 있어서 좋았다.

 

9월

개강 후 전시를 위해 주로 프로그램이 잘 되는지 검사하는 작업을 했다. Y는 결제 모듈을 실제로 붙이려다가 그냥 말았다. 내가 할 일은 딱히 없었고, 이 때쯤 이런저런 공모전에 작품을 출품할 기회가 있어 서류를 많이 쓰고, 졸업 전시회에 낼 도록이나 배너 레이아웃 작업을 했다. 일러스트레이터는 처음 사용해 보는데 정교한 작업을 할 수 있어서 좋긴 했지만 귀찮았다.

 

10월

졸업 전시회 전에 학교에 가서 웹앱이 잘 돌아가는지 확인만 해봤다. 10월은 발표나 뭐 그런 거 없이 바로 전시회로 들어갔다. 이 때 우리가 실수를 했는데, 전시회장에 작품을 설치하고 잘 동작하는지 바로 테스트를 해봤어야 했는데 그걸 못 한 채로 전시회 첫날을 맞았다는 점이다. 이건 사실 내가 매일매일 가서 확인할 수 없었고 교대로 가서 확인하느라 더블 체크를 못한 탓이다.

 

졸업전시회 첫날, 9시에 출근하니 같이 부스를 지킬 Y가 먼저 도착해 있었다.
그런데 문제가 있었다. 분명 잘 돌아가던 프로그램에 갑자기 에러가 생겼다. 머릿속이 새하얘졌다. 어떡하지? 오늘이 전시 첫날인데! 너무 당황했지만 일단 가방을 내려놓고 모니터 앞에 목욕탕 의자를 놓고 앉아서 어디에 문제가 생겼는지 살펴봤다. 우리는 인텔리제이를 쓰고 있었는데, 하필이면 10월 무렵에 깃허브 학생 팩으로 받은 1년 라이센스가 끝나 체험판으로 변경됐다. 내 생각엔 그게 문제였던 것 같다. 왜냐하면 10월 초에 학교에 가서 확인했을 땐 정말 아무 문제도 없었기 때문이었다.
전시 시작까지 1시간 정도 시간이 있었고 우리는 무조건 전시회 시작 전에 문제를 해결해야했다. 즉석에서 Y와 문제 해결을 위한 아이디어를 냈다. 첫 번째, 에러를 찾아서 예전에 잘 되던 커밋 기록에서 코드를 가져와 일단 기워놓자. 두 번째, 사소한 인터페이스 변경 같은 걸 포기하고 그냥 롤백하자. 세 번째, 공모전에 낼 용도로 따로 작업하던 프로젝트를 열자. 네 번째, 그냥 이 프로젝트를 지워버리고 깃허브에서 코드를 통째로 받아서 그걸 열어보자. 
우리는 첫 번째 아이디어부터 실행했다. 하지만 잘 되지 않았다. 25분 정도 흘렀다. 바로 4번째 아이디어로 넘어갔다. 불행하게도, 인텔리제이에서 어떤 프로젝트를 처음 열면 어떤 의존성이나 패키지들을 함께 받아야한다. 그 시간이 최소 3~10분 정도 걸린다. 10분이 흐르고 빌드를 했다. 안 된다. 이제 남은 시간은 20분 정도였다. 정말 열고 싶지 않았지만 공모전에서 사용할 프로젝트를 열었다. 왜냐하면 공모전에서 사용할 프로젝트는 우리 본 프로젝트에서 몇 가지 기능을 줄인 축소판이었기 때문이었다. 하지만 그 때는 그걸 가릴 상황이 되지 않았다. 우린 공모전 프로젝트를 열고 런 돌렸다. 이번엔 성공이었다. 우리가 계획했던 기능들이 다 잘 동작하고 있었다. 다만, 품절 상품과 지도 서비스를 구현하지 않아서 그 부분은 원래 프로젝트에 있던 코드들을 조금 수정해서 끼워 넣었다. 그러고 나니 이제 전시회 시작인 10시까지는 단 5분밖에 남지 않았다. 

 

첫날 받은 방명록 일부 ㅎㅎ

첫 날은 그렇게 복작복작하지 않고 규모가 적당했다. 교수님들도 평가를 위해 다녀가셨다. 혹평을 듣지 않을까 긴장했지만 다행히도 작품이 좋다고, 수정해서 상품화를 해도 되겠다고 말씀해 주시기까지 했다. 됐구나. 졸업이구나! 정말 기뻤다.