My Work

EdTech SaaS / CRM

EduFlow Pro 입시 운영 SaaS

상담 CRM에서 시작해 등록 전환, 학생 360, 수납 관리, 학부모 포털, 모바일 원장 모드까지 한 제품 흐름으로 이어지는 입시·컨설팅 결합형 학원 운영 플랫폼 목업입니다. 화면 중심 포트폴리오지만 실제 SaaS처럼 연결감을 느낄 수 있도록 구성했습니다.

핵심 기능

  • 상담 CRM으로 문의부터 체험, 등록 전환까지 한 보드에서 관리
  • 원장 대시보드 / 학생 360 / 수납 / 리포트가 같은 더미 데이터 흐름으로 연결
  • 학부모 포털에서 출결, 리포트, 결제, 상담 예약을 자연스럽게 확인
  • 모바일 원장 모드로 오늘 신규 문의, 미납, 긴급 알림을 빠르게 확인
HTML5 / CSS3 Vanilla JS Static SaaS Mockup CRM UX Portfolio Prototype
B2B SaaS / Education Ops

EduFlow Pro Admissions SaaS

입시 컨설팅 결합형 학원을 위한 통합 운영 SaaS 목업입니다. 상담 CRM, 등록 전환, 수납, 학습 리포트, 학부모 포털, 모바일 원장 모드를 하나의 실제 제품처럼 연결해 보여주는 포트폴리오 프로젝트입니다.

핵심 기능

  • 상담 CRM 중심 구조로 문의부터 체험수업, 등록 전환까지 흐름을 시각화
  • 원장 대시보드 / 수납 / 리포트를 같은 더미 데이터 세계관으로 연결
  • 학부모 포털과 모바일 원장 모드까지 포함한 준제품형 멀티 서피스 데모
  • 정적 화면이 아니라 상태 변화와 화면 이동이 살아 있는 통합 SaaS 목업
HTML5 / CSS3 Vanilla JS SaaS UX Dashboard UI Portfolio Planning
B2B SaaS / AI Workflow

Meeting Summary Board Work SaaS

회의록과 녹취 텍스트를 넣으면 핵심 요약, 결정 사항, 액션 아이템, 담당자별 할 일을 자동 정리해주는 업무형 SaaS 포트폴리오 프로젝트입니다. 기획 포인트와 MVP 일정까지 한 번에 보여주는 전시형 데모로 구성했습니다.

핵심 기능

  • 회의 텍스트를 바로 붙여넣어 결과 보드를 생성하는 실무형 입력 UX
  • 결정 사항 / 리스크 / 액션 아이템을 분리해 가독성 높은 정보 구조 제공
  • 담당자별 할 일 묶음과 우선순위 레인으로 후속 작업 관리 지원
  • 포트폴리오 설명에 바로 활용할 수 있는 MVP 범위와 개발 일정까지 포함
HTML5 / CSS3 Vanilla JS SaaS UX Text Parsing Portfolio Planning
AI / Full-stack

AI Study Note Generator Gemini

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

핵심 기능

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

Live Voice Translator Web Speech

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

핵심 기능

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

Squirrel Rescue Brigade Cartoon Rescue Arcade

고전 구조 아케이드 감성을 바탕으로, 모바일 드래그와 데스크톱 레인 이동을 함께 고려한 구조 루프를 담아낸 포트폴리오용 게임 프로젝트입니다. 불타는 건물, 트램폴린 구조대, 구급차 연결 구조를 한 화면에서 읽기 쉽게 설계합니다.

핵심 기능

  • Canvas 기반 구조 아케이드와 가로형 플레이필드 구성
  • 다람쥐를 여러 번 받아 구급차까지 보내는 3단 구조 루프
  • 모바일 드래그 / 키보드 레인 이동을 함께 고려한 입력 UX
  • 게임 데모와 함께 기획 포인트를 설명하는 포트폴리오형 프로젝트 페이지
HTML5 / CSS3 Canvas API Vanilla JS Arcade Systems Mobile UX
Game / Arcade

EARTHBITE Premium Worm Arcade

먹이를 먹을수록 몸이 길어지는 지렁이 게임을 고급 아케이드 감성으로 재해석한 프로젝트입니다. 타이틀 UI, HUD, 콤보, 장애물, 기록 저장, 사운드까지 포함해 출시형 데모 감도로 구성했습니다.

핵심 기능

  • Canvas 기반 실시간 아케이드 게임과 부드러운 HUD 구성
  • 먹이 타입, 콤보 시스템, 속도 상승, 장애물 추가로 긴장감 강화
  • 일시정지 / 재시작 / 최고 기록 저장이 가능한 완성형 런 구조
  • 브랜드형 랜딩처럼 보이는 출시 감도 UI와 게임 연출
HTML5 / CSS3 Canvas API Vanilla JS Web Audio Arcade Systems
기획 / 여행 UX

Voyage Flow Planner Gemini 여행 플래너

도시와 기간, 예산 톤, 추가 요청을 바탕으로 Gemini가 일정 블록과 지도 포인트, 예산 체크리스트를 생성하는 여행 플래너입니다. Cloudflare Pages Functions 구조를 연결해 배포 후에도 API 키가 노출되지 않도록 구성했습니다.

핵심 기능

  • Gemini 일정 생성으로 도시, 기간, 취향, 추가 요청을 반영한 여행 플랜 제공
  • 지도 포인트 카드와 일차별 타임라인 UI로 동선 흐름을 한눈에 확인
  • 총 예산, 카테고리별 분배, 여행 준비 체크리스트를 한 화면에서 정리
  • 데모 fallback 모드로 AI 미연결 상태에서도 정적 미리보기 가능
HTML5 / CSS3 Vanilla JS Gemini API Pages Functions 여행 일정 설계
AI / 감정 / 큐레이션

VIBE NOTE Gemini 큐레이터

사용자의 감정과 에너지 상태를 바탕으로 Gemini가 음악 추천, 콘텐츠 제안, 한 줄 메시지, 작은 행동 팁을 만들어주는 무드 기반 웹앱입니다. 포트폴리오용 완성도는 유지하면서 배포 후에는 실제 AI 응답도 받을 수 있게 구성했습니다.

핵심 기능

  • 무드 태그, 자유 입력, 에너지 슬라이더를 결합한 Gemini 큐레이션
  • 음악, 콘텐츠, 문장, 행동 제안을 함께 보여주는 다중 결과 UI
  • 데모 fallback 큐레이션으로 서버 함수 없이도 페이지 사용 가능
  • 브랜드 중심 비주얼 설계로 감정 흐름이 느껴지는 색감과 레이아웃 구성
HTML5 / CSS3 Vanilla JS Gemini API Pages Functions 감정 큐레이션
UI / UX 기획

STAGE ON 공연 쇼케이스 포트폴리오 목업

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

핵심 기능

  • 공연 소개형 랜딩과 카드형 공연 리스트 UI
  • 탭 구조 상세 페이지로 공연 정보, 할인, 위치, 후기 정리
  • 로그인 / 비밀번호 찾기 / 회원가입 인증 화면 목업
  • 7단계 예약 UX와 localStorage 기반 찜 목록 구현
HTML5 / CSS3 Vanilla JS JSON 목업 데이터 UX 기획 포트폴리오 프로토타입
AI / 음성 / 코칭

AI 면접 코치 Gemini 코치

자기소개를 바탕으로 Gemini가 예상 질문, 답변 피드백, STAR 초안을 생성해주는 면접 코칭 데모입니다. 음성 입력은 브라우저에서 처리하고, AI 평가는 Cloudflare Pages Functions를 통해 안전하게 연결했습니다.

핵심 기능

  • 텍스트와 음성 자기소개 입력을 브라우저 음성 인식과 함께 지원
  • 직무별 예상 질문 생성을 카드형 UI로 제공
  • 답변 평가, 코치 메모, STAR 초안 생성을 한 흐름으로 연결
  • Pages Functions 기반 배포 구조로 API 키를 안전하게 숨김
HTML5 / CSS3 Vanilla JS Web Speech API Gemini API Pages Functions