프로덕트를 이해하는 개발자

필요한 도구를 적극 활용하는 소프트웨어 개발자 한기선입니다.

그레이.jpg

<aside>

</aside>

<aside>

CONTACT.

GITHUB.

BLOG.

kiseon.han77**@**gmail.com

</aside>

이를 직접 동작하는 서비스로 완성하고 싶어 개발을 시작했습니다.

디자인과 개발의 언어를 이해합니다.

디자인 시스템과 인터랙션에 대한 이해를 바탕으로, 기획자·디자이너와 원활히 소통하며 의도에 맞는 화면을 정확하게 코드로 옮깁니다.
상황에 맞춰 필요한 기술을 빠르게 습득합니다.

프로젝트 진행 중 디자인 리소스가 부족할 때는 ComfyUI와 Python 스크립트로 에셋 생성 파이프라인을 구축해 팀의 병목을 풀었고, 필요에 따라 GSAP 애니메이션, Zustand 상태 관리, Docker 배포 환경 등을 익혀 적용해 왔습니다.
데이터와 흐름을 함께 봅니다.

화면 구현에만 국한되지 않고 ADsP, SQLD 공부를 병행하며 백엔드와의 데이터 흐름 및 전체적인 시스템 구조를 이해하는 개발자가 되고자 합니다.

Project.

B2C_교복 매장 CRM 플랫폼

프로젝트 소개 : 유니 사이즈
React TypeScript Story Book Figma MCP Claude Code
담당 : 서비스 기획, UX/UI 디자인, 프론트엔드 개발 (백엔드 1인 협업)
주요 업무 및 성과:
- 매장 환경 맞춤 UI/UX: 입력 폼 상태를 localStorage에 저장해 기기가 꺼져도 입력값이 유지되도록 처리, IntersectionObserver 기반 무한 스크롤 목록 구현
- Canvas & 외부 인쇄 연동: ResizeObserver로 화면 크기가 바뀌어도 서명이 깨지지 않는 Canvas 컴포넌트 구현, 브라우저 인쇄 제약을 풀기 위해 백엔드와 Go 기반 로컬 프린트 브릿지 연동
- Claude 에이전트 활용: 에이전트 간 역할 분약 및 API 타입 공유 규칙을 세워 런타임 타입 에러 방지
- 데이터 정합성 개선: 결제 중복 요청 버그(FOR UPDATE 트랜잭션 적용) 및 오타로 인한 가격 오류(마스터 테이블 참조 구조 전환) 해결

개발 디자인

2024.12 ~ 2026.02

프로젝트 소개 : 🔗 PGA 슬롯머신
TypeScript React Zustand SCSS GSAP Matter.js Colyseus
담당 : 게임 UI/UX 디자인 및 기획, 프론트엔드 개발(React, TypeScript)
주요 업무 및 성과:
- Matter.js 기반 2D 물리 연출: 2D Canvas 위에 랜덤 물리 속성을 부여한 루비 바디(Body)를 생성하여 튕기고 떨어지는 입체적인 잭팟 연출 구현
- GSAP 타임라인 & CSS steps() 애니메이션 최적화: gsap.timeline()을 활용한 순차적 당첨 연출 및 steps() 함수 기반 프레임 애니메이션으로 렌더링 성능 최적화
- Zustand 팝업 아키텍처 구축: 커스텀 훅과 Switch-Case 패턴을 결합해 조건부 모달을 중앙 제어하는 확장 가능한 전역 상태 관리 구조 설계
- 트러블슈팅을 통한 안정성 확보: CSS 속성 덮어쓰기로 인한 애니메이션 정지 이슈를 다중 애니메이션 재정의로 해결 및 CI/CD 파이프라인 파싱 오류 수정

프로젝트 소개 : 🔗 다이버전스
Svelte5 TypeScript Tailwind V4 GSAP
담당 : AI 이미지 생성 자동화 툴 개발(Full-stack), 프론트엔드 개발(Svelte5) UX/UI 설계 및 구현
주요 업무 및 성과:
- AI 이미지 자동화 파이프라인 구축: ComfyUI + Python API를 활용한 무인 배치(Batch) 처리 스크립트를 개발하여 대량 에셋 생성 시간을 단축하고 팀 내 디자인 병목 해소
- 수학적 계산 기반의 SVG 룰렛 UI: 각도·좌표 기반 SVG 섹터 동적 계산 로직 및 GSAP 회전 애니메이션 구현 (서버 확률 데이터 기반 동적 매핑)
- 성능 최적화 & UX 개선: 스프라이트 이미지 제작으로 네트워크 요청(16회→1회)을 줄이고, GSAP 기반 인터랙션 및 로딩 티켓 연출로 사용자 이탈 방지
- 유연한 컴포넌트 아키텍처: 라우팅 기반 데이터 필터링 및 역할 중심 컴포넌트 재구성으로 이벤트 관리자 설정에 따른 가변 UI 설계

2026.06.05 취득

한국데이터산업진흥원