프로젝트 포털

다양한 웹 애플리케이션과 프로그램을 탐험하세요

창의적인 아이디어를 현실로 구현하는 개발자의 포트폴리오

지속적인 성장과 혁신을 추구하는 기술 블로그

WEB

웹 기반 프로젝트

Diastr

Diastr

업로드한 이미지를 보석십자수용 도안으로 제작해주는 사이트

바로가기 →
Reaction Time Test

Reaction Time Test

반응속도 측정 게임 - 5개 언어 지원

바로가기 →
SVG Studio

SVG Studio

이미지를 SVG로 변환하고 편집할 수 있는 온라인 도구

바로가기 →

Diastr

보석 십자수(Diamond Painting) 도안 변환기

프로젝트 소개

일반 이미지 파일을 보석 십자수 제작을 위한 도안(패턴)으로 변환하는 웹 도구입니다. 별도의 프로그램 설치 없이 브라우저에서 즉시 변환이 가능하며, 보석 십자수 표준인 DMC 색상 코드를 기반으로 도안을 생성합니다.

개인 사진(가족, 반려동물 등)을 보석 십자수로 만들고 싶을 때 전문 서비스 비용 부담 없이 무료로 사용할 수 있습니다.

주요 기능

  • 이미지 업로드 및 변환 - JPG, PNG, GIF, WebP 등 다양한 포맷 지원, 최대 50MB 고화질 이미지 처리
  • 정밀 설정 - 작품 크기(cm), 비즈 종류(원형 2.8mm / 사각 2.6mm), 색상 수(최소/적정/최대) 조절
  • Delta E 2000 색상 매칭 - 원본 이미지와 가장 유사한 DMC 색상을 과학적 알고리즘으로 정밀 매칭
  • 아이콘 최적화 - 비슷한 색상을 서로 다른 기호로 표시하여 도안 가독성 향상
  • 결과물 다운로드 - 미리보기 확인 후 PDF 파일로 다운로드 (DMC 번호, 수량, 기호표 포함)

기술 스택

호스팅GitHub Pages
프론트엔드HTML5 / CSS3 / JavaScript (ES6+)
이미지 처리HTML5 Canvas API
색상 알고리즘Delta E 2000 (CIE LAB)
PDF 생성jsPDF

Reaction Time Test

신경계 반응 속도 측정 게임

프로젝트 소개

화면의 색상 변화를 인지하고 클릭(또는 터치)하기까지 걸리는 시간을 측정하여, 사용자의 반응 속도를 수치화하는 웹 게임입니다.

복잡한 디자인 없이 색상 변화에만 집중할 수 있는 직관적인 UI를 가지고 있으며, 게임이나 스포츠 활동 전 워밍업 또는 컨디션 체크 용도로 활용할 수 있습니다.

주요 기능

  • 정밀 시간 측정 - performance.now() API를 사용하여 마이크로초 단위(0.01ms)의 정밀한 반응 속도 측정
  • 부정 출발 방지 - 초록색 전환 전 클릭 시 "Too soon!" 메시지와 함께 측정 무효화
  • 평균값 산출 - 5회 연속 측정을 통한 평균 반응 속도 계산으로 정확도 향상
  • 5개 언어 지원 - 한국어, 영어, 일본어, 중국어, 스페인어 다국어 인터페이스
  • 반응형 인터페이스 - PC 마우스 클릭 및 모바일 터치 모두 지원

기술 스택

호스팅GitHub Pages
프론트엔드HTML / CSS / Vanilla JavaScript
시간 측정performance.now() API
상태 관리State Machine 패턴

SVG Studio

이미지-SVG 변환 및 편집 플랫폼

프로젝트 소개

이미지 파일(PNG, JPG, GIF 등)을 SVG 벡터 그래픽으로 변환하고, 실시간으로 편집할 수 있는 웹 도구입니다. 별도의 소프트웨어 설치 없이 브라우저에서 바로 사용할 수 있습니다.

변환된 SVG를 React 컴포넌트로 내보내기할 수 있어 웹 개발자에게 특히 유용하며, 다양한 애니메이션 효과와 CSS 코드 생성 기능을 제공합니다.

주요 기능

  • 이미지 → SVG 변환 - PNG, JPG, GIF 등 다양한 이미지 포맷을 고품질 SVG 벡터 그래픽으로 자동 변환
  • 실시간 SVG 편집 - 색상, 크기, 회전, 투명도, 선 두께 등을 실시간 미리보기와 함께 정밀 편집
  • React 컴포넌트 Export - 편집된 SVG를 TypeScript 기반 React 컴포넌트로 내보내기, 프로덕션 코드에 즉시 활용
  • 애니메이션 효과 - 회전, 슬라이드, 바운스, 페이드 등 다양한 CSS 애니메이션을 SVG에 적용
  • 다양한 내보내기 - SVG 파일 다운로드, PNG 변환, GIF 애니메이션 생성, CSS 코드 복사 지원

기술 스택

프레임워크Next.js 15 / React 19
언어TypeScript
스타일링Tailwind CSS
이미지 처리ImageTracer.js
호스팅GitHub Pages

APP

모바일 애플리케이션

오늘의운동
개발중

오늘의운동

매일의 운동을 기록하고 관리하는 앱

개인정보처리방침 →

오늘의운동

개인 맞춤형 운동 루틴 관리 앱

프로젝트 소개

사용자의 목표와 현재 체력 수준에 맞춰 매일 다른 운동 루틴을 자동으로 생성해 주는 모바일 앱입니다. 다양한 운동 데이터베이스를 기반으로 균형 잡힌 운동 프로그램을 제공하며, 매일의 운동 기록을 통해 진행 상황을 추적할 수 있습니다.

워밍업, 본 운동, 쿨다운까지 체계적으로 구성되어 있어 안전하고 효과적인 운동이 가능합니다.

주요 기능

  • 자동 루틴 생성 - 사용자의 목표, 체력, 가용 시간을 고려하여 매일 최적화된 운동 루틴 자동 구성
  • 운동 기록 및 추적 - 완료한 운동의 종류, 세트 수, 횟수를 기록하고 시각적으로 진행 상황 확인
  • 다양한 운동 데이터 - 20종의 쿨다운 운동, 워밍업, 신체 부위별(팔, 등, 가슴, 코어, 다리, 어깨) 운동 제공
  • 운동별 이미지 가이드 - 각 운동마다 올바른 자세를 보여주는 이미지 포함
  • 온보딩 투어 - 첫 사용자를 위한 앱 사용법 가이드 제공

기술 스택

프레임워크React Native + Expo
데이터베이스SQLite
빌드 시스템EAS Build
광고AdMob SDK

PROGRAM

데스크탑 프로그램

Odin

Odin

로컬 LLM 기반 파일 찾기 및 자연어 소통 시스템

GitHub →

Odin

로컬 AI 기반 파일 검색 및 문서 대화 시스템

프로젝트 소개

로컬 LLM(Ollama)을 활용하여 내 컴퓨터의 파일을 찾고 대화할 수 있는 데스크톱 AI 비서입니다. 기존 파일 탐색기나 Spotlight 검색과 달리, 문서의 내용을 AI가 이해하여 자연어로 질문하면 관련 파일을 찾아줍니다.

클라우드에 파일을 업로드하지 않고 내 컴퓨터 안에서만 동작하므로 개인정보 유출 걱정 없이 안전하게 사용할 수 있습니다.

주요 기능

  • 자연어 파일 검색 - "이력서 파일 어디 있어?"와 같이 자연어로 질문하면 파일명이 아닌 내용 기반으로 검색
  • 문서와의 대화 - 찾은 문서를 열지 않고도 "핵심 내용이 뭐야?", "결론만 요약해줘"와 같은 질의 가능
  • 다양한 AI 모델 지원 - Ollama를 통해 Llama 3, Mistral, EEVE(한국어) 등 다양한 오픈소스 모델 교체 사용
  • RAG 기술 적용 - 사용자 질문과 관련된 문서를 검색(Retrieval)하여 AI에게 참고 자료로 제공, 정확한 답변 생성

기술 스택

언어Python
AI 엔진Ollama (Local LLM)
프레임워크LangChain
벡터 DBChromaDB / FAISS