Work / Product & Engineering

사용자의 복잡한 요구를 서비스 구조로 정리하고,
작동하는 디지털 제품으로 구현합니다.

Service Planner & Product-Minded Developer — 문제를 정의하고, 구조를 설계하며, HTML·CSS·JavaScript와 Python 기반 프로토타입으로 직접 검증합니다.

어두운 화면에 표시된 코드

Shared Problem

좋은 기획과 작동하는 기술 사이에는
번역이 필요합니다.

사용자의 요구가 기능과 화면으로 정확히 번역되지 않으면 구현 과정에서 방향이 흐려집니다. 반대로 코드가 정상 작동해도 사용자의 실제 문제와 연결되지 않으면 지속적으로 쓰이는 제품이 되기 어렵습니다.

핵심 문제

사용자의 요구와 실제 구현 사이에서 발생하는 정보 손실

팀과 실무 리더

무엇부터 개발해야 할지 확신하기 어렵고, 개발 후에야 요구사항의 문제를 발견할까 걱정합니다.

사용자

기능이 복잡해 보이고, 새로운 도구를 익히는 일이 또 다른 업무가 될까 걱정합니다.

철학

기술은 더 많은 설명을 요구하는 것이 아니라, 복잡함을 줄이고 더 나은 판단을 돕는 방향으로 사용되어야 합니다.


Value Proposition

문제를 정의하고, 구조를 설계하며,
작동하는 제품으로 구현합니다.

Clear Problem Definition

사용자의 요청을 그대로 기능 목록으로 옮기지 않고, 누구의 어떤 문제가 핵심인지 먼저 구분합니다.

Actionable Product Structure

아이디어를 PRD, 사용자 흐름, 기능 우선순위, 화면 구조와 운영 과정으로 구체화합니다.

Working Prototypes

문서에서 멈추지 않고 웹 UI와 Python 애플리케이션으로 핵심 가설을 작동시켜 봅니다.

Evidence-Based Iteration

실행 로그, 사용자 흐름, 출력 결과와 테스트로 문제를 확인하고 다음 대안을 선택합니다.


Professional Capabilities

업무 역량

현장의 요구를 서비스 구조, 운영 과정, 제품 전략과 사용자 언어로 바꿉니다.

Product & Service Planning

사용자·이해관계자 구분, 표면적·내면적·잠재적 욕구 분석, 문제 정의와 우선순위, 사용자 여정, PRD와 기능 요구사항, B2B/B2C 사용 환경 비교, 서비스 정책 정리.

기술과 연결되는 가치 · 기획이 개발 단계에서 다시 해석되지 않도록, 화면 흐름과 데이터 처리 방식을 함께 고려합니다.

B2B Service Operations

유아교육 기관 대상 서비스 운영 — 기관 도입, 교사 사용 과정과 교육 요구 파악, 상담·안내·데모·연수 흐름 설계, 반복되는 운영 문제 수집과 개선안 정리.

보여주는 역량 · 도입 전후의 실제 사용 조건을 기획에 반영합니다.

B2C Product Expansion

기관 중심 서비스를 개인 사용자의 생활 환경에 맞게 재설계 — B2B/B2C 기능 분리, 앱 중심 흐름과 가족 사용 시나리오, 기능 우선순위와 핵심 사용자 가치 정의.

검토한 기능 예시 · 무음 상태 SOS, 주변 상황 확인, 스크린타임 상위 항목, 가족 구성원 추가 — 구현 여부에 따라 운영 중/개발 중/기획 완료/검토 중을 구분합니다.

Content & Communication

기술의 기능을 사용자가 이해할 수 있는 문제와 혜택의 언어로 변환 — 기관·교사·학부모별 메시지, 상담·영상·교육으로 이어지는 전환 흐름 설계.

보여주는 역량 · 기능 중심 설명을 문제·혜택 중심으로 재구성합니다.


Main Work Case

에듀테크 서비스 기획·운영

기관, 교사와 학부모가 서로 다르게 경험하는 문제를 서비스 구조로 정리하고, 제품과 운영의 요구사항으로 연결했습니다.

영역수행 내용보여주는 역량
서비스 기획사용자 구분, 요구사항 분석, 사용자 흐름, 기능 범위와 우선순위, B2B/B2C 구분, 서비스 정책모호한 현장 요구를 제품 요구사항으로 구조화
운영기관 도입, 교사 사용, 상담·안내·데모·교육, 반복 질문과 운영 문제 정리도입 전후의 실제 사용 조건을 기획에 반영
콘텐츠·커뮤니케이션사용자별 메시지, 가치 중심 설명, 에듀테크 콘텐츠, 상담·영상·교육 전환 흐름기술 기능을 이해 가능한 사용자 언어로 번역
개발 관점화면·기능 단위 분리, 앱·웹 핵심 흐름, 데이터 저장·변경, 프로토타입 구현, 제약 반영기획과 구현 사이의 정보 손실 감소

성과 표현 원칙

확인되지 않은 기관 수·사용자 수·전환율을 임의로 넣지 않습니다. 정확한 수치가 없다면 산출물, 의사결정 과정과 역할 범위로 증명합니다. 기관명과 내부 정보는 익명화합니다.

“현장에서는 기능보다 관계와 흐름이 먼저 작동합니다.
좋은 기획은 기능 추가가 아니라, 누가 무엇을 불편해하는지 구분하는 일에서 시작됩니다.”

Engineering Capabilities

개발 역량

기술의 수보다 실제 구현 범위, 통합 방식, 배포와 오류 해결 과정을 증명합니다.

Frontend Implementation

Core

HTML · CSS · JavaScript · jQuery

순수 CSS 기반 화면 구조와 정보 위계, 입력 폼·파일 업로드·동적 콘텐츠, DOM 조작·이벤트 처리·애니메이션, Python WebView와 연결되는 HTML UI.

CSS 프레임워크에 의존하지 않고 필요한 화면 구조와 인터랙션을 직접 설계합니다. 사용자가 어떤 순서로 정보를 보고 행동해야 하는지를 먼저 정의한 뒤 구현합니다.

Python Application Development

Applied

Python · pywebview · PyInstaller

파일·폴더 처리와 입력 검증, OCR·로컬 AI 모델·오디오·영상 라이브러리와 외부 CLI 호출, HTML UI와 Python 함수 연결, 진행 상태·로그 관리.

구현이 끝난 뒤에는 PyWebView와 PyInstaller로 Windows에서 실행 가능한 형태까지 패키징합니다.

AI & Media Integration

Applied

Tesseract OCR · Stable Diffusion · OpenCV · FFmpeg · librosa · Demucs · MuseScore

이미지 텍스트 감지와 OCR 후속 처리, 로컬 AI 모델 실행, 음향 특징 분석과 음원 분리, 프레임 처리·트래킹·오버레이·인코딩, MIDI·악보·PDF 출력.

모델을 직접 학습시키는 것보다, 이미 존재하는 모델과 도구를 사용자의 문제에 맞게 연결해 실행 가능한 제품 흐름으로 만드는 데 강점이 있습니다.

Deployment & Packaging

Applied

Firebase Hosting · Realtime Database · PyInstaller · Inno Setup

웹 애플리케이션 배포, 실시간 데이터 저장 구조, Python 실행 파일 생성과 외부 FFmpeg 바이너리 포함, 설치 파일 제작과 리소스 관리.

프로토타입이 개발 환경 안에서만 작동하지 않도록, 웹 배포와 Windows 패키징까지 고려합니다.

Debugging & Problem Solving

Core

호환성 · 실행 환경 · UI 연결 · 대안 설계

Python 버전·패키지 충돌, FFmpeg·DLL 로드와 외부 바이너리 경로, JavaScript 이벤트 반복 호출과 pywebview 스레드 오류, 라이브러리 교체와 실행 환경 분리.

오류 메시지를 단순히 제거하는 데서 그치지 않고, 원인이 버전·의존성·실행 환경·데이터 흐름 중 어디에 있는지 구분합니다.

AI-Assisted Development

Core

요구사항 분해 → 초안 → 실행 → 로그 기반 수정 → 통합 테스트

생성형 AI를 요구사항 정리, 구조 설계, 코드 초안과 오류 분석에 활용하되, 결과를 그대로 완성품으로 받아들이지 않습니다. 실행 로그·화면 동작·파일 출력을 기준으로 반복 테스트하고 수정합니다.

문제 정의, 기능 분리, 결과 검증과 오류 시 대안 선택은 직접 수행합니다. AI는 구현 속도를 높이는 파트너입니다.


How I Build

6단계 실행 과정

  1. Understand the Context

    누가 결정하고, 누가 사용하며, 누가 결과를 경험하는지 확인합니다.

  2. Define the Problem

    표면적 요구 뒤의 불편과 핵심 문제를 한 문장으로 정의합니다.

  3. Structure the Product

    사용자 흐름, 기능 우선순위, 입력·출력, 데이터, 예외와 PRD로 바꿉니다.

  4. Build the Core Flow

    HTML·CSS·JavaScript UI, Python 로직, Firebase 또는 AI·미디어 도구로 핵심을 작동시킵니다.

  5. Test and Debug

    정상·비정상 입력, 경로, 버전, 로그, 화면 동작과 최종 출력물을 확인합니다.

  6. Deliver and Document

    웹 배포, Windows EXE, 설치파일, 사용 설명, 아키텍처와 다음 항목으로 전달합니다.


Engineering Evidence

실제 구현 사례

결과만 보여주지 않고 선택 과정, 한계, 실패와 수정, 전달 가능한 산출물까지 보여줍니다. 자세한 화면·코드·영상은 준비되는 대로 공개합니다.

Evidence 01 · Interactive Web Product

HTML · CSS · JavaScript · jQuery · Firebase

사용자 입력, 상태 변경, 데이터 저장과 웹 배포가 이어지는 경량 서비스 흐름을 설계하고 구현했습니다.

Evidence 02 · Local AI Desktop Application

Python · pywebview · Tesseract OCR · Stable Diffusion · PyInstaller

이미지 입력부터 OCR, 로컬 AI 처리, 결과 생성까지 하나의 Windows 애플리케이션 흐름으로 연결했습니다. 외부 전송이 없는 로컬 처리 범위입니다.

Evidence 03 · Audio & Media Pipeline

Python · FFmpeg · OpenCV · librosa · Demucs · MuseScore

오디오·영상 파일을 분석하고 필요한 정보를 추출하며, 음원 분리·오버레이·MIDI·악보·PDF 출력까지 자동화했습니다.

Evidence 04 · Technical Troubleshooting

로그 분석 · 라이브러리 교체 · 실행 환경 분리

호환성과 실행 환경 문제를 로그로 분석하고, 도구를 교체하거나 Python 버전별로 기능을 분리해 해결했습니다. 실패한 접근과 최종 선택을 함께 기록합니다.


Languages & Technologies

기술 스택

사용한 기술의 수보다, 각 기술을 어떤 문제에 적용했는지를 보여줍니다. 임의의 퍼센트나 별점 대신 실제 사용 범위로 표시합니다.

분류기술과 실제 사용 범위
Core HTML · CSS — 커스텀 레이아웃, 정보 위계, 애니메이션, WebView 인터페이스
JavaScript · jQuery — DOM 조작, 이벤트 처리, 동적 인터랙션, 사용자 주도 흐름
Python — 파일 처리, 애플리케이션 로직, 로컬 AI 통합, 미디어 파이프라인
Applied Firebase Hosting · Realtime Database / pywebview · PyInstaller · Inno Setup / Tesseract OCR · Stable Diffusion Inpainting / FFmpeg · OpenCV · librosa · Demucs · MuseScore
Expanding React · Node.js · Java · JSP · JDBC · Spring · Spring Boot · MySQL · Machine Learning · Deep Learning — 실제 프로젝트 적용과 구현 근거가 생긴 뒤 Core/Applied로 이동합니다.
Explored MediaPipe · Basic Pitch — 설치·호환성 검토와 시행착오 경험은 있으나, 주력 기술로 과장하지 않습니다.

사람의 실제 문제에서 시작해,
작동하는 디지털 제품까지 함께 만들고 싶습니다.