미리보기

• 대학교 시절부터 진행한 2인 창업 팀으로 예비창업패키지를 성공적으로 수료하였고 초기 기획과 PoC를 같이 진행했으며 이후에는 개발 파트를 전적으로 도맡아 앱 및 웹 풀스택 개발 업무를 하였습니다.

• '책장 인식 AI를 통한 책장 분석 플랫폼' 개발 전 과정에 참여하여 AI 파이프라인, 클라우드 배포, 앱 및 웹 개발 작업을 진행하였습니다.

• 수상 이력:

  콘텐츠신규창업IR피칭대회(최우수상) / 창업보육투자유치경연회(최우수상)

프로젝트 소개

'깃트폴리오'는 이력서 제작에 어려움을 느끼는 개발자들을 위해 Github 계정 기반으로 레파지토리를 선택하여 LLM으로 이력서를 자동 생성해주는 서비스입니다.

• 6인 프로젝트(풀스택 2, 클라우드 2, 인공지능 2)로 기획과 프론트엔드 개발, 팀장을 맡았습니다.

참고 링크

• 깃허브 레파지토리

• 사이트 주소: www.gitfolio.site

기술 스택

TypeScript, Next.js 14 App Router, Tailwind CSS, Zustand, Tanstack-Query v5, Sentry

작업 사항

• 이력서 커뮤니티에서 다중 필터링(포지션, 기술 스택, 학교 유형, 정렬 기준 등)과 페이지네이션을 동적으로 URL 쿼리 스트링과 동기화하여 상태 관리의 일관성을 유지했습니다.

• 이력서 생성에 짧게는 30초 길게는 120초가 소요되는 동안 비동기 요청 상태를 관리하며, promise toast를 활용해 진행 상태를 실시간으로 시각화함으로써 사용자 경험을 개선했습니다.

• 좋아요 요청의 느린 응답을 개선하기 위해 낙관적 업데이트(Optimistic Update)를 적용하여 클릭 후 상태 반영 속도를 평균 100ms에서 즉각 반영으로 개선했습니다.

• 이력서 내용을 PDF로 저장하는 기능을 개발하며, 단순 이미지 캡처 방식이 아닌 실제 텍스트와 하이퍼링크가 포함된 PDF를 생성하도록 구현하여 접근성과 활용도를 높였습니다.

  • 개발 과정에서 텍스트 렌더링과 스타일 유지 문제를 해결하며 결과적으로 실제 제출 가능한 정도의 PDF를 생성할 수 있도록 노력하였습니다.(이슈 해결 과정)

• 이력서에서 텍스트를 드래그하여 선택하면 AI 수정 요청이 가능한 사이드 채팅 바를 개발했으며, text-selection 관련 라이브러리 대신 Web API와 mouseup 이벤트를 활용하여 커스텀 팝업 버튼과 드래그 정보를 안정적으로 관리하도록 구현했습니다.(상태 관리 관련 이슈 해결 과정)

프로젝트 소개

'피카부'는 디스코드로 관리하던 카카오테크 부트캠프 공지 사항 및 일정이 여러 채널에 파편화되어 있어 사용자는 정보를 찾기 힘들고 관리자는 질문에 답하기가 힘든 문제를 해결하기 위해 이에 대해 대신 답변해주는 AI 채팅 어시스턴트 서비스입니다.

• 6

  인 프로젝트(풀스택 2, 클라우드 2, 인공지능 2)로 기획과 프론트엔드 개발을 맡았습니다.

참고 링크

• 깃허브 링크

• 프로젝트 작업 내용(블로그)

• 트러블 슈팅(블로그)

• 사이트 주소: http://ktb-chatbot.shop/

기술 스택

TypeScript, Next.js 14 App Router, Tailwind CSS, Zustand, Tanstack-Query v5

작업 사항

• 채팅 기능에서 text/event-stream 형식의 응답을 처리하기 위해 ReadableStream의 reader를 활용하여 데이터를 실시간으로 스트리밍 처리하였으며, 이를 통해 비동기 상태 관리를 최적화하고 사용자가 첫 응답을 받기까지의 대기 시간을 평균 5초에서 1초로 약 80% 단축하여 실시간 사용자 경험을 크게 개선했습니다.

• 화면에 배치된 컴포넌트가 많았는데 화면 크기 별로 배치가 유기적으로 되도록 반응형 웹 디자인을 적용하여 다양한 디바이스 환경에 대처

• 채팅과 별도로 우측에 부트캠프 관련 정보를 제공하는 여러 위젯들을 배치하여 드래그 앤 드롭으로 위젯 간의 순서를 임의로 변경할 수 있도록 사용자 경험 개선(PR)

'꽃동산 아카데미'는 교사 자격 인증을 위한 인터넷 강의 수강 서비스입니다.

• 2인으로 진행한 외주 프로젝트로 프론트엔드, 백엔드, 클라우드 환경 구축 모두 담당하였습니다.

• 서버 스펙: AWS EC2(t3.medium), vCPU 2-core, RAM 4GB, Disk 20GB

참고 링크

• 사이트 주소: https://fgcacademy.co.kr/

• 트러블 슈팅

기술 스택

TypeScript, Next.js 14 App Router, Auth.js, Tailwind CSS, Zustand, Tanstack-Query v5

작업 사항

• Next.js의 SSR과 Auth.js를 활용해 클라이언트와 서버 모두에서 인증 상태를 관리하고, middleware를 통해 인증 상태에 따른 동적 라우팅을 구현하여 보안을 강화하였습니다.(Auth.js 구현 과정) (middleware 코드)

• 1분 단위의 short polling 방식의 API 요청으로 강의 시청 시간을 기록하며, 많은 트래픽 처리 상황에서도 성능 저하 없이 안정적인 동기화를 구현했습니다.

• 개발 뿐 아니라 AWS EC2 환경에서 인프라 관리를 통해 월 50달러에서 40달러까지 비용을 절감하였습니다.

• 강의 및 퀴즈 등록, 채점 기능을 포함한 관리자 페이지를 Table 기반의 컴포넌트로 설계 및 개발하였으며, 기존 client side table 방식에서 server side table 방식으로 변경하여 초기 테이블 불러오는 속도를

• 교내에서 진행한 창업 동아리 활동으로 기획 및 MVP 단계의 어플을 React Native와 Express.js로 제작하여 혁신 창업 스쿨을 이수하였습니다.

• 수상 이력: 혁신창업스쿨 2단계(우수상) / 창업동아리 아이디어 경진대회(우수상) / 모의 IR 투자 경진 대회(장려상)

• 인공지능(AI) 음성 기반 챗봇 주문,예약, 예매 시스템 모바일 애플리케이션을 맡아 진행하였으며, 모바일 개발(ReactNative)과 백엔드(Express.js) 부분을 담당했습니다.

• 5인이서 진행한 프로젝트로 한국정보산업연합회장상을 수상하였습니다.