스타트업 서비스 기획자에게 빠르게 MVP(minimum value product)를 제작 할 수 있게 하여 기획 결과물을 개발없이 MVP로 제작하여, 신속하게 사용자 테스트 및 피드백을 받을 수 있는 시스템 제공.
I2B Toolkit 기술 소개서


1. 프로젝트 개요

I2B Toolkit은 디자인 프로젝트의 전 과정을 체계적으로 관리하는 웹 기반 SaaS 플랫폼입니다. 분석, 컨셉 수립, 제작, 테스트, 리뷰까지 프로젝트 라이프사이클 전반을 하나의 시스템 안에서 운영할 수 있도록 설계되었습니다. 사용자 포털, 관리자 대시보드, 백엔드 API 서버, 공통 라이브러리로 구성된 멀티 프로젝트 아키텍처를 채택하여 각 영역의 독립적인 개발과 배포가 가능합니다.

프로젝트의 핵심 가치는 디자인 프로세스의 표준화와 협업 효율화입니다. 비즈니스 분석부터 최종 멘토 리뷰까지 각 단계별 전문 도구를 제공하고, 매니저, 디자이너, 멘토 등 다양한 역할의 전문가가 하나의 워크플로우 안에서 유기적으로 협업할 수 있는 환경을 제공합니다.


2. 시스템 구성

전체 시스템은 네 개의 프로젝트로 구성됩니다.

[공통 라이브러리 - server-toolkit]
백엔드 서비스가 공유하는 핵심 모듈을 담당합니다. 36개의 엔티티 클래스, 26개의 서비스 클래스, 26개 이상의 데이터 접근 인터페이스가 체계적으로 구성되어 있으며, 인증, 회원, 프로젝트 도메인의 공통 기반을 제공합니다. 공통 유틸리티, 감사 추적 엔티티, 글로벌 예외 처리, 응답 포맷 등 횡단 관심사(Cross-cutting Concerns)를 중앙에서 관리하여 코드 중복을 방지합니다.

[백엔드 API 서버 - i2b-api]
Java 기반의 Spring Boot 프레임워크로 구축된 RESTful API 서버입니다. 120개 이상의 API 엔드포인트가 인증, 회원, 프로젝트, 리소스 관리 등 전 영역에 걸쳐 구현되어 있습니다. 공통 라이브러리를 기반으로 비즈니스 로직을 처리하며, 클라우드 스토리지, CDN, 이메일 서비스 등 외부 시스템과의 통합을 담당합니다.

[관리자 대시보드 - i2b-admin]
React 기반의 싱글 페이지 애플리케이션으로, 리소스 관리(벤치마크, 키워드, 템플릿), 전문가 관리, 사용자 관리, 프로젝트 모니터링 등 운영에 필요한 25개 화면을 제공합니다. 28개의 재사용 가능한 공통 UI 컴포넌트가 구축되어 있어 일관된 사용자 경험과 빠른 기능 확장을 지원합니다.

[사용자 포털 - i2b-user]
마찬가지로 React 기반으로 구축되었으며, 프로젝트 생성부터 분석, 컨셉, 제작, 테스트, 리뷰까지 전체 워크플로우를 지원하는 41개 화면으로 구성됩니다. 프로그레스 인디케이터, 사이드 패널, 탭 네비게이션 등 단계별 작업 흐름에 최적화된 레이아웃을 제공합니다.


3. 핵심 기술 스택

[백엔드]
프레임워크 - Java, Spring Boot - 엔터프라이즈급 서버 프레임워크
데이터 접근 - Spring Data JPA - ORM 기반 데이터 접근 추상화
동적 쿼리 - QueryDSL - 타입 안전 동적 쿼리 빌더
데이터베이스 - MySQL - 관계형 데이터베이스, HikariCP 커넥션 풀
캐싱 - Redis (Lettuce) - 비동기 인메모리 캐싱 및 세션 관리
빌드 도구 - Gradle - 의존성 관리 및 빌드 자동화
코드 생성 - Lombok - 보일러플레이트 코드 자동 생성
보안 - Spring Security - 인증/인가 프레임워크
HTTP 로깅 - Logbook - 요청/응답 로깅 및 디버깅
문서 처리 - Apache POI - 엑셀 파일 생성 및 파싱

[프론트엔드]
프레임워크 - React - 컴포넌트 기반 SPA 아키텍처
라우팅 - React Router - 클라이언트 사이드 라우팅
상태 관리 - Recoil - 원자(Atom) 기반 전역 상태 관리
서버 상태 - SWR - 자동 캐싱, 재검증, 포커스 갱신
HTTP 클라이언트 - Axios - 인터셉터 기반 인증 토큰 관리
UI 라이브러리 - Ant Design - 풍부한 엔터프라이즈 컴포넌트
스타일링 - Styled-components - 컴포넌트 스코프 CSS-in-JS
시각화 - Chart.js, Nivo - 라인, 파이, 버블 차트
인터랙션 - dnd-kit - 드래그 앤 드롭 인터페이스
분석 도구 - React GA4 - 사용자 행동 분석

[인프라]
컨테이너 - Docker - Amazon Corretto JDK 기반 이미지
파일 저장소 - 클라우드 오브젝트 스토리지 - 환경별 분리된 저장소
미디어 배포 - CDN - 이미지 및 미디어 파일 가속 배포
이메일 - 클라우드 이메일 서비스 - 트랜잭션 메일 발송
환경 관리 - 다중 프로파일 - 개발, 스테이징, 운영 환경 분리


4. 핵심 기능

[프로젝트 워크플로우 관리]
플랫폼의 핵심 기능으로, 다섯 단계로 구성된 프로젝트 라이프사이클을 통해 체계적인 디자인 프로세스를 지원합니다. 각 단계는 독립적인 엔티티, 서비스, DTO를 보유하며 프로젝트 루트를 중심으로 계층적 관계를 형성합니다.

- 분석(Analysis): 제품 및 서비스 정의, 고객 프로필 작성, 고객 경험 시나리오 설계, 비즈니스 모델 분석
- 컨셉(Concept): 벤치마킹 분석, 핵심 기능 키워드 도출, 디자인 컨셉 키워드 수립, 벤치마크 코멘트 협업
- 제작(Produce): 화면 구성, 레이아웃 설계, 실시간 협업 코멘트
- 테스트(Test): 프로토타입 링크 관리, 설문 케이스 생성, 사용자 만족도 평가, 설문 응답 수집
- 리뷰(Review): 멘토 피드백 대시보드를 통한 최종 검토 및 품질 관리

[리소스 중앙 관리]
프로젝트 수행에 필요한 벤치마크, 키워드, 템플릿 데이터를 관리자가 중앙에서 등록하고 관리합니다. 사용자는 프로젝트 진행 과정에서 이 리소스를 참조 자료로 활용하여 일관된 품질의 결과물을 생산할 수 있습니다. 각 리소스는 이미지, 키워드 태그, 상세 설명을 포함하며 검색 및 필터링을 지원합니다.

[전문가 매칭 및 협업]
매니저, 디자이너, 멘토 역할의 전문가를 프로젝트에 배정하고 관리하는 시스템을 제공합니다. 역할 기반 권한 분리를 통해 각 전문가가 담당 영역에 집중할 수 있도록 설계되었으며, 프로필 관리, 전문 분야 태깅, 프로젝트 이력 추적 기능을 포함합니다.

[회원 관리]
일반 사용자, 전문가, 관리자 세 가지 역할을 지원합니다. 이메일 인증 기반 가입 절차, 기업 정보 및 팀 규모 관리, 비밀번호 재설정 등 회원 라이프사이클 전반을 처리합니다.

[대시보드 및 데이터 시각화]
프로젝트 현황, 사용자 통계, 리소스 활용 현황을 라인 차트, 파이 차트, 버블 차트 등 다양한 시각화 요소로 제공합니다. 관리자가 전체 시스템의 운영 상태를 한눈에 파악할 수 있도록 설계되었습니다.

[데이터 내보내기]
프로젝트 데이터와 관리 데이터를 엑셀 파일로 추출하여 외부 보고서 작성이나 데이터 분석에 활용할 수 있습니다. 백엔드의 Apache POI와 프론트엔드의 엑셀 라이브러리를 결합하여 서버 사이드 및 클라이언트 사이드 엑셀 생성을 모두 지원합니다.

[드래그 앤 드롭 정렬]
리소스 목록, 화면 구성 요소 등의 순서를 직관적인 드래그 앤 드롭 인터페이스로 변경할 수 있습니다. dnd-kit 라이브러리 기반의 정렬 가능한 테이블을 통해 사용자가 원하는 순서로 콘텐츠를 재배치할 수 있습니다.


5. 아키텍처 설계

[백엔드 - 도메인 주도 설계]
백엔드는 도메인 주도 설계(Domain-Driven Design) 원칙을 따릅니다. 인증(Authentication), 회원(Member), 프로젝트(Project) 세 개의 핵심 도메인이 독립적으로 구성되며, 각 도메인은 Controller, Service, Repository, Entity, DTO 계층으로 분리됩니다. 이러한 수직 슬라이스 구조는 도메인 간 결합도를 낮추고, 각 영역의 독립적인 확장과 유지보수를 가능하게 합니다.

프로젝트 도메인은 다시 분석, 컨셉, 제작, 테스트, 리뷰 다섯 개의 하위 구성(Composition)으로 세분화됩니다. 각 구성은 자체 엔티티, DTO, 서비스를 보유하며, 프로젝트 루트 엔티티를 중심으로 계층적 관계를 형성합니다. 이 설계를 통해 복잡한 프로젝트 워크플로우를 관리 가능한 단위로 분해하면서도 전체적인 일관성을 유지합니다.

횡단 관심사는 global 패키지에서 중앙 관리됩니다. 보안 설정, 캐시 설정, 데이터 접근 설정, 예외 처리, 공통 응답 포맷, 감사 추적 베이스 엔티티 등이 이 영역에 포함되어 모든 도메인에 일관된 인프라를 제공합니다.

[데이터 접근 계층 - QueryDSL 통합]
Spring Data JPA의 기본 기능에 QueryDSL을 결합하여 타입 안전한 동적 쿼리를 지원합니다. 단순 CRUD 작업은 JPA Repository가 처리하고, 복잡한 조회 조건이 필요한 경우 커스텀 리포지토리 구현체를 통해 유연하게 대응합니다. 프로젝션 패턴을 활용하여 필요한 데이터만 선택적으로 조회하는 쿼리 최적화가 적용되어 있어, 복잡한 도메인 관계 속에서도 효율적인 데이터 접근이 가능합니다.

[프론트엔드 - 기능 기반 구조]
프론트엔드는 기능 기반 폴더 구조(Feature-based Structure)를 채택하고 있습니다. 페이지 컴포넌트(pages), 기능별 컴포넌트(components), 레이아웃 컴포넌트(layouts), 전역 상태(states), 유틸리티(utils)가 명확히 분리되어 있으며, 각 컴포넌트는 로직과 스타일이 함께 배치되는 코로케이션 패턴을 따릅니다.

절대 경로 임포트를 지원하여 깊은 디렉토리 구조에서도 깔끔한 import 경로를 유지하며, 테마 프로바이더를 통한 디자인 토큰 중앙 관리로 전체 애플리케이션의 시각적 일관성을 보장합니다.

[상태 관리 - 계층화 전략]
상태 관리는 목적에 따라 세 계층으로 분리됩니다. 앱 전역에서 공유되는 상태(프로젝트 ID, 사용자 정보 등)는 Recoil 아톰으로 관리하여 불필요한 리렌더링 없이 세밀한 구독이 가능합니다. 특정 기능 영역의 탭 네비게이션이나 폼 상태 등 중범위 상태는 React Context와 useReducer 조합으로 처리하며, 컴포넌트 내부 상태는 useState로 관리합니다.

서버 상태는 SWR 라이브러리를 통해 별도로 관리됩니다. 자동 캐싱, 포커스 시 재검증, 네트워크 재연결 시 갱신 등의 최적화가 자동으로 적용되어, 클라이언트 상태와 서버 상태의 명확한 분리를 달성합니다.


6. 인증 및 보안 아키텍처

JWT(JSON Web Token) 기반의 무상태(Stateless) 인증을 구현하였습니다. 액세스 토큰과 리프레시 토큰의 이중 토큰 구조를 채택하여 보안성과 사용자 경험을 동시에 확보하였습니다.

프론트엔드 Axios 인터셉터에 자동 토큰 갱신 메커니즘이 구현되어 있어, 액세스 토큰 만료 시 리프레시 토큰을 통해 자동으로 새로운 토큰을 발급받습니다. 동시에 여러 요청이 실패하는 경우에도 구독자 패턴을 활용하여 토큰 갱신 요청을 한 번만 수행하고, 대기 중인 모든 요청을 순차적으로 재시도합니다. 이를 통해 사용자는 세션 만료를 인지하지 않고 서비스를 이용할 수 있습니다.

역할 기반 접근 제어(RBAC)를 통해 일반 사용자, 전문가, 관리자 각각의 권한 범위를 명확히 분리하고, Spring Security의 메서드 수준 권한 검사를 활용하여 세밀한 접근 제어를 수행합니다. 프론트엔드에서는 ProtectedRoute 컴포넌트를 통해 인증되지 않은 접근을 차단합니다.


7. 데이터 관리 및 캐싱

[자동 감사 추적]
JPA Auditing을 활용한 자동 감사 추적 기능이 모든 엔티티에 적용됩니다. 공통 상위 엔티티(AuditEntity)를 통해 생성일시, 수정일시, 생성자, 수정자 정보가 자동으로 기록되어 데이터 변경 이력을 투명하게 관리합니다.

[인메모리 캐싱]
Redis를 활용하여 토큰 무효화 처리, 이메일 인증 코드 임시 저장 등 시간 제한이 필요한 데이터를 효율적으로 관리합니다. TTL(Time To Live) 기반 자동 만료를 통해 불필요한 데이터가 자동으로 정리되며, Lettuce 클라이언트의 비동기 처리로 높은 처리 성능을 확보합니다.

[파일 및 미디어 관리]
클라우드 오브젝트 스토리지를 통해 파일 업로드, 삭제, 복사 등의 작업을 처리하며, CDN을 경유한 배포로 미디어 로딩 성능을 최적화하고 있습니다. 썸네일 자동 생성, 환경별 분리된 저장소 구성, 보안 URL 발급 등의 기능을 제공합니다.


8. 테스트 전략

백엔드는 JUnit 기반의 테스트 체계를 갖추고 있습니다. 서비스 계층 단위 테스트와 리포지토리 통합 테스트가 구현되어 있으며, 12개의 테스트 데이터 빌더 헬퍼를 통해 테스트 픽스처를 효율적으로 생성합니다.

인메모리 데이터베이스를 활용한 별도의 리포지토리 테스트 환경이 구성되어 있어, 외부 데이터베이스 의존성 없이 데이터 접근 로직을 독립적으로 검증할 수 있습니다. Builder 패턴이 전체 코드베이스에서 광범위하게 활용되어 객체 생성의 가독성과 테스트 코드의 유지보수성을 높이고 있습니다.


9. 배포 환경

Docker 컨테이너 기반 배포를 지원하며, Amazon Corretto JDK 이미지를 기반으로 합니다. Spring 프로파일을 통한 환경별 설정 분리(개발, 스테이징, 운영)로 동일한 빌드 산출물을 여러 환경에 유연하게 배포할 수 있습니다.

프론트엔드는 정적 빌드 산출물로 배포되며, 환경 변수는 GPG 암호화를 통해 안전하게 관리됩니다. 개발 환경에서는 검색 엔진 차단 설정이 자동 적용되어 개발 중인 서비스가 외부에 노출되지 않도록 보호합니다.


10. 기술적 우수성

[관심사의 명확한 분리]
도메인 주도 설계를 통해 비즈니스 로직이 기술적 관심사와 분리되어 있으며, 프론트엔드 역시 페이지, 컴포넌트, 상태, 유틸리티가 체계적으로 구조화되어 있습니다. 새로운 기능 추가 시 영향 범위가 최소화되며, 코드의 가독성과 유지보수성이 우수합니다.

[재사용성과 일관성]
공통 라이브러리를 통한 백엔드 코드 공유, 28개 이상의 프론트엔드 공통 컴포넌트, 통일된 API 응답 포맷, 글로벌 예외 처리 체계를 통해 코드 중복을 줄이고 시스템 전반의 일관성을 유지합니다. 테이블, 모달, 입력 컨트롤, 파일 업로드, 페이지네이션, 검색 등 반복적으로 사용되는 UI 요소가 컴포넌트화되어 개발 생산성과 UI 일관성을 동시에 확보합니다.

[확장 가능한 설계]
각 도메인의 독립적인 구조, 프로파일 기반 환경 설정, 컨테이너 배포 지원은 시스템의 수평적 확장과 새로운 도메인 추가를 용이하게 합니다. 프론트엔드의 기능 기반 폴더 구조 역시 새로운 모듈을 기존 코드에 영향 없이 추가할 수 있도록 설계되어 있습니다.

[개발 생산성]
Lombok을 통한 보일러플레이트 코드 자동 생성, QueryDSL을 통한 컴파일 타임 쿼리 검증, SWR을 통한 서버 상태 자동 동기화, Styled-components를 통한 스코프 스타일링 등 개발자 경험을 고려한 기술 선택이 이루어져 있습니다. 절대 경로 임포트, 테마 중앙 관리, Axios 인터셉터를 통한 인증 자동 처리 등 반복적인 작업을 최소화하는 구조가 갖추어져 있습니다.

[사용자 경험 최적화]
JWT 자동 갱신을 통한 끊김 없는 세션 유지, SWR 캐싱을 통한 빠른 데이터 표시, CDN을 통한 미디어 로딩 최적화가 적용되어 있습니다. 드래그 앤 드롭 정렬, 시각적 차트 대시보드, 프로그레스 인디케이터, 탭 기반 네비게이션 등 직관적인 인터페이스를 통해 사용자가 복잡한 디자인 워크플로우를 효율적으로 수행할 수 있습니다.

[검증된 디자인 패턴]
Repository Pattern으로 데이터 접근을 추상화하고, DTO Pattern으로 엔티티와 API 레이어를 분리하며, Builder Pattern으로 복잡한 객체 생성의 가독성을 확보합니다. Service Layer Pattern을 통한 트랜잭션 관리, Filter Chain Pattern을 통한 보안 처리 등 검증된 엔터프라이즈 패턴을 일관되게 적용하고 있습니다.

[현대적인 기술 스택]
백엔드와 프론트엔드 모두 최신 LTS 버전의 프레임워크와 라이브러리를 사용합니다. 커뮤니티 지원이 활발한 오픈소스를 기반으로 하여 장기적인 유지보수 안정성을 확보하였으며, Spring Boot와 React 생태계의 풍부한 플러그인과 확장 기능을 활용할 수 있습니다.


I2B Toolkit은 체계적인 디자인 프로세스 관리를 위한 웹 기반 플랫폼으로, 도메인 주도 설계에 기반한 견고한 백엔드 아키텍처, 컴포넌트 기반의 모듈화된 프론트엔드, 그리고 이 둘을 잇는 안전하고 효율적인 API 통신 체계를 갖추고 있습니다. 분석부터 리뷰까지 5단계 프로젝트 워크플로우를 중심으로, 전문가 협업, 리소스 관리, 데이터 시각화 등 디자인 프로젝트에 필요한 핵심 기능을 통합적으로 제공합니다.