미리보기

• React Native 기반의 모바일 서비스 Dr.Listen 개발

• 노드 기반의 콘텐츠 에디터 Zuicy Studio 개발

• AI 면접 관리용 백오피스 서비스 Viewinter Company, Viewinter Admin 개발

• 서비스 랜딩 페이지 개발

  • https://zuicy.ai

  • https://drlisten.ai

• 프론트엔드 팀 내 디자인 시스템 컴포넌트 개발 기여

• 국내 여행 투어 상품을 판매하는 원데이코리아 홈페이지 유지보수

• 투어 상품을 추천하는 챗봇 서비스 Tumakr 개발

• 투어 상품 및 상품 판매 이력을 저장하는 백엔드 서비스 개발

Viewinter HR Admin, Company 개발

• 기업용 영상 면접 서비스 Viewinter HR 서비스를 보조하기 위한 백오피스 웹 서비스

• 프론트엔드 개발 담당

개발 스택

• Language:JavaScript, TypeScript

• UI:React, MUI,

  React Router, SCSS Module

• Data Management:

  Redux, Redux Saga, Axios, React Query

• Tool:ESLint, Prettier

JavaScript -> TypeScript 적용을 통한 개발 안정성 증대

• JavaScript로 작성된 오래된 코드를, 새로 적용한 TypeScript 환경에 맞게끔 Migration 처리를 지속적으로 진행

• IDE내의 Type Hint가 원활하게 동작하는 것을 주 목적으로 하였고, 필요에 따라 JSDoc을 함께 이용하며 구 버전의 코드를 IDE에서 원활하게 이용할 수 있게 함

LLM 모델을 위한 Bullet List 지원 텍스트 편집기 개발

• Bullet List 기호와 Depth를 기반으로 문서의 상/하위 개념을 이해하는 LLM 모델을 위한 텍스트 편집기

• - 하이픈을 이용하여 Bullet List를 만들 수 있고, 엔터 키를 통한 줄바꿈 시 들여쓰기에 따라 알맞은 depth의 bullet item을 생성

• - 하이픈 대신 • 아이콘을 표시하여 Markdown 형식의 기호 표시에 비교적 익숙하지 않은 사용자들에게 친화적인 UI 제공

• LLM이 이해하는 데 도움이 되는 구조로 문서를 작성할 수 있도록 사용자를 유도

Dr.Listen Agent 웹 개발

• Dr.Listen 서비스 이용을 보조하는 AI 챗봇 에이전트를 서비스하기 위한 웹 개발

• 프론트엔드 개발 담당

개발 스택

• Language:

  JavaScript, TypeScript

• UI:React, Styled Components

• Data Management:

  GraphQL, Apollo Client, GraphQL Code Generator

• Tool:

  ESLint, Prettier, Vite, MSW

모바일 앱과의 통신을 위한 인터페이스 구성

• 모바일 앱 내부에서 웹뷰를 통해 서비스될 목적으로 개발되어, 모바일 기기와의 데이터 전송 처리 적용

• React Native로 개발된 모바일 서비스와 데이터 일관성을 맞추기 위해 동일한 TypeScript 타입 정의를 가지게 함

Polling 방식의 메시지 수신 구현

• 전송된 채팅에 대한 서버의 응답을 수신하기 위해 Polling 방식의 네트워크 처리 적용

• 앱의 Foreground/Background 상태를 고려해야 하는 소켓 통신에 비해 개발 난이도가 낮음

Zuicy(쥬씨) Studio 웹 개발

• 인터랙티브 콘텐츠를 서비스하는 엔터테인먼트 모바일 앱 Zuicy의 콘텐츠를 만드는 웹 에디터

• 프론트엔드 개발 담당

개발 스택

• Language:JavaScript, TypeScript

• UI:React, ReactFlow(Node Based UI), SCSS

• Data Management:Recoil, GraphQL, Apollo Client, GraphQL Code Generator

• Tool:ESLint, Prettier

사용자와 친숙한 형태의 파일 탐색기 개발

• 트리 형태로 반복되는 폴더/파일 컴포넌트를 재귀 방식으로 구현, 구조 상 무한히 depth를 가지도록 개발

• "열림" 상태가 아닌 폴더의 데이터를 불필요하게 호출하지 않도록 Lazy Load 방식 적용

• Drag-Drop을 이용한 파일/폴더 다중 이동 및 업로드 처리 구현

• PC를 사용하는 대부분의 사용자들에게 이미 학습된 UX를 통해 이용 편의성 추구

Recoil을 이용한 트리 구조 데이터 관리 최적화

• 디렉토리 트리 구조를 Recoil의 atomFamily로 관리

• 변경사항이 있는 특정 디렉토리 내의 상태값만을 업데이트하여 불필요한 메모리 업데이트를 최소화

사용자 피드백 수용 및 반영

• 개발된 에디터를 사용하는 사내 동료에게 받은 피드백을 통해 지속적으로 UX를 개선

• 특정 환경을 가진 사용자에게서 발생할 수 있는 오동작을 발견하여 버그를 수정한 사례

Dr.Listen(닥터리슨) 모바일 앱 개발

• 정신건강 자가평가 서비스를 제공하는 모바일 앱 서비스

  • iOS(App Store) /

    Android(Google Play)

  • https://home.drlisten.ai/

• 프론트엔드 개발 전담,

  React Native를 이용하여 iOS, Android 동시 개발 진행

• 앱스토어, 플레이스토어 심사 및 배포, 인앱 상품 등록, 다국어 상품 페이지 등록 등 마켓 퍼블리싱 관련 작업 경험

• 프로젝트를 초기부터 개발하여 2022년 7월 7일 성공적으로 서비스를 런칭

개발 스택

• Language:

  JavaScript, TypeScript

• UI:React Native

• Data Management:

  Redux, Redux Toolkit, GraphQL, Apollo Client, GraphQL Code Generator, Realm

• Tool:

  ESLint, Prettier, Apollo Server, MSW, Detox, Sentry

Data Only 푸시 알림을 통한 모바일 운영체제의 스케줄러 등록 제한 극복

• 사용자가 특정 일, 요일, 매주 등 원하는 단위로 푸시 알림을 등록할 수 있는 기능 개발

• 반복 스케줄러 등록이 불가능한 패턴으로 인해 스케줄을 지나치게 많이 등록해야 하는 문제

  • ex) 2일에 한 번 푸시 알림

• 서버로부터 정기적으로 데이터 푸시 알림을 전달받아, 백그라운드로 푸시 알림 스케줄을 갱신하도록 처리

클라이언트 중심의 데이터 구조화 - 로컬 데이터베이스 관리

• 업데이트 빈도가 낮은 데이터를 디바이스 내에 저장하여 네트워크 비용 최소화

• 데이터 변경사항을 클라이언트에서 관리하여, 필요한 경우에만 서버와 동기화

• 서버와 통신할 수 없는 경우에도 디바이스 내에 데이터 저장이 가능

GraphQL, Mock 서버를 통한 생산성 증대

• 서비스 기획 단계부터 참여하여 백엔드 개발자와 서버 API에 대한 스키마를 함께 설계

• 완성된 GraphQL 스키마를 기반으로 Mock 서버를 구현하여 백엔드와 병렬 개발 가능

CodePush를 이용한 실시간 업데이트

• 앱 심사로 인해 2~3일정도 소요되는 스토어 업데이트를 대신하여 1~2분 내에 업데이트가 가능한 CodePush 도입

• 빠른 업데이트 주기를 이용하여 하루에 많게는 2~3회씩 업데이트하며 새로운 기능을 테스트함

• 수정사항을 빠르게 반영하여 QA 팀과의 빠른 문제 해결을 돕고, 서비스 기획에 유연성을 높임

서비스 개선을 위한 적극적인 커뮤니케이션

• 메이커스로서 서비스 기획 단계부터 적극적으로 참여하며, 서비스 개선 방안에 대해 논의

• 사용자 인터뷰 분석 등에 참여하며, 개선이 필요한 점에 기술적인 방법론을 직접 제시하며 빠르게 해결책에 도달할 수 있게 함

인공지능 챗봇 Tumakr 웹 개발

• 외국인 관광객 대상의 24시간 응대를 위한 인공지능 챗봇 서비스

• 풀스택 개발 담당

개발 스택

Server

• Language:Python

• Framework:Django, Rasa(Chatbot Framework)

Client

• Language:Python, JavaScript

• Framework & Library:Flask, jQuery

• Tool:

  chatette(Dataset Generator)

백엔드 API 구현

• 자사 상품 데이터를 저장하고 불러오기 위한 서버를 Python의 Django 프레임워크와 MySQL로 구성

• Python을 사용하는 챗봇 프레임워크 Rasa를 이용하여 사용자 메시지에 대한 응답 처리 구현

프론트엔드 챗봇 페이지 개발

• Python의 Flask 프레임워크로 웹 서버 구성

• HTML, CSS를 이용하여 요소를 디자인하고, jQuery를 이용하여 버튼 등의 상호작용 요소를 구현

챗봇 학습 데이터 수집 및 전처리

• 이메일을 통해 자주 문의/답변되는 내용을 챗봇의 데이터로 학습

  • Python을 이용하여 메일 데이터를 추출하는 스크립트를 작성

  • chatette 라이브러리를 이용하여, 부족한 학습 데이터를 템플릿을 통해 생성하여 챗봇 모델 생성에 적용

메신저 텔레그램의 챗봇 API 서버 개발

• 사용자가 등록한 단어가 그룹 채팅방에서 발견될 시 챗봇이 알림 메시지를 보내는 "키워드 알림" 기능을 수행하는 채팅 봇

• Amazon EC2를 통해 서비스 (2019.03.29 ~ 2023.08.07)

  • 등록된 사용자 수: 335

  • 등록된 그룹 대화방 수: 145

  • 등록된 키워드 수: 805

개발 스택

• Language:Python

• Main Library:python-telegram-bot

• Database:Firebase Realtime Database

• Publish:Amazon EC2

데이터베이스 통신량 한도 초과 디버그

• 서비스를 배포한 후 8개월차 Firebase 서비스의 데이터 다운로드가 트래픽을 초과하여 서비스가 중단

• 데이터베이스를 조회할 때, 불필요하게 상위 Depth로부터 전체 데이터를 내려받는 구조로 인해 트래픽이 초과됨

• 각 기능이 동작할 때, 불필요한 데이터가 조회되지 않도록 코드를 변경하여 수정 배포

실시간 에러 리포트

• 서버를 실행 중인 EC2 공간에 에러 로그를 남기도록 하였는데, 매번 서버에 접속하지 않으면 에러 상황을 확인할 수 없었음

• 에러가 발생할 시 개발자의 텔레그램 계정으로 에러 내용을 함께 보내도록 처리