My Work

AI / Full-stack

AI Study Note Generator Gemini

PDF 강의 자료를 빠르게 분석하고 학습용 요약 노트를 자동 생성해주는 프로젝트입니다. Google Gemini 기반으로 요약, 구조화, 노션 연동 흐름까지 한 번에 다룹니다.

Key Features

  • PDF.js 기반 텍스트 추출과 드래그 앤 드롭 업로드
  • Gemini API 기반 요약, 마크다운 정리, 학습 노트 생성
  • Notion API 연동으로 페이지 자동 생성
  • 정적 페이지 안에서도 풍부한 인터랙션을 제공하는 UI 구성
HTML5 / CSS3 Vanilla JS PDF.js Gemini API Notion API
Speech / Realtime

Live Voice Translator Web Speech

번역 버튼을 누르면 마이크가 켜지고, 말한 문장을 실시간으로 받아 원문과 번역문을 각각 표시한 뒤 번역된 결과를 음성으로 다시 들려주는 실시간 통역 프로젝트입니다.

Key Features

  • SpeechRecognition 기반 실시간 음성 인식과 자동 재연결
  • 실시간 번역 큐 처리로 문장 단위 번역 결과를 순차 반영
  • SpeechSynthesis 기반 번역문 음성 출력
  • 입력 언어와 출력 언어를 선택할 수 있는 데모형 통역 인터페이스
HTML5 / CSS3 Vanilla JS Web Speech API Fetch API Realtime UI
UI / UX Planning

STAGE ON Performance Showcase Portfolio Mockup

공연 브랜드 랜딩, 로그인/회원가입, 공연 상세, 찜, 후기, 다단계 예매 플로우까지 한 흐름으로 담은 전시형 공연 사이트 프로젝트입니다. 실제 기능 없이도 서비스 기획과 UI 설계 감각이 보이도록 구성했습니다.

Key Features

  • 공연 소개형 랜딩과 카드형 공연 리스트 UI
  • 탭 구조 상세 페이지로 공연 정보, 할인, 위치, 후기 정리
  • 로그인 / 비밀번호 찾기 / 회원가입 인증 화면 목업
  • 7단계 예약 UX와 localStorage 기반 찜 목록 구현
HTML5 / CSS3 Vanilla JS JSON Mock Data UX Planning Portfolio Prototype