미리보기

• Perso

  • AI Perso 플랫폼 서비스의 프론트엔드 개발을 담당 및 주도

  • 모노레포 적용으로 Perso 서비스 레포지토리 구축

  • Portal 서비스 - 회원/워크스페이스와 같은 회원 관리 및 대시보드 서비스 프론트 개발

  • Video Translator 서비스 - AI 더빙 영상 제작 서비스 프론트 개발

  • 디자인 시스템 - Perso 디자인 시스템 개발 구축 및 주도

  • 유틸성 자동화 시스템 구축 - API 제너레이터, 다국어 제너레이터

  • 시멘틱 버저닝과 git flow 전략 수립하여 서비스 관리와 브랜치/코드/폴더/PR 컨벤션 정의 및 문서화

  • Storybook 적극 활용하여 개발/퍼블리셔의 병렬 작업 환경 구축과 모바일 테스트 환경 제공

• 알툴즈

  • 알툴즈 웹 서비스의 프론트엔 개발을 담당 및 주도

  • Next.js page router 적용하여 SSG, ISR, SSR을 상황에 맞게 적극 활용

  • Atomic, VAC 디자인 패턴 활용하여 작업 병렬 프로세스 구축

  • 이미지/번들 최적화 작업을 통해 리소스 및 속도 개선 작업

  • 백오피스 서비스 템플릿화 작업으로 업무 생산성 증대

  • 시멘틱 버저닝과 git flow 전략 수립하여 서비스 관리와 브랜치/디자인 패턴/PR 컨벤션 정의 주도

• 오거나이저

  • 사내 오거나이저 활동으로 DevRel 업무 수행

  • 외부 커뮤니티 활동, 사내 스터디 운영 및 기술 교류 문화 구축

  • 사내 오거나이저 활동으로 최초로 디자인 시스템 구축

• 경비청구 모바일

  • ReactNative(Expo)를 사용하여 모바일 서비스 개발(클래스 -> 함수형 전환)

  • 웹으로 제공되는 두 서비스(개인/법인 카드 서비스) 통합 및 로직 공통화 작업 진행

  • 웹 대비 60%이상의 성능 개선 작업

  • MSA 분산된 API 모듈을 redux-saga를 통해 비지니스 통합 로직 개선

  • Expo 프레임워크 버전 이슈로 인한 ​파일 업/다운로드 이슈 해결 및 부서 내 전체 가이드 문서 제공

• 위하고 L - 법률 서비스

  • 법률 전문가 매칭 서비스 개발 및 법률 카테고리별 서비스 개발 주도

  • MSA 설계 및 데이터베이스 설계와 서비스 도메인 로직 분리 및 데이터 관리 최적화

  • ElasticSearch를 적용하여 검색 기능의 사용자 경험(UX) 개선

• Smart A - 물류 서비스

  • 약 1000개 이상의 회사 운영 중인 서비스에서 견적서, 입/출고, 가출고, 환경설정 및 공통/프린트 모듈 개발

  • SmartA CS프로그램 서비스를 웹 서비스로 담당하여 화면 마이그레이션 개발

  • 공통 프린터 양식 및 모듈 개발

• 기타 다양한 서비스 개발(근태관리, 매출채권 팩토링, CRM, 선거 캠프 모바일 웹 등)

1. 기술

   • Next.js(v13), turborepo, Styled-Components, Storybook

2. 주요 성과 및 역할

   • 플랫폼 서비스의 확장, 디자인 시스템, 패키지의 라이브러리화, 레포지토리 관리, 개발 환경 규격화 및 배포를 위해 Turborepo를 도입하여 모노레포 구축.

   • API 문서 내용 규격화, 불필요한 타입 정의와 API 로직 개발 리소스를 최소화하기 위해 swagger-typescript-api를 도입하여 API 타입 제너레이터 적용 및 팀내 라이브러리 컨벤션으로 전파.

   • Tanstack-Query를 도입하여 API 프로세스 마이그레이션 진행. 선언적 데이터 패칭 작업을 유도하여, loading, error 작업을 HOC 패턴으로 fallback 처리하여 컴포넌트를 선언적으로 관리하도록 유도.

   • 다국어 추출 라이브러리(ms-intl) 개발하여 다국어 적용에 대한 휴먼 에러와 반복 업무를 최소화함.

   • GNB, LNB와 같이 중복 사용되는 컴포넌트를 위해 template 파일에서 구현했으나, 불필요한 리소스 생성을 방지하기 위해 layout 파일로 로직 마이그레이션을 진행하여 렌더링 최소화 처리.

   • 거대한 영상의 네트워크 리소스로 인한 UX 개선을 위해 poster 속성 활용과 스켈레톤 UI 제안 및 적용.

   • azure 리소스의 비용 절감을 위해 next.js 이미지 서버 대신, azure front door(CDN)를 활용하여 이미지 최적화와 파일(이미지,비디오) 캐시 세팅하여 브라우저 리소스를 최적화함.

   • 정적 서비스로 운영으로 인해, CDN을 활용. JS와 폰트 파일을 캐싱하여 브라우저 리소스를 최적화함.

   • 디자인 시스템과 서비스 개발을 병렬로 진행하여 컴포넌트을 작업 최소화하여 서비스 개발 속도를 확보함.

   • 코드 안전성과 지속적인 리팩토링을 위해 유닛, 컴포넌트, e2e 테스트 부분 적용.

1. 기술

   • React(v18), Radix, Styled-Components, Storybook

2. 주요 성과 및 역할

   • PDS(Perso Design System) 제안 및 시스템 구축 및 주도 (링크)

   • 사내 최초 디자인 시스템을 공식적으로 배포하였고, Perso 서비스의 디자인 정체성을 확립시킴.

   • Headless UI인 Radix API를 활용하여 컴포넌트 기능 개발의 생산성 증대.

   • 기존 컨벤션 라이브러리인 styled-components를 선택하여 퍼블리셔와의 작업 속도를 증대를 유도함.

   • Storybook을 제공하여, MDX 문서 정의, Primitive(15종), PDS-UI(8종) 라이브러리 구분하여 작업하여 디자이너와 개발자의 디자인 괴리를 최소화를 유도함.

   • 지속적인 핸드 오프를 통해 디자인 시스템 개념 동기화 및 컴포넌트별 Slot을 제공하여 디자인의 유연함과 확장성을 유도.

   • JIT 패키지 적용으로 모노레포 내 서비스에 즉각적인 반영 유도하여 DX 향상에 기여함.

   • 주도적으로 기획과 디자인에 개입하여, UX와 DX 향상에 적극 반영할 수 있도록 사내 피드로 지속적 관리.

1. 기술

   • Next.js(v12), SCSS, Storybook

2. 주요 성과 및 역할

   • Next.js의 SSG, ISR, SSR을 적절한 환경에 적용하여, 불필요한 운영 배포 및 유지보수 최소화 유도

   • Atomic, VAC 디자인 패턴 도입으로 개발/디자인 작업 병렬 프로세스 구축 및 유지 보수 개선 주도

   • Storybook 활용 및 의미론적 디자인 시스템을 구축하여 기획/디자인 팀과의 의사소통 단축 및 일관된 UI 구현 주도 (링크)

   • 도커라이징을 통해 CI/CD 개선 및 이미지 최적화 리소스 개선

     • 서비스 특성상 프로모션, 이벤트 페이지, 제품에 대한 고화질 이미지 제공으로 인해. 해외 및 사내 내부망에서 이용하는 고객의 UX 저하를 예상했고

       이미지 최적화가 필요하다고 판단, Next.js의 이미지 서버를 이용하여 브라우저 리소스 및 속도 개선을 위해 약 20% 성능 향상. (링크)

     • 개발 생산성을 위해 yarn-berry 마이그레이션과 standalone 적용, 패키지, 번들링 최적화 진행하여 속도 개선 및 번들링 리소스 약 50% 개선 (링크)

   • e2e, CDD 테스트: 테스트 코드 품질 및 안정성 향상(Cypress, Storybook, MSW). 커버리지 약 30% 개선

1. 기술

   • React(V18), Styled-Components, MUI, Formik

2. 주요 성과 및 역할

   • Webpack->Vite / Yarn->Yarn-Berry 전환으로 개발 생산성 및 개선 및 빌드 타임 및 용량 개선

   • Bootstrap -> MUI 전환으로 UI/UX의 일관성, 접근성 향상과 빠른 개발을 위해 공용 템플릿 작업 진행

   • 컴포넌트 추상화 작업: 컴파운드 패턴, Formik 조합으로 검색, 테이블, 페이지 MUI 기반 컴포넌트 추상화

1. 주요 활동

   • 외부 커뮤니티 활성화 활동

   • TIL, 기술/알고리즘 스터디 운영

   • 사내 기술 교류/공유 문화 구축

   • 알툴즈 서비스 사내 백오피스 시스템 구축 발안 및 수행

   • 사내 오거나이저 활동으로 디자인 시스템 구축(알툴즈, Perso 서비스)

1. 경비 청구 모바일 서비스 개발

   • 기존 PC 서비스 로직 공통화 작업으로 웹 대비 모바일 앱 성능 60% 개선.

   • MSA로 분산된 API 호출 작업 미들웨어 레벨로 비지니스 통합 로직 개선(redux-saga 비동기 작업)

   • Expo 프레임워크 이슈로 인한 ​file-system 이슈 해결 및 부서 내 가이드 문서 제공

2. 위하고 L(법률 서비스) 및 백오피스 시스템 개발

   • 법률 전문가 매칭 서비스 개발 및 법률 카테고리별 서비스 개발 주도.

   • MSA 설계 및 데이터베이스 설계를 통한 서비스 도메인 분리 및 데이터 관리 최적화.

   • ElasticSearch를 적용하여 검색 기능의 사용자 경험(UX) 개선

3. Smart A (물류 서비스)

   • 약 1000개 이상의 회사 운영 중인 서비스에서 견적서, 입/출고, 가출고, 환경설정 및 공통/프린트 모듈 개발

   • SmartA cs 프로그램 서비스를 웹 서비스로 담당하여 화면 마이그레이션 개발

   • 공통 프린터 양식 및 모듈 개발

4. 기타 다양한 서비스 개발(근태관리, 매출채권 팩토링, CRM, 선거 캠프 모바일 웹 등)

Korean FE article: 1만 구독자를 보유한 해외 기술 블로그 번역활동

글또(글쓰는 개발자 모임)