WebStorm

개발자와 에이전트를 위한 JavaScript 및 TypeScript IDE

에이전트에 프롬프트를 입력하든 직접 코드를 작성하든, WebStorm은 코드의 품질을 보장합니다.

설계부터 프로덕션까지, 전체 워크플로를 한 곳에서

설계 사양 또는 작업 전달

작업 내용을 입력하거나 음성으로 설명하세요. 또는 코드를 선택해 에이전트에 바로 보내세요. UI 작업의 경우 에이전트에 설계 소스를 알려주면 그에 맞는 컴포넌트를 구현합니다.

에이전트와 실행 방식 선택

기본 제공 카탈로그에서 에이전트를 선택하거나 컴퓨터에 이미 설치된 에이전트를 그대로 사용하세요. 그런 다음 프로젝트와 구독을 선택하고, 에이전트를 GUI에서 실행할지 내장 터미널에서 실행할지 결정하세요.

여러 작업을 동시에 관리

한 에이전트가 컴포넌트를 TypeScript로 마이그레이션하는 동안 다른 에이전트는 실패한 테스트를 수정하도록 하세요. 하나의 프로젝트 안에서도, 여러 프로젝트에 걸쳐서도 가능합니다. Agent Sessions(에이전트 세션) 창에서 실행 중인 작업, 완료된 작업, 사용자의 응답을 기다리는 작업을 확인할 수 있습니다.

에디터에서 검토하고 브라우저에서 검증

세션에서 바로 Diff 화면이 열리므로 특정 줄에 주석을 달아 다음 지시 사항으로 전송할 수 있습니다. UI 변경의 경우 에이전트가 브라우저 세션을 열고, 콘솔 로그와 네트워크 요청을 확인하고, 스크린샷을 찍고, 작업 흐름을 다시 실행합니다. 병합하기 전에 수정 결과를 확인할 수 있습니다.

언제든 이어받아 자신 있게 배포

같은 창에서 완전한 JavaScript 도구 모음을 사용해 코드를 탐색하고, 리팩터링하고, 테스트하고, 디버그하세요. 커밋 기록을 확인하고 코드에 확신이 들면 병합하세요.

jetbrains air를 통해 WebStorm 내에서 바로 에이전트를 실행하고 작업 결과를 검증하세요

나만의 에이전트, 나만의 모델, 나만의 구독

사용 중인 에이전트를 연결하고 자체 API 키, 이미 이용 중인 구독 또는 JetBrains AI로 실행하세요. 세션 중에도 언제든지 구독을 전환할 수 있습니다.

사용자와 에이전트를 위한 결정론적 도구

WebStorm resolves every usage, dependency, and type across your JavaScript and TypeScript codebase. Through built-in skills, agents pull that code intelligence on demand to find the right code, refactor safely, migrate patterns across the project, and investigate issues with runtime data instead of plain-text search.

WebStorm이 나에게 맞는지 확신이 서지 않나요?

WebStorm은 JavaScript, TypeScript, HTML, CSS, React, Angular, Vue, Node.js, SQL을 위해 설계되었습니다. 다른 기술 스택을 사용하시나요?

세계를 움직이는 기업의 개발자 650,000명 이상이 신뢰

@Vladjjj

“먼저 WebStorm에서 JetBrains AI를 만족스럽게 사용하고 있으며, 처음부터 AI Ultimate을 유료로 구독해 왔다는 점을 밝히고 싶군요. Junie를 사용하다가 통합된 AI Assistant로 전환했고, 처음에는 Claude를 쓰다가 프런트엔드 관련 작업이 늘어나면서 Codex로 옮겼습니다. 모든 기능이 잘 작동하고, 분석과 코드 변경 모두 프로젝트와 긴밀하게 통합되어 있어요. […] 특히 하나의 공급자에만 의존하지 않고 모델을 유연하게 바꿀 수 있다는 점이 마음에 듭니다.”

@Ingvar

“또 하나는 코드 리팩터링입니다. 그냥 기분 탓인지 모르겠지만 심볼 이름만 바꾸는 간단한 작업에도 토큰이 많이 소모되고 시간도 오래 걸리는 것 같아요. 최근 몇 번은 이름을 바꾸고 코드를 빠르게 옮기려고 아예 WebStorm으로 전환했습니다. 에이전트에도 이런 흔한 개발 작업을 위한 더 나은 도구가 있어야 할 것 같아요. 단순히 grep으로 검색하는 데 그치지 않고 코드베이스를 제대로 검색하고 AST를 이해할 수 있는 도구 말이죠.”

@Lancelot_of_camelot

“이번 주에 드디어 WebStorm을 써봤는데(JetBrains 라이선스가 생겼거든요), 정말 훨씬 쾌적하네요! ESLint 설정에 한 시간 정도 걸렸지만, 이제 모든 기능이 잘 작동합니다. Copilot 없이도 자동 완성이 똑똑하게 동작해요. 어떤 심볼이든 마우스를 올리면 정의가 바로 표시됩니다. 흥미롭게도 WebStorm은 VS Code보다 리소스를 더 많이 사용하지만, 그만큼의 가치가 있어요. 전반적으로 몇 달 동안 VS Code로 고군분투할 때보다 이번 주 WebStorm을 쓰면서 생산성이 훨씬 높아졌다고 느꼈습니다.”

@AbhithRajan

“WebStorm의 Figma Connect 덕분에 작업 방식이 완전히 달라졌어요! 베타 버전도 완벽하게 작동해서 복잡한 화면과 컴포넌트를 만드는 데 드는 시간이 크게 줄었습니다. Figma Connect 없이 했던 작업에 대한 검토 피드백을 반영하는 데도 도움이 됐어요. 정말 감사합니다!”

@András Tóth

“이 플러그인은 WebStorm에서 가장 유용한 기능 중 하나였어요. 다시 무료로 제공되어 정말 기쁩니다. 특히 Slonik으로 작업할 때 TypeScript/JavaScript 파일의 원시 SQL 쿼리에 대해 구문 및 의미 검사(예: 참조 테이블과 열이 실제로 존재하는지 확인)를 할 수 있다는 점이 좋았습니다.”

엔터프라이즈급 보안 및 거버넌스

비즈니스용 JetBrains 소개

SOC 2 Type II

검증됨

GDPR

규정 준수

지금 WebStorm 사용해 보기

다운로드

무료 30일 평가판

자주 하는 질문

에이전트는 눈앞의 작업에 집중합니다. WebStorm은 변경 사항이 나머지 코드베이스와 어떻게 맞물리는지, 어디에 영향을 미치는지, 실제로 작동하는지 명확히 보여주어 전체 상황을 파악할 수 있게 해줍니다. 클릭 한 번으로 디버그, 테스트, 안전한 리팩터링을 수행할 수 있으므로 에이전트가 만든 코드를 검증하고 배포할 수 있습니다.

예. 편집, 탐색, 리팩터링, 테스트, 디버그는 여전히 WebStorm의 핵심 기능입니다. 도움이 될 때 에이전트를 사용하거나, 직접 코드를 작성하거나, 같은 IDE에서 두 방식을 오가며 작업하세요. JetBrains 비전에 대해 자세히 알아보세요.

예. JetBrains AI에 포함된 에이전트를 사용하거나, ACP 호환 에이전트를 연결하거나, 원하는 공급자와 API 키를 사용하거나, 지원되는 로컬 모델을 설정할 수 있습니다.

WebStorm은 에이전트에 JavaScript 및 TypeScript 코드베이스 전반에서 지능형 검색, 심층 분석, 코드 구조를 고려한 변경을 수행할 수 있는 결정론적 도구를 제공합니다. 이를 통해 에이전트는 관련 코드를 정확하게 찾고, 단순한 텍스트 일치 대신 IDE의 코드 모델을 사용해 프로젝트 전반에서 변경을 수행할 수 있습니다. 그 결과 토큰 사용량이 줄고 잘못된 접근도 줄어듭니다.

예. React, Angular, Vue, Next.js, TypeScript, Node.js 등이 모두 기본으로 내장되어 있고 처음부터 설정되어 있습니다. 확장 프로그램을 찾아다니거나 번거롭게 설정할 필요가 없습니다.

WebStorm은 비상업적 용도로 무료로 사용할 수 있습니다. 상업적 용도로는 30일 무료 평가판이 제공됩니다.

예. DataGrip의 모든 데이터베이스 도구가 내장되어 있어 추가로 설치할 필요가 없습니다. 모든 데이터베이스에 쿼리를 실행하고, 데이터를 가져오고, 테이블과 버전을 관리할 수 있습니다. WebStorm의 데이터베이스 지원에 대해 자세히 알아보세요.