연락처
010-7614-7272
최종 업데이트일 2024.10.11
보유 기술
React, Next, Vue, Javascript(Typescript) Tanstack Query, Zustand, Vuex, Webpack, Vite
Lodash, HTML/SCSS, Storybook
학력
조선대학교 미학과 졸업(3.7점),
2010.3 ~ 2015.2
총 경력
4년 10개월

핵심역량

  • React, Javascript(Typescript), HTML, CSS 기본기가 탄탄한 웹 개발 실력
  • 프로젝트 세팅부터 개발, 배포(CI/CD), 운영까지 전체 라이프사이클 경험 보유
  • 글로벌/국내 고객향 서비스, 국내 백오피스 관련 경험 보유
  • 문제를 해결하기 위해  주도적으로 대안을 찾고 제안하는 업무 자세
  • 동료평가로 인정받은 타 부서와의 유연한 커뮤니케이션과협업 능력

기술상세

Web
  • 웹 접근성, SEO를 고려한 시멘틱 마크업 작성이 가능합니다.
  • CSS와 전처리기를 이용해 반응형으로 제품을 만들 수 있습니다.
  • Safari, Chrome 등 웹브라우저에 따른 디버깅 및 대응을 할 수 있습니다.
  • Webview를 이용해 모바일 환경에서 웹을 제공한 경험이 있습니다.
  • 브라우저의 API를 활용할 수 있습니다. (DOM, Fetch, Web Storage, IndexedDB, Geolocation 등)
Javascript/Typescript
  • Javascript 문법 및 JavaScript 엔진에서 사용되는 비동기 개념에 익숙합니다.
  • Typescript를 이용해 런타임 에러를 방지하며 개발할 수 있습니다.
  • Javascript 기반의 코드를 Typescript로 점진적으로 변경할 수 있습니다.
React, Vue, Next
  • 라이브러리, 프레임워크에 종속적이지 않는 개발자가 되려고 노력합니다.
  • React v16 ~ 18 환경에서 개발한 경험이 있습니다.
  • Vue2 환경에서 개발한 경험이 있습니다.
  • Next v13 ~ 14 환경에서 개발한 경험이 있습니다.
  • 새로운 라이브러리나 환경을 만날 때 능동적으로 학습할 수 있습니다.
Overall
  • git을 이용하여 동료들과 작업물을 충돌없이 형상관리할 수 있습니다.
  • githubActions를 활용해 지속적 통합/배포(CI/CD)를 할 수 있습니다.
  • Sentry, DataDog, Heap을이용해 런타임에러를 디버깅하거나 측정해 개선할 수 있습니다.
  • NPM을 활용해 퍼블릭 패키지를 배포하거나, 의존성을 관리 할 수 있습니다.
  • Webpack, Vite를 이용해 프로젝트를 구성할 수 있습니다.
  • Jest를 이용해 로직/UI 테스트코드를 작성해 코드 안정성을 유지합니다.

자기소개

개발자가 된 웹디자이너

웹디자이너로 IT 업계에 입문하여 관련 지식을 하나하나 익히다 보니, 어느새 개발자로 성장하게 되었습니다. 웹디자이너로 재직 중, 대표님께서 넌지시 던지신 "개발도 좀 해볼래?"라는 말에 덥석 학원을 등록하고 본격적으로 공부하기 시작했습니다.

코드를 입력할 때마다 눈앞에 탁탁 나타나는 결과물에 큰 희열을 느꼈고, 기능이 실제로 동작하는 모습을 보고 싶어 깊이 있게 공부하게 되었습니다. 그렇게 적성을 찾아 재미있게 일한 지 벌써 5년이 되어갑니다. 그 이후로 회사가 필요로 하는 기술은 두려워하지 않고 배우고 익혀 제 무기로 만들고 있습니다.

저는 비즈니스 성장에 기여하는 코딩을 좋아하며, 주도적으로 업무를 진행할 수 있는 환경을 선호합니다. 코드 리뷰와 피드백을 주고받는 것을 즐기며, 컴포트존에 머물기보다는 배우고 성장하는 삶을 지향합니다. 어려운 문제에 직면했을 때 혼자 오랫동안 고민하기보다는 질문을 통해 문제의 본질을 파악하고 동료와 함께 해결책을 탐색합니다.

상세경력

스팬딧 - 서비스 Spendit FE 개발 담당 (프리랜서)
24.1 ~ 24.9 (8개월)
스팬딧은 기업의 지출 및 비용처리를 투명하고 편리하게 관리할 수 있는 SaaS를 제공합니다.
(업력 9년, 연매출 15.2억원, 시리즈A, 사원수 20명)
  • 일반 전자 결재 기능 개발 (2024.04 ~ 2024.09)
    - 업무: 비용 결재만 가능하던 기 존기능에 일반 전자 결재 기능을 추가 개발
    - 역할 및 기여도: FE 개발/FE 개발 기여도 100%
    - 사용 기술: React, Typescript, Tanstack Query, CK-editor, NPM, Webview, Vite
    - 주요성과: 1)일반 전자 결재 기능을 기다리던 고객사 유치에 기여 2)보고서 작성에 필요한 rich text editor 도입 및 오픈소스화 3) html태그로 감싸진 내용 비교 라이브러리 NPM 배포 4) 웹뷰로 앱 유저도 rich text editor를 사용가능하도록 제안 및 개발􏰳
  • 유지보수 및 레거시 개선 (2024.01 ~ 2024.09)
    - 주요기능: 비용지출 관리, 보고서 작성 및 승인, 비용정책 관리 등
    - 주요 기능 중 버그로 인해 사용자가 겪고 있는 불편함 개선, 코드 리뷰로 코드 품질 관리
    - 사용기술: React, Redux, Typescript, Jest, i18n, Styled-component, Mantine-UI
    - 역할 및 기여도: FE개발/FE 개발 기여도(30%)
    - 주요 성과: 1) 자바스크립트로 작성된 코드를 타입스크립트로 점진적 개선 2)브라우저 콘솔 에러, 워닝을 60% 가량 제거하면서 QA과정에서 놓쳤던 이슈를 찾아내 픽스
  • 홈페이지 리뉴얼 (2024.03)
    - 사용 기술: Webflow, Javascript
    - 역할 및 기여도: FE 개발/FE 개발 기여도 100%
    - 주요 성과: 1) 기존 대비 홈페이지 이탈률 -8.4% 감소, 평균 세션 1분 14초 증가 2) UTM 트래킹이 가능하도록 코드를 추가해 마케팅팀 업무 조력
두꺼비세상 - 서비스 아파트너 FE개발 담당 (프리랜서)
23.9 ~ 24.1 (5개월)
아파트너는 두꺼비세상에서 제공하는 국내 200만 세대가 사용하고 있는 아파트 통합관리 솔루션입니다.
(업력 7년, 연매출 33.4억원, M&A, 사원수 76명, 아파트 앱 점유율 1위)
  • 아파트 통합관리 솔루션 리뉴얼 (2023.09 ~ 2024.01)
    - 업무: 기존 레거시 화면을 참고하여 기존 기능을 Next.js를 이용해 똑같이 개발􏰳
    - 주요 기능: 주민투표, 방문차량, 방송, 공동현관문, 입주자 관리 등
    - 역할 및 기여도: FE 개발/FE 개발 기여도 60%
    - 사용 기술: React, Next, Typescript, Redux, React saga, Tailwind-CSS
    - 주요 성과:  프론트와 백엔드를 분리하여 유지보수성 증대에 기여
두꺼비세상 - 서비스 피터팬의 좋은방 구하기 FE개발 담당 (정규직)
22.2 ~ 23.9 (1년8개월)
두꺼비세상은 MAU120만명이 이용하는 부동산거래 플랫폼 피터팬의 좋은방구하기 서비스를 제공합니다.
(업력 12년, 연매출 54.7억원, 시리즈C, 사원수 131명, 직거래 플랫폼 점유율 1위)
  • 관리비 항목 세분화 기능 개발 (2023.07 ~ 2023.08)
    - 국토부의 월세 관리비 세부내역 공개 의무화 추진에 따른 세부 작성 기능 개발
    - 역할 및 기여도: FE 개발/FE 개발 기여도 100%
    - 사용 기술: Vue, Vuex, Javascript, Php(lalavel), SCSS
    - 주요 성과: 1)정책 시점에 맞게 빠르게구현 2)유지보수를 고려해 레거시에 의존하지 않는 형태로 개발
  • 매물 필터링 기능 개선 (2023.05 ~ 2023.06)
    - 피터팬의 주요 타깃 연령대를 분석해 필터링 항목과 사용 방식 개선
    - 역할 및 기여도: FE 개발/FE 개발 기여도 50%
    - 사용 기술: Vue, Vuex, Javascript, SCSS
    - 주요 성과: 최상위 필터를 구분지어 불필요한 API 호출 방지, 기존 UI에서 스크롤에 가리던 액션 버튼을 명료하게 개선, 필터링 선택 단계에서 매물 개수를 알 수 있도록 개선
  • 네이버 Map API를 활용하여 클러스터링 기능 개발 (2023.03 ~ 2023.04)
    - 중개업체 클러스터링과 중개업체 전용 매물 페이지를 개발하여 광고 상품 고도화
    - 역할 및 기여도: FE 개발/FE 개발 기여도 100%
    - 사용 기술:  Vue, Vuex, Javascript(Jquery), Php(lalavel), SCSS
    - 주요 성과: 광고비 대비 높은 광고 효과를 원하던 고객 니즈 충족
  • 플랫폼 리뉴얼을 위한 디자인 시스템 구축 (2022.12 ~ 2023.02)
    - Vue, Php(lalavel)레거시 프로젝트 전체를 React로 리뉴얼 하기 위해 모노레포를 세팅하고 UI 컴포넌트와 Stroybook 제작
    - 역할 및 기여도: FE 개발/FE 개발 기여도 50%
    - 사용 기술:  React, Zustand, Storybook, Jest, Monorepo, Webpack, SCSS, Typescript
  • 요금 안내 랜딩페이지 구축 및 SEO 최적화 (2022.11)
    - 기존 이미지로 만들어진 랜딩페이지 반응형 마크업, 개발마케팅 부서에서는 A/B테스트를 위해, 영업 부서에는 모바일로도 고객과 소통하기 위해 중요한 작업
    - 역할 및 기여도: FE 개발, FE 개발 기여도 50%
    - 사용 기술: React, Typescript, Bootstrap CSS
    - 주요 성과: 기존 이미지 페이지를 마크업하여 웹접근성 향상 및 sitemap.xml을 추가하여 검색 결과 노출 1페이지 이내로 최적화
  • 프로젝트 전반 유지보수 (2022.02 ~ 2023.09)
    - 사용자가 겪고 있는 UI 버그나 기능 문제를 유관부서와 협업하여 해결하고 품질 유지
    - 역할 및 기여도: FE개발, FE 개발 기여도 30%
    - 사용 기술: Vue, Vuex, Javascript(Jquery), Php(lalavel), SCSS
    - 주요 성과: 제품 코드 품질을 높이기 위해 Typescript, SCSS 스터디를 진행하고 도입
에이치로보틱스 -글로벌 원격진료 서비스 Rebless FE 개발 담당 (정규직)
19.12 ~ 22.2 (2년2개월)
에이치로보틱스는 미국시장을 타깃으로 재활로봇과 원격진료 서비스를 제공하는 회사입니다.
(업력 7년, 연매출 11억원, 시리즈B, 사원수 14명)
  • 원격 재활 진료 시스템 개발 (2019.12 ~ 2021.05)
    - 달력으로 진료 예약/취소, 재활 운동 처방기능, 카드 결제, 페이팔 연동
    - 역할 및 기여도: FE 개발/FE 개발 기여도 100%
    - 사용 기술: Vue, Vuex, Javascript, Bootstrap, i18n, Webpack
  • 화상통화 기능 개발 (2021.05 ~ 2021.06)
    - AWS chime SDK를 활용해 화상통화 기능 개발
    - Firebase와 ServiceWorker를 활용해 웹 브라우저 알림기능 개발
    - 역할 및 기여도: FE 개발/FE 개발 기여도 100%
    - 사용 기술: Vue, Vuex, Javascript, AWS chime, Firebase,  ServiceWorker, IndexedDB
  • HDS (Hrobotics Design System) 개발 (2021.07 ~ 2022.01)
    - 자사 디자인 시스템 구축, 시스템 가이드 제작
    - 역할 및 기여도: FE 개발/FE 개발 기여도 100%
    - 사용 기술: Vue, Vuex, Javascript, SCSS
    - 주요 성과: 프로젝트 내 디자인 요소를 통일하고 코드 재사용성 증대
  • 랜딩페이지, 홈페이지 개발 (2021.07 ~ 2022.01)
    - 제품 홍보용 랜딩페이지와 자사 채용, IR 자료, 브랜딩을 위한 홈페이지 개발
    - 역할 및 기여도: FE 개발/FE 개발 기여도 50%
    - 사용 기술: React, ContextAPI, Javascript, CSS

개발 이야기

화상통화 기능을 빠르게 구현에 고객의 반응을 보고싶은데 가능할까요?

회사는 마켓핏을 찾기 위해 여러 비지니스 모델을 시도하는 중이었고, 코로나가 시작되며 서비스의 방향을 화상진료가 가능한 재활 의료기기로 시도해 보고자 하였습니다. AWS에서 크레딧을 지원받고 있던 찰나여서, AWSchime SDK를 이용해 기능을 구현하기로 하였습니다. 워낙 초기 스타트업이라 기획, 디자인도 없이 개발을 시작하였습니다. 레퍼런스를 찾아가며 마이크와 카메라 켜기/끄기 기능, 카메라 전환 기능, 전화 걸기, 끊기 기능, 의료노트기능 등 플로우를 직접 기획하고 디자인해 완성하였습니다. 개발팀이 하나되어 일한 덕분에 영업팀에서는 ‘화상 통화 가능'이라는 문구를 내세워 고객 홍보를 할 수 있었습니다. 신입 개발자이면서, 혼자 프론트엔드 개발자로 일할때여서 포기하지 않고 밤새 만든 기능이 회사에 도움돼 매우 뿌듯했던 기억으로 남아있습니다.

브라우저가 닫혀있을 때도 사용자에게 알림을 보낼 수는 없을까요?

화상 통화 기능을 구현하기는 했지만, 실제 사용할 때 불편함이 있었습니다. 예약된 시간에 환자가 화상 진료실에입장하면, 의사에게 알림이 가야 하는데 의사의 브라우저가 꺼져있으면 환자의 입장을 알려줄 방법이 없었습니다.이때 브라우저가 꺼져있을 때도 동작하는 serviceworker를 이용해 firebase 알림을 받아 브라우저에서 알림을보내도록 기능을 구현하였습니다. 의사가 알림을 바로 확인하지 못하거나 실수로 끄더라도 지난 알림 리스트를 볼수 있도록 serviceworker에서 접근할 수 있는 indexedDB에 적재하여 알림 목록 기능을 구현하여 서비스 완성도를 높였습니다. 주어진 문제를 기술적으로 해결했다는 것에 기뻐 개발의 매력에 더 빠지는 계기가 되었습니다.

텍스트 에디터 작성 전후를 사용자에게 쉽게 보여줄 수 없을까요?

전자 결재 기능 중 텍스트 에디터는 누가, 무엇을, 어떻게 변경했는지가 중요한 정보였습니다. 단순히 텍스트의 전후변경사항을 비교하는 것은 쉽지만, HTML태그로 감싸진 텍스트와 이미지, 테이블의 전후 변경사항을 비교하는 것은 쉽지 않았습니다. 믿었던 NPM에서도 완벽하게 비교 결과를 리턴해주는 라이브러리를 찾을 수 없었고, 제한된 기간 안에 로직을 직접 구현하기도 어려운 상황이었습니다. 우선 가장 근접한 결과를 리턴해주는 오픈소스를 찾아냈고, 기획 요구사항에 맞게 코드를 로직을 수정해 삭제된 내용은 삭제선과 붉은색 배경을, 추가된 내용은 초록색 배경을 넣어 전자 결재 기능의 완성도를 높였습니다. 문제 해결을 위해서는 라이브러리에 의존할 것만이 아니라, 라이브러리를 부수고 재조립해 만들수도 있다는 것을 경험하고 자신감을 얻게 되었습니다. 이후 같은 어려움을 겪고 있을개발자를 위해 개선한 비교 로직을 오픈 소스로 배포하였습니다.

기타활동

사내 스터디 활동
필요한 기술을 동료들과 스터디하여 회사 프로젝트에 도입하였습니다.
스터디 주제
  • Typescript 도입하기
  • SCSS 도입하기
  • 핵사고날 아키텍처 구조 이해하기
사이드 프로젝트
회사에서 채울 수 없는 기술적 욕심과 호기심은 사이드 프로젝트를 이용해 채우고있습니다.
주요 프로젝트
  • 웹플로우로 만든 국내 프론트엔드 개발자 포트폴리오 사이트 모음 (둘러보기)
  • 스프레드시트를 DB로하여 회사의 현황을 보여주는 대시보드 (둘러보기)
기술 블로그
학습한 내용을 기술 블로그에 정리해 공유하고 있습니다.
주요 내용
  • 웹브라우저 렌더링 원리
  • 프론트엔드 기술로 서비스 최적화하기
  • 리액트 제대로 알고 쓰기
  • 왜 프론트엔드 실무에서 테스트코드를 짜기 어려울까?

함께 일한 후기

Spendit PM
2024.09 from LinkedIn
개발 업무 능력 뿐만 아니라 책임감과 성실성, 인내심, 그리고 항상 의견과 피드백에 수용적인 태도를 갖춘 최고의 프론트 개발자십니다.
Spendit UI/UX Desinger
2023.09 from LinkedIn
그녀와 함께 일할 수 있다는 건 행운입니다💖
Geosoft Frontend Engineer
2023.09 from wishket
지오소프트 레드캡 모빌리티 관제서비스 프로젝트에서 퍼블리셔로 업무 맡아 주셨습니다. 퍼블리셔로 능력이 있으신 분이며, 전문성도 경력 대비 매우 탁월합니다. 소통도 원활하여 협업이나 커뮤니케이션에 문제가 없었습니다. 지각이나 결근이 한 번도 없었을 정도로 근태도 훌륭하십니다. 다른 분들에게도 추천드립니다.
피터팬의 좋은방구하기 Data Engineer
2023.06 from Rocketpunch
항상 꼼꼼하며 협업하는 사람과 의사소통을 자주 하려고 노력합니다.결과물에 대해서도 피드백과 개선과정을 적극적으로 제시하며, 서비스 개선을 위하여 노력하는 인원입니다.