미리보기
기본 정보
Product Developer, 백보성 3년 차 프론트엔드 개발자로 초기 개발 단계부터 참여하여 서비스를 출시하고 운영을 해본 경험이 있습니다. 당시에 단독으로 시작한 프론트엔드 팀을 6명의 유능한 팀원들과 함께하는 팀으로 성장시켰습니다. 저는 MVP(Minimum Viable Product)를 실현하는 Product Developer로서의 성향이 강합니다. 최선의 선택을 통해 발빠르게 제품을 시장에 선보이는 것을 중요하게 여기며, 신속하게 대응하는 제품 개발에 집중합니다. 제품을 완성시켜 나가는 과정에서 핵심 기능에 초점을 맞추어, 다양한 부서와의 적극적인 소통을 통해 제품 출시 과정에서 마주치는 문제들을 주도적으로 해결해나갑니다.
기술 스택
TypeScript, JavaScript, React, Next.js, react-query, github-actions, zustand
경력
(주)비주얼
팀원 | Front | 재직 중
2024.05. ~ 재직 중 (6개월)
비주얼
주얼리 커머스 생태계를 혁신하는 플랫폼 비주얼에 합류하여 개발 환경을 모던화하는데 기여하고 있습니다.
뱅크몰
팀장 | 프론트엔드팀
2022.11. ~ 2024.02. (1년 4개월)
뱅크몰
누적 대출비교 금액이 약 670조를 돌파한 주택담보대출 전문 비교 플랫폼
플랫폼 전체 운영
플랫폼 전반의 성장을 주도하며, 개발을 넘어서 전략적 의사결정을 통해 지속적인 성과를 창출했습니다. 또한 부서 간의 긴밀한 협력을 통해 복잡한 문제들을 해결하고 플랫폼의 발전을 이끌어냈습니다.
Web과 Webview 형태로 제공하는App, 그리고 Admin를 개발 및 운영
- Web (Next.js)
- App (React Native)
- Admin (Next.js, Antd)
- 약 1년 가까이 주 1회 배포하는 프로세스를 만들고 유지해나가며 빠르게 제품을 출시하고 고객들에게 검증받는 환경을 만들었습니다.
- 담보대출, 대환대출
- 지속적이며 주기가 짧은 개선을 반복하며 고객 친화적인 제품을 만들었으며, 두 차례에 걸친 고객 중심의 대규모의 UI 개편을 성공적으로 수행했습니다.
- 금융사의 다양한 요청에 신속하게 대응하여 문제를 해결하는 데 적극적으로 해결책을 제시하며 중요한 역할을 수행했습니다.
- 이외에 시세조회, 대출 계산기, 고객후기, 회사소개, 뱅크몰 플러스 등의 서비스를 지속적으로 성장시켜 왔습니다.
Team Contributions
- TypeScript로의 점진적 마이그레이션
- 2023년 4월부터 2024년 2월까지, 총 2,200개의 JavaScript 파일 중 1,200여 개의 파일을 TypeScript로 성공적으로 마이그레이션했습니다. 이후 TypeScript로 새롭게 작성된 파일을 합쳐 약 TypeScript의 점유율을 0%에서 60%까지 올렸습니다.
- 기존 팀원들의 TypeScript 숙련도와 프로젝트 일정을 고려하여, 수정 빈도가 낮은 코드부터 순차적으로 TypeScript로 전환하는 전략을 채택했습니다. 이 접근법을 통해 모든 팀원들에게 TypeScript에 점진적으로 적응할 시간을 제공하며, 신규 프로젝트를 차질없이 진행할 수 있었습니다.
- 팀 빌딩과 관리
- 팀빌딩 초기부터 시작하여, 현재는 6명의 역량 있는 팀원들과 함께하는 강력한 팀으로 성장했습니다.
- 팀원들과 함께 효율적인 개발 컨벤션을 수립하고, 이를 통해 코드의 일관성과 가독성을 향상시켰습니다.
- 신뢰감과 정서적 친밀감을 바탕으로 한 Merge Request 프로세스를 도입하여, 팀원 모두가 개방적이고 수용적인 태도로 코드 리뷰에 참여하게 함으로써, 코드 리뷰 과정이 누구에게도 부담스럽지 않고 생산적인 활동이 되도록 만들었습니다.
이외에도 부서 경계가 없는 사내스터디 개최등 문화적인 기여를 했습니다.
액트베이스 유한책임회사
사원 | 클라이언트실
2021.08. ~ 2022.11. (1년 4개월)
뱅크몰에 팀장으로 파견되어 파견 직원들의 운영 및 관리, 클라이언트들과의 소통을 도맡아 진행했습니다.
프로젝트
대환대출
뱅크몰
2023.12. ~ 2024.01.
고객이 손쉽게 더 낮은 금리의 대출로 할 수 있는 대환대출을 챗봇 형태의 UI로 개발했습니다.
복잡하고 조건부로 분기가 달라지는 시나리오가 진행되면서 유저들에게 입력받는 값을 다루는 로직이 방대해지는 문제점이 있었습니다. 이 문제점을 전체 흐름을 다루는
hook과 사용자에게 입력 받는form을 관리하는hook을 만들어 관심사를 분리함으로써 복잡한 시나리오를 보다 손쉽게 다룰 수 있도록 해결했습니다.
빠르게 진행해야 했던 프로젝트 특성상, Mobile First 전략을 제시하고 설득하여 유입량이 많은 Mobile 페이지를 우선적으로 완성 후, PC에서 어울리지 않는 UI 요소들(ex.
BottomSheet) 만 교체하여 개발시간을 획기적으로 줄였습니다.
대출딜러 (출시예정)
뱅크몰
2023.07. ~ 2023.11.
ㅤ고객이 자신의 대출 조건을 등록하면, 대출 모집인들이 금리와 한도를 제안하는 역경매 형식의 중개서비스를 개발했습니다.
- 딜러용 웹과 앱의 설계 및 개발 단계에 직접 참여하여, 사용자(대출 모집인) 친화적인 인터페이스와 안정적인 기능을 제공하며 출시 준비를 성공적으로 마쳤습니다.
- 딜러용 웹과 앱의 설계 및 개발 단계에 직접 참여하여, 사용자(대출 모집인) 친화적인 인터페이스와 안정적인 기능을 제공하며 출시 준비를 성공적으로 마쳤습니다.
Tanstack-Query를 적극적으로 도입하여 병렬적인data fetching과cache를 통해 사용자 경험을 개선시켰습니다.- 핀테크서비스 취약점 점검
- 금융보안원에서 실시하는 핀테크서비스 취약점 점검받고 무사통과 했습니다.
오토론 / 개인회생
뱅크몰
2022.12. ~ 2023.06.
ㅤ자동차를 담보로 기존에 신용대출이 있어도 추가 한도를 신청할 수 있다는 장점을 가진 오토론과 사금융으로 내몰릴 가능성이 높은 개인회생자가 저축은행 등 금융권 내 대출 상품 비교 서비스를 받을 수 있는 개인회생 서비스를 개발했습니다.
챗봇 UI에서 사용자의 대화 상태, 이력, 사용자가 선택한 옵션 등의 상태 관리를 위해
Recoil을 사용했습니다.recharts를 사용해 자동차와 관련된 데이터를 그래프로 시각화 했습니다.framer-motion에서 제공하는 편리한 인터페이스를 바탕으로 챗봇 형태의 UI 개발을 주도하고, 디자인팀과의 긴밀한 협업을 통해 사용자 인터페이스를 지속적으로 개선하였습니다.오토론과 개인회생 서비스의 공통 UI와 플로우에 대한 코어 컴포넌트 개발을 통해 개발 시간을 단축했으며, iOS의 크로스 브라우징 이슈를 해결하는 데 기여했습니다.
주소체계 개편
뱅크몰
2022.09. ~ 2022.12.
ㅤ기존에 널리 사용되던 KB 주소 체계의 한계를 극복하기 위해, 새로운 주소 체계를 도입하는 프로젝트를 성공적으로 이끌었습니다.
- 주소 검색시 서버에 많은 호출을 하던 문제를
debounce와AbortController를 활용하여 풀어냈습니다. - 검색되지 않는 주소들에 대한 접근성을 개선했으며, 데이터 범위와 정확성을 크게 향상시켰습니다.
- 사용자 경험의 개선 뿐만 아니라, 전반적인 플랫폼 운영 효율성을 증대시켰습니다.
자기소개
"“Whatever the thing you wish to say, there is but one word to express it, but one verb to give it movement, but one adjective to qualify it; you must seek until you find this noun, this verb, this adjective.” - Gustave Flaubert
한국에서는 "정확한 상황에 어울리는 딱 하나의 단어가 있을 뿐이다"라는 표현으로 널리 알려져 있는 "일물일어설" 입니다. 비단, 글쓰기뿐만 아닌 코드를 작성할 때도 반드시 주의를 기울여야 하는 부분이라고 생각합니다. 각 변수명, 함수명, 타입 별칭을 선정함에 있어 항상 최적의 선택을 고민합니다. 이 과정에서 'Readability' 즉, 가독성이 코드 작성의 핵심 가치로 자리 잡았습니다.
읽기 좋은 코드, 동료가 사용하기 좋은 코드, 유지 보수와 확장에 용이한 코드를 작성하는 것은 코드를 작성할 때 제가 가장 중요하게 여기는 원칙입니다.
Frontend
React를 사용하여 대부분의 제품을 개발합니다.서버사이드 렌더링을 활용해서 초기 페이지 로딩속도를 개선하고 더 나은 유저경험을 주고자 노력합니다.
검색 엔진 최적화에 신경써서 개발하도록 노력합니다.
이를 보다 편리하게 개발하기 위해서
Next.js를 사용하는것을 선호합니다.재사용성이 높거나 비즈니스 로직은
custom hook으로 분리하여 개발하도록 노력합니다.
Tanstack-Query를 통해 서버 상태를 따로 관리하고 있습니다.JavaScript문법에 익숙합니다.Superset 개념의 정적 타이핑 툴인
TypeScript로 코드를 작성하는 것을 선호합니다.TypeScript의 강력한 타입시스템을 사용하는 것이 능숙하며 엄격하게 타입을 관리합니다.매년 추가되는
ECMAScript를 공부하고 큰 도움이 되는 문법들은 호환에 문제가 없게 적용합니다.
MSW를 사용해 더 실제적이고 효율적인 테스트 및 개발 환경에서 제품을 만들고 있습니다.서버에서 API 명세를 건네주고 API가 완성되는 동안 주로 사용합니다.
명세가 없을때에도 API 설계를 예측하며 작업하고, API 개발 전 서버 개발자와 의견을 주고받을때에도 사용합니다.
Context API, Redux, Recoil을 사용해 전역 상태를 관리하는것에 능숙하며, 지금은zustand를 통한 전역 상태 관리를 선호합니다.당연하게도 마크업과 스타일을 구현하는 것에 무리가 없고, 웹뷰 환경을 포함한 다양한 모바일 크로스 브라우징 경험을 겪었습니다.
css-in-js를 사용해 마크업하는 것이 능숙합니다. 최근에는vanilla-extract같은zero-runtime css에 관심이 많습니다.framer-motion를 사용해 간단한 인터랙션을 구현하는 것을 좋아합니다.스타일에 대한 관심사와 로직에 대한 관심사의 분리를 폴더 구조를 통해 해결하고자 합니다.
그리고 조금 더 통일된 스타일을 위해서
stylelint같은 도구의 도움을 받고 있습니다.
…rest
필요한 도구가 없다면 만듭니다. 최근에는 반복되는 폴더구조를 생성하는 번거로움을 줄이고자 vscode 확장프로그램을 만들었습니다.
Git을 사용한 형상관리에 익숙합니다.최대한 작은 작업단위로 커밋을 남기도록 노력합니다.
“어떻게” 보다는 누가보더라도 “어떤 작업을 했는지” 한눈에 알아볼 수 있는 커밋 메시지를 작성하려 노력합니다.
팀원들과 가장 알맞는 브랜치 전략을 수립하고 이를 지키려고 노력합니다.
그리고 이를 조금 더 잘 지키기 위해서
husky같은 도구의 도움을 받고있습니다.
코드에 제 자신을 투영하지 않습니다.
공개된 채널에서의 질문과 소통을 하고자 노력합니다.
협업 툴을 활용해서 업무도 DRY하게 하는것을 좋아합니다.
슬랙의 워크플로 등을 만들고 조직 전체에 제안하여 구성원들의 반복되는 작업을 줄이고자 노력합니다.
노션에 반복적으로 등록되는 템플릿을 만들어서 반복되는 작업을 줄이고 규격화하도록 노력합니다.
팀원간의 신뢰감을 형성하여 적극적인 소통으로 더 높은 수준의 제품을 만드는 능력이 탁월합니다.
대외활동
글 쓰는 또라이가 세상을 바꾼다 - 글또 9기
글또 소개
다양한 분야에서 활동하는 개발자들이 자신의 전문성을 바탕으로 글을 작성하며 서로 성장을 돕는 공간입니다. 매 2주마다 글을 작성하고 커피 챗등을 통해 각자의 글을 공유하고 피드백을 주고받습니다. 또한, 개발뿐만 아니라 삶의 철학이나 다양한 고민들을 함께 나누며 깊이 있는 대화를 이어나가고 있습니다.
Teo Conf 연사 (황폐화된 개발 환경을 기름진 개발 환경으로 만들기)
테오의컨퍼런스
Teo Conf(2023. 10. 28)
- "황폐화된 개발 환경을 기름진 개발 환경으로 만들기"라는 주제로 발표를 했습니다.
- 개발 문화가 부재한 환경에서 시작하여, 어떻게 건강한 개발 문화를 구축하고, 팀을 빌딩하며, 기술적 부채를 해결해 나갔는지에 대한 경험을 공유했습니다.
- 이 경험이 휘발되지 않도록 "힘들어하는 주니어들을 위하여" 라는 글로 기록해 두었습니다.
