권다혜프론트엔드 개발자

설정이 많은 화면을 조합으로 정리합니다

통합 모니터링과 클라우드 관리 플랫폼에서 장치·플랫폼 설정 영역을 담당했습니다. 조건이 얽혀 사용자가 판단하기 어려운 화면을, 앞단의 선택 하나가 이후 구성을 결정하는 구조로 바꿔왔습니다.

  • 4년 9개월2021.12 ~ 재직 중
  • Vue 3 · TypeScript실무 주력
  • React · Next.js개인 프로젝트
  • B2B 엔터프라이즈 콘솔담당 도메인

경력 요약

오케스트로㈜

2022.07 ~ 재직 중 · CMP실 인벤토리2팀 · 주임

  • OKESTRO CMP 클라우드 통합 관리 솔루션2026.01 ~ 진행 중플랫폼 연결 설정 · 개요 화면 인터랙션 · 자원 관계도 · 신규 기능 기획·설계 검토
  • 하나금융TI 통합 모니터링 솔루션 VISTA2023.07 ~ 2026.03통합 설정 파트 프론트엔드 단독 담당
  • KB국민은행 IQ+ DevOps 시스템 구축2023.10 ~ 2024.01소스 코드 관리 · 테스트 코드 메뉴
  • 삼성 SCP OpenStack 플랫폼 구축2022.07 ~ 2023.04클라우드 모니터링 유저 콘솔

대보정보통신㈜

2021.12 ~ 2022.06 · 전략기술팀 · 사원

  • 건설공제 고객 중심 정보시스템 고도화2022.02 ~ 2022.06고객 관리 파트 SI
담당 도메인
클라우드 관리 · 통합 모니터링 · DevOps 콘솔. 경력 전체가 B2B 엔터프라이즈 웹 콘솔과 데스크톱 환경입니다. 권한에 따라 화면이 분기되는 단일 콘솔과 접속 경로가 분리된 콘솔을 모두 담당했습니다.
일하는 방식
얽힌 도메인 규칙을 화면 구조로 정리하고, 공통 기반과 판단 근거를 문서로 남깁니다. 기존 코드를 이어받아 구현하며 드러난 문제를 개선하는 일이 많았고, 최근에는 기획·설계 단계부터 참여해 구현 가능성과 API·데이터 구조를 미리 검토합니다.
AI 활용
  • 작은 수정 — 초안을 만든 뒤 동작을 확인하고 필요한 부분만 반영
  • 새로운 기술 검토 — 기존 접근과 AI의 제안을 비교해 적용 여부 판단
  • 큰 작업 — 구현 전에 규칙·작업 순서·검증 기준을 먼저 정리
  • 화면 시안 — 여러 안을 빠르게 만들어 비교
  • 최종 판단 — 구조와 데이터 흐름에 영향을 주는 변경은 직접 확인하고 검증
주력 스택
  • 실무 — Vue, JavaScript, TypeScript
  • 개인 프로젝트 — React, Next.js, Vite
학력
동국대학교 컴퓨터공학전공 학사 (2018.03 ~ 2022.02)

사례 연구 — 설정 구조를 단계적으로 재설계한 과정

하나금융 TI 통합 모니터링 솔루션 VISTA에서 모니터링 대상 장치·플랫폼 통합 설정 파트를 담당했습니다. 이 화면은 한 번에 지금 구조가 된 것이 아니라, 제안하고 구현한 개선안을 스스로 기각한 뒤 다시 설계한 결과입니다.

원안 — 설정 항목마다 한 단계

기획 단계에서 결정된 구조

설정 항목이 많아 항목별로 단계를 나눈 구성이었습니다. 최대 7단계였고, 모든 사용자에게 7단계가 그대로 노출됐습니다.

1차 제안 — 단계를 동적으로 구성

제안 · 구현

자원 유형에 따라 실제로 필요하지 않은 단계가 있다는 점을 확인했습니다. 기획자와 어떤 유형에서 어떤 단계가 필요한지 단계별 조건을 함께 정리한 뒤, 자원 유형에 따라 단계가 동적으로 구성되도록 제안하고 구현했습니다.

재설계 — 필요한 설정을 한 화면에 모으기

직접 기각 후 재제안 · 구현

구현한 화면을 반복해서 테스트하고 QA 이슈를 함께 확인했습니다. 문제가 특정 화면에 머무르지 않고 단계를 이동하는 과정에서 반복된다는 점을 확인했고, 개별 이슈를 하나씩 고치는 대신 단계가 나뉜 구조 자체를 바꾸자고 다시 제안했습니다. 구현 전에는 보류됐던 제안이었지만, 같은 문제가 이어지는 것을 근거로 기획자와 다시 논의해 의견을 모았습니다.

목표를 단계 축소가 아니라 필요한 설정을 한 화면에 모으는 것으로 바꾸고, 그 구성을 무엇이 결정할 수 있는지 거꾸로 찾았습니다. 답은 자원 유형과 벤더 조합이었습니다. 이 조합을 먼저 고르면 필요한 설정만 이어서 보여주는 2단계 구조로 재설계했고, 사용자는 적용되지 않는 항목을 직접 판단해 건너뛸 필요가 없어졌습니다.

당시 이슈 건수를 별도로 기록하지 않아 수치로 제시하지 않았으며, 구조 변경 이후 같은 유형의 QA 이슈가 뚜렷하게 줄어든 것까지 확인했습니다.

구현 — 조합이 구성을 결정하는 구조

조건을 세 층으로 나누고, 해석되는 시점이 다르다는 점을 기준으로 처리 위치를 분리했습니다.

  • 자원 유형 → 섹션 목록 · 1단계 선택으로 확정되므로 조회 데이터로 관리
  • 자원 유형 × 벤더 → 섹션별 컴포넌트 · 같은 시점에 확정되므로 조합 표에서 조회해 주입
  • 필드 값 → 하위 필드 구성 · 입력 중 계속 바뀌므로 런타임 계산으로 격리

조합을 고르면 화면 구성이 결정됩니다

위에서 설명한 VISTA 설정 구조를 일반화해 옮긴 것입니다. 자원 유형과 벤더를 먼저 확정하면 그 조합에 필요한 섹션과 입력 컴포넌트가 결정됩니다. 빗금 친 칸은 지원하지 않는 조합이라 선택할 수 없습니다.

1단계 — 자원 유형과 벤더 선택

자원 유형벤더1벤더2벤더3
컴퓨트
네트워크
스토리지

설정 입력까지 포함한 전체 데모 열기 — 상위 필드를 바꿀 때 하위 설정이 초기화되는 흐름까지 조작할 수 있습니다.

조합이 성립하는 칸만 열려 있습니다. 실무에서는 이 조합 표가 화면 코드가 아니라 별도 데이터로 관리되어, 새 벤더가 추가될 때 화면을 수정하지 않아도 되도록 했습니다.

2단계 — 결정된 설정 구성

조합을 선택하세요

왼쪽 표에서 자원 유형과 벤더 조합을 고르면 이 자리에 필요한 설정 섹션만 구성됩니다.

하위 필드는 상위 필드가 옵션 목록을 채우는 관계여서, 상위 값이 바뀌면 기존 하위 값이 유효하지 않게 됩니다. 사용자가 이유를 모른 채 입력값을 잃지 않도록, 초기화 안내로 변경의 영향을 먼저 알리고 확인을 받은 뒤 초기화합니다. 같은 원칙이 단계 사이에도 적용되어, 1단계 조합을 바꾸면 2단계 설정 전체가 초기화됩니다. 상위 선택이 하위 값의 유효 범위를 정의한다는 하나의 규칙을 층마다 같게 적용해, 조건이 복잡해도 사용자가 동작 결과를 예측할 수 있도록 했습니다.

  • 설정 단계 7단계 → 2단계
  • 단계 진행 컴포넌트를 3개 화면에 공통 적용해 Step 처리 코드 250 line → 53 line
  • 화면 코드에서 조건 분기를 제거하고 조합 데이터로 이동해 벤더 추가 시 화면 수정 불필요

자원 관계를 계층 도식으로

CMP에서 담당한 자원 관계도를 가상 데이터로 재구성했습니다. 표만으로는 한눈에 추적하기 어려운 자원 간 경로를, 계층이 한 방향으로 흐르는 아이소메트릭 도식으로 옮긴 것입니다. 박스에 커서를 올리면 그 자원이 실제로 연결된 경로만 남습니다.

자원 관계도서브넷 4 · 라우팅 테이블 3 · 네트워크 자원 4
public-subnet-2a · 10.0.0.0/24app-subnet-2a · 10.0.128.0/20app-subnet-2c · 10.0.144.0/20subnet-data-2c · 10.0.160.0/20rtb-edge · 서브넷 1core-route-table · 서브넷 3reserved-route-table · 서브넷 0service-igw · gatewaynat-2a · natGatewaynat-2c · natGatewayobject-store-endpoint · vpcEndpointservice-vpcap-northeast-2aap-northeast-2c라우팅 테이블네트워크 자원public-subnet-2a · 10.0.0.0/24public-subnet-2a10.0.0.0/24app-subnet-2a · 10.0.128.0/20app-subnet-2a10.0.128.0/20app-subnet-2c · 10.0.144.0/20app-subnet-2c10.0.144.0/20rtb-edge · 서브넷 1rtb-edge서브넷 1subnet-data-2c · 10.0.160.0/20subnet-data-2c10.0.160.0/20core-route-table · 서브넷 3core-route-table서브넷 3reserved-route-table · 서브넷 0reserved-route-table서브넷 0service-igw · gatewayservice-igwgatewaynat-2a · natGatewaynat-2anatGatewaynat-2c · natGatewaynat-2cnatGatewayobject-store-endpoint · vpcEndpointobject-store-endpointvpcEndpoint
서브넷라우팅 테이블네트워크 자원
확대·축소Space휠맵 안에서 이동Space드래그회전드래그

회전·확대를 포함한 전체 데모 열기 — 3D 와 평면도를 같은 데이터로 전환하고, 끌어서 시점을 돌리거나 Space + 휠·드래그로 확대하고 옮겨볼 수 있습니다. 자원 이름은 핀·텍스트·가리기 중에서 고르고, 핀을 누르면 상세 카드로 펼쳐집니다.

렌더러는 VPC 나 서브넷이라는 개념을 모릅니다. 어댑터가 배치와 색까지 계산해 장면 객체로 넘기고, 렌더러는 그것을 그리기만 합니다. 다른 자원 관계도가 필요해지면 어댑터만 새로 씁니다.

실무 프로젝트

항목이 많은 프로젝트는 주제별로 묶었습니다. 각 주제의 세부 근거는 펼쳐서 볼 수 있습니다.

2026.01 ~ 진행 중오케스트로 · 60명 규모

OKESTRO 멀티 하이브리드 클라우드 통합 관리 솔루션 CMP

플랫폼 연결 설정·관리, 개요 화면의 자원 현황·섹션 배치 인터랙션, 자원 관계도 프론트엔드, 신규 기능 기획·설계 검토

  1. 기존 코드 인수와 운영 기준 정리

    기획 문서와 변경 이력이 부족한 상태에서 중도 합류해, 현재 동작과 API 흐름을 바탕으로 기능 기준을 재구성한 뒤 개발을 이어받았습니다.

  2. 신규 기능 설계와 AI 기반 목업 검증

    구현에 들어가기 전에 화면 방향과 상세 동작을 검토하고, 여러 시안을 직접 비교해 후보를 좁힙니다.

    세부 근거 6건 — 신규 기능 설계와 AI 기반 목업 검증
    • 신규 기능 기획·설계 단계부터 참여해 현재 프로젝트 구조에서의 구현 가능성과 기술적 제약을 프론트엔드 관점에서 검토
    • 신규 화면은 요구사항과 기능 목적을 정리한 뒤 AI를 활용해 여러 HTML 목업을 제작하고, 구조·사용성·기존 화면과의 일관성을 직접 비교해 장점을 조합·보완. 2~3개 후보안으로 정리해 팀장 리뷰를 통해 최종 방향을 결정
    • 목업에 제품 디자인 토큰·공통 컴포넌트 기준을 덧입히는 빌드 레이어를 만들어 이식 전 차이를 점검. 글꼴이 바뀌며 목업의 폭 계산이 어긋나 생긴 말줄임 같은 레이아웃 문제를 미리 발견
    • 기획에서 정의한 개요 화면 레이아웃을 바탕으로, 자원 현황의 바형 표현·필터링과 섹션 배치·이동의 상세 동작을 설계·구현
    • 상태 요약 선택 → 목록 필터링 → 관련 자원 유형 강조로 이어지는 흐름을 구성. 필터를 바꿔도 요약은 전체 기준을 유지하고 목록만 선택 수량 / 전체 수량으로 표시해, 전체 현황과 현재 조회 범위를 혼동하지 않도록 함
    • 섹션 그리드 배치·폭 조절과 상하 순서 이동을 비교 목업으로 구현하고, 방식별 배치 저장·초기화·조작 규칙을 핸드북으로 정리

  3. API·데이터 구조 조율

    화면에 필요한 데이터의 기준을 수집 단계부터 담당자들과 함께 정합니다.

    세부 근거 2건 — API·데이터 구조 조율
    • 필요한 데이터가 기존 API에 없거나 구조 변경이 필요한 경우 수집·백엔드 담당자와 직접 협의해 요청·응답 규약과 데이터 가공 책임을 정의하고, 수집 → 백엔드 → API → 프론트엔드 전체 흐름에서 데이터 기준을 조율
    • 플랫폼별 데이터 단위와 환산 기준을 분석해 서로 다른 표현 방식을 공통 기준으로 정리, 화면 간 일관성 확보

  4. 인터랙션·렌더링 기술 검증

    3D·2D 두 방식으로 보는 자원 관계도를 기획부터 개발까지 혼자 맡았습니다. 결과물을 직접 테스트해 결함을 찾고 수정 방향과 검증 기준을 정했고, 구현에는 AI를 활용했습니다.

    세부 근거 5건 — 인터랙션·렌더링 기술 검증
    • 표로 흩어져 있던 VPC 자원 관계를 계층이 한 방향으로 흐르는 아이소메트릭 도식으로 재설계. 시점 회전·확대·맵 이동을 WebGL 없이 좌표 투영만으로 구현해 글자와 키보드 접근성을 그대로 유지
    • 같은 도식을 WebGL(Three.js)로도 만들어 렌더러 선택 근거를 예상이 아닌 실측으로 대체 — 번들 121KB 증가, 한글 라벨의 텍스처화, 선 굵기·클릭 판정 재구현 비용을 확인하고 SVG 유지로 결론
    • 자원 이름을 박스 위 텍스트에서 콜아웃 핀으로 옮겨, 이름 길이가 박스 크기를 좌우하던 문제와 시점 회전 시 라벨 겹침을 함께 해소. 핀을 펼치면 상세 카드가 뜨고 거기서 상세 화면으로 잇도록 연결
    • 클릭이 간헐적으로만 되는 결함에서, AI의 수정이 스크립트로 만든 클릭 검증은 통과했지만 실제 마우스로는 그대로인 것을 직접 테스트로 확인. 원인을 포인터 캡처의 이벤트 리타기팅으로 특정하고, 이후 검증은 실제 포인터 입력으로 하도록 기준을 바꿈
    • 정지 상태 측정으로는 드러나지 않고 값이 바뀌는 동안에만 어긋나는 결함(확대 중 레이어 불일치)을 연속 측정으로 특정. 렌더 단계를 앞당긴 고침이 다시 초기화 순서를 뒤집는 것까지 확인해, 고침이 부른 결함을 검토 기록으로 남김

  5. 데이터 정합성과 기록

    화면에 보이는 값이 실제 데이터와 어긋나지 않게 하고, 정한 기준은 문서로 남깁니다.

    세부 근거 2건 — 데이터 정합성과 기록
    • API 응답과 화면 상태가 어긋나는 문제를 UI 상태 동기화 구조로 개선
    • 기능 기준과 변경 이력을 문서화해 반복 확인 비용 절감

Vue 3 · TypeScript · TanStack Query · Pinia · Yup · Ant Design Vue · ECharts · vue-grid-layout · pnpm · GitLab · Jira · Confluence

2023.07 ~ 2026.03하나금융TI · 22명 규모

하나금융TI 통합 모니터링 솔루션 VISTA

모니터링 대상 장치·플랫폼 통합 설정 파트 프론트엔드 단독 담당

  • 설정 구조 재설계로 등록 단계 7단계 → 2단계 (사례 연구)
  • 초기 개발 중 UI 라이브러리를 PrimeVue에서 Ant Design Vue로 교체하며 공통 컴포넌트·화면 구성 전환에 참여(3명)하고, 이후 공통 컴포넌트 약 34종 대부분을 직접 설계·구현. 프로젝트 후반 약 1년간 유지보수 담당
  • 클라우드 플랫폼 라우팅을 SPA 구조로 전환해 초기화·URL 이동 이슈 해결
  • 무한 스크롤 목록의 전체 선택 처리 시간을 50~1,000건 구간별로 측정. 가상 스크롤을 적용해도 건수에 따라 392 → 1,368ms로 늘어나, 한 번에 불러오는 건수를 규칙으로 제한하는 pagination을 운영 기준으로 판단
그 외 3건 — 하나금융TI 통합 모니터링 솔루션 VISTA
  • 화면 기획 개선 제안으로 동일 API 중복 호출을 2회 이상에서 1회로 단축
  • 프론트엔드 인수인계 문서 중 통합 파트 전체 작성 (v1.1 2025.07 / v1.2 2025.12)
  • 사용자 교육이 제공되지 않는 환경을 전제로, 별도 안내 없이 다음 행동을 판단할 수 있는 구조를 기준으로 설계

Vue 3 · TypeScript · TanStack Query · Pinia · Ant Design Vue · ECharts · Vite · Yarn Berry · MSW · ESLint · Husky · Bitbucket · Jira

2023.10 ~ 2024.01KB국민은행 · 약 100명 규모

KB국민은행 IQ+ DevOps 시스템 구축

소스 코드 관리 · 테스트 코드 메뉴 담당, 프론트엔드

  • 미구현 상태로 인수한 화면을 완성하고 API 바인딩 수행, 추가 개발이 필요한 기능을 식별해 공유
  • 사용자 권한별 화면 분기 처리 및 권한 조합에 따른 이슈 시나리오 도출
  • 기획과 고객 요구사항이 어긋난 부분을 주도적으로 협의해 기획 수정
  • 개발이 불가한 설계에 대해 근거를 정리해 전달하고 상세 설계 보완 요청
  • 단기 대응과 장기 개선 방안을 구분해 제안, 담당 화면의 후속 작업을 문서로 정리해 인수자에게 전달

Vue 3 · JavaScript · Pinia · Ant Design Vue · ECharts · npm · GitLab

2022.07 ~ 2023.04삼성SDS · 약 13명 규모

삼성 SCP OpenStack 플랫폼 구축

클라우드 모니터링 유저 콘솔 프론트엔드

  • OpenStack 전환으로 지원이 중단된 기능을 대체하고 변경된 데이터 구조에 맞춰 UI 재구성
  • 삭제된 이벤트가 활성 상태로 남는 이슈의 원인을 데이터 구조·기능 흐름 기준으로 파악하고 해결 방법 제시
  • 메트릭 단위 자동 환산 처리로 표시 영역을 벗어나는 이슈 해결
  • 유효성 메시지 처리를 공통 함수로 분리해 재사용성 확보
  • 테스트 시나리오 작성 및 QA 수행

Vue 2 · JavaScript · ECharts · npm · pnpm · GitLab · Bitbucket

2022.02 ~ 2022.06건설공제조합 · 약 70명 규모

건설공제 고객 중심 정보시스템 고도화

고객 관리 파트 SI

  • WebSquare 3 기반 화면을 WebSquare 5로 마이그레이션, 기존 기능 유지 및 신규 요구사항 반영
  • 3개월간 19개 화면 마이그레이션, 해당 화면 QA 이슈 5건
  • API 바인딩 처리 및 실제 데이터와 설계 간 불일치 수정

WebSquare 5 · Java · Eclipse · SVN

개인 프로젝트

React로 기획부터 개발까지 직접 진행하고 있는 프로젝트입니다. Robot Fleet Console은 Next.js, My Games는 Vite를 사용했고, 두 프로젝트 모두 상태·API·도메인 구조를 설계하며 계속 개발하고 있습니다.

2026.06 ~ 진행 중기획 · 설계 · 개발 단독

Robot Fleet Console — 로봇 플릿 관제 콘솔

실무 모니터링 경험을 기반으로 대규모 제조·물류 현장의 관제 시나리오를 직접 설계. 공장 4곳, 로봇 3종.

  • 도메인 단위 features 아키텍처로 분리 (fleet / floor / sites / deployment / flow-map / monitoring)
  • Next.js API Routes를 Mock BFF로 구성해 백엔드 의존 없이 화면·상태 구조 검증
  • 폴링 훅을 상태 관리 라이브러리 없이 직접 구현 — 의존성 변경 시 이전 데이터 잔상 제거, ref로 최신 fetcher 유지해 불필요한 재구독 차단, 화면 이탈 시 잔여 요청 정리
  • OpenLayers로 지리 좌표와 평면도 좌표 두 좌표계를 함께 처리
  • 상태 판정·지표 정의·그래프 구성을 lib 계층으로 분리하고, 순수 함수 대상 단위 테스트 작성
  • 로봇 개체 등록·수정은 도메인 지식 한계를 명시하고 범위에서 의도적으로 제외
/sites거점 맵 — 지리 좌표 위 거점 상태, 마커에서 해당 공장 평면 맵으로 이동
/fleet플릿 대시보드 — KPI 카드와 가동률·알람 순위
화면 4장 더 보기
/fleet공장 × 상태 히트맵과 공장별 현황 스택 바
/fleet/[factoryId]공장 로봇 목록 — 타입·상태·버전 정렬
/floor/[factoryId]공장 평면 맵 — 평면도 좌표계, 격자·평면도 전환
/deployments/[id]배포 프로세스 — 단계별 진행·실패 지점과 분기 경로

각 이미지를 클릭하면 확대해서 볼 수 있습니다. 로컬 실행 화면을 캡처한 것으로, 데이터는 Mock BFF에서 생성한 가상 값입니다.

React 19 · Next.js 15 App Router · TypeScript 5.7 · OpenLayers 10 · Vitest 2 · Testing Library · CSS Modules · pnpm

2026.05 ~ 진행 중기획 · FE · BE · 로컬 인프라 단독

My Games — 플랫폼 통합 게임 라이브러리

외부 플랫폼에서 소유 게임을 가져와 저장하고, 수동 등록 게임과 함께 조회하는 라이브러리.

  • 외부 API 호출과 DB 조회를 화면 단위로 분리 — 동기화 화면은 방금 받은 응답을 그대로 보여주고, 라이브러리 화면은 저장본만 조회해 재호출하지 않음
  • 같은 게임 목록이 두 화면에 나오므로, 지금 보는 것이 방금 받은 외부 응답인지 DB 저장본인지 각 화면 상단에 명시해 사용자가 데이터 기준을 혼동하지 않도록 함
  • 표시 언어 전환에 따라 플랫폼 API의 로케일 파라미터를 함께 바꿔, 설명·에디션 정보를 해당 언어 응답으로 받아 표시
  • 앱 내 WebView 탑재를 고려해 화면 너비를 단계적으로 줄이며 내비게이션 전환, 레이아웃 붕괴, 스크롤이 동작하지 않는 구간을 직접 점검. 재현 조건을 AI에 전달해 수정한 뒤 같은 조건에서 다시 확인
  • NestJS와 Prisma로 API를 직접 구성하고 PostgreSQL을 Docker로 운영
/sync플랫폼 동기화 — 방금 받은 응답을 그대로 표시, 완료 시각과 게임 수 요약
/library라이브러리 — DB 저장본만 조회, 외부 API 재호출 없음
화면 3장 더 보기
/steam-search게임 검색 — 카탈로그 키워드·ID 검색, 페이지당 개수 지정
상세 응답 미리보기 — 표시 언어 한국어
같은 항목, 표시 언어 English — 로케일 파라미터가 응답에 반영되는지 확인

계정 식별 정보는 예시 값으로 대체했습니다. 로컬 실행 화면이며, 외부 플랫폼 데이터는 실제 응답입니다.

React 18 · TypeScript · Vite · React Router · TanStack Query · Zustand · Zod · Tailwind CSS · NestJS · Prisma · PostgreSQL · Docker

개인 인터랙션 실험

개인 표현 실험 · SVG 움직임과 데이터 표현의 경계

스크롤 반응형 수면 실험 →

사용 기술 정리

앞의 프로젝트에서 실제로 사용한 기술만 정리했습니다. 실무에서 운영한 기술과 개인 프로젝트에서 사용한 기술을 구분해 표기합니다.

실무 · 4년 9개월

언어
TypeScript, JavaScript
프레임워크
Vue 3 Composition API, Vue 2
상태
TanStack Query, Pinia, Vuex
UI · 시각화
Ant Design Vue, ECharts, vue-grid-layout
빌드 · 품질
Vite, Webpack, Yarn Berry PnP, pnpm, ESLint, Prettier, Husky, MSW
협업
Jira, Confluence, GitLab, Bitbucket
AI 도구
Claude(주력), Cursor

개인 프로젝트

프레임워크
React 19 / 18, Next.js 15 App Router
상태
TanStack Query, Zustand, 커스텀 폴링 훅 직접 구현
검증 · 지도
Zod, OpenLayers 10
스타일 · 테스트
Tailwind CSS, CSS Modules, Vitest 2, Testing Library
백엔드 · 인프라
NestJS, Prisma, PostgreSQL, Docker