Pado
개발사업부 / 주임연구원
24.03 - 현재
사내 프로젝트 및 업무 관리 서비스
- 사내 프로젝트 및 업무 관리 서비스 기획, UI 디자인과 프론트엔드 개발
- 공통 스타일과 컴포넌트 규칙을 정의한 디자인 시스템 구축 및 화면 적용
- AI를 활용한 백엔드 API와 데이터 모델 구현 및 생성 코드 검토
- 테이블 간 관계와 데이터 흐름을 검토하고 화면 요구사항에 맞춰 API 연동
- Next.js
- React
- TypeScript
- Prisma
- PostgreSQL
- Playwright
사이버보안 교육 플랫폼 개발
- 사용자 페이지 초기 개발 참여 및 주요 기능 구현과 유지보수
- 관리자 기능 일부 개발과 유지보수, 기존 UI/UX 개선
- 테스트 케이스 초안 작성 및 Notion 체크리스트와 버그 리포트 양식을 활용한 QA 체계화
- 다국어 레이아웃과 접근성 개선 및 성능 최적화
- GS 인증 담당자와 직접 소통하며 인증 과정의 결함 대응
- React
- TypeScript
- Vite
- React Router
- TanStack Query
- React Hook Form
- Yup
- i18next
- Panda CSS
- NestJS
- Prisma
- Playwright
Pado 공식 홈페이지
- 홈페이지 초기 개발부터 배포, 운영, 유지보수 담당
- Lighthouse CLI 기반 로딩 병목 분석 및 개선: 측정 기록 기준 Performance 36→85점, LCP 15.9→2.6초, 초기 전송량 약 90% 감소
- GitHub Actions를 활용한 콘텐츠 업로드 자동화
- TypeScript
- React
- Next.js 15
- next-intl
- TanStack Query
- Zustand
- React Hook Form
- Yup
- Panda CSS
- MDX
- GSAP
- GitHub Actions
- Lighthouse
CTF 참가자 플랫폼 및 현장 시각화
- 요구사항 분석과 레퍼런스 조사부터 참가자 화면 기획, 디자인, 프론트엔드 개발까지 수행
- 인증, 챌린지, 힌트, 팀 관리, 공지, 리더보드 구현 및 대회별 API와 환경 설정 대응
- 시나리오형과 챌린지형 제품 확장 개발 참여
- SSE와 WebSocket 알림의 구독 해제 및 재연결 개선, 로딩과 오류 및 빈 상태 처리, 반응형 화면과 접근성 보완
- 팀 점수와 문제 현황이 자동 전환되는 현장 시각화 화면 기획 및 구현, 다수 해킹대회 현장 운영 참여
- React
- TypeScript
- Vite
- React Router
- TanStack Query
- Zustand
- Chakra UI
- React Hook Form
- Yup
- SSE
- WebSocket
- Visx
- Chart.js
- Framer Motion
vyblab Hub 커뮤니티 및 쇼케이스 기능
- 커뮤니티, 쇼케이스, 관리자 운영 기능 개발 참여 및 진입 화면, 보조 사이드바, 플랫폼별 탐색 화면 개선
- 기간별 인기글 및 공지를 제외한 무한 피드 구현, 콘텐츠 변경 후 쿼리 캐시 갱신 개선
- 관리자 콘텐츠 일괄 숨김과 해제 기능의 UI, 서버 액션, DB 마이그레이션 구현 및 계약 테스트 검증
- Next.js
- TypeScript
- Supabase
- TanStack Query
