전 이 진Frontend Engineer
imbinary.dev@gmail.com@im-binaryBlog
자 기 소 개
React, TypeScript, React Native를 사용해 웹, 모바일 앱, Figma Plugin, 내부 운영 도구를 개발해 온 4년차 프론트엔드 개발자입니다.
매장의 냉난방기, 센서, 허브를 사용자가 웹과 앱에서 제어할 수 있도록 만들고, 운영팀과 파트너사가 매장·공간·기기 정보를 관리하는 백오피스 제품을 개발했습니다. QR 원격 제어, BLE Wi-Fi 설정, 도면형 공간관리처럼 실제 현장에서의 사용성과 운영 효율이 중요한 기능을 주로 다뤘습니다.
특히 도면/공간관리 시스템은 장기 프로젝트로 진행되었으며, 개선 방향을 세우고 단계적으로 발전시켜 왔습니다. Figma Plugin을 통해 도면 데이터를 추출하고, 관리자 웹에서 운영팀이 직접 공간과 기기 정보를 관리할 수 있도록 확장하며, 디자인팀·개발팀·운영팀의 반복 작업을 줄이는 데 기여했습니다.
또한 디자인 시스템 패키지, Codemod, 릴리즈 자동화, Slack 봇을 직접 만들며 팀의 개발 생산성을 높이는 작업도 꾸준히 해왔습니다.
복잡하고 불명확한 요구사항을 작은 문제로 나누고, 사용자 경험과 개발자 경험을 함께 고려하여 제품을 구현하는 것이 저의 강점입니다.
기 술 스 택
React, React Native, TypeScript
업 무 경 험
| 씨드앤 SeedN | Frontend Engineer | 2024.08.26 ~ 현재 |
| Flat Plan Generator & 도면/공간관리 시스템 | 2024.10 ~ 현재 |
Figma Plugin, Partners Web, Leaf Web을 연결해 도면 제작부터 운영 관리까지 이어지는 도면 기반 공간관리 시스템을 개선한 장기 프로젝트
🌱 Contribution
- 디자이너가 여러 종류의 도면을 만들고, 프론트엔드와 백엔드가 좌표/ID 데이터를 수동으로 반영하던 기존 작업 방식을 개선
- 도면 제작 자동화, 도면 데이터 추출, 서버 전송, 운영팀 관리 화면, 사용자 웹 공간관리 탭으로 이어지는 장기 개선 로드맵 수립 및 구현
- Figma Plugin에서 공간, 기기, 문, 창문, 구조물 정보를 추출해 서비스에서 사용할 수 있는 도면 데이터로 변환
- Figma 요소의 x, y, width, height 값을 사람이 직접 확인해 입력하던 작업을 Plugin에서 추출해 서버로 전송하는 방식으로 변경
- 운영 중 공간과 기기 ID가 변경되며 도면에 표시된 정보와 실제 데이터가 어긋나는 문제를 해결하기 위해 운영 백오피스에 도면 관리 기능 추가
- 운영팀이 공간과 기기 ID를 직접 매칭하고 수정할 수 있도록 하여 개발팀 요청 없이 도면 데이터를 관리할 수 있는 흐름 구현
- 사용자 웹 공간관리 탭에서 도면 위 공간과 기기 위치를 확인하고 제어할 수 있는 기능 개발
- 하나의 서비스화 도면을 2D/3D 화면에서 함께 활용할 수 있도록 도면 데이터 사용 방식 개선
☘️ Learning
- 자동화는 최초 제작 시간을 줄이는 것에서 끝나지 않고, 운영 중 데이터가 바뀌는 상황까지 고려해야 오래 유지될 수 있음을 배움
- 도면처럼 시각 정보와 실제 기기 데이터가 연결된 기능은 좌표 계산뿐 아니라 “누가 어떤 데이터를 수정할 수 있어야 하는가”가 중요하다는 것을 경험
- Figma Plugin을 활용하면 디자인팀의 기존 작업 방식을 유지할 수 있지만, Figma 노드 구조와 좌표계 제약을 계속 고려해야 함을 배움
| QR 원격 제어 웹 서비스 (Leaf Scan) | 2025.06 ~ 현재 |
QR 코드, NFC 태그로 냉난방기를 원격 제어할 수 있는 사용자 웹 서비스
🌱 Contribution
- QR 코드가 공유되면 현장에 없는 사용자도 제어 화면에 접근할 수 있는 문제를 줄이기 위해 일회성 토큰과 2분 만료 세션 구현
- QR이 부착된 위치 근처의 사용자만 제어할 수 있도록 브라우저 위치 정보를 활용한 접근 제한 기능 개발
- 위치 확인 실패, 세션 만료, 재스캔이 필요한 상황을 화면 상태별로 분리
- 제어 버튼 연타로 같은 명령이 중복 전송되는 문제를 줄이기 위해 pending 상태와 cooldown 처리 구현
- Zoom, Pan, Pinch 제스처를 지원하는 Floor Plan Viewer 개발
- 도면 위 컨트롤러 위치와 상태를 시각화하고, 운전 모드/풍량/온도/타이머 제어 UI 구현
- 한국어/영어/베트남 및 해외 매장 대응
☘️ Learning
- 매장마다 국가와 시간대가 달라질 수 있는 서비스에서는 화면에 보이는 시간이 곧 사용자의 신뢰와 연결된다는 것을 배움
- 위치 확인이나 세션 만료처럼 사용자를 막는 기능은 안내가 부족하면 단순 오류처럼 느껴질 수 있어, 실패 이유와 다음 행동을 구분해 보여주는 것이 중요함을 경험
| 사용자용 웹 서비스 (Leaf Web) | 2025.11 ~ 현재 |
사용자가 매장, 공간, 기기를 웹에서 확인하고 제어할 수 있는 서비스
🌱 Contribution
- 공간관리 탭을 추가해 사용자가 도면 위에서 공간과 기기 위치를 확인하고 제어할 수 있는 기능 개발
- 컨트롤러, 센서, 허브, 스위치 등 여러 기기 타입을 도면에 렌더링하고 상태를 UI에 반영
- 매장 현지 시각과 서버 기준 시각을 변환하는 스케줄 유틸 및 테스트 작성
- 다중 허브, 스케줄 겹침, 도면 렌더링 등 회귀 가능성이 높은 로직에 Vitest 테스트 추가
- 배포 상태와 PR 정보를 Slack으로 확인할 수 있도록 GitHub Actions 알림 개선
☘️ Learning
- 국가와 시간대가 다른 매장을 함께 다루는 서비스에서는 화면에 보이는 시간이 곧 사용자의 신뢰와 연결된다는 것을 배움
- 도면 기반 UI는 실제 기기 상태와 사용자가 취할 수 있는 행동이 함께 보여야 제어 화면으로 의미가 있음을 경험
- 테스트는 복잡한 화면 전체보다 시간 변환, 겹침 판단, 데이터 가공처럼 깨지기 쉬운 로직부터 작성하는 것이 효과적임을 배움
| 매장·기기 운영 백오피스 (Partners Web / Partners App) | 2025.02 ~ 현재 |
파트너사와 운영팀이 매장, 공간, 기기, 허브 상태를 직접 관리할 수 있도록 만든 백오피스 웹/앱
🌱 Contribution
- 웹에서 매장, 공간, 기기, 허브 상태를 관리하는 화면 개발
- 공간/기기 ID 매칭, 기기 고장 여부, 허브 전원/연결 상태, 동기화 주기 설정 등 운영 관리 기능 개발
- 앱에서 현장 작업자가 기기 등록, 공간 관리, 컨트롤러 정보 수정을 할 수 있는 기능 개발
- 기기 등록과 컨트롤러 설정 과정에서 BLE 연결, 기기 정보 전송, 서버 저장이 순서대로 처리되도록 화면 흐름 구현
- 저장 중 화면 이탈 방지, 저장 버튼 중복 클릭 방어, 이미지 업로드 포맷 변환 등 현장 작업 중 발생할 수 있는 상황 처리
☘️ Learning
- 백오피스는 사용자 수가 적어도 운영 효율에 직접 영향을 주기 때문에 입력 검증, 수정 가능 여부, 저장 상태가 명확해야 함을 배움
- 기기 등록과 컨트롤러 설정 기능을 개발하며 BLE 연결, 기기 정보 전송, 서버 저장 중 하나라도 실패하면 사용자가 어디서 다시 시도해야 하는지 알기 어렵다는 것을 경험
- 현장 작업자가 사용하는 앱은 개발자가 예상한 순서대로만 사용되지 않기 때문에 저장 중 이탈 방지와 중복 요청 방어가 필요함을 배움
| 사용자용 모바일 앱 (Leaf App) | 2025.01 ~ 현재 |
사용자가 모바일에서 냉난방기를 제어하고 기기를 설정할 수 있는 React Native 앱
🌱 Contribution
- React Native를 사용해 iOS/Android 앱 기능 개발
- 에어컨 온도, 풍량, 운전 모드 제어 및 제어 히스토리 화면 개발
- BLE 기반 Wi-Fi 설정 흐름 구현: Wi-Fi 목록 조회, 비밀번호 전송, 연결 상태 확인, 실패 시 재시도 처리
- 스마트 예약 휴일 설정, 기기/계정 관리 등 마이페이지 기능 개발
- 한국어/영어 다국어 대응 및 다양한 해상도 UI 대응
☘️ Learning
- BLE Wi-Fi 설정을 개발하며 Wi-Fi 목록 조회 실패, 비밀번호 오류, 연결 상태 확인 지연, OS별 권한 차이처럼 사용자가 설정 과정에서 멈출 수 있는 지점이 많다는 것을 경험
- 연결 실패 상황에서는 Wi-Fi를 다시 선택해야 하는지, 비밀번호를 다시 입력해야 하는지, 잠시 기다려야 하는지를 화면에서 구분해 안내하는 것이 중요함을 배움
| 팀 공통 패키지 | 2024.11 ~ 현재 |
팀에서 사용하는 웹/앱용 디자인 시스템 및 유틸리티 패키지
🌱 Contribution
- 웹 서비스용 패키지와 React Native 앱용 패키지를 각각 개발 및 유지보수
- Button, TextField, Spinner, IconButton, Text 등 주요 UI 컴포넌트 개발
- Flex, Grid, Spacing, If/Choose, Format, Validate 등 반복적으로 사용되는 UI/유틸 패턴을 패키지로 정리
- Changesets를 사용해 모노레포 버전 관리와 패키지 배포 흐름 구축
- Storybook과 Chromatic을 활용해 컴포넌트 문서화 및 시각적 회귀 확인 환경 개선
- JSCodeshift 기반 Codemod CLI를 개발해 breaking change 마이그레이션 지원
- 패키지 배포와 PR 리뷰 요청을 Slack으로 알리는 자동화 도구 개발
☘️ Learning
- 공통 패키지는 컴포넌트를 잘 만드는 것만큼 버전 관리, 문서화, 마이그레이션 방법까지 함께 제공해야 실제로 잘 쓰인다는 것을 배움
- breaking change는 변경 자체보다 사용하는 팀이 안전하게 따라올 수 있는지가 더 중요함을 경험
- 팀 생산성은 큰 플랫폼뿐 아니라 리뷰 알림, 배포 알림, 패키지 템플릿 같은 작은 자동화에서도 꾸준히 개선될 수 있음을 배움
| 비바리퍼블리카 | UX Engineer Assistant | 2022.12 ~ 2024.03 |
| TDS-Desktop | 2023.05.17 ~ 2024.03.15 |
구 패키지의 접근성 미대응과 className 중심 구조에서 생기는 문제를 개선한 디자인 시스템 패키지 개발 및 유지보수
🌱 Contribution
- CSS에서 Emotion으로 스타일링 방식 마이그레이션
- 컴포넌트 유지보수 및 인터페이스 개선
- 테스트 코드 작성
- Storybook을 통한 컴포넌트 스펙 문서화
- JSCodeshift를 사용해 구 패키지 prop을 신규 패키지 prop으로 마이그레이션하는 Codemod 작성
- 디자인 시스템 공통 스타일 유틸리티 패키지 개발
☘️ Learning
- 서비스 안정성을 높이려면 내가 작성한 코드가 팀의 기존 코드와 어색하지 않게 이어지는 것이 중요함을 배움
- 컨벤션과 문서가 잘 정리되어 있으면 컴포넌트 사용성과 개발 생산성이 함께 올라감을 경험
- 테스트 작성이 어려운 컴포넌트는 테스트 도구 문제가 아니라 컴포넌트 구조 문제일 수 있음을 배움
| Framer Code Components | 2023.02.14 ~ 2024.03.15 |
Framer에서 React 컴포넌트를 활용해 디자인할 수 있도록 TDS Wrapping 컴포넌트 개발
🌱 Contribution
- Framer Code Component 구현
- Framer 속성 컨트롤 패널 구현
- 구 Framer 컴포넌트를 신규 컴포넌트로 전환하는 마이그레이션 스크립트 작성
☘️ Learning
- 디자이너와 개발자가 같은 용어를 사용해야 불필요한 소통 비용을 줄일 수 있음을 배움
| TDS-PC | 2023.02.14 ~ 2024.03.15 |
PC 전용 토스 디자인 시스템 컴포넌트 개발 및 유지보수
🌱 Contribution
- 디자인 스펙과 구현된 PC 컴포넌트 간극 개선
- 크로스브라우징 이슈 대응
- 컴포넌트 유지보수 및 사용성 개선
☘️ Learning
- 브라우저별 지원 범위를 확인하며 구현하면 예측 가능한 컴포넌트를 만들 수 있음을 배움
- 디자인과 개발 사이의 결정 사항을 문서화해두면 이후 간극을 빠르게 좁힐 수 있음을 경험
| XT | 2023.01.02 ~ 2024.02.14 |
Framer 사용자 생산성을 높이기 위한 Toss Framer Chrome Extension 개발 및 유지보수
🌱 Contribution
- 컴포넌트 다크모드/라이트모드 테스트 기능 개발
- 큰글씨 모드 테스트 기능 개발
- 리소스 관리 웹 페이지에 TanStack Query 도입
- 무한 스크롤 기능 개발
☘️ Learning
- QA 전에 테스트 케이스를 정리하면 확인 범위가 명확해지고 배포 속도도 빨라질 수 있음을 배움
- 생산성 도구는 사용자 범위가 넓을수록 작은 개선도 큰 임팩트로 이어질 수 있음을 경험
오픈소스 기여
| MDN 문서 오탈자 수정 기여 | Pull requests |
| @toss/slash 문서 i18n 기여 | Pull requests |