내가 AI를 코딩에 활용하는 방법

바야흐로... 2023년 쯤 부터 ChatGPT의 붐으로 AI가 엄청난 속도로 발전했다. 이제는 AI 도구를 잘 사용하는 것도 실력이라고 생각한다. 내가 어떻게 잘 사용하는지 소개해보자.

ChatGPT 등장만 해도 프로젝트를 시작할 때 궁금한 것에 대한 정보를 빨리 찾을 수 있어서 좋았고, GitHub Copilot으로 코드 생성해주는 AI도 나오고… 더 나아가 Cursor라는 제품으로 AI전용 IDE까지 나오는 실정이다.

더 이상 코드를 만들어내는 개발자는 경쟁력이 적은 상황이고 AI를 적극사용 해서 생산력을 높이는 것이 주요 과제로 보인다.

특히, Cursor가 나오면서 네임드 개발자 X의 글을 보면 Cursor을 주로 사용하고 이거 때문에 코드의 가치가 낮아졌다고 할 정도이다.

아직 AI가 개발자를 대체할 수준은 아니라고 생각되며 대체될 정도의 코드만 만들 줄 아는 개발자는 어차피 대체될 운명이었을 것이다. AI 기능도 잘 사용해야 생산성이 올라간다. 발전 속도가 워낙 빨라 언젠가 레거시 글이 될 수 있지만 내가 사용한 사례를 정리해본다.

AI를 이용한 코딩 사용 형태

• 빠른 분석
  • 예제코드로 흐름 분석
  • 코드 베이스 주석으로 코드 값 같은 것 빠르게 확인
• 빠른 컨셉, 샘플 코드 검증
  • 대량의 코드 수정은 정확도가 떨어지지만 레고 블럭처럼 조금 만한 것을 확인하기에는 유용
• 새롭게 만들기
  • 빠르게 분석해서 러프하게 요구사항을 뜯어내고
  • 그걸 기반으로 코드를 만들어서 버그를 잡는 것이 코드 퀄리티도 생산성도 나쁘지 않음
• 리펙토링
• 만든거 테스트 코드 짜달라고 하기

AI 코딩 기능

• General Chat (e.g. ChatGPT)
  • 일반적이고 넓은 질문
  • 주로 코드 동작 근본 자체에 대한 질문을 물어봄
  • UI 자체가 Chat에만 집중되어 편함
    • IDE에 들어간 Chat은 급하게 사용하기는 좋지만 채팅이 길어지는 작업에 대해서는 거부감이 느껴지는데 ChatGPT 같은 것은 그런 거부감이 없음
  • e.g.
    • Spring MVC가 뭐야?
    • Spring MVC에서 권장되는 코드 패턴은?
• Embedded Chat (e.g. GitHub Copilot Chat)
  • 코드베이스 기준으로 넓게 물어볼 때
  • 주로 코드 어딘가에 있을거 같은데… 그런 것을 물어볼 때 사용
  • 코딩 지식을 물어보지는 않음. 그런 것은 ChatGPT 이용
  • e.g.
    • 전표 항목을 불러오는 JS 코드 부분은?
    • 해당 파일에서 거래처 항목을 저정하고 있는 변수 이름은?
• Embedded Composer (e.g. Cursor Composer, WindSurf Write)
  • 코드베이스 기준으로 여러 파일은 한번에 수정 할 때 사용
  • Chat이 질문, 분석이라면 해당 기능은 수정이 가해지는 작업입니다.
  • e.g.
    • A라고 작성된 주석을 B로 바꿔줘 (코드베이스에서 정의된 부분 모두 찾아서 바꿔줌)
    • Next.js 예제 프로젝트 만들어줘 (여러 파일을 생성하여 프로젝트 구성)
• Embedded Copilot (e.g. GitHub Copilot)
  • 코드 생성 및 수정에 주로 활용
  • inline으로 호출되어 빠르게 사용할 수 있고 상호작용이 매우 직관적임
  • e.g.
    • (드래그 후) 코드 리팩토링 해줘
    • (주석 작성 후, 자동완성으로 나오는 코드 사용)

유용한 조건(테크닉)

• 프로젝트
  • 문서화가 잘 되어 있고 널리 사용되는 언어, 라이브러리, 프레임워크일수록 참고 자료가 풍부해 더 효과적으로 활용할 수 있다.
  • 프로젝트 코드베이스에 대해 질문할 때도 코드 의존 관계와 코드 품질이 좋을수록 더 정확한 답변을 얻을 수 있다.
• 제너럴 채팅 (ChatGPT)
  • 간단한 개념 질문은 4o를, 심화 질문은 o1을 활용한다.
    • 개념이나 사용법 같은 기본적인 내용은 4o, 트러블슈팅과 같은 심화 내용은 o1
  • 대화 중 주제를 바꿔야 한다면 새로운 채팅방을 시작하라
    • o1으로 SQL 실행 계획 분석에 대해 깊이 물어보고 있다가 Hash Join, Nested Join 같은 다른 주제가 궁금해지면 새 채팅방을 열어라
    • 기존 채팅방에서 주제를 바꾸면 문맥이 혼란스러워지고 나중에 내용을 추적하기 어려워진다.
  • 특정 기능의 사용법을 물어볼 때는 가능하면 버전을 명시하거나, 어렵다면 help 명령어나 공식 문서를 참조하는 방식으로 접근하라
    • Oracle DB 트러블슈팅 중 경험
    • ChatGPT는 show incident 명령에 대해 최신 버전의 방법을 알려주는 것 같았지만, 내가 사용 중인 버전에서는 작동하지 않았다.
    • help show incident 명령으로 단계적으로 해결책을 찾을 수 있었다.
      • show incident 248096 -mode detail → show incident -mode detail -p "incident_id=248096"

Use Case

• 하나의 Project에서 여러 예제 프로젝트를 만들어서 PoC 진행

  • 실 제품은 의존된 것도 많고, 커스텀 된 설정도 많기에 문제 해결 과정이 복잡해지는 경우가 있습니다.
  • vanilla 환경에서 올바른 구현을 보고 검증해서 제품에 끼워넣는 것이 명확한데 AI Editor은 빠른 프로젝트를 만들 수 있게 하여 PoC에 유용했습니다.
  • e.g. 특정 라이브러리로 된 기본 프로젝트를 만들어줘 -> 여기서 원하는 설명만 명확하게 바꿔서 어떻게 동작하는지 이해 후 적용

• 코드에 주석 작성해달라고 함

  • 일일이 Break Point 찍으면서 값을 보더라도 enum 같은 값인 경우 뭔지 사전을 찾아서 까봐야 이해가 됩니다. DB 데이터도 마찬가지이구요.
  • 이런 경우 궁금한 코드를 드래그해서 주석을 작성해달라고 하면 사람이 이해하는 단위로 적어주니 코드 읽기가 훨씬 수월해집니다.
  • e.g.
    • 예시1

      // 거래처 일련번호
      accSlipIC.put("sqCnct", sqCnct);
      // 거래처 구분
      accSlipIC.put("tpCnct", orgCnct.get("TP_CNCT"));
      // 거래처명
      accSlipIC.put("ttlCnct", orgCnct.get("TTL_CNCT"));
    • 아예 코드를 작성해 AI 쿼리하는 형식, switch 이기 때문에 case 에 대한 값을 AI가 자동으로 추론하도록 만듬

      // 전표 유형에 따른 분기 처리
      // J: 대체전표
      // I: 입금전표
      switch (accSlipH.TP_SLIP_I) {
        case "J":
          break;
        case "I":
          break;
      }

• 디버깅하기 쉽게 코드 변경

  • 코드 라인 수 줄인다고 아래와 같이 합치고 합치면 보기 힘든데 이런 구조를 손쉽게 바꿔달라고 할 수 있을 것
    before

    accSlipIC.put("ttlAcccd", (String)acccdC.get("TTL_ACCCD"));
    after

    var ttlAcccd = (String)acccdC.get("TTL_ACCCD");
    accSlipIC.put("ttlAcccd", ttlAcccd);

• 어느정도 추측되는 부분까지는 찾았는데 자세히 어떤 흐름인지 모르겠을때

  • AI가 모든 것을 만능으로 해주지 않습니다.
  • 그치만 아래와 같이 명확히 원인이 되는 부분이 찾았다면 이 흐름을 기점으로 역으로 찾는 질문은 큰 도움을 받을 수 있습니다.
  • e.g. 간접전표에서 전표 데이터가 아래의 하위 element으로 추가된다는 것은 확실히 알겠는데 어디서 어떻게 추가되는지 감이 오지 않았고 해당 코드를 기준으로 어디서 추가되는지 질문하여 찾아냄.

    <tbody id="slipListBody"></tbody>

• 특정 코드 부분에 대해서 샘플 코드

  • 변수 값, 함수를 안다고해도 어떤 의도로 코드가 작성되었는지 모르면 햇갈립니다.
  • 그런 경우 특정 부분에 샘플 코드를 만들어 달라고하면 input, output이 명시적으로 보여서 이해하기 편합니다.
  • e.g. 코드 흐름 중 key.substr(3) 값만 보았을 때는 뭔소리인가 싶지만 실제 제품에서 사용되는 예제 값으로 input, output을 보니 손쉽게 이해됨

• 코드 분석 후 input, output만 지정해서 새롭게 작성하기

  • Unit Test 코드 작성처럼 input, output만 지정하고 구현체는 AI에 맡기기
  • 새로운 시각에서 코드를 바라볼 수 있음

• 코드 의존성 분석

  • 표 footer 에 표시되던 것을 body 으로 이동했는데 footer DOM 을 뜯어서 계산하는 로직이 있어서 Side Effect가 발생했습니다.
  • 모든 부분을 다 찾을 수는 없겠지만 참조로 추적이 안되는 부분까지 찾아 도움 받을 수 있음

• 코드 구조 바꾸기 좋음

  • 아래의 코드를

    <tr>
      필드 이름
    </tr>
    <tr>
      필드 내용
    </tr>

  • 아래의 조건에 맞게 바꾸고 싶을 때 많은 귀찮은 작업이 발생하는데

    <tr>
      <label>필드 이름</label>
      필드 내용
    </tr>

  • 아래와 같이 프롬프트 해서 손쉽게 바꿀 수 있음

    <tr> 안에 구조가 <td>라벨명></td><td>요소</td> 으로 이뤄져있어
    이걸 아래의 형식으로 리펙토링 해줘
    
    <td>
    <label>라벨명</label>
    요소
    </td>