시스템을 잇고,
화면을 완성하는
개발자 조찬익

B2B 웹서비스 관리자 시스템을 담당하며 실무 역량을 쌓았고, 스타트업에서 신규 서비스의 기획 단계부터 웹앱 개발을 담당했습니다.

경력

2022.07 – 2024.10웹 서비스 개발
주식회사 그렉터

B2B 자산관리 시스템

  • B2B 웹 서비스 (위험시설물 관리, 원격 수도검침, 공유재산 관리 등) 다양한 프로젝트의 개발을 수행
  • Total.js Flow(노드 기반 데이터 플로우 도구)를 활용하여 외부 데이터를 가공하고 DB에 반영하는 데이터 처리 흐름을 구성
  • 클라우드 서버와 키오스크 서버 통신을 위한 MQTT 양방향 통신 구조 구성
  • 고양시, 인천광역시, 의정부시, 성남시 등 10개 이상의 지자체 서버를 유지보수 하고 솔루션을 정기적으로 배포하고, 외부 협력사와 관련업무의 실무를 담당
2025.01 – 2025.07프론트엔드 개발
스타트업 버프

레터링케이크 주문제작·픽업 플랫폼

  • 웹앱, 관리자 어드민, React Native(WebView 하이브리드) 앱 개발
  • 포트원 결제 모듈, Zod 런타임 검증, Cypress 테스트 도입

대표 프로젝트

문제가 무엇이었고, 어떻게 풀었고, 무엇이 달라졌는지 기준으로 정리했습니다.

01 공유재산 관리 · 실시간 통신

서로 다른 네트워크의 CMS와 키오스크를 실시간으로 연결

원인
  • CMS에서 키오스크 제어 필요
  • 두 시스템이 서로 다른 네트워크에 있어 직접 통신 불가
해결
  • 중간에 클라우드 서버를 두는 중계 구조 직접 설계·구현
  • CMS 제어 요청을 서버가 받아 MQTT로 키오스크에 전달
  • 키오스크 상태·처리 결과를 역방향으로 전달해 관리자 화면에 실시간 반영
결과
  • 서로 다른 네트워크의 CMS와 키오스크 간 제어 명령·상태 정보 실시간 송수신
관리자 페이지
CMS
클라우드 서버
Total.js Flow
키오스크
기기
네트워크 A제어 요청 · 상태 반영MQTT네트워크 B
02 위험시설물 관리 · 데이터 연동

400여 개 시설의 외부 데이터를 정해진 주기로 반영

원인
  • 국가안전대진단측에서 제공하는 시설 데이터를 내부 시스템에 반영 필요
  • 제공 측 모듈이 Java로 구성
해결
  • Total.js Flow로 수신·가공·DB 저장 흐름 구성
  • 브릿지 라이브러리인 node-java로 Java 모듈을 Node.js 환경에서 호출해 연동
  • 하루 1회 갱신 및 중복 수신 방지 적용
결과
  • 400여 개 시설 데이터를 하루 1회 정해진 주기로 DB에 반영
  • 동일 데이터 중복 수신 방지
외부 기관 · Java→ 수신→ 가공→ DB 저장 400+
03 공유재산 관리 · 동적 UI

사용자가 직접 구성하는 대시보드로 전환

원인
  • 기존의 정적 대시보드는 요구사항 변경시 새 컴포넌트 개발 필요
  • 사용자마다 필요한 데이터 상이
해결
  • 같은 유형의 컴포넌트 통합
  • 사용자가 컴포넌트·데이터 카테고리를 선택해 grid-layout으로 드래그 앤 드롭 배치
  • 컴포넌트의 화면상 배치 좌표를 사용자별로 저장해 개인별 대시보드 유지
결과
  • 새 페이지 개발 없이 사용자가 필요한 구성 직접 생성
  • 사용자별 대시보드 유지
04 레터링케이크 플랫폼 · 앱 · 성능

레터링케이크 픽업 서비스 앱·관리자 웹 개발

업무
  • 레터링케이크 주문제작 및 픽업 플랫폼 서비스 개발
  • 웹앱, React Native, 관리자 어드민 프론트엔드 전체 개발 담당
  • 웹뷰 기반 하이브리드 앱 구조 설계 및 모바일 최적화 UI/UX 구현
  • 포트원을 활용한 결제 모듈 구성
개선
  • 초기 로딩 성능 개선
  • Lighthouse 82 → 97
  • FCP 1.6s → 0.3s
  • LCP 2.2s → 1.0s
LIGHTHOUSE9782 →
FCP0.3s1.6s →
LCP1.0s2.2s →

AI 활용

사용하는 AI

Claude Code

주력 개발 도구. 15개 프로젝트에서 설계, 구현, 리뷰, 배포까지 사용

Claude 앱

조사와 문서 작업, Cloudflare·Vercel·GitHub·Notion을 연결해 배포와 기록 관리

Claude 플러그인
superpowers설계, 계획, TDD, 디버깅 순서를 정해 두는 작업 절차 모음
frontend-design화면 디자인과 UI 구현
code-review여러 리뷰 에이전트로 변경 사항 검토
security-guidance생성된 코드의 보안 취약점 점검
github이슈, PR, 저장소 작업
ponytail요청하지 않은 추상화를 빼고 가장 단순한 해법을 쓰게 함
AI 실제 활용 예시
01 Claude Code · 개인 프로젝트

JPT 학습 단어장

일본어 시험 준비를 위해 Claude Code로 직접 만든 단어 학습 앱. 5,482개 단어를 복습·새 단어로 나눠 매일 학습하고, 진행률을 대시보드로 확인.

달성JLPT N3
달성JPT 635점
학습 홈 화면 — 오늘 학습과 전체 진행률
단어 목록 화면 — 5,482개 단어 검색과 상태 필터
학습 카드 화면 — 복습과 새 단어 플래시카드

기술 스택

01Frontend
  • Next.js
  • TypeScript
  • Recoil
  • React Query
  • Zod
  • Tailwind CSS
  • Nuxt.js
02Mobile · Test
  • React Native
  • WebView 하이브리드
  • Cypress
03Integration
  • MQTT
  • Total.js Flow
  • Elasticsearch
  • MongoDB
04Infra
  • Docker
  • Linux
Certificates SQLD ADsP