Kakao Tech Campus 최종발표 - UniScope

 

 

 

 

 

 

331 입니다. 이 숫자가 뭘 의미할까요? 

 

 

 

 

 

 

전국 대학의 개수입니다. 

일반대학, 전문대학, 산업대학을 모두 합치면 전국에 331개의 대학이 있습니다.

 

 

 

 

 

 

 

40,120 입니다. 이 수는 또 어떤 의미일까요? 

 

 

 

 

 

 

제가 학점교류 정보를 찾으면서 사용한 비용입니다.

관련 정보가 너무 숨겨져 있어서 찾기도 힘들었습니다.

시간당 만원만 쳐도 4만원이죠.

 

이건 단순히 저만의 문제가 아니라, 모든 대학생들이 겪는 정보 비대칭의 문제입니다.

 

300개가 넘는 대학의 정보가 모두 흩어져있어 학생들은 불필요한 시간과 비용을 낭비하고 있습니다.

저희는 이 문제를 해결하고 싶습니다.

 

 

 

 

 

아 해외에는 이미 비슷한 플랫폼이 있습니다.

RateMyProfessor 라는 플랫폼인데, 해외 대학의 교수 및 강의 정보를 공유하는 통합 플랫폼입니다.

다만 한국에는 아직 이런 시스템이 없습니다.

 

 

 

 

 

 

 

아. 4시간 써서 학점교류 수강신청은 성공했습니다. ㅎㅎ

 

 

 

 

 

 

 

 

그래서 만들었습니다.

전국 대학의 강의, 교수 및 관련된 모든 정보를 한 곳에서 볼 수 있는 통합 플랫폼인 UniScope 입니다.

 

 

 

 

 

 

 

UniScope의 핵심 키워드는, 통합 플랫폼과 직관적인 시스템 입니다.

이 두 가지 핵심 키워드를 말로 설명하는 대신, 

제가 4시간동안 정리했던 정보 수집 과정을 어떻게 단축할 수 있을지

그 과정을 지금부터 보여드리겠습니다.

 

 

 

 

 

 

 

서비스에 접속하면 제일 처음으로 만나게 될 메인 화면입니다.

UniScope의 두 번째 핵심 키워드가 직관적인 시스템이죠? 

 

 

 

 

 

 

사용자는 아무 고민 없이 검색창에 대학을 입력합니다. 

 

 

 

 

 

 

 

충남대학교를 검색한 결과입니다.

제가 이전에 4시간동안 여러 학교 사이트를 살펴보면서 정리했던 정보들을 한 페이지에서 직관적으로 확인할 수 있습니다.

예전같았으면.. 저는 여기서 다시 충남대학교 공과대학을 따로 검색해서 완전히 다른 구조의 홈페이지로 이동했어야 했습니다.

 

이제는 그럴 필요가 없죠? UniScope는 통합 플랫폼이니까요.

이제 충남대학교 공과대학으로 이동합시다.

 

 

 

 

 

 

 

보시는 그대로입니다. 

해당 단과대학에 속한 모든 학과의 리스트와, 취업률을 포함한 관련 정보를 한 눈에 확인할 수 있습니다.

 

이제 제 소속 학과인 컴퓨터융합학부를 살펴봅시다. 

 

 

 

 

 

 

 

여기서 가장 중요한 정보는 교수진 리스트입니다.

이제 진짜 필요한 정보인, 이 교수님께서 어떤 연구를 하는지 그리고 어떤 과목을 담당하는지 같은 세부 정보를 확인해보겠습니다.

 

 

 

 

 

 

 

단순히 이메일, 연구실 위치만 보여주는게 아닙니다.

교수님이 진행하신 강의에 대해, 학생들이 직접 남긴 코멘트를 확인할 수 있습니다. 

 

교수님에 대한 모든 평가는 레이더 차트로 시각화되어 제공됩니다.

당연히.. 차트는 민감하지 않으면서 학생들에게 유용한 정보로 구성했습니다.

 

교수 한 분에 대한 정보를 파악했는데, 이 교수님과 다른 교수님을 두고 고민하고 있을 때는 어떻게 해야 할까요? 

UniScope는 이런 문제를 교수 비교 기능으로 해결합니다. 

 

 

 

 

 

 

교수 비교 화면입니다. 교수님을 검색하고 학기별 평점 추이를 라인 차트로 확인할 수 있습니다.

레이더 차트로는 강점과 약점을 직관적으로 확인할 수 있습니다.

 

 

 

 

 

학교별 비교 기능도 제공합니다. 

충남대학교와 경북대학교를 비교 대상으로 선택했습니다.

핵심 지표를 막대 차트와 레이더 차트로 시각화하고 직관적으로 비교할 수 있습니다. 

 

 

 

 

 

 

지금까지 왜 만들었는지와, 그리고 무엇을 만들었는지를 말씀드렸습니다. 

이제 어떻게 만들었는지에 소개하겠습니다.

 

UniScope의 전체 시스템 아키텍처입니다.

사용자는 가비아에서 구매한 도메인을 통해 Vercel Edge Network로 호스팅되는 저희 프론트엔드 서버에 접속합니다.

 

여기서 발생하는 모든 API 요청은 AWS EC2에 구축된 백엔드 서버에 전달됩니다.

백엔드 서버는 사용자의 요청을 처리하는 API 서버와, 데이터를 수집하는 크롤러 서버로 역할을 분리했습니다.

 

서로의 동작에 영향을 주지 않도록 두 서버는 별도의 EC2 인스턴스에서 동작하고, 수집한 데이터는 RDS로 관리되는 MySQL에 저장됩니다.

 

API 서버는 NGINX 리버스 프록시를 활용해서 Blue/Green 무중단 배포 환경을 구축했습니다.

이 아키텍처를 통해 사용자는 업데이트 중에서도 서비스 중단을 경험하지 않습니다.

 

자 이제 아키텍처의 각 구성 요소들을 프론트엔드부터 말씀드리겠습니다.

 

 

 

 

 

프론트엔드의 첫 번째 주제는 코드 품질 관리와 배포 파이프라인입니다.

먼저 개발자가 코드를 커밋합니다. 이 때 husky의 pre-commit hook이 실행돼 로컬 환경에서부터 1차 lint 검사를 수행합니다.

 

이를 통해 lint 검사를 통과하지 못하는 코드는 커밋도 될 수 없도록 강제하고, 깃허브의 모든 브랜치에는 항상 lint 검사를 통과한 코드만 존재하게 됩니다. 

 

이렇게 커밋된 코드가 깃허브에 푸시되거나 PR이 요청되면 CI/CD 파이프라인이 동작합니다.

 

이 과정에서는 총 4가지 작업을 수행합니다. 

린트, 빌드, 테스트, 배포 

 

모든 테스트가 성공하면 빌드 결과물을 Vercel Edge Network에 전달해 배포를 완료합니다.

 

 

 

 

 

 

 

대학 카드, 비교 차트, 연락처 카드 등 여러가지 UI 컴포넌트가 모여서 시스템을 구성합니다.

디자이너가 따로 없는 프로젝트이고, 서비스를 혼자 개발하지 않기에 디자인의 일관성이 떨어질 수 있습니다.

 

이런 문제를 해결하기 위해 Storybook을 도입했습니다.

 

UniScope에서 작성하는 모든 UI 컴포넌트들은 Storybook을 통해 문서화됩니다.

각자 만든 디자인을 Storybook을 통해 확인할 수 있고, 일관성이 떨어지는 디자인을 바로바로 확인하고 수정할 수 있습니다.

 

 

 

 

 

 

프론트엔드에서 가장 중요한 건, 내 환경이 아니라 다른 환경에서도 잘 동작하는지라고 생각합니다.

저는 크롬 브라우저를 사용하는데, 다른 사람들은 Firefox, Safari 등 다른 브라우저를 사용할 수 있습니다.

 

이 브라우저 호환성과 핵심 기능의 안정성 문제를 해결하기 위해 Playwright 테스팅 툴을 사용해 e2e 테스트를 작성했습니다.

 

사용자가 UniScope에 접속하고, 대학을 검색하고, 리뷰를 작성하는 등 전체 과정을 자동화해서 핵심 흐름이 깨지지 않는지를 테스트합니다. 

 

 

 

 

 

 

자 마지막입니다. 기능이 안정적이어도, 구글 검색에 노출되지 않거나 서비스가 느리다면 어떨까요? 

특히 서비스 초기 유입을 고려해야 하는 저희 입장에서, 로딩 속도와 검색엔진 최적화는 사용자를 확보하는데 가장 중요한 요소입니다.

 

이 화면은 웹 품질 측정 도구인 Lighthouse의 실제 테스트 결과입니다.

4가지 지표에서 모두 최상위 등급을 달성했습니다.

이 숫자는 저희 시스템이 기능적으로 안정적일 뿐만 아니라, 초기 사용자 유입에도 유리한 상태임을 증명합니다. 

 

 

 

 

 

백엔드는 AWS 클라우드 환경을 사용합니다. EC2와 RDS를 사용해 API 서버를 구축했습니다.

안정적인 서비스 운영이 가장 큰 과제였는데요, NGINX를 리버스 프록시로 활용해 무중단 배포 환경을 구축했습니다.

새로운 버전을 배포할 때 NGINX가 트래픽을 알아서 전환합니다.

 

모든 배포 과정은 Github Action을 사용해 자동화했습니다.

시스템에 구현된 API 엔드포인트와 비즈니스 로직에 대해 Unit Test를 작성했고, CI 단계에서 해당 테스트를 실행합니다.

 

 

 

 

 

 

학과 정보를 수집하는 크롤러는 API 서버와 완전히 분리된 별도의 EC2 인스턴스에서 동작합니다.

데이터 수집 과정에서 윤리적인 문제가 없도록 최대한 신경썼습니다.

 

우측 화면은 크롤링 관련 정책을 명시해 둔 여러 대학의 robots.txt 파일입니다.

Allow로 명시적으로 허용하거나.. robots.txt를 아예 등록하지 않았거나.. 특정 경로만 disallow하는 등 학과마다 정책이 달랐습니다.

 

이 robots.txt 를 철저하게 준수하며 데이터를 수집했습니다.

 

대학의 웹사이트 구조가 모두 달랐고, 각 학교마다 맞춤형 파이썬 크롤러를 개발해야 했습니다.

이 크롤러들이 수집한 비정형 데이터를 모두 정제한 후 데이터베이스에 넣어주는게 가장 큰 도전이었습니다.

 

 

 

 

 

 

지금까지 통합 플랫폼 UniScope였습니다.

 

 

 

FE : https://github.com/kakao-tech-campus-3rd-step3/Team21_FE 

BE : https://github.com/kakao-tech-campus-3rd-step3/Team21_BE

WIKI : https://github.com/kakao-tech-campus-3rd-step3/Team21_FE/wiki