김보민 · Frontend Engineer

규칙이 많고 자주 바뀌는 업무를,
고치기 쉬운 화면으로 만듭니다

회계 · 금융처럼 업무 규칙이 복잡한 서비스의 프론트엔드를 주로 만들어 왔습니다. 지금은 일진씨앤에스에서 회계 솔루션의 화면과 일부 백엔드를 개발하고 있습니다.

대표 사례

회사 내부 코드라 공개할 수 없어서, 맥락과 결정을 글로 정리했습니다.

일진씨앤에스 · Syncflo 회계 솔루션 고도화 · 2026.03 – 2026.06

경비 종류가 늘어도 서로 영향을 주지 않는 경비 모듈

맥락
개인경비 · 법인카드 · 유류대 · 출장비 등 여러 경비 도메인을 다루는 자사 회계 솔루션(Syncflo-Accounting)
내 역할
메인 프론트엔드 개발 (기여도 50%). 경비 작성 모듈 아키텍처 리팩토링과 AI 기반 회계 자동화 UI/UX 구축
문제
기존 모듈이 기능별로 공통화되어 결합도가 높았고, 신규 요구사항을 반영하면 다른 경비 화면에 사이드 이펙트가 생길 위험이 있었음
결정
각 경비 도메인을 기능별로 나누고, 핵심 비즈니스 로직에 Vue.js Composable 패턴을 적용해 모듈화. 같은 시기에 AI 기능도 구축: AI Agent 기반 계정과목 추천, 대화형 AI 챗봇 연동, OCR 영수증 데이터 파이프라인 연동과 임시 전표 자동 작성, 전표 작성 가이드용 AI 도움말
결과
코드 복잡도를 줄이고 가독성을 확보. 신규 경비 항목을 추가하거나 유지보수할 때 기존 코드에 영향 없이 대응할 수 있는 구조를 확보. AI 도움말은 사용자 편의성 향상과 문의 건수 절감을 목표로 구현
스택
  • Vue.js
  • Nuxt.js
  • Spring Boot
  • MariaDB
일진디스플레이 전자결재 자사 솔루션 교체/이관 · 2025.10 – 2026.03

레거시 데이터 구조를 화면이 떠안지 않게 한 결재 시스템 이관

맥락
기존 결재 솔루션을 자사 솔루션으로 교체. 데이터는 레거시 Oracle에 있고 ERP 전표 타입이 계속 추가됨
내 역할
메인 프론트엔드 개발 (기여도 50%). 신규 전표 타입과 입력 폼 개발, Oracle DB 연동에 따른 전표 데이터 스키마 · 매핑 구조 변경 대응
문제
레거시 Oracle 데이터 구조와 신규 솔루션의 폼 스키마가 맞지 않았고, 전표 타입이 늘수록 폼 로직이 비대해져 렌더링 성능과 유지보수가 걱정됨
결정
전표 타입별 세부 저장 항목과 입력 폼 필드를 컴포넌트로 나누고, 백엔드 데이터와 폼 사이에 프론트엔드 데이터 변환(Data Mapping) 레이어를 분리
결과
인건비 전표와 ERP 연동 전표 4종, 총 5종을 구축하고, 레거시 데이터 이관의 안정성을 확보. 데이터 매핑 레이어를 분리해서, 백엔드 스키마가 바뀌어도 프론트엔드 UI가 받는 영향 범위를 최소화
스택
  • Vue.js
  • Nuxt.js
프리아이브 · 라이나생명 대고객 디지털채널 재구축 · 2022.05 – 2023.05

여러 인증 수단과 앱 웹뷰를 하나의 흐름으로

맥락
보험사 고객용 웹 · 앱 통합 재구축. 하이브리드 앱 웹뷰 화면이 많고 인증 방식이 다양한 금융 서비스
내 역할
메인 프론트엔드 개발 (기여도 20%). Nuxt 기반 구조 설계, 디렉토리 구조 수립, SSR/CSR 데이터 플로우 정의, Element UI 기반 공통 컴포넌트 모듈화, 인증 · 웹뷰 연동
문제
소셜 · 생체 · 공동인증서 등 인증 방식마다 예외 처리가 달랐고, 웹뷰와 네이티브 앱 사이의 데이터 동기화와 비동기 처리가 복잡했음
결정
인증 방식별 로직을 모듈화해 공통 인증 핸들러로 묶고, Native-JS Bridge 호출 방식(파라미터 전달, 비동기 응답)을 표준화. 공통 API 통신과 에러 처리는 Axios 인터셉터 기반 모듈로 구축
결과
토스 · 카카오 로그인, 휴대폰 본인인증, 생체인증(FIDO), 공동인증서를 단일화된 모듈로 통합해 서비스 안정성을 확보. 브릿지 인터페이스를 표준화해서 앱-웹 연동 기능의 개발 생산성을 높이고 화면 오류율을 줄임
스택
  • Vue.js
  • Nuxt.js
  • Element UI

기능을 만들기 전에 묻는 것

새 요구사항을 받으면 먼저 확인하는 질문들입니다.

  1. 이 값은 고객사마다 달라질 수 있나?

    달라진다면 코드가 아니라 설정으로 바꿀 수 있게 합니다. — 어드민 설정값으로 지도 엔진을 전환하는 유류대 정산

  2. 이 규칙은 화면이 바뀌어도 그대로인가?

    그렇다면 화면 밖으로 꺼내 둡니다. — 경비 종류별 Composable 분리

  3. 백엔드 구조가 바뀌면 어디까지 고쳐야 하나?

    영향 범위가 좁아지도록 경계를 둡니다. — 전자결재 이관의 데이터 변환 레이어

  4. 실패하면 어디서 잡히나?

    인증과 통신 오류는 한 곳에서 처리되게 합니다. — 공통 인증 핸들러와 Axios 인터셉터

프로젝트

대표 사례 외에 진행한 주요 프로젝트입니다.

일진씨앤에스

2025.03 – 현재 · 1년 8개월
  • Syncflo 회계 솔루션 구축2025
    문제
    구축형(On-Premise) 솔루션이라 고객사마다 쓰는 지도 API(Mapbox, 카카오맵 등)가 달랐고, 지도 로직이 바뀔 때마다 메인 솔루션 코드를 고쳐야 해서 사이드 이펙트 위험이 있었음
    접근
    유류대 정산 폼 구조는 유지하고 지도 노출 · 거리 측정 로직만 독립 플러그인 컴포넌트로 분리. 어드민 마스터 설정값에 따라 지도 엔진을 동적으로 전환하고, 신규 고객사에는 해당 모듈만 주입하는 구조로 설계. 매입 세금계산서(외부 데이터 수집, 승인 · 발행 상태 동기화, 세금코드별 과세 · 면세와 부가세 자동 계산)와 법인카드 승인 내역의 전표 폼 자동 매핑도 개발
    • Vue.js
    • Nuxt.js

프리아이브

2017.12 – 2025.01 · 7년 2개월
  • 골든디스크 어워즈2023 – 2025
    문제
    초 단위로 접속자가 몰리는 이벤트 사이트라 초기 로딩 속도와 SEO가 중요했고, 레거시 미디어 플레이어가 React 라이프사이클과 맞물려 충돌함
    접근
    Next.js App Router에서 서버 컴포넌트(RSC)와 클라이언트 컴포넌트(RCC)를 나눠 설계해 초기 HTML 렌더링과 SEO를 확보. 레거시 플레이어는 Custom Hook · Ref 기반 래퍼로 독립 모듈화. 공통 UI 라이브러리와 Design System을 만들고 Docker 기반 배포 환경을 구축
    • Next.js
    • React
    • TypeScript
    • Docker
  • AIDT 수학 · 영어 디지털 교과서2024
    문제
    파편화된 레거시 SCSS와 중복 퍼블리싱 코드로 번들이 커지고 UI 수정 시 영향 범위를 파악하기 어려웠으며, 공인 AIDT 기준의 웹 접근성과 성능 요건도 충족해야 함
    접근
    디자인 시스템 기반의 공통 UI 컴포넌트 라이브러리를 만들고, SCSS 변수 · Mixins 체계를 다시 정의해 중복을 줄임. 표준화된 마크업과 접근성 지침을 적용해 영어 AIDT 인증 테스트를 통과
    • Vue.js
    • Vuetify
    • TypeScript
    • SCSS
  • 백상예술대상2024 – 2025
    문제
    해마다 디자인과 화면이 바뀌어 UI가 쉽게 파편화되고, 오래된 역대 수상 기록과 영상 다시보기를 한 사이트에서 보기 쉽게 보여줘야 함
    접근
    공통 컴포넌트를 Storybook으로 먼저 만들고 화면에서 조합하는 방식으로 개발. 라우트 · 서비스(API) · 모델 타입 계층을 분리하고, 부문별 수상 이력은 테이블 컴포넌트로 구조화
    • React
    • TypeScript
    • Storybook
    • Docker
  • 클라우드 관리 콘솔2023
    문제
    관리 화면이 70개 이상이라 화면마다 UI와 스타일이 서로 달라지기 쉬웠음
    접근
    화면 개발 전에 공통 컴포넌트 18종을 먼저 만들고, 사용법을 가이드 페이지로 공유. 스타일은 화면 영역별 SCSS로 나눠 한 화면의 수정이 다른 화면에 영향을 주지 않게 하고, 같은 코드로 SPA와 PWA를 모두 빌드
    • Vue.js
    • Quasar
    • Pinia
    • Docker
  • 카카오브레인 홈페이지 · 채용 사이트2022 – 2023
    문제
    연구 · 기술 · 문화 · 채용 등 콘텐츠 종류가 많고 검색 노출이 중요했으며, 홈페이지에는 브라우저에서 AI 이미지 생성 모델을 직접 체험하는 데모도 필요했음
    접근
    콘텐츠 유형별 페이지와 재사용 가능한 상세 컴포넌트(제목, 본문, 이미지, 유튜브) 체계를 구성하고, 서버 사이드 렌더링과 사이트맵 자동 생성으로 검색 노출을 확보. 이미지 생성 · 변형 · 부분 수정 흐름을 하나의 데모 화면으로 구현
    • Nuxt.js
    • SSR
  • DNDN 금융 앱 웹뷰2020 – 2024
    문제
    이질적인 Stylus 스타일 코드 때문에 UI 수정의 영향 범위를 파악하기 어려웠고, 금융 상품 데이터를 불러오는 동안의 로딩 지연이 화면 이탈로 이어짐
    접근
    Stylus 코드를 구조화된 SCSS 체계로 전면 이관하고, 비동기 로딩 구간에 Skeleton UI 모듈을 적용. 유지보수 기간 동안 약 10여 개의 신규 금융 상품 화면 출시를 지원
    • Vue.js
    • Nuxt.js
    • SCSS

경력

주로 쓰는 기술 — TypeScript, Vue.js · Nuxt.js, React · Next.js, Pinia, Zustand, TanStack Query, Spring Boot

연락처

qhals0710@gmail.comGitHub ↗