<div id="readability-page-1" class="page"><div><article>

<p data-ke-size="size16">2023년 6월 26일, JetBrains에서 AI Assistant 기능이 추가 되었다.</p>
<ul data-ke-list-type="disc">
<li><a href="https://blog.jetbrains.com/ko/idea/2023/06/ai-assistant-in-jetbrains-ides/">JetBrains IDE의 AI Assistant</a></li>
</ul>
<p data-ke-size="size16">현재 (2023.07.12) 까지 <b>정식 기능은 아니며 EAP 버전에서만 사용 가능</b>하다.</p>
<p data-ke-size="size16">GPT 채팅이 있어서 IDE에서는 어떤 차별점이 있을까 궁금해서 EAP 버전을 설치해서 사용해보기 시작했다.</p>
<blockquote data-ke-style="style1">
<p data-ke-size="size16">아래 모든 단축키는 <b>Mac을 기준</b>으로 한다.</p>
</blockquote>
<h2 id="1-설치" data-ke-size="size26">1. 설치</h2>
<p data-ke-size="size16">IntelliJ나 WebStorm 등 IDEA 에서는 다 지원하기 때문에 어떤 IDE라도 EAP 버전을 설치하면 바로 사용할 수 있다.</p>
<p data-ke-size="size16">EAP 버전을 설치하는 방법은 <a href="https://www.jetbrains.com/ko-kr/toolbox-app/">JetBrains Toolbox</a> 를 설치하고, 이를 실행해보면 다음과 같이 설치된 IDE들의 목록이 나온다.</p>
<p data-ke-size="size16">여기서 EAP 버전을 설치하고 싶은 IDE의 <code>Settings</code> 버튼을 클릭해서</p>
<img src="https://blog.kakaocdn.net/dn/bvabto/btsnhdc0cRq/HGFtHZkWqTBcKag4opXwJ1/img.png" alt="install1">
<p data-ke-size="size16">Settings 페이지에서 <b>Early Access Program</b>을 체크한다.</p>
<img src="https://blog.kakaocdn.net/dn/dyJyR6/btsniuSUItW/a5lE0PxE5ohpkKQkcKRadk/img.png" alt="install2">
<p data-ke-size="size16">그리고 다시 IDE 목록으로 돌아가서 해당 IDE의 Update 버튼을 클릭하면 EAP 업데이트가 진행된다.</p>
<img src="https://blog.kakaocdn.net/dn/cdLPMC/btsnondxCZj/kJUO6xqqZKlEnBkQCMKJA0/img.png" alt="install3">
<p data-ke-size="size16">설치가 끝나고 실행해보면 아래와 같이 EAP 버전인 것을 확인할 수 있다.</p>
<img src="https://blog.kakaocdn.net/dn/HfWUS/btsnnfN8wI6/VYPLKKYSTRDc8IXEadapyK/img.png" alt="eap1">
<p data-ke-size="size16">(IntelliJ 2023 EAP)</p>
<img src="https://blog.kakaocdn.net/dn/bUZHJh/btsnj82PS1F/Wdep7qruHH7RmpKUArh0ik/img.png" alt="eap2">
<p data-ke-size="size16">(WebStorm 2023 EAP)</p>
<p data-ke-size="size16">실행이 완료되면 다음과 같이 우측 탭 영역에 AI Assistant가 추가된 것을 확인할 수 있다.</p>
<img src="https://blog.kakaocdn.net/dn/dPA476/btsnjb6kRmo/XS6Vout5tNckJkSaJwhJVK/img.png" alt="enabl1">
<p data-ke-size="size16">해당 탭을 클릭후 <b>Log in to JetBrains AI</b>을 클릭한다. <br>가입한 JetBrains 계정으로 로그인을 성공하면</p>
<img src="https://blog.kakaocdn.net/dn/bPd7r2/btsnnNqhsKi/EK3YSYPczRqDIuvkvxrt8K/img.png" alt="enabl2">
<p data-ke-size="size16">다음과 같이 AI Chat이 활성화 된 것을 확인할 수 있다.</p>
<img src="https://blog.kakaocdn.net/dn/IUsXF/btsng8vJG3l/Th6PzxNPWtycfFRRDvlepk/img.png" alt="enabl3">
<h2 id="2-주요-기능" data-ke-size="size26">2. 주요 기능</h2>
<p data-ke-size="size16">이렇게 설치된 JetBrains IDE 의 AI 주요 기능들은 다음과 같다.</p>
<ul data-ke-list-type="disc">
<li>AI 채팅 &amp; 코드 분석</li>
<li>리팩토링 &amp; 이름 제안</li>
<li>주석 생성</li>
<li>커밋 메세지 작성</li>
</ul>
<h3 id="2-1-기본-사용-방법" data-ke-size="size23">2-1. 기본 사용 방법</h3>
<p data-ke-size="size16">기본적으로 <code>Option + Enter</code> 로 AI 메뉴바가 활성화 된다.</p>
<img src="https://blog.kakaocdn.net/dn/njV26/btsngTy2Pc0/WL6urvmOaCXPz9xKeknFgk/img.png" alt="shortcut">
<p data-ke-size="size16">해당 AI Actions 을 선택하면 여러가지 옵션들이 나온다.</p>
<h3 id="2-2-ai-채팅--코드-분석" data-ke-size="size23">2-2. AI 채팅 &amp; 코드 분석</h3>
<p data-ke-size="size16">IDE의 우측 상단에 AI 채팅 버튼이 추가되었다.</p>
<img src="https://blog.kakaocdn.net/dn/TrjFW/btsngN6vPFi/AwSVkjXbjg9uDR8CHHcGXK/img.png" alt="chat1">
<p data-ke-size="size16">해당 버튼을 클릭하면 다음과 같이 IDE 안에서 GPT와의 채팅이 가능하다.</p>
<img src="https://blog.kakaocdn.net/dn/cWb9w6/btsnhUdaApZ/GL5LGCNKtgNiKzNRdaCNmK/img.png" alt="chat2">
<p data-ke-size="size16">여기서 여러가지 질문을 할 수도 있지만, 이러면 그냥 open ai chat 브라우저로 가는 것과 큰 차이가 없다.</p>
<p data-ke-size="size16">JetBrains IDE와 AI의 결합은 개발 하는 현재 내 코드와 AI의 시너지 효과가 크다.</p>
<p data-ke-size="size16">예를 들어 <b>타인이 작성한 코드를 분석</b>해야할 때, 해당 코드에 대한 분석을 AI에게 요청할 수 있다.</p>
<p data-ke-size="size16">아래와 같이 현재 보고 있는 메소드를 선택해서 <code>Option + Enter</code> 로 AI 메뉴바를 노출시킨뒤 <b>Explain code</b> 를 선택해보면</p>
<img src="https://blog.kakaocdn.net/dn/ljFfM/btsnj8aG7M0/O4kSTpsycDm3KggbaZMelk/img.png" alt="explain1">
<p data-ke-size="size16">다음과 같이 해당 메소드에 대해 분석과 설명을 해준다.</p>
<img src="https://blog.kakaocdn.net/dn/dY9ts6/btsninTs7fc/52BC99BwDbXGIV9w89BwY1/img.png" alt="explain2">
<p data-ke-size="size16">물론 한글로의 번역을 요청하면 이 역시 잘 수행해준다.</p>
<img src="https://blog.kakaocdn.net/dn/boRxcr/btsnobj9Lqw/aLMC6rWtIoX27mxAFb2OE0/img.png" alt="explain3">
<h3 id="리팩토링" data-ke-size="size23">리팩토링</h3>
<p data-ke-size="size16">AI 메뉴에는 <b>리팩토링</b>도 지원한다.</p>
<p data-ke-size="size16">이번에는 좀 더 긴 메소드를 선택해서 <b>Suggest refactoring</b>을 선택했다.</p>
<img src="https://blog.kakaocdn.net/dn/bMGYo2/btsnnd3RfAg/Zl91dPL7HJi4uTkOQh7kOK/img.png" alt="ref1">
<p data-ke-size="size16">그러면 AI Chat 메뉴에서 다음과 같이 AI가 코드를 리팩토링 해준다.</p>
<img src="https://blog.kakaocdn.net/dn/t6hR8/btsnhSl8NCW/mZjY445BjkojtDxZSZHOB0/img.png" alt="ref2"><img src="https://blog.kakaocdn.net/dn/dRp94J/btsnocXFDEp/hWVKiseKvx31FAkukxpUQ1/img.png" alt="ref3">
<p data-ke-size="size16">왜 그렇게 리팩토링 하는게 좋은지에 대해서도 설명을 남겨준다.</p>
<img src="https://blog.kakaocdn.net/dn/cBXvPj/btsngu0nq2u/9rFiQR4TlvKy3pks2fFuP1/img.png" alt="ref4">
<p data-ke-size="size16">물론 해당 리팩토링이 마음에 안들어서 <b>내가 원하는 방향의 리팩토링을 요청</b>하면 이를 반영한 버전도 제안해준다.</p>
<img src="https://blog.kakaocdn.net/dn/bGJ2X9/btsnhTSR7Lf/ozUY2tzdeRvhlLrTJuypJ1/img.png" alt="ref5"><img src="https://blog.kakaocdn.net/dn/bUTj9Q/btsnheptBJG/sv60HQqEU3lRIk0px5Meb1/img.png" alt="ref6">
<p data-ke-size="size16">이렇게 작업된 코드는 AI 메세지 내부의 우측 상단을 보면 나오는 <b>Insert Snippet at Caret</b> 버튼을 클릭하면 코드가 자동으로 현재 파일에 반영이 된다.</p>
<img src="https://blog.kakaocdn.net/dn/dkPTJJ/btsnkLM1Wk5/YjlocVyogGueoiQ0pkC6qk/img.png" alt="ref7">
<h3 id="함수-변수명-추천" data-ke-size="size23">함수, 변수명 추천</h3>
<blockquote data-ke-style="style1">
<p data-ke-size="size16">Java, Kotlin, Python만 가능</p>
</blockquote>
<p data-ke-size="size16">Mac 기준으로 함수명, 변수명, 클래스명을 변경하는 단축키는 <code>Shift + F6</code> 이다. <br>해당 단축키로 이름을 변경하려고 하면, <b>AI에서 여러 이름을 추천</b>해준다.</p>
<img src="https://blog.kakaocdn.net/dn/qI7Oi/btsng6q73eG/jGgdkpQulgJ7Uyldwjdkd1/img.png" alt="rename1">
<h3 id="2-3-주석-생성" data-ke-size="size23">2-3. 주석 생성</h3>
<blockquote data-ke-style="style1">
<p data-ke-size="size16">Java, Kotlin, Python만 가능</p>
</blockquote>
<p data-ke-size="size16">메소드나 클래스의 코드를 분석해서 주석을 생성할 수 있다.</p>
<p data-ke-size="size16">원하는 메소드나 클래스를 선택한 뒤에 <code>Option + Enter</code> 로 AI Actions를 선택하면</p>
<img src="https://blog.kakaocdn.net/dn/cMbvSX/btsninFX24p/ohAFPKHlIHQdmOZ5GWHgB1/img.png" alt="comment1_1">
<p data-ke-size="size16">다음과 같이 선택된 코드들을 분석해서 주석을 자동으로 생성해준다.</p>
<img src="https://blog.kakaocdn.net/dn/cqxj5f/btsnhs8x7cr/QJiYc5NHfGhDNRsUkCo4G0/img.png" alt="comment1_2">
<p data-ke-size="size16">좀 더 편하게 사용할 수 있도록 메소드나 클래스 상단에 <code>/**</code> 을 입력하면 자동으로 AI 주석을 사용할 것인지 메세지가 뜬다.</p>
<img src="https://blog.kakaocdn.net/dn/9bGqN/btsni8B0nUw/wxzBTLEoXuCnzhJq5TgkkK/img.png" alt="comment2_1">
<p data-ke-size="size16">해당 메세지를 클릭하면 자동으로 주석이 생성된다.</p>
<img src="https://blog.kakaocdn.net/dn/CmObV/btsnim7622n/e6iR98vfDqTnrUoAsuVyZk/img.png" alt="comment1_2">
<h3 id="커밋-메세지-작성" data-ke-size="size23">커밋 메세지 작성</h3>
<p data-ke-size="size16">commit dialog에서도 AI 버튼이 추가되었다. <br><b>이번에 커밋할 파일들의 Diff 내용을 기반으로 커밋 메세지를 작성</b>해준다.</p>
<img src="https://blog.kakaocdn.net/dn/cAGBGv/btsnocDlpZR/lMh5gH762pwlKgyNv5ACVK/img.png" alt="commit1">
<p data-ke-size="size16">위 버튼을 클릭하면 아래와 같이 메세지가 자동으로 dialog에 추가된다.</p>
<img src="https://blog.kakaocdn.net/dn/G5lI2/btsnnUQwyEA/gcBhhi8o952OPIaYyPb1kk/img.png" alt="commit2">
<blockquote data-ke-style="style1">
<p data-ke-size="size16">단… 영어로만 작성된다.</p>
</blockquote>
<h2 id="기타" data-ke-size="size26">기타</h2>
<p data-ke-size="size16">Korean Language Pack을 설치하면 AI 메세지들이 모두 한글로 번역되서 나오지 않을까 추측했지만, 한국어팩을 설치해도 그냥 영어로 주석/커밋메세지들이 작성되었다.</p>
<img src="https://blog.kakaocdn.net/dn/G716v/btsngTeK1If/cLb0BoLrwiKrkhrYV2aoP1/img.png" alt="korean">
<h2 id="마무리" data-ke-size="size26">마무리</h2>
<p data-ke-size="size16">IDE에 AI 기능이 내장되니 확실히 도움이 된다.</p>
<ul data-ke-list-type="disc">
<li>기존 레거시 코드를 분석해야할 때</li>
<li>큰 함수를 작은 함수들로 분해 &amp; 리팩토링 해야할때</li>
<li>적절한 함수명/변수명을 추천받고 싶을때</li>
</ul>
<p data-ke-size="size16">특히 실제 개발하는 과정에서 IDE &lt;-&gt; 브라우저 전환이 빈번하게 이루어지던 현상이 많이 개선 되었다.&lt;/-&gt;</p>
<p data-ke-size="size16">다만 아쉬운 점은</p>
<ul data-ke-list-type="disc">
<li>주석/커밋메세지 등 각 언어에 맞게 지원해야할 부분에서 큰 효과를 보긴 어려웠다.</li>
<li>JS/TS가 아직까지 미지원이라 일부 기능을 사용하지 못하는게 아쉽다.</li>
</ul>
<h2 id="함께보면-좋은-글" data-ke-size="size26">함께보면 좋은 글</h2>
<ul data-ke-list-type="disc">
<li><a href="https://jojoldu.tistory.com/709">ChatGPT와 함께 춤을</a></li>
</ul>
</article></div></div>

기억보단 기록을

이동욱 (향로)

2023년 6월 26일, JetBrains에서 AI Assistant 기능이 추가 되었다.
JetBrains IDE의 AI Assistant
현재 (2023.07.12) 까지 정식 기능은 아니며 EAP 버전에서만 사용 가능하다.
GPT 채팅이 있어서 IDE에서는 어떤 차별점이 있을까 궁금해서 EAP 버전을 설치해서 사용해보기 시작했다.
아래 모든 단축키는 Mac을 기준으로 한다.
1. 설치
IntelliJ나 WebStorm 등 IDEA 에서는 다 지원하기 때문에 어떤 IDE라도 EAP 버전을 설치하면 바로 사용할 수 있다.
EAP 버전을 설치하는 방법은 JetBrains Toolbox 를 설치하고, 이를 실행해보면 다음과 같이 설치된 IDE들의 목록이 나온다.
여기서 EAP 버전을 설치하고 싶은 IDE의 Settings 버튼을 클릭해서
Settings 페이지에서 Early Access Program을 체크한다.
그리고 다시 IDE 목록으로 돌아가서 해당 IDE의 Update 버튼을 클릭하면 EAP 업데이트가 진행된다.
설치가 끝나고 실행해보면 아래와 같이 EAP 버전인 것을 확인할 수 있다.
(IntelliJ 2023 EAP)
(WebStorm 2023 EAP)
실행이 완료되면 다음과 같이 우측 탭 영역에 AI Assistant가 추가된 것을 확인할 수 있다.
해당 탭을 클릭후 Log in to JetBrains AI을 클릭한다. 
가입한 JetBrains 계정으로 로그인을 성공하면
다음과 같이 AI Chat이 활성화 된 것을 확인할 수 있다.
2. 주요 기능
이렇게 설치된 JetBrains IDE 의 AI 주요 기능들은 다음과 같다.
AI 채팅 & 코드 분석
리팩토링 & 이름 제안
주석 생성
커밋 메세지 작성
2-1. 기본 사용 방법
기본적으로 Option + Enter 로 AI 메뉴바가 활성화 된다.
해당 AI Actions 을 선택하면 여러가지 옵션들이 나온다.
2-2. AI 채팅 & 코드 분석
IDE의 우측 상단에 AI 채팅 버튼이 추가되었다.
해당 버튼을 클릭하면 다음과 같이 IDE 안에서 GPT와의 채팅이 가능하다.
여기서 여러가지 질문을 할 수도 있지만, 이러면 그냥 open ai chat 브라우저로 가는 것과 큰 차이가 없다.
JetBrains IDE와 AI의 결합은 개발 하는 현재 내 코드와 AI의 시너지 효과가 크다.
예를 들어 타인이 작성한 코드를 분석해야할 때, 해당 코드에 대한 분석을 AI에게 요청할 수 있다.
아래와 같이 현재 보고 있는 메소드를 선택해서 Option + Enter 로 AI 메뉴바를 노출시킨뒤 Explain code 를 선택해보면
다음과 같이 해당 메소드에 대해 분석과 설명을 해준다.
물론 한글로의 번역을 요청하면 이 역시 잘 수행해준다.
리팩토링
AI 메뉴에는 리팩토링도 지원한다.
이번에는 좀 더 긴 메소드를 선택해서 Suggest refactoring을 선택했다.
그러면 AI Chat 메뉴에서 다음과 같이 AI가 코드를 리팩토링 해준다.
왜 그렇게 리팩토링 하는게 좋은지에 대해서도 설명을 남겨준다.
물론 해당 리팩토링이 마음에 안들어서 내가 원하는 방향의 리팩토링을 요청하면 이를 반영한 버전도 제안해준다.
이렇게 작업된 코드는 AI 메세지 내부의 우측 상단을 보면 나오는 Insert Snippet at Caret 버튼을 클릭하면 코드가 자동으로 현재 파일에 반영이 된다.
함수, 변수명 추천
Java, Kotlin, Python만 가능
Mac 기준으로 함수명, 변수명, 클래스명을 변경하는 단축키는 Shift + F6 이다. 
해당 단축키로 이름을 변경하려고 하면, AI에서 여러 이름을 추천해준다.
2-3. 주석 생성
Java, Kotlin, Python만 가능
메소드나 클래스의 코드를 분석해서 주석을 생성할 수 있다.
원하는 메소드나 클래스를 선택한 뒤에 Option + Enter 로 AI Actions를 선택하면
다음과 같이 선택된 코드들을 분석해서 주석을 자동으로 생성해준다.
좀 더 편하게 사용할 수 있도록 메소드나 클래스 상단에 /** 을 입력하면 자동으로 AI 주석을 사용할 것인지 메세지가 뜬다.
해당 메세지를 클릭하면 자동으로 주석이 생성된다.
커밋 메세지 작성
commit dialog에서도 AI 버튼이 추가되었다. 
이번에 커밋할 파일들의 Diff 내용을 기반으로 커밋 메세지를 작성해준다.
위 버튼을 클릭하면 아래와 같이 메세지가 자동으로 dialog에 추가된다.
단… 영어로만 작성된다.
기타
Korean Language Pack을 설치하면 AI 메세지들이 모두 한글로 번역되서 나오지 않을까 추측했지만, 한국어팩을 설치해도 그냥 영어로 주석/커밋메세지들이 작성되었다.
마무리
IDE에 AI 기능이 내장되니 확실히 도움이 된다.
기존 레거시 코드를 분석해야할 때
큰 함수를 작은 함수들로 분해 & 리팩토링 해야할때
적절한 함수명/변수명을 추천받고 싶을때
특히 실제 개발하는 과정에서 IDE <-> 브라우저 전환이 빈번하게 이루어지던 현상이 많이 개선 되었다.</->
다만 아쉬운 점은
주석/커밋메세지 등 각 언어에 맞게 지원해야할 부분에서 큰 효과를 보긴 어려웠다.
JS/TS가 아직까지 미지원이라 일부 기능을 사용하지 못하는게 아쉽다.
함께보면 좋은 글
ChatGPT와 함께 춤을

JetBrains IDE AI Assistant EAP 후기 (2023.07.12)

댓글