본문으로 바로가기
Choi Seongho

Profile Snapshot

프론트엔드 엔지니어

SVG·Three.js 기반 인터랙션과 서비스 UI를 설계·구현하는 프론트엔드 엔지니어입니다.

Current
플랜티엠 · Frontend Engineer
Stack
Vue / React / SVG / Three.js
Core
인터랙션 · 시각화 · 서비스 UI

What I Focus On

복합 인터랙션 구조화

하나의 SVG 영역에서 다양한 교구 상호작용을 안정적으로 제어

3D 시각화 구현

Raycaster, OrbitControls, DragControls 기반 상호작용 구현

유지보수 가능한 프론트엔드 설계

DigitalMathElement 중심 상속 구조 설계

Overview

복잡한 상호작용을 구현하면서도, 읽히는 구조를 남기는 프론트엔드 엔지니어입니다

사용자에게는 자연스럽고, 팀에게는 다루기 쉬운 화면을 만드는 것이 목표입니다. 특히 좌표 기반 인터랙션과 시각화가 필요한 제품에서 강점을 발휘합니다.

Context

2026년 3월부터 플랜티엠에서 프론트엔드 엔지니어로 근무하고 있습니다. 이전에는 코드넛에서 SVG·Three.js 기반 수학교구 캔버스를 개발하며 복잡한 사용자 상호작용을 구조화하는 일에 집중했고, React·Vue 기반 팀 프로젝트에서도 실전 문제 해결 경험을 쌓았습니다.

20 / 46
직접 설계·구현한 디지털 교구

코드넛 재직 당시 담당한 SVG 기반 수학교구 수량

4개
대표 프로젝트

에듀테크·지도·실시간 소통·커뮤니티 도메인 경험

React · Vue
서비스 UI 구축 경험

프로덕션 화면과 인터랙션 중심 기능을 모두 구현

3회
팀 프로젝트 일정 리드

SSAFY 과정에서 스크럼 마스터 역할 수행

Experience

학습보다 실전 맥락에서 강해진 경험을 쌓아왔습니다

실무와 교육 과정을 분리해서 보여주되, 각각에서 어떤 역할과 역량이 만들어졌는지 바로 읽히도록 정리했습니다.

2026.03 - 재직 중

플랜티엠

프론트엔드 엔지니어

2026년 3월부터 플랜티엠에서 프론트엔드 엔지니어로 근무하고 있습니다.

  • 2026년 3월 플랜티엠 합류
  • 프론트엔드 엔지니어로 근무 중
2024.08 - 2026.02

코드넛

프론트엔드 엔지니어

SVG·Three.js 기반 수학교구 캔버스를 개발하며 프론트엔드 아키텍처 설계부터 인터랙션 구현, 렌더링 최적화, 서비스 UI 통합까지 담당했습니다.

  • 총 46종 중 20종의 디지털 교구를 직접 설계·구현
  • 클래스 기반 객체 구조로 확장성과 유지보수성 개선
  • 주간 협업 회의를 통해 요구사항 정리와 우선순위 조율 수행
  • 실제 수업 현장을 고려한 2D·3D 인터랙션 품질 확보
2023.07 - 2024.06

삼성 청년 SW 아카데미

교육 과정 수료

Python, Django, SQL, HTML/CSS, Vue3 등 기본기를 다진 뒤 공통·특화·자율 프로젝트를 수행하며 프론트엔드와 협업 역량을 빠르게 끌어올렸습니다.

  • 세 차례 팀 프로젝트에서 일정 리드 역할 수행
  • WebRTC, AI 영상 분석, 빅데이터 기반 서비스 프로젝트 경험
  • 페어 프로그래밍과 코드 리뷰 중심 협업 방식 체득
  • 프로젝트 결과물로 우수상 성과 확보

Projects

문제를 푼 방식이 보이도록 정리했습니다

대표 프로젝트와 저의 경험이 된 프로젝트들을 작성했습니다.

Strengths

복합 인터랙션과 구조적 설계를 동시에 다룹니다

특정 라이브러리 숙련도보다, 구현 난도가 높은 화면에서 어떤 판단을 했는지가 더 중요하다고 생각합니다.

복합 인터랙션 구조화

SVG 한 화면 안에서 좌표 계산, drag·rotate·snap, PointerEvent·KeyboardEvent 흐름을 교구별 규칙에 맞게 설계했습니다.

  • 하나의 SVG 영역에서 다양한 교구 상호작용을 안정적으로 제어
  • 교구 특성에 맞는 이벤트 분기와 커스텀 이벤트 구조 설계
3D 시각화 구현

Three.js로 공간좌표, 쌓기나무, 입체도형을 구현하며 조작감과 가독성을 함께 챙겼습니다.

  • Raycaster, OrbitControls, DragControls 기반 상호작용 구현
  • depth buffer와 renderOrder 조정으로 시각적 충돌 최소화
유지보수 가능한 프론트엔드 설계

클래스 기반 모듈 구조와 타입 중심 상태 설계로 신규 기능 추가 비용을 낮추는 데 집중했습니다.

  • DigitalMathElement 중심 상속 구조 설계
  • Atomic Design Pattern, Storybook, 상태 관리 패턴 활용
협업과 제품 커뮤니케이션

외주사, 디자이너, 개발자와 주간 단위로 요구사항을 정리하고 우선순위를 조율해 개발 흐름을 맞췄습니다.

  • 실시간 피드백 반영과 일정 조율 경험
  • 팀 프로젝트에서 스크럼 마스터로 일정 리드

Stack

문제의 성격에 따라 도구를 선택하고 조합합니다

서비스 UI, 그래픽 인터랙션, 상태 구조, 협업 도구를 분리해 보면 어떤 영역에서 실전 경험이 쌓였는지 더 분명하게 드러납니다.

Core Frontend

서비스 UI와 인터랙션 중심 화면을 모두 다루는 기본 체력

TypeScriptJavaScriptReact.jsNext.jsVue.jsNuxt.jsGatsbyHTML/CSS

Interaction & Graphics

좌표 기반 상호작용과 시각화 구현에 강한 도구들

SVGThree.jsPointerEventKeyboardEventRaycasterDragControlsOrbitControls

State & Architecture

복잡한 흐름을 유지보수 가능한 구조로 묶는 패턴

PiniaZustandJotaiReact QueryAtomic Design PatternStorybookClass-based Modules

Collaboration & Tooling

협업 효율과 코드 품질을 함께 관리하는 운영 도구

GitGitLabBitbucketStyled ComponentsTailwind CSSESLintPrettier

Collaboration

요구사항과 구현 디테일 사이를 연결하는 역할을 맡아왔습니다

협업에서는 우선순위를 정리하고, 구현에서는 구조를 다듬습니다. 그 두 지점을 함께 보는 것이 제 작업 방식의 핵심입니다.

문제를 구조로 바꾸는 방식

기능이 복잡할수록 먼저 이벤트 흐름과 책임 경계를 정리합니다. 인터랙션 구현, 상태 저장소, 컴포넌트 구조를 함께 설계해 변경 비용을 낮추는 편입니다.

빠르게 익히고 실전에 연결

새로운 기술을 마주하면 빠르게 학습하고 실제 문제에 적용해 검증합니다. SVG, Three.js, React, Vue를 오가며 사용자 경험과 유지보수성을 동시에 고려합니다.