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

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

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

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

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

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

WebView 하이브리드 앱의 결제·인증 문제 해결과 성능 개선

LIGHTHOUSE9782 →
FCP0.3s1.6s →
LCP1.0s2.2s →
원인
  • WebView 환경에서 결제·본인인증 제한적 동작
  • 초기 로딩 성능 저조 (Lighthouse 82점)
해결
  • 앱↔웹 postMessage 양방향 통신 프로토콜 설계 (메시지 타입·응답 코드·예외 처리 통일)
  • 포트원 결제 구성
  • Next.js 14 SSR, 코드 스플리팅, 이미지 최적화 적용
결과
  • Lighthouse 82 → 97
  • FCP 1.6s → 0.3s
  • LCP 2.2s → 1.0s

기술 스택

FRONTEND

ReactNext.js 14TypeScriptRecoilReact QueryZodTailwind CSSMUIVueNuxt.js

MOBILE · TEST

React NativeWebView 하이브리드Cypress

INTEGRATION

MQTTTotal.js FlowElasticsearchDocker

EDUCATION · CERT

사이버한국외국어대학교 중국어학부 졸업SQLDADsP