미리보기

사이버 보안 스타트업에서 약 1년 동안 B2B SaaS(Xint)를 개발했습니다. Xint는 보안 운영을 간소화, 자동화하는 통합 보안 관리 플랫폼입니다. 공격자 관점에서 보안 환경의 가시성을 제공해 보안 위협을 효과적으로 식별하고 대응할 수 있도록 지원합니다. 팀의 초기 멤버로 합류해 기획부터 프론트엔드 개발 및 배포에 참여했습니다.

사용자 중심 기능 기획 및 구현까지 주도

• 보안 운영 시스템에서 중요 보안 경고를 놓치는 문제를 해결하기 위해 맞춤형 알림 설정 기능 추가해 불필요한 알림으로 인한 피로도를 줄이고, 사용자에게 필요한 보안 경고만 제공

• 대규모 데이터 필터 UI에서 단순한 드롭다운 방식이 원하는 데이터를 찾기 어렵다는 피드백을 반영해 피드백을 반영하여 다양한 조건 검색이 가능한 Notion-style 3-depth 필터를 구현해 검색 경험 및 사용성 개선

애자일 환경에서 성공적인 알파버전 출시

• 1주 단위 스프린트로 개발 및 배포를 진행하며, 백엔드 및 디자이너와 긴밀한 협업 유지

• 백엔드 API 스펙을 사전 합의하고, 모킹 서버를 활용해 API 통합 작업을 선제적으로 완료하여 일정 준수

• 디자인 시스템을 구축해 UI 개발 생산성을 높이고, 스토리북을 활용해 디자이너와의 빠른 QA 피드백 루프 구축

• 빠듯한 일정 속에서도 코드리뷰를 철저히 수행하여 코드 품질을 유지하고, 알파 버전을 성공적으로 출시

지식 공유 및 개발 문화 활성화

• "Dev Playbook"을 도입하여 다양한 문제 해결 방법 문서화하고 공유

• Notion-style 필터 구현 과정에서 복잡한 데이터 필터 요구 사항을 효율적으로 처리하기 위한 설계 내용 공유

• 랜딩 페이지 로딩 속도를 최적화하기 위한 성능 개선 과정 및 적용 기술 공유

• 테스트 모킹 트러블슈팅 및 Vitest browser mode 도입 내용 공유

Codadang은 성균관대학교 학우들을 위한 Online Judge 서비스로, 학교 수업에서 과제나 시험을 볼 때 활용하고 있습니다.

활동 이력

• 2022.09 ~ 2023.02: FE 신입부원

• 2023.03 ~ 2023.06: FE 멘토

• 2024.09 ~ 2025.02: FE Best Contributor 선정

• 2024년 12월 기준 24개 Commit과 34,288 Lines 기여

2024년 주요 기여 및 성과

"기능 개발을 넘어, 유지보수성 높은 코드베이스 구축과 개발 문화 정착"을 목표로 활동했습니다.

기술 부채 해결 및 코드 품질 개선 주도

• 컨벤션 부재로 인한 코드 품질 저하 및 기술 부채 누적 문제를 최우선 해결 과제로 선정

• 여러 리팩토링 작업을 제안하고, 스프린트 계획에 포함하여 우선순위 조정 후 진행

• 리팩토링 과정에서 도출된 Bad/Best Practice 및 개선 내용을 문서화하고 팀 내 공유 장려

• 팀원들에게 리팩토링의 필요성을 알리기 위해 직접 개선 작업을 수행하며 선례를 마련

  • 단일 책임 원칙에 따라 컴포넌트를 기능별로 세분화

  • 합성 컴포넌트 패턴을 도입해 다양한 요구 사항과 확장에 유연하게 대응할 수 있도록 설계

  •  그 결과, 코드의 가독성과 유지보수성이 향상됨

팀 컨벤션 정립 및 코드 스타일 통일

• 반복적으로 발생하는 문제를 수집해 팀 컨벤션 체계화

• ESLint 규칙을 적용해 팀 내 코드 스타일 통일

• ESLint로 다룰 수 없는 React & TypeScript 컨벤션 문서화하여 팀 내 공유

• 코드 리뷰 체크리스트에 "컨벤션 준수 여부" 항목을 추가해 코드 품질 유지 강화

TanStack Query 도입

• 비동기 상태 관리를 단순화하여 유지보수성 향상

• SWR 전략을 활용해 네트워크 지연이 발생하거나 불안정한 환경에서도 사용자에게 원활한 경험 제공

• TanStack Query 도입 이유 및 적용 사례를 문서화하여 팀 내 공유 (문서 링크)

번들 크기 최적화

• Zod의 Tree Shaking 지원 부족 문제를 해결하기 위해 ESModule 기반의 Valibot으로 전환 (관련 페이지 JS 번들 크기 약 10KB 감소)

• Tree Shaking 최적화를 통해 페이지별 JS 번들 크기 최소 20%~최대 60% 감소 (관련 블로그 링크)