미리보기

• 인원 및 역할

  • 4인 개발 ( FE2, BE2 )

  • 기획 및 프론트엔드 개발

• 개요

  • 동일한 뽀모도로 타이머를 통해 학습 사이클을 실시간으로 공유하여 협업 및 스터디 생산성을 향상 시키는 서비스

  • 사용 기술: React, TypeScript, Socket-IO

• 담당 기능

  • 기획 및 UI/UX 디자인

  • 실시간 공유타이머 및 참여 유저 조회 기능

  • 공유타이머 생성, 참여, 조회 기능

• 결과

  • 타이머 계산 로직 개선
    기존 소켓 서버에서 타이머를 계산하여 제공하던 방식에서 타이머 시작값만을 제공하여 클라이언트에서 타이머 계산을 하도록 로직을 개선하였습니다. 이를 통해 서버의 역할을 클라이언트에 위임함으로 서버의 부하를 감소시킬 수 있었습니다.

    
    
    

  • 클라이언트-서버 시간 동기화
    서버 시간과 로컬 시간의 차이를 우선적으로 구하고, 이를 적용한 Date 객체를 바탕으로 타이머 로직을 계산하도록 하였습니다. 이를 통해 서로 다른 로컬 시간에서도 동일한 타이머를 제공할 수 있었습니다.

    
    
    

  • 서비스 | 깃허브 | 블로그

• 인원 및 역할

  • 5인 개발 ( FS5 )

  • 풀스택 개발

• 개요

  • 자신만의 장소를 리스트 형태로 묶은 셀렉션을 다른 유저와 공유할 수 있는 지도 공유 커뮤니티 서비스

  • 사용 기술: Next.js, TypeScript, Tanstack-Query

• 담당 기능

  • UI/UX 디자인

  • 인기 셀렉션 및 맞춤 셀렉션 추천 기능

  • 셀렉션 검색 및 필터링, 자동완성 기능

  • 셀렉션 상태 설정 및 유저 페이지 기능

• 결과

  • 공통 컴포넌트 설계 및 구현
    전역 상태 관리 라이브러리(zustand)를 활용한 공통 모달 컴포넌트를 구현하여 프로젝트 내 모든 모달을 하나의 컴포넌트로 관리하도록하여 팀의 개발 속도를 향상시킬 수 있었습니다.

    
    
    

  • 서버사이드 렌더링 도입을 통한 SEO 최적화
    
    

  • 셀렉션 검색 및 기록 저장
    유연하게 검색 페이지에 접근하도록 queryString을 통한 셀렉션 검색 및 필터 기능을 설계하였습니다. 이를 통해 배너 검색, 프로필 검색, 외부 페이지 검색 등 기능을 확장 시킬 수 있었습니다.
    sessionStorage를 통해 검색 태그를 저장하도록 하였습니다.
    ReactQuery의 쿼리 및 쿼리 무효화 기능을 활용하여 데이터 캐싱을 통한 검색 성능을 최적화하였습니다.
    
    

  • 깃허브

    | 블로그

• 인원 및 역할

  • 1인 개발

• 개요

  • 사용자가 업로드한 이미지의 물체를 식별하고, 해당하는 특성의 프롬프트를 학습한 ChatGPT 통신 기반 챗 봇 서비스

  • 사용 기술: React Native(Expo), OpenAI API, Flask, Yolo
    

• 담당 기능

  • 모바일 프론트엔드 개발 (React Native Expo)

  • 백엔드 개발 (Python Flask)

• 결과

  • 이미지 업로드 및 객체 식별
    Expo ImagePicker 모듈을 활용하여 카메라 촬영 및, 갤러리 접근 이미지를 업로드하도록 하였고, 해당 이미지를 YoloModel을 통해 인식하여 실제 객체 값을 반환하도록 구현하였습니다.

  
  

  • 이미지 특성을 학습한 챗 봇 생성
    추출한 실제 객체 값을 GPT API를 활용해 챗 봇 프로필을 구현하였습니다. (닉네임, 특성, 좋아/싫어 하는 것, 성격) 해당 프로필을 대화에 반영되도록 하는 프롬프트를 학습시킴으로 이미지 기반 챗 봇을 구현하였습니다.

  
  

  • 깃허브

개인 프로젝트인 사물인식 챗 봇 서비스 작은친구들 프로젝트를 통해 주문식 교육 소프트웨어 공학 경진 대회 우수상을 수상하였습니다.

팀 프로젝트인 눈깜박임 감지 기반 안구 케어 서비스 아이러브유 프로젝트를 통해 스마트 프로젝트 경연대회(졸업작품) 우수상을 수상하였습니다