Frontend · SVG · Interaction
에디터를 만들며 부딪힌 문제를 코드와 함께 기록합니다
SVG 에디터와 Three.js 3D 교구, 인터랙션 UI를 개발하면서 겪은 문제와 해결 과정을 정리하는 Seonghoho의 기술 블로그입니다. 함께 놓인 캔버스는 글에서 다룬 선택, 좌표 변환, 리사이즈, undo/redo를 직접 만져 볼 수 있게 줄여 만든 에디터입니다.
전체 글 보기 →선택 없음 · history 0
Latest Writing
최근 글
AI Workflow · 2026년 10월 15일
Claude Code와 개발 워크플로우를 만든 과정
Claude Code에 작업을 하나씩 요청하던 방식에서, 명세 → 계획 → 구현 → 리뷰 순서와 역할별 서브에이전트를 갖춘 워크플로우로 바꾼 과정입니다. 실제 업무와 사이드 프로젝트에 쓰면서 고친 규칙도 함께 적었습니다.
AI Workflow · 2026년 10월 13일
Claude Code 스킬로 반복 작업 정리하기: handoff, sync, cleanup
세션을 넘길 때, 다른 컴퓨터에서 이어서 작업할 때, PR 머지 후 정리할 때마다 같은 요청을 반복하다가 Claude Code 스킬로 만들어 쓰게 된 과정을 정리했습니다.
SVG Editor Devlog · 2026년 7월 01일
SVG 에디터 인터랙션이 꼬일 때 디버깅한 순서
SVG 에디터에서 drag, resize, keyboard 입력이 서로 간섭할 때 포인터 좌표, active tool, capture, 히스토리 기록 순서로 문제를 좁힌 경험입니다.
SVG Editor Devlog · 2026년 7월 01일
SVG 에디터에서 문서 상태와 편집 상태의 경계를 나눈 기준
SVG 에디터에서 저장할 문서 데이터와 선택, hover, drag 같은 편집 상태를 저장 가능성 기준으로 나누고, 선택 여부를 렌더링할 때 계산하도록 바꿔 저장, 히스토리, 복사/붙여넣기 버그를 줄인 과정입니다.
Categories
주제별로 보기
Projects
프로젝트
회사와 팀 프로젝트에서 맡은 역할과 결과입니다. 구현 과정은 각 프로젝트 페이지에 정리했습니다.
2024.08–2026.02 · 4명 · FE 3 / BE 1
MathCanvas
SVG와 Three.js로 수학교구를 디지털화한 인터랙션 캔버스
- 46종 중 20종 교구 직접 설계·구현
- SVG 기반 복합 인터랙션과 클래스 모듈 구조 설계
edutech · editor · svg
2024.04–2024.05 · 6명 · FE 3 / BE 3
NowDoBoss
상권 분석부터 채팅·알림까지 연결한 창업 지원 플랫폼
- 카카오맵 기반 상권 추천 흐름 개발
- 커뮤니티·채팅·FCM 푸시 알림 구현
map · startup · realtime
2024.02–2024.04 · 5명 · FE 2 / BE 3
Mancity
드론 경기 영상을 분석해 기록과 하이라이트를 제공한 풋살 서비스
- Atomic Design Pattern과 Storybook 기반 UI 체계화
- 매치 상세·등록·수정 및 전술보드 구현
sports · video · tactics