스트리미(주)

2022.03.28 ~ 2023.03.31

Frontend Developer

Legacy System Migration Project.

2022.03 ~ 2023.02 (11개월) Typescript, zustand, React, emotion css, storybook

Redux, Javascript, Flow, scss 로 구성되어 있는 프로젝트를 Zustand, Typescript, emotion css 로 마이그레이션, node version 을 올려 최신 라이브러리 사용이 가능하도록 설정을 업데이트 하는 프로젝트

목표

• Node.js 버전을 8에서 16로 업그레이드하면서 라이브러리 호환성을 유지
• Atomic design 패턴과 Storybook을 활용하여 컴포넌트 개발 및 UI 화면 테스트 방법을 표준화
• AWS CloudFront를 사용하여 개발자별 독립적인 테스트 환경을 제공

담당 업무

• 클래스 컴포넌트를 최신 React 스타일인 함수형 컴포넌트로 마이그레이션하면서, 기존의 라이프사이클 메서드를 useEffect 및 커스텀 훅으로 변경
• 중복되는 코드와 props 주입이 필요한 컴포넌트를 HOC를 생성하여 리팩토링
• JavaScript를 TypeScript로 변경하는 과정에서 부작용을 최소화하고, 타입 단언문을 줄이는 방식으로 안정적인 마이그레이션
• 중앙화된 하나의 Redux 스토어를 카테고리화하여, 여러 개의 Zustand로 분리

성과

• 유틸리티 함수와 훅을 추가하여 중복 코드를 줄이고, 코드 퀄리티를 높임
• TypeScript를 활용하여 안정성 있는 코드를 작성하고, 이슈 발생 위험을 감소
• Storybook을 활용하여 UI 테스트 시간을 줄이고, 디자인 QA 프로세스를 개선
• React 16.8 버전의 업그레이드와 최신 기술 스택의 적용
• 안정적인 마이그레이션과 리팩터링을 수행하면서도 프로덕션 서비스를 유지

가상자산 출금주소 등록 UX 개선.

2023.02 ~ 2023.02 (1개월) Typescript, React, emotion css

가상 자산 출금 주소 등록 Flow 를 간소화하고, UX 개선하여 사용자 이탈을 방지하고 CS 감소를 위한 프로젝트

목표

• 사용자의 불필요한 동작을 방지하기 위해 유효성 검사 결과를 휴대폰 인증 전에 표시
• 출금 주소의 유효성을 상세히 검증하고 검증 실패 메시지를 명확하게 표시하여 사용자가 정확한 정보를 입력하도록 유도
• 두 개의 단계로 나뉘어 있던 주소 등록 단계를 단일 단계로 통합하고 travel rule 적용 케이스를 분리

담당 업무

• 출금 지갑 주소와 수취인 정보를 한 번에 입력할 수 있도록 로직 및 UI를 수정
• 선택된 가상 자산 및 거래소별 추가 정보를 표시하고 입력하며, API 페이로드 생성 및 테스트
• 별도의 테스트 서버 배포 없이 storybook으로 디자인 QA를 수행하여 디자이너 및 기획자와 원활한 소통
• 인디케이터를 추가하고 유효성 검증 결과를 표시 위치를 변경하여 사용자의 이탈을 방지

유저 Flow 개선 및 통합*.***

2022.01 ~ 2023.02 (2개월) Typescript, emotion css

유저 정보(내국인/외국인, Kyc 인증 유무, 동결, 법인) 에 따른 서비스 사용 권한 Flow 를 개선하고 플랫폼별로 다르게 구현된 부분을 통합하여 사용성 증대 및 CS 감소를 위한 프로젝트

목표

• 서비스 이용 제한 및 권한별 케이스에 대한 정책 및 처리 방법을 정립

담당 업무

• KYC 단계를 완료한 사용자 중 아직 승인되지 않은 경우에 대한 화면 구성 및 로그인 후 이동 경로를 변경
• 개인 사업자 서류를 제출해야 하는 경우에 대한 화면 및 로직을 추가적으로 개발

성과

• 문제가 발생한 경우에도 적절한 화면을 표시하고 사용자의 케이스에 따라 조치를 취함으로써, 직접적인 고객 지원 서비스 수요를 줄이고, 문제 해결에 더욱 빠르게 대응 가능
• 카카오 상담톡으로 쉽게 이동할 수 있도록 하여, 고객 지원 이력 파악 및 관리가 용이

가상가산 예치 서비스 개선 및 신규 기능 개발.

2022.07 ~ 2022.11 (5개월) Typescript, zustand, React

고팍스의 가상 자산 예치 서비스인 고파이 사용성 개선 및 신규 기능 개발

목표

• 고파이 마이그레이션 진행
• 고파이 자유형 주말 입출금 활성화
• 신규 기능을 위한 페이지 추가 및 로직 수정

담당 업무

• 상품 목록 리스트 데이터 fetching과 UI 구성 로직 분리하여 성능 향상 및 유지 보수성 향상에 기여
• 가상자산 예치 금액 및 이자 계산을 위해 number 타입을 Big으로 변경하여 연산의 정확도를 높임
• 모달 상태 저장을 위해 Zustand 상태 관리 라이브러리 사용, 레거시 코드에서도 사용할 수 있도록 utils 함수로 분리
• 신규 페이지 디자인 적용을 위해 스크롤 다운 훅 생성

성과

• 고파이 누적 예치 금액이 1조 2천억원을 돌파하여 대규모 자산 운용 플랫폼으로서의 입지를 굳건히 함
• Zustand 전환 및 마이그레이션을 병행하여 독립적인 기능으로 유지 가능하게 함
• 신규 서비스 및 사용성 개선 등의 프로젝트 런칭은 경영사정상 무기한 연기될 수밖에 없었으나, 해당 업무에 대한 공로로 인해 동료 평가에서 커뮤니케이션 관련 높음 평가를 받음

Design System, Headless UI.

2022.10 ~ 2023.02 (4개월) Typescript, React, emotion css, storybook

고팍스 디자인 시스템을 도입하여 UI 개선, 서비스 내 디자인 통일하고 공용 컴포넌트 생성

담당 업무

• Atomic 디자인 패턴을 적용하고, 스토리북을 사용하여 UI 테스트를 수행함
• 컴포넌트 간의 데이터 전달을 위해 props drilling 방지를 위해 headless 패턴 및 Component Composition 패턴을 정의함
• useContext 훅을 사용하여 컴포넌트 트리에서 공유되는 데이터에 쉽게 접근할 수 있도록 구성함

성과

• 컴포넌트를 단순화하고, 데이터와 UI를 분리하여 코드를 깔끔하게 유지하도록 리팩터링함
• 변경사항에 유연하게 대응할 수 있도록 컴포넌트의 재사용성을 높임
• 팀 내에서 디자인 시스템을 공유하고, 일관된 UI를 유지할 수 있도록 함
• 사내 세미나에서 디자인시스템에 대해 발표하여 팀원들의 이해도를 높임

마케팅 광고 연동 및 GA Logging.

2022.05, 2022.10 (2개월) Typescript, Javascript

네이버 Ads, Tnk, GA 버전 업그레이드 및 이벤트 로깅

담당 업무

• 버튼 및 링크 클릭 시 효율적인 GA 태깅을 위해 이벤트 위임을 사용하여 개선
• window 객체에서 이벤트를 감지하고, element의 dataSet에 이벤트 정보를 저장하는 방식으로 개선

성과

• 각 버튼별로 onClick 이벤트 없이 한 곳에서 관리함으로써 응집도를 높일 수 있었으며, 에러 핸들링이 용이해짐