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

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

실무사례

2022.07 – 2024.10웹 서비스 개발

주식회사 그렉터

노후위험시설물 관리시스템

노후시설물에 관한 외부기관 데이터를 Total.js Flow(노드 기반 데이터 플로우 도구)로 수집·가공하여 반영 및 내부 시스템에서 입력·저장한 시설물 정보를 외부기관으로 전송해 반영되도록 하는 양방향 데이터 동기화 파이프라인 구성 담당
IoT 장치 수집 데이터를 웹 서비스에서 쓸 수 있도록 가공 및 저장

2022.07 – 2024.10웹 서비스 개발

주식회사 그렉터

의정부 리버사이드 프로젝트

서로 다른 네트워크상의 관리자 페이지와 키오스크를 연결하기 위해 클라우드 서버를 매개체로하여 MQTT로 잇는 양방향 통신 업무를 담당
MQTT로 수신한 기기 상태·응답 데이터를 관리자 화면에 실시간 반영하는 UI 개발

공유재산 관리

정적 대시보드의 유사 컴포넌트를 통합하고, grid-layout 라이브러리 기반 드래그 앤 드롭 배치 구현
동적 경로와 사용자별 컴포넌트 배치 좌표 저장으로 개인화 대시보드 구성
인천광역시, 의정부시, 고양시, 성남시 등 10개 이상의 지자체 서버를 유지보수 하고 솔루션을 정기적으로 배포하고, 외부 협력사와 관련업무의 실무를 담당

2025.01 – 2025.07프론트엔드 개발

스타트업 버프

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

신규 서비스 기획 단계부터 참여
웹앱·React Native·관리자 어드민 프론트엔드 전체 담당
피그마로 화면을 설계하고 웹뷰 기반 하이브리드 앱 구조 설계 및 모바일 최적화 UI/UX 구현

대표 프로젝트

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

01 의정부 리버사이드 · 실시간 통신

서로 다른 네트워크의 관리자페이지와 키오스크를 실시간으로 연결

원인

관리자페이지에서 키오스크 등 기기 제어 필요
두 시스템이 서로 다른 네트워크에 있어 직접 통신 불가

해결

중간에 클라우드 서버를 두는 중계 구조 직접 설계·구현
관리자페이지 제어 요청을 서버가 받아 MQTT로 키오스크에 전달
키오스크 상태·처리 결과를 역방향으로 전달해 관리자 화면에 실시간 반영

결과

서로 다른 네트워크의 관리자페이지와 키오스크 간 제어 명령·상태 정보 실시간 송수신

클라우드 서버
Total.js Flow

            키오스크 등
제어대상기기
          
          내부망 A제어 요청 · 상태 반영MQTT내부망 B
        
관리자페이지(컴퓨터)를 눌러 제어 명령을 보내보세요

02 위험시설물 관리 · 데이터 연동

400여 개 시설의 외부 데이터 양방향 동기화

원인

국가안전대진단 측에서 제공하는 시설 데이터를 내부 시스템에 반영해야 했음
내부 시스템에서 입력·저장한 시설 정보도 외부 기관에 반영되어야 해서 양방향 동기화가 필요했음
제공 측 모듈이 Java로 구성되어 Node 환경과 바로 연동할 수 없었음

해결

Total.js Flow(노드 기반 데이터 플로우 도구)로 수신·가공·DB 저장 흐름 구성
브릿지 라이브러리인 node-java로 Java 모듈을 Node.js 환경에서 호출해 연동
하루 1회 갱신 및 중복 수신 방지 적용
내부 시스템에서 입력·저장한 시설 정보를 외부 기관으로 전송해 반영하는 흐름 구성

결과

400여 개 시설 데이터를 하루 1회 정해진 주기로 DB에 반영
동일 데이터 중복 수신 방지
내부에서 입력한 정보도 외부 기관에 반영되어 양방향 동기화

Total.js Flow(노드 기반 데이터 플로우 도구)

            외부기관국가안전대진단 · Java
            
IN
수신node-java 연동
FUNC
가공중복 수신 방지
OUT
DB 저장하루 1회 갱신

            0+
            내 DB시설 데이터
            
출력 포트(●)를 끌어 다음 노드에 연결해 보세요 · 0/4

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

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

Claude 앱

조사와 문서 작업, Cloudflare·GitHub·구글 드라이브을 연결해 배포와 기록 관리

Claude 플러그인

superpowers설계, 계획, TDD, 디버깅 순서를 정해 두는 작업 절차 모음

frontend-design화면 디자인과 UI 구현

code-review여러 리뷰 에이전트로 변경 사항 검토

security-guidance생성된 코드의 보안 취약점 점검

github이슈, PR, 저장소 작업

ponytail요청하지 않은 추상화를 빼고 가장 단순한 해법을 쓰게 함

AI 실제 활용 예시

01 Claude Code · 개인 프로젝트

음악학원 학원생 관리

약 4년간 운영 중인 음악학원 학원생 관리 서비스. 직접 만들어 운영하던 서비스를 Claude Code로 리뉴얼. 학생, 시간표, 출석등 현황을 한곳에서 관리.

운영약 4년

리뉴얼Claude Code

02 Claude Code · 개인 프로젝트

JPT 학습 단어장

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

달성JLPT N3

달성JPT 635점

기술 스택

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