미리보기

보이그룹 오디션 프로그램 웹뷰 화면 개발

• MAKEMATE1 프로그램 투표 웹앱 화면 개발

• i18n 모듈을 활용한 다국어 처리

• Nuxt3(Vue3)로 iOS, Android Webview 개발

• 아티스트 페이지 공유 시 정보 표시를 위한 meta(og tag) 작업

디자인 시스템 구축

• Vue2 -> React로 마이그레이션을 위한 디자인 시스템 구축 작업

• Storybook을 활용하여 디자이너와 개발자 사이의 커뮤니케이션 도구로 사용

• 메인화면, 이벤트 메뉴 화면을 디자인시스템이 적용된 화면으로 교체

부모님앱 유지보수

• 마케팅을 위한 A/B 테스트 적용

• UX와 관련된 버그를 수정하여 사용성 높임 (앱리뷰 점수 약 1~2점 상승)

선생님앱 프로필 사진 등록 및 전자계약서 제출 기능 개발

선생님 정보 등록 시 프로필 사진을 앱에서 직접 등록하고 관리자의 결과에 따라 상태여부 노출

• imgcompress 라이브러리를 사용하여 이미지 크기 80% 압축

• 앱에서 직접 올림으로써 사용자 이용률 개선, 등록건 수 증가

• 모두싸인 이용 건수를 줄여 연간 약 1800만원의 견적비용을 줄임

• 싸인 이미지는 signature_pad 라이브러리를 사용하여 구현

• Google Cloud Function, playwright 활용

SNS로그인 기능 추가

카카오, 애플 로그인 기능 추가에 따른 기존회원가입 플로우 수정

• AppleJS를 이용해서 로그인 기능 추가

• Kakao sdk로 로그인 기능추가

• 기존회원의 카카오 계정 연동률을 높이며 기존 유저의 카카오채널 추가 수 100% 증대

부모님앱 화면 개편

• 여러스텝에 걸쳐 볼 수 있던 화면을 하나의 화면으로 통합

• 모바일 터치뿐만 아니라 마우스로도 사용할 수 있도록 기능추가

자란다 웹페이지 개편

• 반응형 퍼블리싱

SOA Tool 추가 기능 개발 및 유지보수

Electron, React로 구현된 데스크탑 앱의 추가 기능 개발 및 유지보수

• Electron IPC통신을 이용해 데이터를 연결해서 볼 수 있는 기능을 추가하여 사용자에게 명확한 데이터 전달

• 기능별 상태관리는 React Context API 를 분리하여 적용함으로써 Component별로 필요한 데이터를 선택하여 받을 수 있도록 함

• UI 디자인 시스템 통합

• 데이터 통신이 시간지연함수(setTimeout)로 되어 있던 부분을 Promise로 변경하여 타이밍이슈 해결

Demo 시연용 웹페이지 개발

자동차 신호를 시각적으로 볼 수 있는 Demo 시연용 페이지 개발

• 차량 정보를 볼 수 있는 페이지 디자인(PC, Tablet, Mobile) 및 UI 구현

• mqtt client를 통해 받은 차량 정보를 실시간으로 웹페이지로 전달해야하기 때문에 Socket.io 를 이용하여 UI에 반영

• Socket Client의 customHook을 작성하여 각 Component에서 필요한 데이터만 받을 수 있도록 구현

• 전역 상태관리는 실시간으로 변경되는 데이터가 많아 Redux를 적용하여 실시간으로 변동되는 데이터의 영향을 받는 곳만 리랜더링 하도록 분리

• json포맷으로 된 config파일을 로컬서버(Node.js)에서 읽고, 해당 설정에 따른 response 전송 및 event 제어

테스트용 UI 프로그램 개발

테스트용 소프트웨어를 CLI를 사용할 줄 모르는 사용자도 쉽게 사용할 수 있도록 지원해주는 React기반 UI 데스크탑 앱 개발

• UI 화면 구현

  • Connection 상태, 테스트가 가능한 항목, 테스트 실시간 진행상황, 진행한 테스트의 패킷 로그, 테스트 설정항목을 지정할 수 있는 화면 UI 디자인 및 개발

  • 실시간으로 처리해야하는 Component는 따로 분리하여 리랜더링 최소화

  • 각 Component 별 필요한 전역 상태관리가 필요하나 규모가 크지않아 Context API를 사용

  • 주로 사용하거나 즐겨찾는 테스트 리스트(preset)를 저장, 삭제, 수정할 수 있는 기능 구현(DB)

  • 테스트 개수, 성공/실패 항목, 소요시간, 로그 세부내용을 확인할 수 있도록 구현

  • 테스트 진행 중 확인할 수 있는 패킷 로그는 최근 500개 항목을 출력하여 테스트 시간 절감(기존 1시간 > 현재 약 40분)

• 파일 저장 기능 구현

  • 테스트한 패킷 로그와 테스트 결과 저장 기능 구현

  • 패킷 로그를 앱 내에서 불러올 경우 뷰어 제공

  • Electron을 이용하여 파일 빌드

자사 홈페이지 리뉴얼 작업

• React로 SPA 페이지 작업

자사 사이트 신규 제작 및 유지보수

• Cafe 24 쇼핑몰 솔루션을 이용한 페이지 퍼블리싱

• SEO 설정

• 리뉴얼 디자인 시안 제작 및 수정

• 구글, 네이버 웹마스터 도구를 이용한 검색엔진 등록

• 사이트 유지보수