Hyunseok Byun

기업별 맞춤 페이지 구축 요청이 늘어나면서 신규 계약마다 독립 페이지를 반복 생성해야 했고, 이로 인해 구축 속도와 유지보수 효율이 크게 저하되는 상황 발생

Next.js의 middleware와 SSR을 활용한 도메인 및 브랜드별 동적 라우팅 구조와 테마 기반 렌더링 아키텍처 설계

프로젝트 초기 세팅, 폴더 구조 정의, 환경 변수 관리 등 SaaS 전반의 프론트엔드 아키텍처 구성 및 초기 환경 구축 진행

SEO, favicon, 테마 색상, 메인 페이지 구성 요소 관리 콘솔 아이디어 제안 및 구현 방향 협업

고객사 신규 페이지 구축 소요 시간을 기존 일 단위에서 반나절 수준으로 단축

비즈니스팀이 개발자 개입 없이 페이지를 직접 생성하고 운영할 수 있는 구조 확보

멀티테넌트 구조 도입을 통한 신규 기능 확장성 및 서비스 유지보수 효율성 향상

3분 동안 약 1,000명 규모의 동시 요청이 발생하는 환경에서 중복된 API 호출과 비효율적인 호출 순서로 인해 서버 부하가 증가하고 응답 지연이 발생

본문에 Base64 이미지가 포함된 최대 100MB 수준의 대용량 요청으로 인해 데이터 처리 속도가 크게 저하되는 문제가 존재

비즈니스 로직을 기준으로 API 호출 순서를 재설계하여 불필요한 호출을 제거하고 처리 병목을 해소

에디터에서 Base64 이미지를 자동 감지하여 서버를 경유해 AWS S3로 업로드하도록 처리 흐름을 재설계하고, 대용량 요청 본문을 분리하여 응답 지연을 최소화

fetch API 기반 프리페치 구조를 설계하고 prefetch helper를 포함한 전체 캐싱 상태 관리 로직을 구현

TanStack Query를 활용하여 변동성이 낮은 API 데이터를 캐싱하고 재사용성을 확보

axios 기반 API 핸들러 공통 래퍼를 구성하여 인증, 경로, 타입 관리를 일원화하고 중복 fetch 로직을 제거

Next.js Revalidate API 및 유틸리티를 통해 캐시 무효화 및 재검증 전략을 체계화

3분간 1,000명 동시 요청 기준 서버 부하를 약 30% 감소시키고 API 응답 효율을 개선

Base64 이미지 자동 분리 및 업로드 파이프라인 적용으로 대용량 요청 처리 속도를 크게 향상

이미지 포함 페이지의 TTFB를 최대 10배 개선하여 초기 로딩 지연 문제를 해결

공통 데이터 캐싱 적용으로 페이지 로딩 속도를 약 1.5배 향상시키고 유지보수성을 강화

프로젝트마다 공통 UI 컴포넌트를 반복 구현하며 개발 효율이 저하되고, 디자이너와 개발자 간 협업 비용이 증가하는 상황 발생

UI 일관성 확보와 재사용성 강화를 위해 컴포넌트 관리 및 문서화를 체계적으로 통합할 필요성 존재

디자인 시스템 전체 구조 설계 및 모노레포(pnpm) 환경 구성 전 과정을 단독으로 진행하여 팀 표준 환경 확립

fs 기반 SSG 동적 라우팅을 적용하여 MDX 파일 추가만으로 자동 문서화되는 Docs 플랫폼 아키텍처 설계

외부 프로젝트에서도 설치 가능한 CLI 도구 개발 및 Storybook 기반 협업 워크플로우 표준화

Radix UI primitives를 활용한 공통 UI 컴포넌트 설계로 접근성과 안정성 확보

디자이너가 참여할 수 없는 프로젝트 환경에서 기존 디자인 시스템 컴포넌트를 활용, 어드민 UI를 기존 스타일에 맞춰 바로 구현함으로써 프로젝트 기간 단축

Storybook과 Notion API를 연동하여 컴포넌트 단위 코멘트를 Storybook에서 작성하고 Notion에서 직접 확인할 수 있는 피드백 플러그인 구현

공통 UI 재사용을 통한 신규 페이지 제작 속도 향상 및 컴포넌트 개발 기간 평균 1개월 이상 단축

디자이너 참여 없이도 일관된 디자인 기조를 유지하며 개발 진행 가능

Docs 페이지 작성 시 MDX 파일 추가만으로 자동 라우팅 및 문서화 가능

Storybook과 Notion 연동 기반 피드백 사이클 단축으로 협업 효율성 향상

기초 단위 컴포넌트의 신뢰성 확보로 핵심 비즈니스 로직 구현 집중도 향상

프로젝트 전반에서 컴포넌트 구조가 일관성 없이 관리되어 유지보수와 신규 기능 개발 시 진입 장벽이 높아지는 문제 발생

공통 컴포넌트를 재사용하지 못하고 UI를 매번 재구현하는 비효율 누적으로 생산성 저하 심화

기존 app/components 중심 구조를 FSD 아키텍처로 전환하여 기능과 도메인 단위로 구조화

entities, features, widgets, pages 계층 구조를 기반으로 디렉토리 구조를 재편하고 역할과 책임을 명확히 분리

tsconfig 경로 alias 정의 및 eslint 규칙 설정으로 팀 단위 개발 표준화 체계 확립

프로젝트 전반에 동일한 디렉토리 구조와 모듈화 규칙을 적용하여 재사용성을 높이고 기능 확장 시 코드 영향 범위를 최소화

신규 팀원이 프로젝트 구조를 빠르게 이해하고 참여할 수 있는 환경을 확보하여 온보딩 기간 단축

컴포넌트 간 결합도 감소로 재사용성과 확장성이 향상되며 중복 구현 사례가 페이지 단위에서 감소

구조 표준화로 기능 추가 및 유지보수 효율성이 개선되어 전체 개발 속도가 향상

어드민과 디자인 시스템 환경에서 사용자 편집 기능에 대한 요구가 증가했으나 기존 라이브러리만으로는 Notion 수준의 UX 구현이 어려운 상황

디자이너와 운영자가 원하는 방식으로 콘텐츠를 직접 편집하거나 피드백을 제공하기 위한 기능 개선 요청이 지속적으로 발생

Tiptap과 ProseMirror를 기반으로 Slash command, Line placeholder, Toolbar 등을 포함한 커스텀 WYSIWYG 에디터를 설계

Storybook 환경에서 직접 피드백을 작성하고 관리할 수 있도록 Notion API를 연동한 코멘트 플러그인을 구현

개발자가 Storybook에서 등록된 피드백을 Notion에서 실시간으로 확인할 수 있도록 양방향 상호작용 구조를 구성

피드백 수집과 반영 과정을 개발 환경 내부에 통합하여 디자인과 개발 간 소통 효율성을 높이는 협업 워크플로우를 정립

Notion 수준의 인터랙션 제공으로 사용자 적응 시간을 단축하고 편집 효율성을 향상

Storybook에서 피드백을 직접 수집하고 관리하는 환경을 확보하여 협업 병목을 해소

피드백 반영 사이클이 평균 30% 이상 단축되며 전체 개발 프로세스 속도 개선에 기여

기존 솔루션이 Nexacro 기반의 폐쇄적 구조로 유지보수가 어렵고 확장성이 제한된 상태

Vue3 전환 과정에서도 반복되는 코드, 불필요한 API 호출, 비동기 처리 미흡 등 구조적 문제로 성능 저하 발생

Vue3 + TypeScript + Pinia를 기반으로 전체 프론트엔드 아키텍처를 재설계하고 구조를 정비

중복된 API 호출을 제거하고 Promise.all을 통한 비동기 처리 최적화 로직을 구성

폼, 그리드, 검색 조건 등 핵심 기능을 모듈화하여 재사용성과 유지보수성을 강화

검색 조건 동적 생성 로직을 리팩터링하여 코드 복잡도를 줄이고 유지 효율성을 확보

WebSocket 기반 알림 시스템을 구축하여 실시간 알람 및 메시지 기능을 제공

PDF.js와 Fabric.js를 활용하여 도면 관리 기능을 추가하고 사용자 경험을 개선

공통 모듈 라이선스 보호를 위해 Express 기반 자바스크립트 난독화 서버를 구성

VitePress와 JSDoc 기반 문서 시스템을 구축하여 신규 인력 온보딩 효율을 향상

프론트엔드 구조를 전면적으로 재설계하여 유지보수성과 확장성을 확보

기준 정보 로딩과 초기 페이지 응답 속도를 최대 2배까지 개선

공통 모듈화로 반복 개발 비용을 절감하고 신규 기능 구현 속도를 향상

실시간 알림과 도면 관리 기능을 통해 커스터마이징 요구 대응력을 확보

문서 시스템을 통해 신규 인력 온보딩 기간을 단축하고 학습 곡선을 완화

신규 솔루션을 기존 시스템과 연동하기 위해 Oracle 기반 데이터베이스를 MariaDB로 전환이 필요한 상황

기존 쿼리가 ANSI 표준이 아닌 Oracle 전용 문법과 MyBatis Mapper에 의존해 단순 변환이 불가능한 상황

기존 Oracle 쿼리를 분석하고 ANSI SQL 기반으로 리팩터링하여 데이터베이스 종속성을 최소화

MyBatis Mapper의 조건문과 날짜 계산 로직을 표준화하여 MariaDB 환경에서의 호환성을 확보

중복 로직을 제거하고 쿼리 구조를 표준화하여 신규 데이터베이스 환경에서 정상 동작을 검증

MariaDB 기반 신규 솔루션과 기존 데이터를 안정적으로 연동하고 전환을 완료

표준화된 쿼리 구조를 통해 향후 다른 데이터베이스 전환에도 유연하게 대응 가능한 기반을 마련

코로나 상황으로 일본 현지 스튜디오에서 한국어 LQA 인력 확보가 어려웠고, 신규 인력 투입 시 온보딩 및 품질 관리 체계가 부재한 상태

테스터 교체 주기가 짧아 프로젝트별 테스트 품질과 속도 편차가 발생하며 일정 관리에 어려움이 존재

다수 프로젝트의 도메인 지식을 기반으로 TF를 구성하고 TF 리더 역할을 수행하며 품질 관리, 일정 조율, 리포트 검수 프로세스를 총괄

신규 인력 투입 시 반복되는 온보딩 문제를 해결하기 위해 프로젝트별 매뉴얼과 가이드 문서를 직접 작성하고 표준화

온보딩 과정을 프로세스로 시스템화하여 테스터 교체 시에도 일정 지연 없이 업무 연속성을 확보

온보딩 시간을 기존 2~3일에서 1일 수준으로 단축하고 초기 품질 편차를 크게 감소

테스트 품질과 리포트 정확도를 향상하여 검수 완료율과 보고 효율을 개선

주요 프로젝트를 일정 내 출시하며 성공적인 품질 확보를 달성: Bravely Default II, FFBE WOTV, 소드아트온라인 앨리시제이션, 디지몬 리얼라이즈 등