처음으로 개발 회고록을 적어보는 것 같다. 기술적인 부분들이 이번에 새롭게 해본 것들이 많아 기록을 하기 위해 이렇게 적어본다.
나는 이번에 대학교에서 진행하는 해커톤 대회에 참가하게 되었다. 해커톤 대회는 작년에도 나가려고 했으나 대회가 무산되어나가지 못했는데, 이번 여름방학을 맞아 해커톤 대회에 참가 하게 되었다.
우리는 단순한 익명 채팅 웹서비스를 생각했고, WebSocket을 활용하여 실시간 채팅 웹 서비스를 구현하려고 했다.
🧑🏻💻 Day 1 (웹 소켓 연동)
해커톤 1일차에 10시에 학교에 와서 개발 환경 세팅을 했다. 고등학교때 자바를 이용한 TCP 통신 실습을 할 때 빼곤 웹소켓통신을 해본적이 없어서 듣기만 했던 웹소켓을 내가 구현하게 되었다. 처음에는 채팅? 단순히 채팅이라는 이름만 들었을 때 어떻게 구현해야할지 감이 안왔는데, 구글링을 해보면서 여러가지 레퍼런스를 찾는 사전 자료 조사부터 했다.
다행히도, 구글에 이미 Spring Boot로 소켓 통신을 활용한 실시간 웹 채팅 서비스를 구현해둔 레퍼런스가 엄청 많아서 생각했던 것보다 비교적 쉽게 웹 소켓을 프로젝트에 담을 수 있었다. 그리 오래 걸리진 않았던 것 같다.
웹 소켓 통신은 내가 기존에 만들어 왔던 RestAPI 방식에서 호출할 때 처럼 http:// 가 아닌 ws:// 라는 웹 소켓 전용 통신을 사용해야했다.
웹 소켓 테스트 용 구글 크롬 확장 프로그램들을 설치하고 내가 열어둔 서버에 웹소켓이 통신이 가능한지 테스트부터 했다.
인텔리제이에서 로그를 확인 했을 때는 채팅방 생성, 채팅 메세지 로그가 잘 나왔는데 실제로 이 데이터가 잘 넘어가는지를 보고싶었는데, 구글 크롬 확장 프로그램을 설치하고 해당 클라이언트에서 메세지를 직접 보내고 나서야 잘 넘어가는 걸 확인할 수 있었다. (이 작업이 사실 별거가 아닌데 나는 이부분에서 좀 시간을 많이 까먹었다...)
클라이언트에서 우리 웹 소켓에 커넥션을 요청하면 이렇게 접속한 유저 고유 세션 ID와, 접속 uri가 나오게 된다.
그리고 방을 생성하는 API는 http통신을 통해 채팅방 이름을 설정하고 방을 생성하게 된다.
방 생성이 완료되면 해당 방 번호를 랜덤한 UUID 값을 지정해주어 방 번호를 발급해주고 현재 우리 서비스에 접속중인 유저의 인원수와 해당 채팅방에 참여중인 유저의 인원수, 참여중인 유저의 세션 ID 값을 리턴 해주는 API이다.
그리고 WebScoket Client에서 해당 방 번호를 입력하고 MessageType을 "ENTER"로 설정하고 방을 입장하게 되면
이렇게 클라이언트를 2개를 띄워서 양방향으로 통신을 확인해보면, 유저가 입장할 때 {userName}님이 입장했습니다. 라는 로그와 함께 방 입장이 완료된다.
MessageType을 "TALK"으로 하고 요청을 보내게 되면 sendMessage()가 호출되면서 작성자, message, 보낸 시간으로 값이 넘어 가게 된다.
그러고나서 프론트 페이지 작업이 완료돼서 프론트에서 붙혀보고 실제로 화면에서 데이터가 잘 넘어가는 지 확인을 해보았는데, CORS 에러를 마주치게 되었다. 뭐 예상은 했다. (워낙 웹 개발자라면 한번쯤은 얻어 맞아 봤을법한 에러이기에..)
CorsConfig 파일을 생성하고 Access-control-allow-origin을 세팅하고 HTTP 메서드 /GET /POST에 대해서 허용 설정을 해두고 나서야 정상적으로 작동했다.
그렇게 방 생성과 메세지를 보내는 것은 구현을 완료했는데, 비교적 너무 빨리 끝나서 추가적인 기능 확장을 생각하게 되었다.(마침 교수님이 멘토링겸 조언을 해주기 위해 우리 실습실을 방문하기도 했다..) 딱히 이렇다 할만한 주제도 없었고 비즈니스적인 관점에서는 우리 서비스를 왜 써야하는지도 의문이 들었던 참이였다.
그렇게 생각해둔 것이 채팅 기반 서비스나 보니 챗봇 같은 것이 떠올랐다. 실제로 봇이 있는건 아니지만 단순한 명령->응답 구조로 채팅방에서 간단하게 사용할만한 엔터테인먼트적인 요소들인 끝말잇기, 우리 대학교에 서비스를 할 예정이였기에 학생들이 채팅중에 궁금해 할만한 우리 학교 학식 정보를 웹 크롤링으로 가져오자라는 의견이 나왔다. 그래서 팀원들과 역할을 분담하여 끝말잇기 API, 학식정보를 크롤링하는 API를 개발해보기로 했다.
🧑🏻💻 Day 2 (jsoup, 셀레니움)
(자고 일어난 2일차 같지만 잠을 거의 5시에 자서 1.9일차나 다름이 없는 개발 회고이다..)
끝말잇기를 위한 국어 사전 API는 다른 팀원이 맡아서 개발해주었고, 나는 크롤링을 맡아서 하게 되었다. 웹 크롤링? 이름은 많이 들어봤고 고등학교 시절 인턴 과정에서 웹 파싱을 해본 경험이 있긴 했지만 자바로는 처음이라 구글링부터 했다.
가장 첫번째에 나왔던 것이 jsoup 라이브러리였다. 이걸로 크롤링을 해보려고 했으나, 현재 우리 학교 학식을 보는 웹페이지가 동적으로 처리가 되어있어서 크롤링을 해와도 데이터가 전혀 담아져서 오질 못하고 html코드만 가져왔었다. 그래서 동적인 페이지에서 크롤링을 하려면 셀리니움이라는 라이브러리를 사용해야 한다는 것을 알게 되고 그때부터 셀리니움을 적용하게 되었다.
셀레니움 적용하고 파싱을 하는데엔 그렇게 어렵진 않았다. 그치만 좀 골때리는 놈이 한명 있었는데
바로 크롬드라이버였다... 인텔리제이에서는 세팅해줄게 그렇게 많진 않았다. (의존성 추가 하나만 했던거 같다..)
셀리니움을 사용하기 위해서는 프로젝트에 크롬 드라이버 실행파일을 넣어야 했다.
처음에는 뭣도 모르고 글을 찾아보면서 크롬 드라이버를 아무거나 설치해서 넣었는데 오류가 계속 나왔다.
이게 또 까다로워서 그냥 아무거나 무턱대고 드라이버만 받아서 프로젝트에 넣어서는 무수히 많은 에러를 보게 될 것이다.
일단 첫번째는 드라이버와 내 로컬에 설치되어있는 크롬의 버전이 맞아야한다..
필자는 126.xx 버전을 사용중이여서 셀리니움 공식 문서에서 126.xx 버전에 맞는 최신 드라이버를 설치하고 /resources/static 경로에 넣어두고 경로 설정을 하고 나서야 드디어 정상적으로 크롤링이 가능 했다.
그 이후에는 비교적 순탄하게 정보를 가지고 올 수 있었다. 중식 데이터가 담긴 HTML 코드를 긁어 오고 그 이후엔 안에 중식 정보만 가져오는 데이터 짜르기 작업만 진행했다. 이것도 그렇게 어렵진 않았던 것 같다.
💁🏻♂️ Day 3 (피드백 그리고 느낀점)
그렇게 해커톤 마지막 날인 3일차가 되었고 대망의 우리 프로젝트를 발표하고 시연을 했다. 결과는 아쉽지만 상은 타지 못했다. 우리 서비스에 피드백을 해주셨는데 일단 첫번째는 No DB인 것이 가장 좀 데미지가 있었던 것 같다. DB를 사용하지 않기 때문에 채팅 로그나, 채팅 내역이 살아있지 않았고 (사실 RDB 일부로 안넣은건데.... 휘발성으로 익명,랜덤적인 채팅이 컨셉이라 남기지 않기 위해 DB를 과감하게 버렸던 것이였는데...) 심사위원님들은 데이터적인 관점에서 RDB가 없더라도 Redis나 몽고DB 같은 NoSQL로 로그 관리나 채팅 내역정도는 관리를 하는 것이 좋다고 하셨다. 이 부분은 나도 소홀 했던 것 같다. 할 수 있을 거 같았는데 (시간이 없었다고 하자..) 나중에 이 서비스를 배포까지 하고, 교내에 서비스화를 한번 해볼 예정인데 이때 또 다시 디벨롭을 해봐야겠다.
그리고 두번째 피드백은 웹 소켓 자체를 요즘 쓰지 않는다고 하셨다. WebRTC로 대부분 구현을 하다보니 이런 부분에서 기능적인 부분이 좀 아쉬웠다고 하셨다. 이건 맞는 말인 것 같다. WebRTC가 WebSocket보다 훨씬 고성능이며 낮은 지연시간을 갖고 있기에 영상, 스트리밍, 오디오 등등 임의의 데이터 통신에서 high-performance, hight-quality을 보여주기 때문이다. 이부분도 WebRTC로 고도화 작업을 한번 시간이 된다면 해봐야겠다고 생각했다.
1, 2일차동안 딱히 어렵고 막혔던 부분들은 없었으나 체력적으로 많이 힘들었던 것 같다. 간단한 서비스라 구현의 어려움이 느껴지진 않았고 오히려 좋은 경험을 한 것 같다. 대회 성적을 떠나서 학부생 시절에 이렇게 팀원들이랑 하루종일 밤을 세가며 내가 하고 싶은 개발을 할 수 있는 뜻깊은 시간이였던 것 같다.
프론트엔드 개발자가 1명이라 많이 힘들었을 것이다. 간단한 서비스지만 디테일적으로 챙겨야할 UI/UX가 많았기에 프론트엔드 개발자가 2명이였더라면 더 다른 API도 만들어서 붙혀보고, 더 많은 기능 확장을 해볼 수 있었을 것 같았다. 기능적으로 녹여내지 못한 부분이 좀 아쉬웠다. (noSQL, WebRTC..)
수상 작품들을 보면 뛰어난 기술도 많았다. Gemini API를 활용한 머신러닝 어쩌고 저쩌고... (대상받음), 데이터 시각화, 등등
아직까지 나는 많이 부족하다는 것을 다시 한번 느끼고 이번 대회를 계기로 또 이렇게 한 걸음 성장했다고 생각한다.
김영한 선생님은 성공하는 개발자들은 기술적 겸손함을 가지고 내 자신이 아직 많이 부족하다고 느낀다고 하셨다.
이번 해커톤을 하면서 뿌듯한 점도 많았지만, 기술적 겸손함을 느끼게 되는 순간이였다.
마지막으로 완성된 우리 "땅콩" 서비스 페이지를 보여주고 회고록을 마치겠다.
추가로 이름이 땅콩인 이유는 "심심풀이 땅콩" 이라는 말처럼 학교에서 심심할 때 꺼내먹는 느낌의 서비스로 느끼게끔 땅콩으로 했는데 끝나고 교수님이 이름이 너무 올드하다고.. 심심풀이 땅콩이라는 말을 요즘 누가 쓰냐고 MZ픽이 아니라고 하셨다
(정보: 원래는 chatBox 였다.. 이것보단 났지않은가 땅콩은 내 아이디어임)
