미리보기

학부 4학년 시절, 의료 IT 기업 빔웍스에서 인턴 경험을 쌓았습니다.


사내 AI 개발자들을 위해 서버의 자원(GPU, CPU, 메모리, 프로세스 등)을 모니터링하고 예약할 수 있는 서비스를 기획부터 설계, 개발, 배포까지 직접 수행했습니다.


각 서버에 exporter를 도커를 이용해 원격으로 설치했고, 모니터링 서버에 Prometheus를 구축하여 서버 자원을 metrics 형태로 수집했습니다. 수집된 데이터는 백엔드 서버를 거쳐 클라이언트에 제공되었으며, 사용자는 이를 통해 서버 자원을 확인하고 원하는 서버를 예약, 사용할 수 있었습니다.


exporter와 Prometheus 설치, 프론트엔드 구현 역할을 맡았습니다. 프론트엔드 구현 완료 후 exporter에서 백엔드 서버를 거쳐 클라이언트까지 데이터를 가져오는 데 최소 13초 이상 소요되는 문제가 있었습니다. 이에 Tanstack-Query를 활용해 사용자의 페이지 접근 여부와 관계없이 백그라운드에서 미리 데이터를 가져와 캐싱하는 방식을 도입했고, use-hook-form을 사용해 불필요한 렌더링을 최소화했습니다. 그 결과 UX를 향상해 내부 평가에서 95% 이상의 만족도를 얻을 수 있었습니다.


내부 네트워크를 사용하고 사용자 수가 적은 서비스였기에 세션 방식으로 사용자를 관리했으며, 1초마다 쌓이는 GPU 이력 등의 방대한 데이터는 반응형 프로그래밍 라이브러리 RxJS를 활용해 데이터의 변형, 흐름을 직관적으로 알 수 있게 했습니다.


배포 시에는 빗버킷의 main branch에 commit이 생성되면 자동 빌드 후, aws S3의 파일을 업데이트 및 Cloudfront 무효화를 자동화해주는 로직을 구현하여 배포 시간을 단축하였습니다.

창업 동아리 스토코디에서 웹 개발 팀장이자 프론트엔드 개발자로 일하면서 실시간 모의 투자 및 금융 강의 플랫폼을 작년부터 현재까지 만들고 있습니다. 이는 방대한 실시간 주식 데이터를 사용자에게 제공하고 강의 결제 기능이 있어 보안 측면에서 깊이있는 고민이 필요했습니다.


실시간 데이터는 1분마다 서버에 저장되고 클라이언트에 제공됩니다. 양이 방대해 한꺼번에 제공 시 딜레이가 발생했습니다. 이에 저희는 과거와 현재 이후 데이터의 특성을 고려한 대안을 마련했습니다. 과거 데이터는 실시간성이 필요가 없고 덜 중요하기 때문에 REST API 기반으로 커서 페이지네이션으로 레이지 로딩을 구현했습니다. 사용자 입장에서 보이는 부분 영역의 데이터만 우선 보이고 마우스로 커서를 이동하면 다음 데이터를 받아오는 원리입니다. 반면 현재 이후 데이터는 웹소켓을 활용해 실시간성을 확보했습니다. 이를 통해 딜레이 없는 최적의 UX를 제공할 수 있었습니다.


또한, 스크롤에 반응해 애니메이션이 적용되는 애니메이션을 구현하는 도중 기존의 Scroll Event 기반에서 Intersection Observer를 사용해 메인 페이지의 성능을 개선했고, Lazy Loading / Suspense를 통한 코드 스플리팅을 이용해 FCP / LCP 등 초기 렌더링 속도를 향상했습니다. LightHouse로 성능을 측정한 결과, Chrome 에서 Fast 3G 기준, 성능 지표 45점 / FCP 5.9s / LCP 5.9s 에서 성능 지표 82점 / FCP 1.0s / LCP 1.5s 로 총 82% 가량 개선됨을 확인하였습니다.


보안 면에서는 사용자 인증을 위해 JWT의 payload에 이메일을 담아 토큰을 발급했고, XSS 공격에 대처하기 위해 httyOnly 쿠키에 보관했습니다. JWT는 개인키 해싱으로 위변조를 방지하지만, 토큰 노출 시 대처가 어려워 accessToken 만료 시간을 30분, refreshToken 만료 시간을 7일로 짧게 설정했습니다. 또한, CSRF 토큰을 사용해 CSRF 공격 위험을 낮추고, 회원 정보 수정 페이지에는CAPTCHA를 적용해 보안을 강화했습니다.


프로젝트를 진행하면서 이벤트성 금융 역량 테스트 페이지를 배포하고, 저희 홈페이지의 개선 사항을 피드백 받아 72개의 요구사항을 반영하였습니다. 그중 각각의 강의 페이지 SEO를 높였으면 좋겠다는 의견이 있었습니다. 스타트업 특성상, 빠른 구현이 중요했기에 nextJS로 마이그레이션 하는 대신, react-snap, react-helmet을 이용하여 메타 데이터를 추가하여 각 index.html 파일을 서버에서 제공해주는 식으로 해결하였습니다.


실사용자를 받을 프로젝트를 진행하고 고객, 리더의 다양한 요구사항을 수용하면서 다양한 문제를 해결하고 고민하면서 저 또한 성장할 수 있었습니다. 해당 공로로 팀은 창업 경진대회에서 우수한 성적을 거두었고 팀 분위기 또한 좋게 유지되고 있습니다.

교내 프로젝트를 하면서 클라우드를 처음 접했습니다. 그러나 학생 입장에서 클라우드 환경을 이용하기에는 비용적 부담이 있었습니다.


학교의 남는 자원으로 학생들이 클라우드 경험을 쌓으면 좋겠다는 생각을 하게됐고, 학생용 프라이빗 클라우드 플랫폼을 직접 개발했습니다. 그러나 학생 각각의 인스턴스마다 공인 IP를 할당해주기에는 공인 IP도 한정적이었습니다.


이에 학생들이 인스턴스에 접속하는 과정을 분석하면서, 하나의 공인 IP에 여러 기기가 사용할 수 있도록 하는 공유기를 떠올렸고, 공유기의 NAT기술에 대해 학습하고 이를 활용할 수 있는 방법을 고민했습니다.


하나의 IP에서 운용할 수 있는 포트 대역인 1.024~49,151을 고려하면, 하나의 공인 IP 당 최대 48,128개의 인스턴스에 접속할 수 있었고 제한된 공인 IP 수로 인한 비용적 문제점을 해결할 수 있었습니다. 결과적으로 학생들은 저희 프로젝트를 통해 인스턴스 생성, 도메인 할당, SSH 접근 등을 할 수 있었습니다.

오픈스택 커뮤니티에 저희가 만든 오픈스택을 활용한 클라우드 인프라 서비스의 공로를 인정받아 저희 서비스를 발표할 수 있는 기회가 있었습니다. 개발 배경, 아키텍처 소개, 기능 구현 순으로 발표를 진행했습니다.(https://2023.openinfradays.kr/session/68)

학생리포터는 학교와 관련된 인물들을 취재하고 공식 웹진에 기사를 싣는 일을 합니다. 또한 공식 SNS 계정 및 부스를 운영하며 학교 홍보에도 힘썼습니다.


매달 기사를 내고 세상의 앞과 뒤에서 각자의 길을 열심히 사는 다양한 사람들을 취재하면서 의사소통 능력은 물론, 팀원을 설득하는 말하기 방법, 맡은 일을 끝까지 해내고 서로를 도와주고 이끌어주는 적극성, 끊임없이 글을 수정하고 행사를 기획하는 근성을 발로 뛰며 배웠습니다.

Backend.Ai 기업의 레거시 코드를 뜯어보며 순서가 엉망인 자료를 정렬하고 보이지 않는 컴포넌트 오류를 수정했습니다.


레거시 코드 분석을 통해 복잡한 문제를 단계적으로 해결해 나가는 훈련을 할 수 있었습니다.

1학기 동안 매주 프론트엔드 세션에 참가하여, 프론트엔드의 기초가 되는 브라우저 렌더링 과정, javascript 동작 원리, React 등을 배우고, 2학기에는 전국 해커톤에 참가했습니다.

컴퓨터학부 시스템 개발부는 교내 및 학부에 필요한 서비스를 구현하는 자체 개발 부서입니다.
시스템 개발부에서 2가지 서비스를 만들었습니다.

1. 공지사항 알림봇
   
   
   학부 공지사항에 중요한 공지가 올라오거나 수정이 돼도 학부생들이 놓치는 상황이 많았습니다.
   
   
   이에 저희는 새로운 공지가 올라오거나 공지가 수정되면 디스코드 알림으로 공지 제목, 내용을 미리볼 수 있고 링크를 통해 공지사항으로 이동할 수 있는 서비스를 기획, 배포했습니다.
   
   
   현재 학부생 대다수가 서비스를 이용 중입니다.
   
   
2. 기숙사 룸메이트 매칭 서비스
   
   
   그동안 에브리타임과 같은 대학교 SNS에서 취침 시간, 잠버릇, MBTI 등 개인 정보를 공유하며 룸메이트를 찾아왔습니다. 하지만 이런 방식에는 따로 게시판이 없어 일일이 검색해야 하는 문제점, 필터링이 불가능해 조건을 모두 직접 살펴야 하는 문제점이 있었습니다.
   
   
   이에 저희는 nextJS 기반의 웹 서비스를 개발하고 있습니다. 이 서비스에서는 사용자가 원하는 조건을 필터링해 룸메이트를 검색하고 채팅으로 대화를 나눌 수 있습니다.