AI로 코딩하면서 코딩 스타일이 변하게 된 이유

AI 이전: 속도가 전부였던 내 코딩 스타일

예전에 나는 <Modal props> 형태의 컴포넌트를 무조건 선호했다. 왜냐하면 개발할 때 타이핑하는 시간을 최대한 줄이고 싶었기 때문이다. 자동완성만으로도 금세 UI를 만들 수 있어서 생산성이 높다고 생각했다.

물론 이 방식에는 명확한 단점들이 있었다:

• UI 흐름을 코드만 봐서는 파악하기 어려웠다
• 컴포넌트를 이해하려면 props 타입 정의를 반드시 봐야 했다
• 커스텀이 필요할 때마다 내부 구조를 뜯어고쳐야 했다
• 기능을 확장하면 기존 API가 복잡해지는 경우가 많았다

하지만 이런 단점들보다 빠르게 개발할 수 있다는 장점이 더 중요하게 느껴졌다. 특히 Ant Design 같은 라이브러리를 쓸 때는 정말 빨랐다.

const { useState } = React;
const { Button, Modal } = antd;
import { createStyles, useTheme } from "antd-style";
const useStyle = createStyles(({ token }) => ({
  "my-modal-body": {
    background: token.blue1,
    padding: token.paddingSM,
  },
  "my-modal-mask": {
    boxShadow: `inset 0 0 15px #fff`,
  },
  "my-modal-header": {
    borderBottom: `1px dotted ${token.colorPrimary}`,
  },
  "my-modal-footer": {
    color: token.colorPrimary,
  },
  "my-modal-content": {
    border: "1px solid #333",
  },
}));
const App = () => {
  const [isModalOpen, setIsModalOpen] = useState([false, false]);
  const { styles } = useStyle();
  const toggleModal = (idx, target) => {
    setIsModalOpen((p) => {
      p[idx] = target;
      return [...p];
    });
  };
  const classNames = {
    body: styles["my-modal-body"],
    mask: styles["my-modal-mask"],
    header: styles["my-modal-header"],
    footer: styles["my-modal-footer"],
    content: styles["my-modal-content"],
  };
  const modalStyles = {
    header: {
      borderInlineStart: `5px solid ${token.colorPrimary}`,
      borderRadius: 0,
      paddingInlineStart: 5,
    },
    body: {
      boxShadow: "inset 0 0 5px #999",
      borderRadius: 5,
    },
    mask: {
      backdropFilter: "blur(10px)",
    },
    footer: {
      borderTop: "1px solid #333",
    },
    content: {
      boxShadow: "0 0 30px #999",
    },
  };
  return (
    <>
      <Modal
        title="Basic Modal"
        open={isModalOpen[0]}
        onOk={() => toggleModal(0, false)}
        onCancel={() => toggleModal(0, false)}
        footer="Footer"
        classNames={classNames}
        styles={modalStyles}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

Headless UI : radix-ui

그러다가 radix-ui 같은 Headless UI를 사용해보기 시작했다. Compound Pattern 방식인데, 처음에는 솔직히 번거롭다고 생각했다.

하지만 써보니 분명한 장점들이 있었다:

• 확장성이 정말 좋다. 각 컴포넌트가 독립적이라서 새로운 기능을 추가할 때 기존 코드를 건드릴 필요가 거의 없다
• 코드를 읽기가 훨씬 쉽다. UI 구조가 코드에 그대로 드러나서 "아, 이런 흐름이구나" 하고 바로 이해된다

물론 단점도 분명했다:

• 타이핑할 게 너무 많다. 한 줄로 끝날 걸 여러 줄로 써야 하니 손가락만 바쁘다.
• 파일이 길어진다. 같은 기능인데도 코드 줄 수가 2-3배는 더 많아지는 느낌이었다
• 같은 코드가 반복된다. 코드 상세는 다르지만 전반적인 틀이 반복되는 경향이 있다

import { Dialog } from "radix-ui";

export default () => (
  <Dialog.Root>
    <Dialog.Trigger />
    <Dialog.Portal>
      <Dialog.Overlay />
      <Dialog.Content>
        <Dialog.Title />
        <Dialog.Description />
        <Dialog.Close />
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
);

그때의 내 고민: "이게 정말 더 나은 방법일까?"

이 Compound Pattern의 가장 큰 문제는 더 많은 줄을 타이핑해야 한다는 거였다. 같은 모달 하나 만드는데 타이핑할 양이 몇 배나 많아지니까 "이게 진짜 더 나은 방법인가?" 싶었다.

코드 스니펫을 만들어서 자동 생성하는 방법도 생각해봤지만, 그것도 결국 관리해야 할 게 하나 더 늘어나는 거라 귀찮았다.

그래서 당시에는 "그냥 예전 방식이 낫지 않나?"라고 생각했다. 사실 어떤 패턴이 "정답"인지보다는 내가 익숙한 방식을 계속 쓰고 싶었던 것 같다.

그리고 이건 유저의 자유도를 주기 위한 형태 일뿐이고, 실제로 사용할때는 보통 wrapper로 감싸서 사용하기 때문에 이방식으로 사용하지 않을것이라고 생각을 했었다.

AI가 바꾼 게임의 룰

그런데 몇 개월 전부터 Claude나 Gemini 같은 AI 도구를 본격적으로 쓰기 시작하면서 완전히 다른 경험을 하게 됐다.

놀라운 건 AI한테는 어떤 스타일이든 타이핑 속도가 똑같다는 거였다. Props 기반이든 Compound Pattern이든 AI가 짜주는 시간은 거의 비슷했다.

그러면서 생각이 바뀌기 시작했다: "어차피 AI가 대부분 짜줄 거라면, 내가 나중에 읽고 수정하기 쉬운 코드가 더 좋지 않을까?"

AI가 짠 코드를 내가 검토하고 수정해야 하는데, 그럴 때 Compound Pattern이 훨씬 이해하기 쉬웠다. 코드 구조가 실제 UI 흐름과 일치하니까 "아, 여기서 이 부분을 수정하면 되겠구나" 하고 바로 파악이 됐다.

내가 깨달은 것: AI 시대의 새로운 우선순위

처음에는 "AI가 다 짜주니까 코딩 스타일은 대충 해도 되겠네"라고 생각했다. 하지만 실제로 써보니 완전히 반대였다.

AI는 코드를 짜주지만, 그 코드의 방향성과 아키텍처를 결정하는 건 여전히 내 몫이었다. 그리고 AI가 짠 코드를 검토하고 수정하는 것도 내가 해야 하는 일이었다.

아이러니하게도 AI를 잘 활용하려면 내가 코드를 더 잘 알아야 한다는 걸 깨달았다. AI가 짠 코드가 맞는지, 어디를 수정해야 하는지 판단할 수 있어야 하니까.

팀에서 느낀 변화

팀 작업에도 변화가 있을 것 같다. 지금까지는 아무리 코딩 컨벤션을 정해도 각자 스타일대로 코딩하는 사람들이 있었다. 개발자는 정말 개성이 강한 사람들이 많아서 가이드를 준수하지 않는 경우가 많았다. 이를 강제하는 것도 쉽지 않았다.

하지만 AI를 쓰기 시작하면 자연스럽게 일관된 스타일이 나오게 된다. AI가 학습된 패턴대로 코드를 짜주니까, 누가 AI에게 요청하든 비슷한 구조의 코드가 나오기 때문이다.

같은 프롬프트라면 비슷한 결과가 나오기 때문이다.

결론: 내 코딩 스타일이 바뀐 진짜 이유

결국 내가 Compound Pattern을 선호하게 된 이유는 단순했다:

1. AI가 타이핑 부담을 해결해줬다 - 더 이상 "손가락 속도"를 걱정할 필요가 없어졌다
2. 코드 리뷰가 훨씬 쉬워졌다 - AI가 짠 코드든 동료가 짠 코드든 읽기 쉬운 구조가 중요해졌다
3. 확장성이 실제로 중요해졌다 - 프로젝트가 커질수록 유지보수하기 쉬운 코드의 가치를 느꼈다

AI 덕분에 "빠르게 짜는 것"보다 "읽기 쉽고 유지보수하기 좋은 코드"가 더 중요한 시대가 된 것 같다. 이게 내가 경험한 가장 큰 변화다.