MJ-best · Portfolio

필요한 도구는
직접 만들어 씁니다.

자격시험 공부, 사진 촬영, 통번역, 의료 코디네이션처럼 직접 하는 일에서 생긴 불편을 웹앱과 모바일 앱으로 풀어 왔습니다. 프로젝트마다 실제 화면, 동작 흐름, 핵심 코드를 정리했습니다.

16프로젝트
9바로 열어 보는 웹 데모
4플랫폼 · Web Android iOS macOS
2Actions로 예약 실행되는 앱

프로젝트

경영정보시각화 실기 랩 화면
학습·시험 · Web

경영정보시각화 실기 랩

경영정보시각화능력 실기(Power BI) 응시자가 설치 없이 브라우저에서 DAX 식을 쓰고 바로 채점받는 연습 사이트입니다.

데모 열기 ↗
Vanilla JS자체 DAX 렉서·파서·평가기시드 고정 난수
하네스 엔지니어링 워크북 화면
학습·시험 · Web

하네스 엔지니어링 워크북

LLM 에이전트 하네스(대화 배열·도구·루프·컨텍스트 관리·RAG·온톨로지)를 직접 구현해 보는 파이썬 실습 워크북이며, 에이전트를 만드는 개발자를 위한 것입니다.

워크북 열기 ↗
Python 표준 라이브러리PyodideVanilla JS
웹앱Firebase HostingFirestoreagents맥미니 러너NodeGitHub Actions30분마다 1회 처리Jev + 하네스판정
자동화·에이전트 · Web · Mac mini · GitHub Actions
비공개 저장소

Agent Hub

자연어 한 줄로 개인 AI 에이전트를 만들고, 맥미니와 GitHub Actions 러너가 구독 로그인된 Claude Code·Gemini CLI로 실행하는 Firebase 웹앱.

Vanilla JSFirebase HostingFirestore
NP3 Lab 화면
사진·카메라 · macOS · Android · Web

NP3 Lab

니콘 Z 카메라 사용자를 위해 SD카드의 플렉시블 컬러 레시피(.NP3)를 읽고·넣고·만드는 Mac·안드로이드·웹 앱.

웹판 ↗
TypeScriptPreactPreact Signals
Wireless Photo Monitor 화면
사진·카메라 · Python 로컬 서버 · LAN 브라우저
비공개 저장소

Wireless Photo Monitor

Nikon Zf의 라이브뷰와 방금 찍은 사진을 같은 네트워크의 어떤 기기 브라우저에서든 실시간으로 보여주는 파이썬 테더링 모니터.

Python 3.10+aiohttpPillow
밤하늘 촬영 플래너 화면
사진·카메라 · Web (PWA)

밤하늘 촬영 플래너

은하수·달·별궤적·유성우·행성·도시 야경을 찍으려는 사람에게 그날 밤의 하늘, 카메라 방향, 카메라 설정을 한 화면에 보여 주는 촬영 플래너입니다.

데모 열기 ↗
Vanilla JSAstronomy EngineCanvas · SVG
ENCOR 랩북 화면
학습·시험 · Web

ENCOR 랩북

CCNP ENCOR(350-401) 수험자가 장비 없이 브라우저에서 IOS 명령을 입력하며 이론·랩·퀴즈로 공부하는 단일 페이지입니다.

랩북 열기 ↗
Vanilla JS단일 HTML인라인 SVG
보이스 리더 화면
언어·읽기 · Android (8.0+, arm64)

보이스 리더

한국어 책을 고른 목소리로 기기 안에서 읽어 주는 오프라인 안드로이드 EPUB 리더로, 흑백 e-ink 기기 사용자를 고려했습니다.

KotlinAndroidReadium Kotlin Toolkit
Gym Grow How 화면
서비스·생활 · Web (PWA)
비공개 저장소

Gym Grow How

세트 기록을 근육별 주간 총부하량으로 집계해 근성장 운동량을 관리하는 Next.js + Supabase 운동 기록 웹앱.

Next.js 16React 19TypeScript
스튜디오 콘티북 화면
사진·카메라 · Web

스튜디오 콘티북

사진 비전문가가 스튜디오나 야외 촬영을 앞두고 콘셉트·컷 구성·조명·렌즈·카메라 높이를 미리 계획해 보는 시뮬레이터입니다.

데모 열기 ↗
Vanilla JS단일 HTMLCanvas 2D
MostMed 화면
서비스·생활 · Web (ru · ko · en)

MostMed

러시아어권 환자가 한국의 수술·시술과 참고 가격을 보고, 고른 항목을 그대로 텔레그램·왓츠앱으로 문의하게 하는 의료관광 에이전시 홈페이지 데모입니다.

사이트 열기 ↗
Vanilla JSHTML/CSSJSON 데이터
AICE Pro 실전연습 스튜디오 화면
학습·시험 · Web + 로컬 Python 엔진

AICE Pro 실전연습 스튜디오

AICE Pro 시험 준비생이 정형·자연어·이미지 실전 문제를 노트북 셀로 풀고 바로 자동 채점·실수 진단을 받는 연습 스튜디오입니다.

웹 스튜디오 ↗
Python 표준 라이브러리Vanilla JSHTML/CSS
GitHub Actions평일 18:00 KST공개 시장 데이터거시 지표증권사 API읽기 전용 조회Python 계산스냅샷Git 저장소자료
자동화·에이전트 · GitHub Actions · Vercel
비공개 저장소

KRW 투자 위키

평일 저녁 클라우드에서 시장 자료와 계좌를 읽기 전용으로 모아 계산하고, 결과를 마크다운 노트로 저장소에 커밋하는 개인 투자 기록 파이프라인.

Python 3.12GitHub ActionsVercel
JJY 시뮬레이터 화면
서비스·생활 · Web (ko · en · ja)

JJY 시뮬레이터

유선 이어폰으로 일본 표준전파 JJY를 흉내 내, 해외에서도 전파시계를 현지 시각으로 맞추게 해 주는 웹페이지입니다.

데모 열기 ↗
Vanilla JSWeb Audio APIIntl.DateTimeFormat
90%45%일상 고백 사랑해 好き 愛してる I like you 좋아해 люблю
언어·읽기 · Web

Nuance Graph

다국어 통역사·번역사가 표현 사이의 관계와 상황별 적합도를 가중치로 기록하는 개인 뉘앙스 그래프 웹앱.

Next.js 16React 19TypeScript
BLE GATT writeiPhone · 리모컨 흉내Sony · Canon · Nikon 셔터
사진·카메라 · iOS 17+

셔터링크

아이폰이 소니·캐논·니콘 순정 블루투스 리모컨인 척 카메라에 붙어 셔터만 빠르게 누르는 iOS 앱.

SwiftSwiftUICoreBluetooth

그 밖의 작업

서버 없이 돌아가는 구조

따로 서버를 빌리지 않고 GitHub 하나로 화면, 배포, 예약 실행까지 해결합니다. 화면은 GitHub Pages에 올리고, 정해진 시간마다 돌아야 하는 일은 GitHub Actions가 대신 실행합니다. 결과는 다시 저장소에 커밋되어 페이지에 바로 나타납니다. 앞으로 만드는 앱도 이 구조 위에 붙여 나갑니다.

01저장소코드와 데이터, 실행 결과를 모두 Git에 둡니다. 변경 이력이 곧 백업입니다.
02Actions · 예약 실행cron으로 30분·매일·평일 18시처럼 정해진 때에 작업을 돌립니다. 비밀 키는 Secrets에 둡니다.
03결과 커밋수집·계산·요약한 결과를 봇이 저장소에 다시 커밋합니다.
04Pages · 배포push가 되면 정적 페이지가 자동으로 다시 배포됩니다.
05브라우저폰·PC 어디서든 링크 하나로 엽니다. 무거운 계산은 브라우저 안에서 합니다.

정적 페이지 하나

빌드도 서버도 없이 HTML·JS만으로 브라우저에서 계산합니다.

Actions로 빌드·배포

push하면 Actions가 테스트하고 Pages에 배포합니다.

Actions를 백엔드로

예약 실행으로 일을 처리하고 결과를 저장소에 남깁니다.

외부 백엔드와 함께

로그인·동기화가 필요한 앱은 Firebase·Supabase를 붙입니다.

내 컴퓨터가 서버

카메라·기기와 붙는 앱은 로컬 서버나 맥미니에서 돌립니다.

작업 방식

대부분 제가 직접 쓰려고 만들었습니다. 그래서 설치 없이 바로 열리고, 오프라인에서도 돌아가고, 계산 결과를 검증할 수 있게 만드는 데 공을 들입니다.

  • 설치 없음가능하면 정적 페이지 하나로. 브라우저에서 DAX·IOS·Python을 바로 실행합니다.
  • 직접 구현DAX 평가기, CLI 파서, 천문 계산처럼 핵심 로직은 라이브러리에 기대지 않고 직접 짭니다.
  • 테스트계산이 들어간 프로젝트는 단위 테스트와 실제 기기 시험 기록을 함께 남깁니다.
  • 다국어한국어·영어·러시아어·일본어 사용자를 함께 고려합니다.