소개

Cloud Management Platform (B2B SaaS)

• •멀티 클라우드 환경의 자산·비용·보안을 단일 콘솔에서 통합 운영할 수 있도록 하는 것이 목표. 멀티테넌시 구조에서 조직 간 격리와 역할 기반 접근 제어를 지원.
• •프론트엔드 전반을 담당하며, 대시보드 시스템 설계와 멀티테넌시 구조 전환을 주도.

SpaceONE Design System

• •제품 전반의 UI 일관성과 개발 효율을 확보하기 위한 디자인 시스템. 80개 이상의 컴포넌트를 포함.
• •컴포넌트 설계·개발과 협업 프로세스 정립을 담당.

SpaceONE 소개 / 데모 신청 / 문서 제공용 포털

• •외부 고객과 내부 세일즈/CS 조직이 SpaceONE을 이해하고 활용할 수 있도록 돕는 서비스 진입점 역할의 웹 포털

• •고객사별 요구에 따라 고정된 대시보드를 개별 구현하던 방식의 비효율을 해소하기 위해, 사용자가 직접 데이터를 조합·시각화할 수 있는 범용 대시보드 기능을 설계·개발했습니다.
• •Data Source → Data Table → Widget 단방향 의존 구조의 선언적 아키텍처 설계
• •스키마 정의만으로 위젯 옵션 UI가 자동 생성되어 기획 변경 시 코드 수정 최소화
• •Viewport 기반 지연 로딩, 위젯 단위 캐싱으로 초기 렌더링 성능 30% 개선
• •내부 영업·데모·CS 조직의 주요 활용 도구로 정착

• •단일 테넌시로 설계된 플랫폼을 워크스페이스 기반 멀티테넌시 구조로 전환했습니다. 대형 엔터프라이즈 고객의 조직별 운영 분리, 보안 요구사항을 수용하기 위한 프로젝트였습니다.
• •얽혀 있던 라우팅·상태·권한 로직을 분석하고 Admin / Workspace 모드로 분리
• •테넌시 전환 시 Router 이벤트와 API Client를 연동해 요청 단위로 스코프를 주입하는 구조 설계
• •백엔드 팀과 협업해 Scope-aware API 구조 정의
• •모드 전환 규칙과 권한 처리 흐름을 문서화해 팀 내 구현 기준으로 정착

• •리소스 ID를 표현하기 위해 모든 참조 데이터를 전역 스토어에 선적재하던 구조를 개선했습니다. 초기 로딩 비용 증가, 메모리 사용, 데이터 관리 복잡도가 누적되는 문제가 있었습니다.
• •필요한 시점에 필요한 ID만 조회하는 Lazy Loading 구조로 전환
• •동시 발생하는 다수의 참조 요청을 단일 API 호출로 처리하는 Batch 로직 설계
• •TanStack Query 캐시와 연동해 중복 요청 방지
• •JavaScript Proxy를 활용해 Map처럼 접근하면 자동으로 비동기 요청이 트리거되는 인터페이스 제공

• •컴포넌트마다 데이터 페칭 방식이 달라 캐시 정합성 이슈와 중복 요청이 반복되는 문제가 있었습니다. TanStack Query 도입을 주도하고, 팀이 일관되게 사용할 수 있도록 운영 기준을 정립했습니다.
• •다중 테넌트와 복잡한 도메인 구조를 고려한 QueryKey 네이밍 규칙 및 캐시 전략 가이드 수립
• •데이터 접근 패턴과 디버깅 기준을 문서화해 팀 내 공통 기준으로 정착

• •Vue 2.7 환경에서 공식 Devtools가 지원되지 않아 쿼리 상태·캐시 구조를 파악하기 어려운 문제가 있었습니다. 팀의 디버깅 효율을 위해 전용 Devtools를 직접 설계·구현하고 SDK로 배포했습니다.
• •Chrome Extension 형태로 Query 상태, QueryKey, 캐시 데이터를 실시간 확인
• •권한 전환 시 캐시 충돌 등 재현이 어려웠던 문제를 빠르게 추적 가능
• •사용 가이드와 함께 배포해 팀 내 디버깅 기준 통일

• •핵심 사용자 플로우에서 회귀 이슈가 반복되고, 수동 테스트 부담이 누적되는 문제가 있었습니다. Playwright MCP 기반 E2E 테스트 전략을 수립하고 AI를 활용한 시나리오 설계를 도입했습니다.
• •핵심 플로우 중심의 테스트 커버리지 정의
• •AI를 활용한 테스트 시나리오 생성 및 유지보수 효율화
• •회귀 이슈 조기 탐지로 배포 안정성 향상

• •디자인 변경 요청이 산발적으로 들어와 구현 누락, 일정 충돌이 반복되는 문제가 있었습니다. 디자이너-프론트엔드 간 정기 스크럼을 운영해 협업 구조를 정착시켰습니다.
• •변경 요청 → 영향 범위 파악 → 릴리즈 계획을 하나의 흐름으로 정리
• •'의도 / 적용 범위 / 영향 컴포넌트 / 마이그레이션 가이드' 템플릿 표준화
• •구현 누락과 해석 차이로 인한 재작업 감소

• •Slack에서 발생하는 제품 피드백이 체계적으로 관리되지 않아 누락·중복이 반복되었습니다. Slack → Jira → 회고로 이어지는 피드백 처리 흐름을 자동화했습니다.
• •Slack 메시지 액션으로 피드백을 즉시 수집하는 진입점 설계
• •GPT를 활용해 메시지 요약 및 이슈 유형 자동 분류
• •Zapier로 Slack, GPT, Jira API를 연동해 티켓 자동 생성
• •주당 3-4시간의 수작업 이슈 정리 비용 제거

• •AI 도구 활용이 개인 실험에 머물고 팀 차원의 적용으로 연결되지 않는 상황이었습니다. 직접 실험한 내용을 정리해 팀과 조직에 공유했습니다.
• •Multi-Agent Workflow: 역할 기반 워크플로우 패턴을 제품 조직에 공유
• •Context Engineering: PRD/컨벤션/예시를 코드베이스에 관리해 AI 산출물 품질을 높이는 방법을 프론트엔드 조직 워크샵으로 진행

• •이슈 관리가 개인마다 다르게 운영되어 추적과 협업에 비효율이 있었습니다. SDLC와 AI 기반 개발 흐름(AIDLC)을 고려한 팀 프로세스를 설계하고 정착시켰습니다.
• •Jira 티켓 작성 기준(재현/기대 동작/환경/우선순위) 표준화
• •이슈 → 개발 → 검증 → 배포로 이어지는 운영 흐름 정비
• •AI 도구 활용 시 컨텍스트 관리 기준을 프로세스에 반영

헬스케어 다이어리 및 커뮤니티 앱

• •음식 섭취 기록과 영양 분석을 제공하는 다이어리 앱으로 시작해, 유저 반응을 기반으로 SNS형 커뮤니티, 다이어트 배틀 기능으로 피봇하며 성장한 제품.
• •프론트엔드 1인 개발로 MVP 설계부터 런칭, 앱스토어 배포, 이후 기능 확장까지 전반을 담당.

인아웃 앱 운영을 위한 관리자 웹 페이지

• •콘텐츠 관리, 유저 관리, 서비스 지표 확인을 위한 내부 운영 도구로, 서비스 운영과 의사결정을 지원하는 어드민 웹 페이지

• •프론트엔드 1인 개발로 MVP 설계부터 개발, 배포까지 전반 담당
• •빠른 시장 검증을 위해 핵심 기능 중심으로 스코프를 조정하며 출시

• •React Native + WebView 구조를 활용해 기존 웹 자산을 재사용하며 모바일 앱으로 전환
• •App Store, Google Play Store 배포 환경 구축 및 릴리즈 전반을 주도

• •사용자 반응과 서비스 지표를 기반으로 제품 방향 전환 논의에 참여
• •다이어리 중심에서 커뮤니티·유저 인터랙션 중심으로 기능을 재정의

• •콘텐츠·유저 관리, 서비스 지표 확인을 위한 내부 운영 도구를 개발
• •반복 UI 컴포넌트화, 개발 문서 정리로 유지보수 기반을 마련