미리보기

(주)바텍 에서 계열사 이동

기공소용 업무 시스템 "Clever Lab" 개발

• FE 관련 기능 개발 및 유지보수

  • 기존 레거시 기술스택에서 최신 기술스택으로 마이그레이션 진행

• 공통 디자인 시스템 제작

• 기획 단계에서부터 QA 까지 다른 직군과 긴밀한 커뮤니케이션을 통한 팀 생산성 향상

프론트엔드 FSD(Feature-Sliced Design) 아키텍처 적용

• 코드 응집도를 높여 유지보수성을 끌어 올림

• 코드를 파악 하는데 드는 에너지를 줄여, 협업 효율 증가

메인 서비스 (Clever-Dent) 개발

• FE 관련 기능 개발 및 유지보수

  • 환자관리, 예약, 전자 차트, 파일 첨부, 급여관리 등

  • 국가별 특별 요구사항 대응

  • 사용자 경험 개선을 위한 유지보수

• 통합 로그인 서비스 개발

  • OIDC 프로토콜에 맞게 직접 인증 서버 구현

  • 이후 별도 express 시스템에서 Nest.js 백엔드 모노레포로 통합 진행

Admin 서비스 (Clever-Manager) 개발

• FE 관련 기능 개발 및 유지보수

  • 신규 가입, 병원별 기능제한, 공지사항, 구독기간 관리 등

  • 실제 사용자 통계정보 제공을 위한 Admin 페이지 개발

Clever Lab 서비스 FE 개발

• 사용자 요구사항 반영 및 유지보수 진행

• 기존 기술스택(JavaScript,React) 에서 기술스택(TypeScript, React) 마이그레이션

• "기공물" 및 의뢰서 관리 기능 개발

URL : https://clkboard.labq.vnclever.com

테스트 계정 정보 :

• hospital : rkdwn

• login ID : rkdwn

• password : qwe123!@#

회고

• 이전에 진행했던 프로젝트(CleverDent)에서는 Next.js를 사용 했었지만, 이번에 새로운 기술스택으로 마이그레이션을 진행할 때는 순수 React로 개발을 진행 했어요.

• 그 이유로는, Next.js의 장점이라고 볼 수 있는 SEO/SSR 등을 활용 하기에는

  기공소에서 사용하는 업무용 소프트웨어라 그 의미가 다소 퇴색 된다고 판단 했어요. 과감하게 프레임워크를 버리고 순수 React만을 이용한 서비스를 만들게 되었습니다.

• 기존 코드를 새로운 코드로 마이그레이션 하는 과정 에서 조금 이나마 팀원들 과의 작업 효율을 높이기 위해서 FSD(Feature-Sliced Design) 아키텍쳐를 도입했어요. 다 같이 스터디를 하면서 해당 아키텍쳐에 대한 개념을 익히고 팀 내에서 어떤 규칙을 가지고 사용할 것 인지를 협의해 나가는 과정을 거쳐서 나름 성공적으로 도입 했습니다. 이후 새로운 기능이나 수정사항이 발생 하여도 견고한 아키텍쳐 덕분에 코드 파악 및 수정사항 반영에 투입 되는 리소스가 크게 감소했어요.

로컬 LLM 을 활용한 번역 작업 진행

• 계열사에서 진행하던 프로젝트를 인계하는 과정에서 영문으로 작성된 테스트 케이스를 한글로 번역해야 하는 상황

• 조직 내 에서는 4명 남짓한 QA 인력에 모든 번역 작업을 할당하여 일정 진행에 무리가 발생할 수 있는 상황 이었음

• 전체 TC의 수는 약 15000건이며 번역이 필요한 항목 (테스트조건, 과정, 결과, 설명 등등)을 합치면 3만건 이상 으로, 사람이 직접 번역을 하기에는 무리가 있는 양 이라고 판단함

• 이 항목 전부를 사람이 직접 번역 하는것은 리소스 낭비라고 생각하여 인공지능을 이용하여 번역을 실시함

• 정보 유출의 우려가 있으므로 사용하는 AI는 로컬 LLM 모델을 사용 하였고, 개발 머신의 스펙( M3 Pro / 32G RAM)에 맞게 사용할 모델은 qwen3, 파라미터 크기는 8B로 함

• 전체 항목 번역 진행에 총 28시간 정도가 소요 되었음.

Daily-Check List 자동화

• 약 40개의 E2E 테스트 케이스 작성

• 환자 등록, 예약 생성, 차트 작성, 결제 처리 등 핵심 사용자 플로우를 커버 하는 40개의 테스트코드를 작성함

• 테스트 픽스처(Fixture)로 공통 설정(인증정보, 사용자 정보 등) 재사용

• 수동 테스트 2시간 → 자동화 테스트 20분 으로 소요시간 단축

• QA 리소스는 수동으로 진행하던 회귀 테스트 대신 새로운 기능의 탐색적 테스트에 집중할 수 있게 됨

• 수동 테스트로 인해 발생 할 수 있는 휴먼 에러를 완전히 제거하고, 버그를 조기에 발견할 수 있게 됨

• 기존 프로젝트에서 Context API와 Reducer 조합으로 관리했었음.

• 관리하고 있는 상태에 따른 리렌더링 범위가 넓고, 상태 흐름을 추적하기 어려운 문제를 겪음

• 이를 해결하기 위해 Zustand를 도입해 컴포넌트 간 상태 공유를 단순화하고, 불필요한 렌더링을 줄이는 구조로 최적화 함

• 또한 Devtools를 활용해 상태 변화 디버깅을 용이하게 하여 유지보수 생산성을 향상함

• 프로젝트 규모가 커짐에 따라 공용 컴포넌트의 구조 파악과 재사용성에 어려움이 있었음

• 컴포넌트 중심의 개발과 문서화를 통한 개발 효율 향상을 위해 팀 내에 Storybook 도입을 제안하고 주도

• 컴포넌트 문서화 및 시각적 테스트 환경을 구축하여 디자이너·기획자와의 커뮤니케이션 효율을 높이고, 신규 인력의 온보딩 속도를 향상

• Storybook을 통해 컴포넌트 변경 시 UI 변화나 사이드 이펙트를 시각적으로 빠르게 확인할 수 있어, 릴리즈 전 문제를 조기에 발견하고 품질을 높이는 데 기여

SonarQube 도입

• 소스코드와 개발인력이 늘어남에 따라 유지보수와 관리에 어려움이 있어,

  이를 해소하고자 팀 내에 SonarQube사용을 적극적으로 건의하여 도입을 주도

• 팀원들과 소스코드 분석 결과에 따른 코드 품질과 개발 편의성 사이에서의 고민을 통해 수정 방향성을 협의

개발 표준 정립

• 개발자 마다 다른 스타일로 개발을 진행하여 유지보수와 신규 인력의 빠른 업무 적응에 어려움이 있어, 팀 내에 개발표준 문서의 필요성을 건의

• 개인의 선호도 또는 개발 편의성 보다는 가독성과 유지보수성 관점에서 더 나은 선택이 어떤 것인지를 중심으로 협의

메인 서비스 FE 개발

• 환자 관리, 예약 관리, 전자차트, 수납 등 실제 치과에서 사용하는 핵심 기능 개발

• 국가별 요구사항 반영 및 다국어 작업

서비스 고도화 작업

• 서비스 확장에 따라 코드관리와 유지보수에서 한계를 느껴, TypeScript로 전환을 주도

• 기존 React + JavaScript 로 작성된 코드를 Next.js + TypeScript 로 마이그레이션 진행

• 기존 사용하던 MUI에서 자체 디자인 프레임워크를 제작하여 사용 하도록 변경

• 파편화 되어있는 rest-api들의 통일된 에러처리와 유지보수를 위해 Tanstack-Query를 도입

기술스택 : React.js, Next.js, Apollo-client, GraphQL, i18n, Tanstack-Query, Styled-Component, Emotion.js

URL : https://egy2.vnclever.com/

테스트 계정 정보 :

• hospital : qahawaii

• login ID : user00

• password : qwe123!@#

회고

• 백엔드 개발자로 시작했지만 실제 사용자와 직접 맞닿아 있고 날것의 피드백을 받을 수 있다는 점에 매력을 느껴, 프론트엔드 개발자로 커리어를 발전시켜 나갔습니다. 조금이라도 가지고 있는 백엔드 지식을 통해 프론트엔드 개발 진행에서 데이터 처리와 API 요청 그리고 문제 발생시 해결 방향 등 여러가지 이점을 챙길 수 있었다 생각합니다.

• 개발자로서 어떤 요구사항이 생기면, 단순히 주어진 영역 내에서 구현하는 것에 그치지 않고 데이터 흐름과 API 구조, 서버와의 인터페이스까지 함께 고려하여 문제를 정의하고 해결하는 것을 중요하게 생각합니다. 이 과정에서 프론트엔드 단에서 해결할 수 있는 문제인지, 백엔드 구조 개선이 필요한 문제인지 판단하고, 필요한 경우 직접 API 스펙을 제안하거나 수정 방향을 논의하며 전체적인 개발 효율을 높였습니다.

• 특히 데이터 정합성 문제나 비효율적인 API 구조로 인해 발생하는 이슈에 대해 프론트엔드에서 우회 처리하기보다, 근본적인 원인을 해결하는 방향을 선호합니다. 이를 통해 불필요한 예외 처리와 복잡도를 줄이고, 장기적으로 유지보수하기 쉬운 구조를 만드는 데 기여했습니다.

• 메인 플랫폼의 계정을 통해 자사의 여러 서비스에 로그인이 가능 하도록 하는 통합 로그인 기능 개발

• 외부 API를 끌어다 쓰는것이 아닌 인증관련 서비스를 직접 구현

• 자료나 정보가 매우 한정적인 상황에서 혼자 기술 리서치 부터 설계, 구현까지 진행

• OIDC-오픈소스 를 활용해 구현

• 관련 블로그 작성

기술스택 : Typescript, Node.js, node-oidc-provider, OAuth 2.0