사내 보안 리소스 통합 플랫폼 구축기 : 0. 프로젝트 개요와 기술 선택

사내 보안 분석 체계 통합 시스템 프로젝트에 참여

---

우리 회사는 정적 분석(SAST), 동적 분석(DAST), 오픈소스 컴포넌트 분석(SCA) 등 다양한 보안 분석 서비스를 자체적으로 개발하고 운영하고 있다.

기존에 SAST와 관련된 체커(분석 규칙 모듈)를 관리하기 위한 별도의 사내 시스템이 존재했으나, 그 외는 수동 관리에 의존하고 있어 체계적인 통합 관리 플랫폼이 부재한 상황이었다. 특히 신규 체커나 레퍼런스를 추가할 때 중복된 작업이나 커뮤니케이션 비용이 발생할 수 밖에 없는 문제를 가지고 있었다.

이를 해결하기 위해 SAST, DAST, SCA 체커 및 레퍼런스 정보를 하나의 시스템에서 통합 관리할 수 있도록 신규 통합 관리 시스템을 기획하고 구축하는 프로젝트 TF가 꾸려졌다. 나는 프론트엔드 개발자로 참여하게 되었다. 해당 프로젝트 구성원은 나를 포함한 프론트엔드 개발자 3명, 백엔드 개발자 1명, 기획자 1명으로 구성되었다.

나는 단순한 UI 개발을 넘어 초기 UX 설계 및 기획 논의, 기존 시스템 분석과 정보 구조 재설계, 일관된 사용자 경험을 제공하기 위한 컴포넌트 설계 및 UI 개선 등에 적극적으로 참여하고 있다. 또한, 사내 시스템인 만큼 기존 사용자의 피드백을 적극 반영한 개선안을 도출하고 제안하는데 주도적으로 참여하고 있다.

기술 스택 및 선택 배경

---

이 프로젝트에서는 다음과 같은 기술 스택을 사용하고 있다.

TypeScript
Next.js (Pages Router)
shadcn/ui
React Query
Zod
Tailwind CSS
Storybook
Docker
Prettier
ESLint

 

✅ Next.js (Pages Router → App Router 고려 중)

현재는 Pages Router 방식을 사용하고 있다. 그 이유는 기존 프론트엔드 개발 인원들이 Pages Router에 익숙해 있어 빠른 개발 속도와 효율적인 협업을 위해 선택된 방식이다.

하지만 프로젝트에 SSR(Server Side Rendering) 로직이 일부 도입되면서, App Router로의 전환을 중장기적으로 고려하고 있다.

App Router는 레이아웃 관리, 서버 컴포넌트 등 SSR에 강점을 가지기 때문에,점진적인 전환을 위한 기술 조사와 적용 방안을 검토 중이다.

 

 

✅ shadcn/ui – 커스터마이징 가능한 디자인 시스템

사내에는 이미 운영 중인 서비스에 맞춰 제작된 디자인 시스템 컴포넌트가 존재하지만, 사내 컴포넌트는 특정 제품을 중심으로 설계되어 있어, 타 프로젝트에는 오히려 UI/UX의 제약이 되는 경우가 많았다.

이번 프로젝트에서 더 유연하게 커스터마이징 가능한 UI가 필요했고, 설치형 기반으로 구성된 shadcn/ui를 선택하게 되었다.

이를 통해 컴포넌트의 동작 방식이나 스타일을 자유롭게 수정하면서도

디자인 시스템의 일관성은 유지할 수 있어, 확장성과 유연성을 모두 확보할 수 있다.

 

 

✅ React Query – 서버 상태 관리 최적화

서버와의 통신에서 클라이언트 상태와 데이터를 분리하고, 데이터 캐싱, 로딩/에러 상태 관리, 쿼리 무효화 등의 기능을 보다 체계적으로 관리하기 위해 React Query를 도입했다.

이를 통해 복잡한 비동기 API 호출 로직을 간소화하고, 화면 간 데이터 재사용 및 성능 최적화가 가능해졌다.

또한, axios를 함께 사용하면서 인터셉터를 통한 공통 에러 처리나 인증 처리도 간편하게 구성할 수 있었다.

 

 

✅ Zod – 폼 입력 유효성 검증 및 스키마 기반 설계

다양한 입력 폼을 처리해야 하는 요구사항이 있었기 때문에, 정적 타입 기반의 유효성 검증과 스키마 설계를 동시에 지원하는 Zod를 사용하고 있다.

이로 인해 입력 폼의 검증 로직을 명시적으로 구성할 수 있으며,

에러 메시지 관리 및 클라이언트-서버 간 계약 기반의 설계에 도움을 주고 있다.

 

 

✅ Tailwind CSS – 유틸리티 기반 스타일 구성

디자인 시스템의 일관성을 유지하면서도 빠르게 레이아웃을 구성하기 위해, Tailwind CSS를 유틸리티 기반으로 활용하고 있다.

특히 shadcn/ui와 많이 사용하여, 기본 컴포넌트에 필요한 스타일을 빠르게 적용하거나 오버라이딩하기 쉬운 구조를 제공한다.

 

 

✅ Storybook – 커스텀 UI 컴포넌트 관리

shadcn/ui를 커스터마이징하거나 새롭게 UI 컴포넌트를 정의하는 과정에서, 각 컴포넌트를 문서화하고 팀과 공유하기 위한 용도로 Storybook을 도입했다.

Storybook을 통해 독립적인 환경에서 UI를 확인하고 테스트할 수 있어, 빠른 피드백과 컴포넌트 재사용성 확보에 큰 도움이 되었다.

 

 

✅ Docker – CI/CD 및 개발 환경 통합

CI/CD 구성과 개발 환경 표준화를 위해 Docker를 사용하고 있으며, 이미지 생성 시 경량화를 위해 multi-stage build 구조를 적용하고 있다. 이를 통해 동일한 개발 환경을 유지하면서도, 배포 효율성과 빌드 안정성을 높일 수 있는 기반을 마련했다.