> [!date] published: 2021-06-24 전체 비대면 수업이라 엄청 널널하게 학교를 다닐 수 있을 것 같았는데 웬걸, 42서울 출석도 못 할 정도로 엄청 바빴다. 그래도 이런저런 활동들을 몇개 해봤고, 배운 점들도 좀 있어서 정리를 해 봤다. (엉망진창 주의) ## 🚀 all 비대면 수업 나는 전염병이 유행하기 시작한 때에는 휴학을 하고 있었기 때문에 비대면으로 수업하는 것은 이번학기로 처음 경험해 보는 것이었다. 경험하기 전에는 학교 안가도 괜찮으니 마냥 꿀이라고 생각했었는데 한학기를 모두 원격 수업으로 해 본 지금은 전혀 꿀이 아니라는 생각이 든다. 일단 실시간으로 수업하는 교수님이 별로 안계신다. 대부분 녹강으로 진행을 하시는데 그 녹강이라는게 그냥 PPT를 켜 두고 교수님의 음성만 나오는 형식으로 강의 동영상이 만들어진다. 기존 대면 수업이라면 있었을 중간중간의 학생과의 상호작용이 없기 때문에 그냥 교수님은 쭉 강의 대본을 읽으시고,,, 나는 그거 받아적느라 계속 영상 멈췄다가 다시 재생하고. 뭔가 강의를 듣는다기보다는 서기 역할을 하는 느낌이 강했다. 받아적긴 했는데 뭔가 남는건 없음... 게다가 집중도 안되서 계속 미루다가 출결 놓친것도 몇개 있고. 하여간 수업 자체는 비대면으로 진행된 모든 수업이 약간 대환장이었다. 다음학기에는 대면으로 합시다... 등록금 아까워 죽겠음 ## 🚀 소프트웨어 공학 수업 소프트웨어 공학 수업이 원랜 3학년 1학기 커리큘럼인데 나는 제작년에 수강신청에 실패해서... 이번 학기에서야 이 수업을 듣게 되었다. 전염병으로 인해서 실제 구현단계는 진행하지 않았지만 프로젝트 시작부터 테스팅까지 모든 과정을 체계적으로 배워보는 첫 경험이 되었는데 많은 도움이 되었다. 게다가 얼떨결에 PM 역할까지 맡게 되어서... 여러모로 바쁘고 신기한 경험을 했다. ### ✨ 첫번째 일단 첫번째로 깨달았던건 체계적인 프로젝트 진행 과정의 중요성이다. 졸업 프로젝트도 그렇고 나 혼자서 그냥 뚝딱뚝딱하던 프로젝트에서는 솔직히 계획이라는 것이 없었다. 그냥 이거 필요하지 않을까? 하면 구현하고, 하다가 안되면 빼고, 팀원과의 의사소통도 체계가 잡혀있지 않아서 매번 다시 묻고, 의견이 꼬이고, 이런 사건이 계속 발생했었는데 그때는 뭐가 문제인지 몰랐다. 하지만 이 모든것의 원인이 체계적인 계획의 부재였다는 것을 소프트웨어 공학 수업을 듣고서야 깨닫게 되었고, 졸업 프로젝트도 처음 계획부터 다시 시작하게 되었다. 프로젝트는 대부분 한명 이상의 팀원과, 기간도 대부분 긴 편이기 때문에 처음에 계획과 규칙을 잘 세워두어야 원활하게 진행을 할 수 있고 중간에 뒤엎는 일을 피할 수 있었던 것이었다. 아무튼 이 수업을 통해서 나중에 프로젝트를 시작할 때 어떤 문서가 필요한지, 어떤 것들을 정해 두고 시작해야 하는지를 잘 알게 되었다. ### ✨ 두번째 두번째로는 PM 경험이다. PM이 된 계기는... 사다리 타기 였다. 나는 소프트웨어 공학 수업의 조장이 무슨 역할을 하는지 몰랐고, 다른 팀원들도 몰랐기 때문에 "그냥,,, 사다리 타기로 정합시다!" 이렇게 해서 얼떨결에 내가 조장이 되었고, 조장을 정한 다음에야 우리가 프로젝트 과제에서 PM 역할을 해야 한다는 사실을 알게 되었다... ㅎㅎ 그래도 프로젝트 매니저라는 직책이 그냥 팀원들 의견 잘 정리하고 산출물들 잘 정리하고 이런 일만 하는 줄 알았는데 생각보다도 할 일이 많았다. 나는 구현 단계를 하지 않았음에도 불구하고 이런 일들을 PM으로써 맡아 했다. 1. 조직 구성하기. 2. 프로젝트 규모 산정하기 3. 결정사항 최종 결정하기 4. 전체적인 프로젝트 진행 상황 점검하고 상황에 따른 적절한 판단을 해서 대안 제시하기 그냥 문서들만 작성하면 되는거라 간단히 끝날 수 있을 줄 알았는데 그냥 문서마다 작은 프로젝트라고 생각하면 되는 것이었다. 기본 요구사항 발표, 프로젝트 계획서, 요구사항 명세서, 클래스 다이어그램, 테스팅 보고서, 최종 발표 보고 이렇게 6개의 문서들을 짧게는 1주일, 길게는 2주일에 걸쳐서 작성을 했었는데 매 주마다 최소 1회에서 많게는 3회까지 회의를 진행하고, 팀원들의 의견들을 취합해서 작성 내용을 결정하고,,, 상황 점검차 다시 회의하고,,, 최종 제출물을 내기 위해서 동료평가 진행하고ㅋㅋㅋㅜㅜㅜ 생각보다 너무너무 할일이 많았고 트러블도 있었고,,, 왠만하면 조장 잘 안하려고 하는데 이렇게 중요한 수업에서 중요한 조장 자리를 맡아버려서 성격에 안맞는 조장 하느라 고생도 많았지만 굉장히 유익했던 경험이라고 생각하고 있다. 상황을 냉정하게 판단해서 실현 가능한 범위를 파악하고, 팀원들의 다양한 의견들을 적당히 모아서 모두가 납득 가능한 방향으로 이끌고, 트러블이 생겼을 때 모두가 불평하지 않을 만한 해결 방법을 제시하는 방법들을 배웠다. 대학교 다니는 동안 했던 팀플 중에서 가장 힘들었다고 확신할 수 있는데 가장 유익한 경험이었다고도 확신할 수 있다. ## 🚀 캡스톤 디자인 한학기 동안 졸업 프로젝트의 절반을 진행했다. 아직도 우리 학교의 캡스톤 디자인 일정이 어떻게 진행되는건지 잘 모르겠는데 아무튼... 우리는 절반 정도를 진행한 것 같다. 졸업 프로젝트로 인공지능을 이용하여 뉴스 사이트의 이미지를 분류하여, 광고인 이미지를 가리는 크롬 확장프로그램을 만들고 있다. 나는 이 프로젝트에서 웹과 관련된 모든 작업을 담당하게 되었는데 (중간에 팀원 한 분의 이탈이 있어서 ... 온전히 내가 다 맡게 되었다ㅎㅎㅜㅜ) 아무래도 프론트에 대한 경험은 약간이라도 있었는데 백엔드에 대한 경험은 정말 전혀 없어서 좀 (많이)고생을 했다. [깃허브 링크](https://github.com/kyungmin123/Adblock_with_DeepNetwork/tree/main/chrome_extension) ### ✨ 프론트 엔드 크롬 확장 프로그램은 자바스크립트로 만들 수 있다. 확장 프로그램을 통해서 웹 페이지의 img 태그와, div 태그로 삽입되어 있는 모든 이미지들의 url을 받아 온 다음에 인공지능 모델을 통과한 결과를 다시 확장 프로그램 측으로 받아와서 결과에 따라 이미지를 가리거나 유지하는 것을 구현했다. 중간중간에 자바스크립트도 공부해가면서 (...) 거의 어거지로 뭔가 결과가 보이도록 구현은 해 뒀는데 지금 현재 상태로는 지푸라기를 테이프로 붙여서 지은 집 같은 모양새라... 방학 동안에 좀 더 공부하고 보완해서 보기 좋고 효율적으로 만들 필요가 있을 것 같다. **[개선해야 할 점]** 1. **비동기 방식을 활용하지 못한 점.** 비동기 방식에 대한 이해는 되어 있는 상태인데 이 좋은 기능을 어떻게 활용해야 하는지를 잘 모르겠어서 그냥 모든 코드를 동기식으로 바꿔두었다. 잘한짓인지 잘 모르겠다... 속도 자체는 그렇게 느리지 않은데 아무래도 코드가 너무 더러워져서 수정을 하든, 아니면 비동기 방식으로 바꾸든 해야 할 듯 하다. 2. **중복된 코드 정리 못했음.** 현재 img 태그와 div 태그에서 이미지 url을 갖고 오는 함수를 따로 두고 있다. 그런데 그 이미지 url을 갖고 오는 과정은 다르지만 그 이미지를 처리하는 방법은 공통되기 때문에 따로 별개의 함수로 분리해 주고 싶은데 안된다. 원인은 아마도 HTML 요소 자체를 함수의 파라미터로 갖고 오지 못하는 문제인 것 같은데 조금 찾아본 바로는 jQuery를 사용하면 뭔가 가능 할 것 같기도 하다. 문제는 내가 아직 jQuery를 쓸 줄 모르기 때문에,,, 공부를 더 해야 한다. 3. **중첩된 iframe 내부로 스크립트를 주입하지 못하고 있음.** 이게 원래 불가능한 것인지는 모르겠지만 웹 사이트의 광고들에는 iframe 천지이기 때문에 iframe 내부로 이미지의 url을 갖고 오는 스크립트를 주입시킬 필요가 있었다. 그래서 manifest에 권한도 널널하게 설정하고, 스크립트 실행 시간도 잘 맞춰서 코딩해서 어느정도 iframe으로 삽입되어 있는 이미지들의 url을 받아오는데에는 성공을 했는데 문제는 중첩된 iframe이었다. 분명히 모든 프레임에 스크립트를 실행하도록 코드를 짰는데 그게 아마도 가장 상위 프레임에만 적용이 되는 것이었던 것 같다...ㅎㅎ 중첩된 프레임에 모두 스크립트를 실행시키기 위해서는 프레임의 하위 프레임을 받아오는 과정을 계속 반복해서 스크립트를 주입해야 할 것 같긴 한데... 구현까지는 실패했다 엉엉 iframe 너무 힘들고 복잡하다...ㅜㅜ 4. **이미지의 부모 요소 제거하기.** 지금은 이미지 자체만을 제거하고 있다. 그래서 이미지만 사라진 광고 요소들이 아직도 남아 있는데 그 부모, 혹은 조상 요소를 삭제해서 그 광고 이미지와 관련된 요소들을 싹 다 삭제해 주고 싶은데 지금까지는 구현을 못했다. ㅋㅋㅋㅋ 정말 엉성한 지푸라기 집 그 자체다. 방학동안에 빡세게 공부해야 겠다... 할일이 정말 많다. ### ✨ 백엔드 백엔드는 정말 맨땅에 헤딩하는 느낌으로 공부하고, 구현했다. 사실 처음에는 전혀 통신을 구현할 생각을 못하고 있었는데 자바스크립트로 코딩된 웹 프로그램과 파이썬으로 만들어진 모델 사이를 연결하려면,,, 방법은 API를 구현하는 방법밖에 없어 보였다. (만약 다른 방법 있으면 지금이라도 갈아탈 준비가 되어 있음.) 나는 서버 배포는 정말 처음이었기 때문에 아무래도 접근성이 가장 좋아 보이는 파이썬 flask로 구현을 했고, 배포에는 heroku를 사용했다. 근데 뒤에 적긴 하겠지만 heroku에 문제가 좀 있어 보여서 가능하다면 다른 곳을 이용해야 할 듯 하다... (수척) **\[개선해야 할 점\]** 1. **모든 과정을 동기적으로 처리한 점.** 위의 프론트엔드에서와 같은 이유도 api의 요청과 응답도 모두 동기적으로 처리를 했다. 물론 속도가 그렇게 느리지는 않지만 ... 아무래도 맘에 안들어서 가능하다면 비동기적 방식으로 바꾸어 주고 싶다. 2. **internal server error가 계속 발생하는 점** 이미지 url을 받아서 여는데에 opencv를 사용하는데 그 이미지 열기를 실패하면 계속 500 에러가 발생한다. 보안상 이유로 열리지 않는 경우, 이미지의 크기가 너무 작은 경우 등등을 모두 걸러내 주려고 했는데... 아무리 해도 계속 오류가 발생한다. 나는 모든 통신을 동기적 방식으로 진행하기 때문에 오류가 발생하면 속도에 아주 치명적 영향을 미친다. (오류가 많으면 그거 응답 기다리느라 엄청 느려짐) 어떻게든 해결해야 하는데... 인공지능 쪽 팀원이랑 열심히 머리를 싸매고는 있는데 아직 그렇게 진전이 없다. 방학 동안에 파이썬도 공부해야 함... 3. **많은 요청이 발생했을 때 연결이 끊어지는 점.** 헤로쿠의 문제인진 모르겠지만 확장 프로그램을 활성화 시킨 상태로 계속해서 새로고침을 누르게 되면, 새로운 요청들이 계속해서 발생하게 되고, 그럼 그냥 연결이 끊어져서 모든 요청들이 fail이 된다. 이건 내가 해결할 수 있는 문제인지 잘 모르겠다... 얼마 전에야 이 문제를 알게 되었는데 지금 상황으로는 heroku 외에는 다른 서버 배포 툴을 배울 시간이 없어서 일단... 일단 쓰고 있다. 이것도 어떻게든 해결을 해야 한다. .... 프로젝트 자체를 처음 해보는 사람들 + 각자 맡은 분야에 대한 경험이 전무한 사람 / 거의 없는 사람들이 만나서 정말 허허 벌판에서 그나마 테이프로 붙여가며 지푸라기 집이라도 만들었다... (비유 다시 생각해도 너무 찰떡인 것 같다.) 방학동안에 각자 분야에서 더욱 발전해서 다음 학기에는 좀 더 나은 결과물을 만들 수 있도록 하기로 했다. 화이팅.. ## 🚀 마치며 이것저것 처음 해보는 것이 많은 학기였다. 처음 비대면 수업을 해보고, 처음으로 체계적인 프로젝트 과정에 대해 배우고, 처음으로 웹 프로그램과 api를 만들어 보았다. 뭔가 익숙해 지려니 학기가 다 끝나간 느낌이지만... 덕분에 방학이 엄청 알차게 지나갈 것만 같은 느낌이다...😱 할일이 엄청 쌓였다. 방학이라고 늘어지지 말고 다음 학기를 위해서 열심히 해야겠다.