미리보기

GDG on Campus KNU의 분산된 운영 시스템을 개선하고자 프로젝트를 시작했습니다. Google Form을 통한 지원서 제출, Notion을 통한 일정 관리, 그리고 별도로 관리되던 Member Info를 하나의 플랫폼으로 통합하여 커뮤니티 운영 효율을 높이고자 했습니다.

https://github.com/GDG-on-Campus-KNU/GDG_onCampus_KNU_Official_FE

• 성능 최적화 및 사용자 경험 개선
 


  • Intersection Observer API를 활용한 뷰포트 기반 레이지 로딩 구현

  • 초기 렌더링 시간 8000ms에서 2000ms로 75% 개선

  • React async helmet과 prerenderer 활용한 SEO 최적화
 - 지원 시즌 한 달간 500명 이상의 유입 창출
    

• 보안 및 서비스 안정성 강화
 


  • 지원서 페이지 접근 제어 및 만료 기간 예외 처리 구현

  • Google Analytics 이벤트 커스텀 적용으로 실시간 사용자 행동 모니터링
    

• 인프라 구축 및 배포 자동화



  • AWS S3, CloudFront, Route 53 활용한 정적 배포 환경 구성

  • GitHub Actions와 pnpm을 활용한 효율적인 CI/CD 파이프라인 구축

    

• 재사용 가능한 공용 컴포넌트 설계 및 구현
 


  • Button, Input 등 UI 컴포넌트 라이브러리 구축

  • 일관된 디자인 시스템 적용으로 개발 생산성 향상

  • component/common 구조를 통한 체계적인 컴포넌트 관리

누구나 자유롭게 참여할 수 있는 오픈 채팅방은 많았지만, 실시간 화상 채팅과 텍스트 채팅을 동시에 제공하는 서비스는 찾기 어려웠습니다. 이에 착안하여 사용자들이 관심사가 맞는 방에 자유롭게 참여하여 화상과 채팅으로 소통할 수 있는 커뮤니티 플랫폼을 기획하게 되었습니다.

• 실시간 양방향 통신 구현
 


  • WebSocket과 STOMP.js를 활용한 실시간 채팅 시스템 구축

  • Vite 환경에서의 호환성을 고려한 WebSocket 프로토콜 직접 구현

  • 실시간 사용자 온/오프라인 상태 관리 시스템 구축
    

• 사용자 경험 최적화
 


  • 연속 메시지 타임스탬프 그룹화로 채팅 UI 개선

  • 실시간 온라인 상태 표시로 사용자 간 상호작용 향상

2/3/4기: Member → Core → Organizer (2022 ~ 2024)

• 대규모 해커톤 기획/운영

  • 2025 백야 Hackathon 기획 파트장 (19개 대학 참여 예정)

  • 2024 Vision Challenge Hackathon 총괄 (Website) 
(Google Cloud, 경북대 SW 교육원 지원 및 협력)

  • 2024 경북대 연합 해커톤 기획 담당 (6개 IT 동아리 연합)

  • 2023 영남권 GDSC 연합 아이디어톤 기획담당 
(GDSC 영남권 5개 대학 연합)
    

• 팀 프로젝트 수상

  • 2023 대구 SW해커톤 우수상

  • 2023 대경권 공공데이터 경진대회 최우수상

Yorkie 오픈소스 프로젝트 컨트리뷰터 특별상 수상

• Yorkie 팀 사이트 모바일 로그인 UI 버그 해결
 (github Issue) (github PR)

• CodePair 프로젝트 기여

  1. 다중 사용자 인터페이스 개선
(github Issue) (github PR)

  2. 4명 초과 시 popover 구현

• 404 에러 핸들링 시스템 구축 (github Issue) (github PR)
  - 글로벌 에러 처리 로직 구현 (axios.default.ts)
  - 재사용 가능한 에러 페이지 컴포넌트 개발

  
  
  

• Step 1,2,3 전 과정 카테톡-er 강연자 선정 (참여 5개 대학 유일)

  • Step1 : NPM 속도의 한계를 보여줄께 (PPT)

    • 패키지 매니저 종류별 성능 비교 및 장단점

  • Step2 : 선배 액세스 토큰 주세요! 선배! 혹시 리프레쉬 토큰도 같이? (PPT)

    • 토큰 저장 방법 및 보안 공격 기법에 대한 개념

  • Step3 : 렌더링 정상화 해줬잖아! 성능 최적화 해줬잖아! 그냥 다 해줬잖아 (PPT)

    • 리액트 렌더링 원리 및 최적화 방법

• Step2 우수 학생 선정 (PPT)

• 2달간 진행되었던 숏폼 자동제작 서비스 (Github)

• 멋쟁이 사자 총괄 대학 사이트 (Github)

  • 대학 통합 플랫폼 운영 및 유지보수
    

• 전국 연합 해커톤 웹사이트 프론트엔드 개발 참여

  • 메인 랜딩 페이지 UI/UX 설계 및 구현

  • 팀 협업을 통한 운영 비용 1000만원 절감 달성

  • 총 약 1600명의 참가자 대상 서비스 제공

• 12기 운영진 활동

  • 아기사자 대상 기술 교육 진행 (PPT)

    • Git 기초 및 활용법

    • 웹브라우저 동작 원리

    • React 개발을 위한 JavaScript 심화