- 끊임 없는 도전을 통해 꾸준히 성장해나아가고 있습니다.
- 성능 최적화과 클린 코드에 대해 고민하고, 실제 프로젝트에 적용합니다.
- 개발 과정에서 다양한 고민을 마주하는 것, 그리고 그 고민을 해결하는 것을 좋아해요.
- 실력과 소통 능력을 모두 갖춘 '같이 일하고 싶은 개발자'가 되려고 노력합니다.
- 사용자에게 불편한 점을 찾고 개선을 통해 사용성을 증진한 경험이 있습니다.
Work Experience
(주)아데나소프트웨어
Sticpay 서비스
상대방이 어디에 있든 실시간으로 송금/수취가 가능한 온라인 e-wallet 서비스
Next.js, TypeScript, Emotion.js, Recoil
인증 정보 쿠키로 마이그레이션
스토리지 기반 인증을 쿠키 기반으로 전환하고 데이터 암호화를 적용하여 보안을 강화하였습니다. 이를 통해 서브도메인이 다른 두 서비스 간 인증 정보 공유 문제를 해결하였습니다.
SVG 스프라이트 도입으로 성능 개선
국가 선택 UI에서 260개의 국기 이미지를 개별적으로 요청하여 발생하는 성능 저하 문제를 발견했습니다. 이를 해결하기 위해 SVG 스프라이트 기법을 도입하고, 로컬과 S3 환경에서 모두 사용할 수 있는 스프라이트 이미지 생성 스크립트를 개발했습니다. 결과적으로 이미지 요청 횟수를 260회에서 1회로 줄여 페이지 로딩 속도를 획기적으로 개선했습니다
SSO 계정 연동 중 API 요청 취소 문제 해결
페이지 이탈 시 API 요청이 중단되지 않도록 keepalive 옵션을 활용했으며, 요청 완료 후 페이지가 종료되도록 처리했습니다.이 방식을 SSO 계정 연동에 적용하여 polling 기반의 안정적인 통신을 구현했습니다.
React 18 마이그레이션
React 17과 Node 16 환경에서 발생하는 기능 제약을 해결하기 위해 React 18 마이그레이션을 진행했습니다. 먼저 Docker를 활용해 Node 20 환경을 구성했고, 이후 React 18로의 업그레이드를 진행했습니다. React Router, React Query 등 주요 라이브러리의 호환성 문제를 해결하며 안정적으로 마이그레이션을 완료했습니다.
Main 리뉴얼
이미지 최적화를 통한 성능 개선
메인 페이지의 이미지들을 WebP 형식으로 변환하고 뷰포트 밖 이미지에 지연 로딩을 적용하여 성능을 개선했습니다. 또한 WebP 미지원 브라우저를 위해 picture 태그를 활용해 PNG를 대체 제공하여 호환성을 확보했습니다. (모바일 LightHouse 26 → 72)
Money In&Out 리뉴얼
입출금 페이지 구조 개선
페이 메소드별로 개별 페이지를 만들어야 하는 입출금 시스템의 비효율적인 구조가 있었습니다. 페이 시스템을 카테고리화하고 서버 데이터에 따라 동적으로 처리되는 구조로 재설계했습니다. 그 결과 전체 페이지 수를 70% 줄이고, 새로운 페이 추가 시 별도 페이지 생성 없이 즉시 대응할 수 있게 되었습니다
많은 페이지를 관리하기 위해 퍼널 도입
각 카테고리마다, 페이마다 사용자에게 받아야하는 데이터가 많아 여러 스텝으로 이루어진 페이지가 많았습니다. 퍼널 간 상태를 관리하면서 단계를 명시적으로 이동시킬 수 있도록 useFunnel 이라는 custom hook을 만들어 사용하였습니다.
다이어그램을 활용한 복잡한 기능 개선
히스토리와 문서 없이 코드만으로 파악해야 했던 계정 연동 기능을 리뉴얼하며, 코드 분석을 통해 성공/실패 케이스를 포함한 상태 다이어그램을 작성했습니다. API 응답별 상태 흐름을 시각화하여 팀에 공유했고, 이를 통해 복잡한 기능을 효과적으로 구현했습니다. 작성된 다이어그램을 문서화하여 향후 유지보수성을 높이고 팀의 개발 생산성 향상에 기여했습니다.
Sticpay API Docs
STICPAY에서 제공하는 API에 대한 문서를 페이지로 제공하는 서비스
TypeScript, Next.js, App Router, Node 20
문서 관리 편의 개선
PDF 형태로 관리하던 API 문서를 MDX 기반 웹 페이지로 전환했습니다. MDX 파일을 로컬에서 관리하고 페이지에서 직접 렌더링하는 방식을 도입하여 문서 관리와 업데이트가 용이한 시스템을 구축했습니다.
API 문서 검색 기능
로컬 MDX 파일 기반의 문서 검색 시스템을 구현했으며, 퍼지 검색 알고리즘을 도입하여 유사 단어까지 검색 가능한 기능을 추가했습니다. 이를 통해 정확한 검색어를 모르는 사용자도 원하는 문서를 쉽게 찾을 수 있도록 개선했습니다.
검색 시스템 사용성 및 접근성 개선
검색 결과 내 키보드 네비게이션을 구현하고, 전역 단축키(cmd+k)로 검색창에 빠르게 접근할 수 있도록 했습니다. ARIA 속성을 활용해 웹 접근성을 준수하여 모든 사용자가 편리하게 검색할 수 있도록 개선했습니다.
Sticplay 신사업 개발
STICPAY에서 운영하는 iGaming 고객을 위한 캐시백 서비스
Node 16v, Zustand, next-i18next
다국어 언어 지원을 위한 i18n세팅
빌드 시마다 발생하는 다국어 API 호출로 인한 서버 부하 문제를 발견하고, 번역 데이터 자동화 스크립트를 구현하여 CI/CD 파이프라인에서만 실행되도록 개선했습니다. 이를 통해 불필요한 API 호출을 제거하고 서버 안정성을 확보했습니다
로그인, 2FA 연동 및 페이지 접근 제어
Next.js middleware를 활용하여 사용자 인증 시스템을 개선했습니다. 기존에는 페이지 이동마다 클라이언트에서 권한을 체크하여 화면이 잠시 노출되었다가 리다이렉션되는 문제가 있었습니다. Middleware를 도입하여 페이지 진입 전 서버에서 권한을 검증하도록 개선했고, 이를 통해 화면 깜빡임 현상과 동시성 문제를 해결했습니다.
Team Project
깃허브 활동으로 나만의 귀여운 펫을 키워보세요. 매일 커밋하고 PR을 올리면서 펫이 성장하고 레벨업하는 재미를 느낄 수 있습니다.
- Github 잔디를 이용해 포인트를 얻고, 펫을 모아 Github를 꾸미는 서비스
- 사용자와 Github Issue을 통해 소통하며 꾸준히 서비스 개선 진행중 (서비스 내 피드백 폼을 Github issue과 연결 -> Blog)
- 총 사용자 4000명대/Github Star > 1000
- 외국 사용자를 타겟으로 하기 위해 다국어 기능 제공
- remix(admin), next.js(main)을 모노레포로 구성, 공통적으로 사용하는 api, ui 등을 package로 분리하여 사용
동료의 익명 피드백으로 자신의 성향과 장단점 등을 파악해요. 나의 강점은 살리고, 약점은 보완하기 위한 익명의 피드백 수집 및 통계 서비스.
- 정식 출시 3일만에 사용자 1300명 달성
- SSR에서 동적으로 커리어명함 이미지 생성 및 다운로드
- Vitest, testing library로 선언적인 테스트 코드 작성
- GA, Mixpanel을 이용한 사용자 흐름 분석, 인트로 스킵 기능을 추가해 이탈률을 18%에서 10%로 개선
- DND기능 구현 중 기술적인 어려움 발생, 디자이너와 소통 끝에 대안을 제시하여 해결
