미리보기

닥터나우에 프론트엔드 개발자로 2022년 하반기에 입사하여, 코어 트라이브 소속으로 유저앱 / 약사웹 / 의사웹 / CS웹의 개발을 맡아 진행하였습니다. 2023년부로 신설한 대면진료 스쿼드에 합류하여 대면진료 신규 런칭을 위한 병원웹 / 병원 접수 태블릿 / 유저웹 병원 서비스를 개발 후, 2023년 하반기부터 코어 트라이브 소속으로 비대면 진료 서비스 개선에 힘쓰고 있습니다.

원밀리언에 입사하여 약 1년 5개월간 프론트엔드 개발자로 근무하였습니다. 맡았던 프로젝트는 1M HomeDance / Admin / 스튜디오 / ERP가 있습니다. 1M HomeDance의 경우 CES 2022에서 LG TV의 신규 서비스중 일부로 소개되었습니다.

기술 스택

• Typescript, React Native, GraphQL, Styled-components, Redux-saga, React-query, Jest

주요 개발 내용

• 클러스터링된 약국 찾기 서비스 개발
• 영수증 인증 약국 리뷰 개발

기술 스택

• Typescript, Next.js, GraphQL, Styled-components, Recoil, React-query, Jest, PWA

주요 개발 내용

• 대면진료 크로스 플랫폼 서비스 신규 개발
• 병원 찾기
  • 앱과 웹에서 병원을 찾고 예약할 수 있는 서비스를 개발
  • 검색엔진에 노출될 수 있도록 SEO작업 및 고도화

개선사항 정리

• 문제상황
  • 비대면 진료가 허용되지 않은 상황일 때 기존 사용자들 사용할 수 있는 서비스가 없었습니다.
• 해결방안
  • 대면진료를 위한 병원 상세 페이지를 개발하였습니다.
  • 기존 비대면진료 리뷰들을 확인하여 근처 대면진료 병원을 선택할 수 있도록 서비스를 제공하였습니다.
• 결과
  • 비대면으로 해결할 수 없었던 각종 증상들을 진료볼 수 있는 선택지가 늘어서 사용자의 만족도가 증가하였습니다.

기술 스택

• Typescript, React Native, GraphQL, Styled-components, Redux-saga, React-query, Jest

주요 개발 내용

• AB테스트 신규 도입 추진
  • 팀 내 의사결정이 데이터기반으로 정해질 수 있는 기반을 다짐
• 메인 서비스 UX/UI 개편 후 퍼널 개선
  • 기존 홈화면에서 카테고리를 선택하는 앞단의 퍼널이 65%까지 감소하고 진료신청률은 25%까지 감소하는 등 사용률 급감
  • 개편 후 각각의 과목 버튼 선택률은 소폭 상승, 과목 전체보기는 11%에서 18.8%까지 상승
• 약국 조제시 상품구매 개발
  • 의약외품 및 건기식 상품 등을 살 수 있는 커머스 기능 개발을 진행함

개선사항 정리(AB테스트 신규 도입)

• 문제상황
  • 같은 시기에 지표를 비교할 수 없었기에 기능 배포후 사용률이 개선되었는지 알기 어려웠습니다.
  • 앱의 특성상 신규 기능 배포 후 장애 발생시 빠른 롤백이 어려웠습니다.
• 해결방안
  • 같은 시기의 유저군을 나눠 노출하는 것으로 사용률이 높은 유저군을 승자로 선택합니다.
  • 롤백이 필요한 경우에는 기존안의 비율을 100%로 높혀 문제되는 화면을 노출하지 않도록 합니다.
• 결과
  • A/B 지표를 보고 의사결정을 할 수 있는 조직문화가 생겼습니다.
  • 신규 기능 배포후 생기는 문제에 대한 대처가 빨라졌고, 서비스 안정성이 높아졌습니다.

기술 스택

• Typescript, React, GraphQL, Styled-components, Recoil, React-query, Jest

주요 개발 내용

• 서비스 알림 개편
  • 약사/의사의 알림이 인지되지 않는 문제가 있어, 서비스를 개편
  • 무응답 취소 비율은 35%에서 25%로 개선되었고, 사용자의 리드타임은 소폭 단축됨
• 의사/약사 정산 서비스 개발
  • 수기로 7일 걸리던 정산을 2-3일로 약 4일 단축
• 약국 상품구매 관리 개발
  • 커머스 기능을 통해 들어온 주문을 관리

개선사항 정리(서비스 알림 개편)

• 문제상황
  • 무응답 취소율이 높고(35%), 무응답으로 인한 리드타임이 가장 길어 서비스 만족도가 떨어지는 문제가 발생하였습니다.
  • 알림톡 수신 번호가 하나밖에 등록이 되지 않았습니다.
  • 알림톡이 한번만 가다보니 바쁜 상황에서는 알아차리기가 힘든 상황이 생겼습니다.
• 해결방안
  • 알림톡 수신 번호를 최대 3개까지 등록하도록 기능을 확장합니다.
  • 진료 및 조제를 시작하지 않은 환자가 있을 경우엔 5분에 한번씩 리마인드 알림톡을 제공합니다.
  • 3회연속 무응답으로 취소가 된 경우는 현재 진료 접수를 볼 수 없는 상황으로 인지하여 진료 상태를 off 시킵니다.
• 결과
  • 접수할 수 없는 상황의 의사/약사의 상태가 off되어 계속해서 무응답 취소가 일어나지 않게 되었습니다.
  • 진료 및 조제 접수를 인지하지 못하고 있던 의사/약사분이 5분 뒤에라도 상황을 인지하는 경우가 늘어나 취소율이 낮아지게 되었습니다.

기술 스택

• Typescript, Next.js, Styled-components, React-query, Recoil, Webpack+swc

주요 개발 내용

• JSP에서 Next.js로 마이그레이션
  • 기존 블로커 기능들 개선하여 초기 로드 속도 등 10배 가까이 속도를 개선시킴
  • FE 챕터에서 유지보수 및 추가 기능 개발을 할 수 있게 되고 안정적으로 서비스 운영이 가능해짐
• Next.js 도입 및 프로젝트 셋업
  • Next.js의 도입을 위해 세미나를 열고 팀내 기술스택으로 도입을 추진
  • 컴포넌트 설계부터 초안을 작성하여 팀원들이 쉽게 사용할 수 있도록 선행작업을 진행

개선사항 정리

• 문제상황
  • 불필요하게 페이지에서 필요한 API를 초기에 전부 요청하고 있었습니다.
  • 전체 요청이 완료되기 전까지 로딩 상태를 유지했습니다.
• 해결방안
  • 선택된 탭의 요청만 보내도록 초기 요청을 최소화했습니다.
  • 페이지별로 캐시정책을 정하여 불필요하게 재요청을 하지 않도록 제어했습니다.
• 결과
  • Permission 페이지에서 기존의 ERP는 사용자에게 보여지기까지 1.97초가 걸렸고 모든 데이터를 로드후 모든 컨텐츠가 보여지기까지는 16.47초가 걸렸습니다.
  • 리뉴얼된 ERP는 사용자에게 보여지기까지 215밀리초가 걸렸고 모든 데이터를 로드후 모든 컨텐츠가 보여지기까지는 1.42초가 걸렸습니다.

기술 스택

• Typescript, React, WebOS, Styled-components, Recoil, Webpack, Corejs3

주요 개발 내용

webOS 기반 어플리케이션 프론트엔드 영역 전체 개발 및 서비스 런칭

• VOD 플레이어 개발
  • 자막, 배속, 거울모드 등을 지원하는 플레이어를 개발
  • 외부 카메라와 연동하여 강사와 함께 춤 출 수 있도록 기능을 제공
• 앱 내 성능 최적화
  • TV 브라우저 환경의 성능이 좋지 못해 CPU 사용률이 높아 하드웨어 가속을 활용하여 최적화

개선사항 정리(앱 내 성능 최적화)

• 문제상황
  • 애니메이션 효과가 들어갈 때마다 CPU 리소스 부족으로 버벅임 현상이 발생했습니다.
  • LG WebOS 버전이 낮을수록 브라우저환경에서 제공하는 리소스 영역이 부족했습니다.
• 해결방안
  • css의 hack 기능을 이용하여 어떠한 속성이 변경될 것인지 브라우저에서 먼저 알려 하드웨어 가속을 사용할 수 있도록 하였습니다.
  • 리플로우를 최소화 하도록 리플로우가 발생하는 속성값을 변경하는 상황을 지양했습니다.
• 결과
  • 애니메이션이 발생하더라도 CPU 사용률이 70%내외에서 더 상승하지 않았으며, CPU 리소스 부족으로 인한 버벅임이 사라졌습니다.

기술스택

• Javascript, jQuery, JSP

주요 개발 내용

• JSP 유지보수
• 상품관리 개편

기술 스택

• Javascript, React, Redux, Styled-components

주요 개발 내용

• 성능 최적화
  • 폰트 깜박임을 막기 위해 preload하고, 폰트 용량을 줄여 최적화
  • 애니메이션 동작에서 reflow를 최소화할 수 있도록 css 작업을 진행함
• 수업 스케쥴 캘린더 개편

1600시간의 교육과정을 소화하였으며, 우수한 성적으로 3기를 수료하였습니다.

수상기록

• 성적 최우수 고용노동부장관상
• 프로젝트 최우수상 수상, 프로젝트 우수상 3회 수상