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

B2B 웹서비스 관리자 시스템을 개발하였고, 프로그램 및 리눅스 서버에 대한 유지보수를 담당하며 실무 역량을 쌓았습니다.

실무사례

2022.07 – 2024.10웹 서비스 개발

주식회사 그렉터

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

노후시설물 관련 외부기관 데이터를 Total.js Flow(노드 기반 데이터 플로우 도구)로 수집·가공해 정해진 주기로 자동 반영하고, 내부 시스템에서 입력·저장한 시설물 정보도 외부기관으로 전송해 반영되도록 하는 양방향 데이터 동기화 파이프라인을 구성하고 운영·유지보수 담당
IoT 장치 수집 데이터를 웹 서비스에서 바로 쓸 수 있도록 가공·저장하는 흐름을 구성해, 운영 중 데이터가 지속적으로 갱신되도록 관리
지자체 실물 서버(리눅스 환경)에 솔루션을 정기적으로 배포·점검하며 유지보수

2022.07 – 2024.10웹 서비스 개발

주식회사 그렉터

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

서로 다른 네트워크에 있는 관리자 페이지와 키오스크를 클라우드 서버를 중계로 두고 MQTT로 연결해, 제어 요청과 상태·처리 결과가 자동으로 오가는 양방향 통신 구조를 구성하고 운영·유지보수 담당
MQTT로 수신한 기기 상태·응답 데이터가 관리자 화면에 자동으로 실시간 반영되도록 구현해, 운영 중 키오스크 상태를 화면에서 바로 확인할 수 있게 함

공유재산 관리 웹 서비스 개발 및 운영 유지보수

정적 대시보드의 유사 컴포넌트를 통합·공통화하고 grid-layout 라이브러리 기반 드래그 앤 드롭 배치를 적용해, 화면을 바꿀 때 새 페이지를 개발하지 않고 사용자가 직접 구성하도록 개선하여 유지보수 효율성을 높임
동적 경로와 사용자별 컴포넌트 배치 좌표 저장으로 다시 접속해도 개인별 대시보드가 유지되도록 구성
10개 이상의 지자체 실물 서버(리눅스 환경)에 솔루션을 정기적으로 배포·점검하며 유지보수하고, 운영 중 요구사항 대응과 외부 협력사와의 실무 협의 담당

2025.01 – 2025.08프론트엔드 개발

스타트업 버프

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

신규 서비스 기획 단계부터 참여
웹앱·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