SHOPL 서비스 링크↗

2023.09 - now

현장직을 위한 인사 관리 • 협업툴을 지원하는 B2B SaaS 서비스입니다. JSP 기반의 프로젝트를 React로 전환해나가며 디자인 시스템 개발을 병행하고 있습니다. 근태 관리 기능을 담당하는 목적 조직에 소속되어 요구사항 분석부터 개발까지 폭넓게 담당하고 있습니다.

pnpm 기반 Monorepo React TypeScript Zustand TanStack Query Emotion

기술 커뮤니케이션 병목을 해결하는 자동화 도구를 개발했습니다

기술 스택과 디자인 시스템 적용 여부를 자동 식별·시각화하는 크롬 익스텐션 개발

• JSP와 React 영역을 자동 식별해 기술 스택 관련 커뮤니케이션 병목 해소 블로그 포스팅↗

  • URL, iframe, DOM 구조 기반으로 JSP, React, React-in-JSP 영역을 자동 식별 및 하이라이팅
  • React-in-JSP와 같은 특수 구조를 시각화해 비개발자의 기술 스택 인지 난이도 완화 및 협업 효율 개선

• 디자인 시스템 적용 여부를 자동화해 협업 비용 절감

  • data-set 속성 기반으로 컴포넌트 명칭을 노출하고, 적용 여부를 하이라이팅해 디자인 시스템 적용 상황 시각화
  • react-portal 적용으로 z-index 충돌 방지 및 UI 일관성 확보

근태 관리 기능을 최신 기술 스택으로 마이그레이션하며 설계를 개선했습니다.

• JSP 프로젝트를 React로 무중단 마이그레이션 수행
  • iframe + postMessage를 활용해 JSP 환경의 일부분을 React로 점진적으로 전환
• 근태 로직의 복잡한 분기 구조를 전략 패턴으로 정리 블로그 포스팅↗
  • 근태 유형별 복잡한 분기 로직을 전략 패턴으로 구조화해, 결합도를 낮추고 기능 추가 시 수정 범위를 최소화

토큰 기반 디자인 시스템을 운영하며 component driven development를 실천했습니다. GitHub 링크↗

• 의도를 명확히 전달하는 설계를 중심으로 공통 컴포넌트 구축
  • 색상, 간격 등의 디자인 속성을 토큰화해 일관성과 변경 용이성 확보
  • 선언적인 인터페이스로 컴포넌트 목적을 드러내고 인지부하를 낮추도록 설계
• 패턴 기반의 구조적 설계로 재사용성과 유지보수성 강화
  • Slider 등 복합 UI에 컴파운드 패턴을 적용해 하위 요소 간 결합도 최소화
  • custom hook으로 UI와 로직을 분리해 응집도를 높이고 수정이 쉬운 구조로 설계
• 실시간 테스트 환경에서 생산성을 고려한 개발 진행
  • 다른 Repository 프로젝트에 디자인 시스템을 심볼릭 링크로 연동해 배포 없이 수정 사항을 실시간 반영하며 개발

디자인 시스템 문서를 AI 기반 자동화로 전환했습니다 블로그 포스팅↗

• Few-shot Prompting, Chain-of-Thought 등 프롬프팅 기법을 적용해 문맥을 명확히 전달하고, 개발자가 변경 주도권을 갖는 Cursor Rule 구조 설계
• 채팅 기반 작성 방식으로 문서화 부담을 줄이고, 수동 작성에서 발생하던 누락과 형식 불일치 제거

흩어져 있던 온보딩 정보를 문서화해 신규 입사자의 빠른 적응을 도왔습니다

• 신규 입사자의 소프트랜딩을 돕기 위해 서비스 소개, 팀 운영 방식, 협업 흐름 등을 정리한 온보딩 문서 작성
• JSP–React 연동 구조, 지도 컴포넌트 설계 방식 등 기술 구조를 별도 정리해 실무 투입 전 기술 이해도 향상
• 반복 설명 없이 팀 맥락과 기술 흐름을 전달할 수 있어 온보딩 효율성과 일관성 확보

비개발팀의 업무 흐름을 자동화해 조직 전반의 협업 효율을 높였습니다

• 수작업에 의존하던 비개발팀의 정보 전달 흐름을 관찰해 문제를 정의하고, Slack Workflow로 자동화 도구 설계 블로그 포스팅↗
• 반복 입력과 실수 없이 정보를 공유할 수 있어, 조직 전반의 커뮤니케이션 효율 및 업무 일관성 향상

하다 서비스 링크↗

2022.08 - 2023.09

현장 시설을 디지털로 관리하는 B2B SaaS 솔루션 서비스입니다. 서비스 런칭 1개월 후 합류해 신규 기능을 개발해나갔습니다. 2023.09 이후 내부 사정으로 프로젝트 개발이 중단되어 SHOPL 서비스를 담당하게 되었습니다.

React(CRA) TypeScript Zustand TanStack Query Emotion

다양한 기능을 가진 컴포넌트를 조립형 구조로 설계했습니다.

• 단일 모달에서 이슈를 등록하고 해결하는 기능 개발시 재사용성과 확장성을 고려해 기능별 모듈화 및 조립형 UI 구성

일괄 처리 방식으로 인한 timeout 이슈를 해결하고 복잡한 입력 검증을 구현했습니다

• 3,000건 이상의 시설 데이터를 일괄 처리하는 과정에서 timeout이 발생해 chunk 처리 방식으로 해결
• MUI DataGrid 기반으로 column/row 단위 validation을 커스터마이징해 복잡한 요구사항 대응

하우스텝 서비스 링크↗

인테리어 솔루션 서비스 하우스텝의 영업인력이 각종 자재를 관리하기 위한 어드민 개발을 담당했습니다. 이후 회사 내부 사정으로 프로젝트 중단되었고, 랜딩 페이지 유지보수를 담당했습니다.

React(CRA) TypeScript TanStack Query styled-components

기획 공백 속에서도 주도적으로 요구사항을 정의하고 구현했습니다.

• 기획자 없이 영업팀·백엔드 개발자·디자이너와 협업하며 요구사항 정리 및 화면 구조 설계
• 업무 흐름을 고려한 기능 단위 MVP 설계 및 UI 컴포넌트 구현 주도

일관된 협업을 위한 커밋 컨벤션을 정립하고 자동화했습니다.

• 서로 다른 커밋 메시지로 인한 코드 이력 가독성 저하 및 협업 혼선 발생
• commitizen 기반 커밋 컨벤션 정의 및 pre-commit 자동화 도입 블로그 포스팅↗

Finance Department

⚠️ 비개발 직군 경력

• 법률 프로젝트의 데이터 관리 및 업무 정보 및 흐름을 파악해 국・영문 문서 작성
• 잦은 일정 변경을 관련 부서와 신속하게 소통하며 대응, 시간에 민감한 법률 업무가 원활하게 진행되도록 기여