프론트엔드 개발자

박소희

React, Angular, Vue를 사용하여 SPA와 웹앱에 사용되는 Webview 구현작업을 주로 진행하였습니다.
주로 React Native, Flutter로 만들어진 앱의 Webview를 담당했고, 
작업 시 Android와 iOS에서 최대한 동일한 사용자 경험을 할 수 있도록 만드는것을 추구합니다.

Typescript 사용이 익숙하며, 각 라이브러리/프레임워크 간의 마이그레이션 경험이 있습니다. 
(Vue2 -> React, Angular -> React)
Electron을 이용하여 크로스플랫폼 데스크톱 앱을 개발한 적있습니다.

유연함

신뢰

긍정적

적응력

보이그룹 오디션 프로그램 웹뷰 화면 개발<ul><li>MAKEMATE1 프로그램 투표 웹앱 화면 개발</li><li>i18n 모듈을 활용한 다국어 처리</li><li>Nuxt3(Vue3)로 iOS, Android Webview 개발</li><li>아티스트 페이지 공유 시 정보 표시를 위한 meta(og tag) 작업</li></ul>디자인 시스템 구축<ul><li>Vue2 -&gt; React로 마이그레이션을 위한 디자인 시스템 구축 작업</li><li>Storybook을 활용하여 디자이너와 개발자 사이의 커뮤니케이션 도구로 사용 </li><li>메인화면, 이벤트 메뉴 화면을 디자인시스템이 적용된 화면으로 교체</li></ul>

부모님앱 유지보수<ul><li>마케팅을 위한 A/B 테스트 적용</li><li>UX와 관련된 버그를 수정하여 사용성 높임 (앱리뷰 점수 약 1~2점 상승)</li></ul>선생님앱 프로필 사진 등록 및 전자계약서 제출 기능 개발선생님 정보 등록 시 프로필 사진을 앱에서 직접 등록하고 관리자의 결과에 따라 상태여부 노출<ul><li> imgcompress 라이브러리를 사용하여 이미지 크기 80% 압축</li><li>앱에서 직접 올림으로써 사용자 이용률 개선, 등록건 수 증가</li><li>모두싸인 이용 건수를 줄여 연간 약 1800만원의 견적비용을 줄임</li><li>싸인 이미지는 signature_pad 라이브러리를 사용하여 구현</li><li>Google Cloud Function, playwright 활용</li></ul>SNS로그인 기능 추가카카오, 애플 로그인 기능 추가에 따른 기존회원가입 플로우 수정<ul><li>AppleJS를 이용해서 로그인 기능 추가</li><li>Kakao sdk로 로그인 기능추가</li><li>기존회원의 카카오 계정 연동률을 높이며 기존 유저의 카카오채널 추가 수 100% 증대</li></ul>부모님앱 화면 개편<ul><li>여러스텝에 걸쳐 볼 수 있던 화면을 하나의 화면으로 통합</li><li>모바일 터치뿐만 아니라 마우스로도 사용할 수 있도록 기능추가</li></ul>자란다 웹페이지 개편<ul><li>반응형 퍼블리싱</li></ul>

SOA Tool 추가 기능 개발 및 유지보수Electron, React로 구현된 데스크탑 앱의 추가 기능 개발 및 유지보수<ul><li>Electron IPC통신을 이용해 데이터를 연결해서 볼 수 있는 기능을 추가하여 사용자에게 명확한 데이터 전달</li><li>기능별 상태관리는 React Context API 를 분리하여 적용함으로써 Component별로 필요한 데이터를 선택하여 받을 수 있도록 함</li><li>UI 디자인 시스템 통합</li><li>데이터 통신이 시간지연함수(setTimeout)로 되어 있던 부분을 Promise로 변경하여 타이밍이슈 해결</li></ul>Demo 시연용 웹페이지 개발자동차 신호를 시각적으로 볼 수 있는 Demo 시연용 페이지 개발<ul><li>차량 정보를 볼 수 있는 페이지 디자인(PC, Tablet, Mobile) 및 UI 구현</li><li>mqtt client를 통해 받은 차량 정보를 실시간으로 웹페이지로 전달해야하기 때문에 Socket.io 를 이용하여 UI에 반영</li><li>Socket Client의 customHook을 작성하여 각 Component에서 필요한 데이터만 받을 수 있도록 구현</li><li>전역 상태관리는 실시간으로 변경되는 데이터가 많아 Redux를 적용하여 실시간으로 변동되는 데이터의 영향을 받는 곳만 리랜더링 하도록 분리</li><li>json포맷으로 된 config파일을 로컬서버(Node.js)에서 읽고, 해당 설정에 따른 response 전송 및 event 제어</li></ul>테스트용 UI 프로그램 개발테스트용 소프트웨어를 CLI를 사용할 줄 모르는 사용자도 쉽게 사용할 수 있도록 지원해주는 React기반 UI 데스크탑 앱 개발<ul><li>UI 화면 구현<ul><li>Connection 상태, 테스트가 가능한 항목, 테스트 실시간 진행상황, 진행한 테스트의 패킷 로그, 테스트 설정항목을 지정할 수 있는 화면 UI 디자인 및 개발</li><li>실시간으로 처리해야하는 Component는 따로 분리하여 리랜더링 최소화</li><li>각 Component 별 필요한 전역 상태관리가 필요하나 규모가 크지않아 Context API를 사용</li><li>주로 사용하거나 즐겨찾는 테스트 리스트(preset)를 저장, 삭제, 수정할 수 있는 기능 구현(DB)</li><li>테스트 개수, 성공/실패 항목, 소요시간, 로그 세부내용을 확인할 수 있도록 구현</li><li>테스트 진행 중 확인할 수 있는 패킷 로그는 최근 500개 항목을 출력하여 테스트 시간 절감(기존 1시간 &gt; 현재 약 40분)</li></ul></li><li>파일 저장 기능 구현<ul><li>테스트한 패킷 로그와 테스트 결과 저장 기능 구현</li><li>패킷 로그를 앱 내에서 불러올 경우 뷰어 제공</li><li>Electron을 이용하여 파일 빌드</li></ul></li></ul>자사 홈페이지 리뉴얼 작업<ul><li>React로 SPA 페이지 작업</li></ul>

자사 사이트 신규 제작 및 유지보수<ul><li>Cafe 24 쇼핑몰 솔루션을 이용한 페이지 퍼블리싱</li><li>SEO 설정</li><li>리뉴얼 디자인 시안 제작 및 수정</li><li>구글, 네이버 웹마스터 도구를 이용한 검색엔진 등록</li><li>사이트 유지보수</li></ul>