안녕하세요. 4년 차 프런트엔드 개발자 김승하입니다.

20대 시절 감사원에서 국가직 감사직렬 7급 공무원으로 처음 사회 경력을 시작하였습니다. 그러나 많은 고민 끝에 30살에 공무원을 의원면직한 후 독학으로 혼자 개발을 공부하여 이듬해에 개발자로 전직하였고, 주로는 Javascript, Typescript를 사용하는 프런트엔드 개발자로서의 경력을 쌓아왔지만 작년 약 10개월 정도는 네트워크 보안 관련 회사에서 Rust 언어를 사용하며 서버~클라이언트 전반에 걸친 프로덕트 개발 경험을 쌓았습니다.

정답이란 없는 개발의 세계에서, 개발자로서 저는 코드 한 줄 한 줄을 쓸 때뿐 아니라 그 어떠한 의사결정을 내릴 때에도, 반드시 왜?라는 질문을 던져보고 그에 대해 누구나 납득 가능할 만한 합리적이고 논리적인 근거를 갖추는 것이 개발자에게 가장 필요한 자세라고 생각합니다. 저는 제 스스로를 왜?라는 질문을 끊임없이 스스로에게 또 타인에게 집요하게 묻는 성향의 개발자라고 소개하고 싶습니다.

경력사항

  • 소프트웨어 엔지니어 @ 클럼엘(Rust)2024. 4. ~ 2025. 1. (10개월)
    yewgraphql
    • 이전까지의 경력과는 완전히 다른, Rust 언어를 사용하는 회사로의 이직이었습니다. 약 한 달 간의 회사 내 Rust 언어 온보딩 기간을 거친 뒤 Yew 프레임워크 기반의 Rust 웹 애플리케이션 개발에 본격적으로 참여하였습니다. DB부터 클라이언트까지 제가 직접 단독으로 진행한 작업으로는 다국어 지원 기능(언어 설정 변경 기능), 다크/라이트 색상 모드 토글 기능이 있으며, 그 외에 자잘한 작은 이슈들을 처리하며 애플리케이션의 유지보수를 진행하였습니다.
  • 프런트엔드 엔지니어 @ 이즐랩스(Typescript)(HTML5)(CSS3)2024. 1. ~ 2024. 4. (3개월)
    reactreact nativerecoiltailwindcssstorybookexpoesbuildrollupremixreact queryviteREST APIaws (EC2, Elastic Beanstalk, CodePipeline, CloudWatch)
    • android, iOS, web 각각의 클라이언트 환경에서 스토리북을 실행하여 실기기 UI 테스트가 가능하도록 디자인 시스템 초기 개발 환경을 구성하였습니다.
    • 이전까지는 같은 디자인의 UI 컴포넌트라 하더라도 모바일의 경우 react native, 웹의 경우 react로 따로 만들어야 했습니다만, 디자인시스템 UI 컴포넌트에 대해 한 번의 패키지 빌드로 React Native 컴포넌트를 웹 기반의 React 컴포넌트로 자동 변환하는 기능을 개발하여 개발자의 불필요한 중복 작업을 줄였습니다.
    • 사내 어드민 웹 사이트의 클라이언트단 개발을 단독 담당하여 진행하였습니다.
  • 프런트엔드 엔지니어 @ 캐처스(Typescript)(HTML5)(CSS3)2023. 9. ~ 2024. 1. (5개월)
    reactreact nativerecoiltailwindcssstorybookexporemixREST APIviteesbuildrollupcreate-react-appaws (EC2, Elastic Beanstalk, CodePipeline, CloudWatch)
    • React Native 기반 이커머스 애플리케이션 디자인 시스템 개발 담당자로서, 사내 디자인 UI 라이브러리를 제작하고 이를 프라이빗 패키지로 관리하였습니다.
    • 검색엔진 최적화(SEO) 효용을 극대화할 수 있는 리액트 기반 프레임워크 PoC(proof of concept)를 진행하였습니다.
    • 위 PoC의 과정 및 결과를 개발팀이 함께 스터디할 수 있는 내부 문서로 작성하여 공유하고, PoC 결과를 토대로 본래 create-react-app으로 구현되었던 애플리케이션의 Remix 마이그레이션을 진행하였습니다.
    • 참고: 회사의 경영 악화로 인해 경영진은 유통업 중심으로 사업 방향을 바꾸는 결정을 하면서 개발 사업이 중단되었습니다. 이에 따라 개발팀 전체가 이즐랩스라는 신설 법인으로 이동하게 됩니다. 이 중 신설 법인으로의 이직을 원하지 않았던 일부 동료 2~3명은 함께하지 않았지만, 개발 리드 포함 대부분의 팀원이 함께 이동하였으므로 기술적인 배경은 이즐랩스와 캐처스가 거의 동일합니다.
  • 프런트엔드 엔지니어 @ 닥터나우(Typescript)(HTML5)(CSS3)2022. 6. ~ 2023. 9. (1년 2개월)
    reactreact nativestorybooknext.jsstyled-componentvitereact querygraphqlREST APIantdantd-g2plot
    • (광고TF) 당시 광고 TF는 프런트엔드 개발자 1인과 백엔드 개발자 1인 단 두 명으로 구성된 임시 팀이었습니다. 광고 사업의 클라이언트단 개발을 단독으로 담당하는 팀원으로서, 앱 내 배너 광고 기능 mvp 기획에 주도적으로 참여하였고 및 앱 내 광고 배너 게재 기능 클라이언트단 전반을 개발하였습니다.
    • (광고TF) 관련 팀원들이 사내 어드민을 통해 내 각 배너별 광고 지표(기간별 노출 수, 클릭 수, CTR 등)를 조회할 수 있도록 하였고, 각각의 수치는 화면에서 표와 차트로 보여지도록 구현하였습니다. (차트 라이브러리 - antd g2plot 커스터마이징)
    • (광고TF) 그리고 광고 지표 조회 기능에 더해 사내 어드민 내에서 광고주를 위한 광고 성과 보고서를 자동으로 생성하여 PDF로 바로 출력할 수 있는 기능을 개발하였습니다. 이는 일이 많아 매일같이 야근을 해야만 했던 해당 팀원들의 노고를 조금이나마 줄여주고 싶었던 저의 의견으로 추가된 기능입니다.
    • (광고TF) 광고 기능 개발 중 사내 어드민에 많은 기능이 붙어야 했기에 번들러를 기존의 webpack에서 vite로 변경하는 마이그레이션을 진행하게 되었습니다.
    • (코어트라이브 팀) 가장 최근의 건강검진과 직전 건강검진 결과를 비교하여 1년간의 건강 지표 비교를 보여주는 연말연초 이벤트 피처 화면을 개발하였습니다. 이는 당시까지 회사 내에서 기획된 화면 중 가장 많은 인터랙션과 애니메이션으로 화려하게 꾸며진 화면이었는데, 저는 react native 애니메이션 기능과 웹 브라우저에서의 css 애니메이션 기능을 활용하여 디자인 요구사항을 기한 안에 모두 구현해냈고 건강검진 비교 결과를 인스타그램, 카카오톡 등 SNS에 바로 공유할 수 있는 기능도 개발하였습니다. 비록 당시 SNS 공유 기능은 안드로이드에서 온전히 작동하지 않는 문제가 있었지만 기한의 문제로 어쩔 수 없이 배포를 해야 했던 점은 아직까지도 아쉬움으로 남습니다.
    • (코어트라이브 팀) 비대면진료 진료 신청 화면 전체 리뉴얼 작업을 단독으로 진행하였습니다. 기본적인 인풋의 입력값을 검증하는 기능을 추가하고, 약 배송 방법에 따른 포인트 사용 범위 등 각종 조건을 고려하여 최종 결제 금액을 계산하고 노출하는 로직 등 디자인 변경 사항을 구현하기 위해 클라이언트단에서 필요한 다양한 기능을 덧붙였습니다. 또한 아이폰, 갤럭시 폴드/플립 등 다양한 디바이스에서 균일한 유저 경험을 제공할 수 있도록 화면을 구현하였고, 짧은 터치 혹은 긴 터치, 키보드 및 카메라 사용 등 모바일 환경의 화면 위에서 일어날 수 있는 다양한 유저 액션에 대한 핸들링 기능을 구현하였습니다.
    • (코어트라이브 팀 소속 - 헬스케어 스쿼드 지원) 서버에서 건강보험공단 스크래핑을 통해 보내주는 현재끼지의 유저 건강검진 결과를 바탕으로 비만도, 혈압, 혈당 등의 정보를 화면 위에서 가시적인 그래프로 보여주는 기능을 구현하였습니다. (차트 라이브러리 - react-native-chart-kit 커스터마이징)
  • 소프트웨어 엔지니어 @ 어퍼코리아(Javascript)(HTML5)(CSS3)2020. 12. ~ 2022. 6. (1년 7개월)
    reactnext.js(monorepo fullstack)mobxgraphqlrethinkDBantdmui(google material UI)emotionrechart
    • 본 회사는 ERP 웹 애플리케이션을 만드는 회사였습니다. 저는 여기서 전자세금계산서, 전자계산서 자동전표처리, 세금계산서 자료 비교, 세금계산서 승인번호 입력 기능의 화면 개발을 담당하였습니다.
    • 그와 더불어 화면 위에서 특정 조건에 맞게 테이블 셀을 드래그 & 드롭하여 ERP 전체에 사용되는 계정과목의 순서를 변경할 수 있도록 하는 계정과목 관리 페이지를 개발하였습니다.
    • 기존에 자바스크립트의 Number 타입 기반으로 되어 있던 수식 계산 부분을 오차 등의 이유로 BigNumber.js 라이브러리를 사용하여 문자열 기반의 계산이 되도록 프로덕트 코드 전체를 리팩터링하는 프로젝트에 참여하였습니다. 프로그램을 이루는 파일 전체를 수정하는 대규모 작업으로 저를 포함하여 세 명의 팀원이 참여하였는데, 저는 해당 프로젝트에서 프런트엔드 코드 영역 전체를 직접 리팩터링하였고, 백엔드 파트 중 graphQL schema 리팩터링도 추가로 진행하였습니다.
    • 프로덕트가 정식으로 론칭하기 직전 QA로부터 수집된 버그 중 프런트엔드에 해당하는 버그를 거의 대부분 제가 담당하여 수정하였습니다. 예를 들면 여러 개의 모달을 띄울 수 있는 상황에서 한 모달의 데이터가 업데이트 되었을 때 다른 모달에서 해당 업데이트가 반영되지 않는 문제를 수정한다거나, 모달의 드래그 가능 영역을 브라우저 내부 안으로 제한하여 사용자의 드래그 실수로 모달이 화면에서 사라지는 문제를 방지하거나, 클라이언트단에서 진행되는 자동 계산 기능에 발생하는 버그 등을 올바르게 수정하였습니다.
    • 렌더링과 관련 없는 불필요한 상탯값 관리 혹은 props를 하위 컴포넌트에서 상탯값으로 관리하는 등의 안티 패턴을 제거하고, 기존 클래스 기반의 React 코드를 Hook 기반으로 모두 수정하였습니다.
    • (신규 프로젝트) Next.js, recoil 기반 클라이언트 개발 환경 세팅을 포함하여 회사에서 새로 시작하는 신규 프로젝트의 프런트엔드 전체 개발을 담당하였습니다. (당시 신규 프로젝트에 참여한 인원은 프런트엔드 1인, 백엔드 1인으로 구성되었습니다.)
    • (신규 프로젝트) 엑셀 데이터로부터 파싱된 계정별 원장 데이터를 통해 재무상태표, 손익계산서 등 재무제표 전반과 비용 분석, 직원 생산성, 재무 비율 등 15종의 경영 분석 지표를 계산하는 서버 로직을 개발하였습니다.
    • (신규 프로젝트) 또한 그렇게 서버로부터 계산된 데이터를 클라이언트에서 각종 차트로 보여줄 수 있도록 화면을 구현하였습니다. (차트 라이브러리 - rechart 커스터마이징)
    • (신규 프로젝트) CSS Grid, Flex, Animation 등을 활용한 신규 사업 소개 웹 페이지 퍼블리싱을 담당하였습니다.