미리보기

다양한 산업 분야에 맞춤형 IT 솔루션을 제공하는 시스템 통합 (SI) 전문 기업

[대규모 참가자 신청을 안정적으로 처리하는 국민일보 마라톤 대회 웹 서비스]

Nuxt.js Vue Typescript Tailwind CSS Auth.js

대규모 트래픽 처리

• 신청 시작 시간대(오전 10시)에 집중되는 약 1만 명의 동시 접속자를 안정적으로 처리

  • 대기열 시스템을 구현하여 서버 부하를 분산시키고,실시간 대기 순번과 예상 대기 시간을 제공하여 사용자 이탈 방지

  • Web Worker를 활용하여 복잡한 대기열 계산을 백그라운드 스레드로 분리함으로써,메인 스레드의 부하를 줄여 화면 렌더링 속도 개선

안정적인 결제 시스템 구현

• 토스페이먼츠 결제 위젯을 활용하여 개별/단체 결제 프로세스를 구현하고,다양한 결제 수단 통합으로 사용자 편의성 향상

• 결제 상태에 따른 페이지 라우팅과 실패 상황에 대한 사용자 친화적 에러 핸들링으로안정적인 결제 경험 제공

대규모 상품을 효율적으로 관리하고 표시하는 이커머스 플랫폼 개발 [링크]

Nuxt.js Vue Typescript Tailwind CSS Cypress

대규모 데이터 최적화 및 성능 개선

• 서버를 거쳐 전달하던 이미지 업로드 방식을 프론트엔드에서 S3로 직접 전송하도록 개선함으로써 200만 개 상품 이미지 처리 시 서버 부하 30% 감소

• 5,000개 이상의 대량 체크박스 렌더링 시 발생하는 성능 저하를 윈도윙 기법으로 해결하여 화면에 보이는 영역의 요소만 렌더링하도록 최적화하여 DOM 노드 수 90% 감소

• 무한 스크롤이 적용된 페이지에서 다른 페이지로 이동했다가 돌아올 때, 가상 리스트를 활용하여 이전 스크롤 위치와 데이터를 복원함으로써 사용자 경험 개선

• Intersection Observer API를 활용한 이미지 Lazy Loading 구현으로 초기 렌더링 성능 개선

품질 관리 및 테스트 자동화

• 로그인부터 결제 전 단계까지의 핵심 비즈니스 로직을 Cypress로 자동화하여 수동 테스트 대비 테스트 수행 시간 70% 단축

• 주요 컴포넌트와 함수에 대한 유닛 테스트 100개 이상을 구현하여 코드 변경 시 발생할 수 있는 잠재적 버그를 사전에 검출

[크래프톤 정글의 메타버스 플랫폼 개발] [링크]

Next.js React Typescript shadch/ui Tailwind CSS Zustand Socket TanStack Query

대규모 트래픽 처리

• Canvas 객체의 실시간 동기화 과정에서 발생하는 대용량 데이터 전송 문제를 Pako.gzip 라이브러리를 사용해 대용량 데이터를 80% 압축시킴으로써 네트워크 트래픽 70% 감소 및 드로잉 성능 개선

• Canvas 객체의 상태(위치, 크기, 각도)를 추적하는 상태 비교 알고리즘을 구현하여 변경이 발생한 객체만 선택적으로 렌더링함으로써 불필요한 리렌더링 방지

• 큐 시스템과 락 메커니즘을 도입하여 다중 사용자의 동시 드로잉 충돌을 방지하고 데이터 일관성 유지

소켓 기반 실시간 통신 아키텍처 구현

• 여러 탭에서 같은 사용자가 접속할 때 중복으로 연결되는 문제가 발생했고, Local Storage를 사용한 중복 연결 방지 시스템을 구현해 해결

• Zustand로 소켓 인스턴스를 전역 상태로 관리하여컴포넌트 간 실시간 데이터 공유 및 상태 동기화 효율성 향상

개발 환경 표준화 및 품질 관리

• 커밋 메시지 규칙을 도입하고 Husky로 검증을 자동화하여 팀원들이 코드 변경 이력을 빠르게 파악하고 효율적으로 디버깅할 수 있는 환경 구축

• PR/이슈 템플릿을 설계하고 작업 내용, 진행 상황, 결과물을 체계적으로 문서화함으로써 팀 간 작업 공유와 진행 상황 파악이 용이하도록 개선

위치 기반으로 근처 이웃과 배달 음식을 공유할 수 있는 커뮤니티 서비스 개발

React Reqct TypeScript styled-component recoil

프로젝트 관리 및 설계

• 5인 팀의 프로젝트 리더로서 기획부터 개발 완료까지 전체 프로세스를 주도

• 매일 스크럼 회의를 진행해 팀원별 작업 현황을 공유하고 기술적 병목 구간을 파악 후 대응함으로써목표 기한 내 프로젝트 완수