← WORK 목록으로
KOREA위시켓웹 개발

보안 솔루션 리뉴얼 구축 FE 개발(React/TypeScript) 전문가

보안 솔루션(SIEM·SOAR·관제 성격)의 프론트엔드를 React 19/TypeScript로 리뉴얼 구축하는 프로젝트입니다. 시각화(ECharts·D3·three.js), 에디터·캔버스(Monaco·Tiptap·React Flow), SSE·WebSocket 기반 실시간 화면과 공통 컴포넌트를 개발하며, Claude Code 등 AI 코딩 도구 활용이 필수입니다. 고난도 시각화·실시간 화면 경험이 있는 React 고급 프론트엔드 개발자와, 화면 개발 위주의 중급 개발자 모두에게 적합합니다.

2026.09.26VIEW 25위시켓에서 수집
Budget6,000,000원
Difficulty고급
Duration2~2.5개월
Work style상주
Required stack

필요 기술

ReactTypeScriptstyled-componentsTanStack QueryzustandEChartsReact FlowWebSocket
Project brief

프로젝트 내용

프로젝트 개요 :
- 보안솔루션 리뉴얼 구축
- FE 구인

계약 일정 :
- 고급 : 10월 12일 투입 ~ 12월 31일 종료 ( 약 2.5 개월 )
- 중급 : 11월 2일 투입 ~ 12월 31일 종료 ( 약 2개월 )

근무 장소 :
- 서울 성동구 성수동

계약 방식 :
- 위임계약

모집 인원 :
- FE 고급 1명 : 월 550 ~ 650만 원 ( 인터뷰 시 협의 가능 )
- FE 중급 2명 : 월 500 ~ 550만 원 ( 인터뷰 시 협의 가능 )

역할 :
- 고급 : 핵심·고난도 화면 개발(시각화, 실시간, 에디터·캔버스), 공통 컴포넌트 개발, API 연동
- 중급 : 화면 개발

세부 일정 :
1) 10월 12일 ~ 10월 30일 1차 개발
2) 11월 2일 ~ 12월 18일 2차 개발 및 알파
3) 12월 21일 ~ 12월 31일 안정화 및 마무리

기술 스택 :
- 언어 : TypeScript, React 19
- 스타일링 : styled-components
- 데이터·상태 : TanStack Query, Table, Virtual, zustand, zod, react-hook-form
- 다국어 : i18next, react-i18next
- 시각화 : ECharts, echarts-gl, D3, three.js
- 에디터·캔버스 : Monaco, Tiptap, React Flow(@xyflow), dagre, libavoid-js(WASM)
- 통신 : axios, SSE, WebSocket
- 툴 : Vite, npm workspaces, Turborepo
- 디자인시스템 : Storybook, Figma, 사내 SDK(npm 패키지)
- 배포 : Bamboo, Docker, Kubernetes, nginx, 사내 npm 레지스트리, Bitbucket
- 협업 : Jira, Confluence
- AI 코딩 도구 : Claude Max (Claude Code)

FE 고급 필수 역량 :
- React·TypeScript 실무 (고급 수준)
- 렌더링·이벤트 흐름 진단, 서버 상태(TanStack Query)와 클라이언트 상태(zustand)를 구분한 구현
- styled-components 등 CSS-in-JS와 Storybook 기반 공통 컴포넌트 개발
- Figma 시안 해석과 디자이너 커뮤니케이션
- SSE·WebSocket 기반 실시간 화면 구현
- 번들 크기와 런타임 성능 개선
- Claude Max 요금제로 Claude Code를 사용해 개발 (구독 필수 - 요금 지원 가능)
- AI 코딩 도구 실무 경험, 하네스·컨텍스트 엔지니어링과 생성 결과 검증
- Jira 기반 이슈·일정 관리, Confluence 기반 문서 공유

FE 중급 필수 역량 :
- React·TypeScript 실무
- styled-components 등 CSS-in-JS로 컴포넌트 구현
- TanStack Query, react-hook-form, zod 기반 화면 개발
- Figma 시안과 공통 컴포넌트를 활용한 화면 구현
- Swagger 명세 기반 API 연동
- Claude Max 요금제로 Claude Code를 사용해 개발 (구독 필수 - 요금 지원 가능)
- AI 코딩 도구 실무 경험, 하네스·컨텍스트 엔지니어링과 생성 결과 검증
- Jira 기반 이슈·일정 관리, Confluence 기반 문서 공유

FE 고급 우대 사항 :
- ECharts·D3·three.js 시각화 또는 React Flow·Monaco·Tiptap 에디터·캔버스 구현
- AI 모델 추론 API 연동과 결과 해석·시각화, AI 개발자와의 협업
- OIDC SSO 로그인 흐름과 JWT 토큰 처리 (갱신, 만료)
- 러시아어처럼 길이가 크게 늘어나는 언어의 다국어 적용
- npm workspaces·Turborepo 모노레포, 사내 SDK 패키지 사용 경험
- SIEM·SOAR·관제 등 보안 제품 개발 경험

FE 중급 우대 사항 :
- TanStack Table·Virtual 기반 대용량 목록 화면
- ECharts 차트 구현
- SSE·WebSocket 실시간 화면
- i18next 다국어 적용
- 보안 제품 개발 경험

기타 사항 :
- Claude Max 비용 지원 가능합니다.
- 고급과 중급의 투입 일자가 다릅니다. 확인 후 지원해주세요.
지원 기회 분석

지원 전에 볼 것

핵심 요구사항

  • React 19·TypeScript 고급 실무 및 서버/클라이언트 상태 구분 구현
  • styled-components·Storybook 기반 공통 컴포넌트 개발
  • SSE·WebSocket 기반 실시간 화면 구현
  • ECharts·D3·three.js 시각화 또는 Monaco·Tiptap·React Flow 에디터·캔버스 구현
  • Claude Max 구독 및 AI 코딩 도구(하네스·컨텍스트 엔지니어링) 실무 경험
  • Figma 시안 해석 및 디자이너 커뮤니케이션

예상 산출물

  • 핵심·고난도 화면(시각화·실시간·에디터/캔버스) 구현
  • Storybook 기반 공통 컴포넌트 라이브러리
  • RESTful API·SSE·WebSocket 연동 완료된 FE 애플리케이션
  • 다국어(i18next) 적용 화면

매력 포인트

  • 월 500~650만 원 수준의 명확한 고단가
  • 기술 스택·역할·일정이 매우 구체적으로 명시됨
  • 최신 스택(React 19)과 AI 코딩 워크플로 경험 축적 가능

확인할 점

  • 약 2~2.5개월의 짧은 기간에 고난도 시각화·에디터·실시간 화면을 모두 구현해야 하는 촉박한 일정
  • Claude Max 유료 구독을 개발자에게 요구(요금 지원은 가능하나 조건 확인 필요)
  • 상주 근무(서울 성수동)로 원격 불가
Client signal

클라이언트 정보

회사 · 위시켓 / 지역 · 서울특별시 성동구 / 고용형태 · CONTRACTOR
START THE LOOP · CHOOSE

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.

한 번의 결과에 기대지 않고 다시 만들 수 있도록, 문제 발견부터 제작·배포·수익화까지 이어지는 전체 흐름을 익혀보세요.

TTJ CLASS에서 다음 구조 고르기 →
처리 중...