[엘리스 AI 트랙 4기] 인공지능 웹 프로젝트 회고

한 달동안 진행한 인공지능 웹 프로젝트가 끝난지 거의 한 달이 다 되어간다!

About Project

이번 프로젝트는 인공지능을 이용한 웹 프로젝트였다. 이미지 처리와 자연어 처리 중 자연어 처리를 선택했고, 초반에 주제를 정할 때 어떤 주제를 선정할 지 고민이 많았지만 최종적으로 맞춤법 교정 서비스를 만들기로 했다.

서비스 이름은 코렉션(KORrection)으로 정했다. 한국어 맞춤법을 고쳐준다!라는 의미로 팀원분께서 제안해주셨는데 다들 무릎을 탁 치면서 동의했다. 👍👍

 

기술 스택으로 프론트엔드는 React, Typescript, scss, recoil을 사용했고, 백엔드는 node.js(express), MongoDB를, 인공지능은 Python, T5, Pytorch, Flask를 사용했다.

 

프로젝트 구조도

 

서비스의 메인 기능은 grammarly처럼 작성한 글에서 틀린 맞춤법을 수정해주는 기능이다.

 

인공지능 모델을 플라스크 서버에서 돌리기로 해 인공지능 서버와 통신을 하는 부분에서 고민이 조금 있었다.

처음에는 프론트에서 바로 플라스크와 통신을 할까 고민하다가 백엔드 코치님께서 그래도 백엔드 서버를 거쳐서 가는 것이 좋을 것 같다고 해주셔서 react ↔ express ↔ flask 의 구조로 통신을 했다.

 

그리고 맞춤법 검사의 로딩이 오래 걸리는 경우를 생각해서 사용자가 다른 페이지에 잠깐 갔다가 다시 올 수 있도록 폴링 방식을 사용해봤다.

 

먼저 사용자가 글을 입력하고 검사 버튼을 누르면 프론트에서 그 문장을 통채로 보내고, 백엔드에서 한 문장씩 분리해 플라스크 서버에 보내면 그 응답을 다시 프론트로 보내주는 방식으로 통신이 이루어진다.

그리고 사용자가 다른 페이지에 왔다가 다시 돌아올 때 현재 맞춤법 검사가 진행중인지를 확인, 진행중인 경우 이전에 작성했던 텍스트 내용을 인풋창에 그대로 넣어줬다. 이 때 이전에 작성했던 글 내용은 recoil로 관리했고, setInterval을 이용해 1초에 한 번씩 서버에 진행중인 작업이 끝났는지 여부를 확인했다. 진행중인 작업이 끝났을 경우 각 문장에 대해 수정할 사항을 3가지씩 보여주어 그 중에 선택할 수 있도록 했다.

(그런데 사실 생각보다 로딩 시간이 그렇게 길지 않아서 이 방식의 장점을 많이 느낄 수는 없어서 살짝 아쉽기도 했다.)

 

 

그리고 인공지능 팀원분들께서 열심히 해주신 덕분에 정확도가 높게 나왔다. 특정 문장에 대해서는 다른 서비스들(부산대 맞춤법검사기, 네이버 맞춤법검사기)보다 더 좋은 성능이 나올 때도 있었을 정도였다.

 

이 외에도 서브 기능으로 게시판과 퀴즈를 만들었다.

게시판에는 여러 한국어 질문을 올릴 수 있고 좋아요한 글, 내가 쓴 글, 내가 쓴 댓글을 마이페이지에서 모아볼 수 있도록 했다. 퀴즈에서는 자주 틀리는 맞춤법 문제를 풀어보면서 한국어 공부를 할 수 있도록 했다.

 

Problem?

원래 프론트엔드 파트에 다른 한 분이 또 계셨는데 프로젝트 초반에 개인사정으로 나가게 되셔서 어쩌다 보니 혼자 프론트엔드를 맡게 되었다.

원티드 프리온보딩에서 배웠던 내용을 적용해볼 수 있는 기회가 생겨서 좋기도 했지만 디자인부터 프론트엔드 개발을 다 맡아서 하게 되어 부담도 있었다.

 

팀원분들과 함께 회의를 하면서 전체적인 디자인은 잡을 수 있었고, 막히는 부분은 디자인을 잘 하시는 지인분께 조언도 들으면서 수정했다. (그런데 생각보다 디자인을 하는 데에 시간을 많이 쏟아서 너무 아쉬웠다.)

 

그래도 기획부터 디자인까지 경험해볼 수 있어서 좋았고, 디자인 쪽으로도 좀 더 관심을 가져야겠다고 생각했다.

 

한달의 기간동안 디자인만 일주일넘게 걸렸다 :/

 

프로젝트를 통해 얻은 것

😀 프로젝트의 처음부터 끝까지 개발해 본 경험

2차 프로젝트 때도 서비스 기획을 하긴 했지만 데이터를 kaggle에서만 선택해야 했어서 다양한 주제가 나오진 않았다. 그런데 이번 프로젝트에서는 '자연어 처리'라는 큰 주제 안에서 정할 수 있어서 좀 더 기획 단계에 공을 들일 수 있었다.

 

그리고 그동안은 bootstrap과 mui를 그대로 이용해서 개발했었는데, 이번 프로젝트에서는 scss를 이용해서 직접 한땀한땀 css 작업을 했다. 그래서 디자인과 반응형 레이아웃에 더더욱 신경쓸 수 밖에 없었는데, 처음부터 끝까지 직접 하다보니 많은 부분에서 성장할 수 있었다.

 

😍 코치님과의 일대일 오피스 아워

프론트엔드를 혼자 하다 보니 오피스 아워도 코치님과 일대일로 하게 되어 많은 도움을 받을 수 있었다.

 

개인적으로 궁금한 점들과 취업 관련 고민 상담, 프로젝트 개발 중 어려운 점 등등 정말 다양한 질문들을 할 수 있었다. 일대일이라 불편할 수도 있을텐데 질문도 다 받아주시고 조언도 많이 해주셔서 너무 감사했다.

---

높은 인공지능 성능과 메인 기능에 맞는 깔끔한 ui덕에 우수 5팀 안에 들 수 있었다.

이번에 데모데이는 3팀만 참가할 수 있다고해서 추가적인 심사 중이긴하지만 그래도 순위권에 들었다는 것에 굉장히 뿌듯하고 다른 팀원분들께도 감사하다는 말씀을 드리고 싶다.

 

(수줍게 놓고 가는 팀 깃허브 페이지 - https://github.com/KORrection/KORrection)

---

프로젝트 관련 포스트

프로젝트를 진행하며 적용했던 것들이나, 발생했던 오류에 대해 정리한 내용들이다(계속 추가중).

• 쿠키 전송하기, cors 오류 해결
• TypeScript에서 FormData로 이미지 업로드하기
• 인공지능 웹 프로젝트 회고
• 오라클 클라우드 사용하기 - (1) 인스턴스 생성, ssh 접속
• 오라클 클라우드 사용하기 - (2) 프로젝트 배포(React, Node.js)
• 오라클 클라우드 사용하기 - (3) 도메인 연결, 구글 로그인
• PuTTY key format too new 오류 해결하기
• [Nginx] 페이지 새로고침 시 Page Not Found 오류 해결
• 배포/개발 환경 나누기
• Github Actions를 이용해 CI/CD를 구축해보자
• [Github Actions] the process '/usr/bin/git' failed with exit code 128 해결
• [passport] req#logout requires a callback function 해결