귀찮지만 중요한 반복작업을 AI와 함께 자동화해보자! (w. Cursor AI)

들어가며

feconf 2025를 다녀오고 나서 바로 실천해야겠다고 마음먹은 것은 Cursor AI를 활용해서 귀찮은 반복작업을 자동화하는 일이었다.
💭 feconf 2025 후기가 궁금하다면, 여기

실제로 Cursor AI를 사용하면서 "어떻게 해야 진짜 잘 활용할 수 있을까?", "AI 시대에 (프론트엔드) 개발자로서 나는 어떻게 성장해야 하지?"를 항상 고민했었다.

단순히 "특정 라이브러리 예제를 보여줘" 같은 생성형 AI 사용법만으로는 오히려 의존도만 높아지고, 실질적인 성장이나 생산성 향상으로는 잘 이어지지 않는다는 생각이 들었기 때문이다.

정말 중요한 건 하루 중 대부분을 보내는 회사에서 어떻게 AI를 활용해 업무의 효율을 올리고, 그 과정에서 성장할 수 있을까 고민하는 자세라고 생각했다.

그래서 이번 컨퍼런스에서 얻은 인사이트를 바탕으로
거창한 것보다는 내가 실제로 가장 귀찮음을 느끼는 부분부터 조금씩 개선해보려고 했다.

---

어떤 것을 자동화 할 것인가?

업무 프로세스 중에서 효율적으로 처리하고 싶었던 반복 작업은 아래 두 가지였다.

• Figma에서 받은 스타일 코드 변환
• Tanstack Query 구문 작성

TanStack Query 작성은 실제로 사용하는 데이터 구조에 따라 달라지는 부분이 많아서 우선순위에서 잠시 미뤘다.
대신, 퍼블리싱 단계에서 특히 내가 번거롭게 느꼈던 ‘Figma 스타일 코드 변환’부터 적용해보기로 했다.

---

실제 예시

업무 시 디자이너와는 Figma를 통해 협업한다.
UI 시안을 전달받으면 먼저 <div>, <section> 등을 사용해 마크업 구조를 잡고 이후 스타일을 적용한다.

Figma에서는 보통 아래와 같은 형태로 스타일이 전달된다.

Figma에서 정의된 스타일 코드

Figma에서 정의된 스타일 코드

사실 이렇게 그대로 붙여 넣어도 UI 스타일링에는 전혀 문제가 없다!
다만 프로젝트에는 정해진 코드 컨벤션이 있고, 유지보수를 고려했을 때 현재 방식은 가독성이 떨어진다.

또한, 디자이너와 협의한 색상, 폰트 굵기 등의 디자인 토큰이 정의되어 있기 때문에,
이를 적극적으로 활용하는 편이 코드의 일관성을 높이고 소통에도 훨씬 유리하다.

그래서 매번 코드를 붙여넣은 뒤 아래와 같이 수동으로 변환했다.

const style = css`
    color: ${COLORS.GRAY['200']};
    font-weight: ${FONT_WEIGHT.BOLD};
`;

이러한 반복 작업을 더 효율적으로 처리하기 위해 Cursor AI에 간단한 규칙을 만들어 적용해 보기로 했다.

---

규칙을 만들고 Cursor AI에 적용해보자

디자인 토큰으로 변환하는 과정에서 사용되는 color, background, font-weight 등의 속성에 대해
정규식을 활용해 자동으로 치환해 주는 Cursor AI 룰을 작성해 보았다. 아래는 예시이다!

# font-weight 숫자를 토큰으로 변환
Find: font-weight:\s*400
Replace: ${FONT_WEIGHT.REGULAR}

Find: font-weight:\s*600
Replace: ${FONT_WEIGHT.SEMIBOLD}

Find: font-weight:\s*700
Replace: ${FONT_WEIGHT.BOLD}

# 색상
Find: color:\s*#4B5563
Replace: ${COLORS.GRAY['600']}

# border-color
Find: border:\s*1px solid #E5E6E9
Replace: border: 1px solid ${COLORS.GRAY['200']};

해당 룰은 design-tokens-rule.mdc라는 파일로 만들어서 관리했고 fix css라는 명령어를 입력하면 코드를 자동으로 변환해 줬다!

🙂 Before

🤩 After

단지, 해당 코드에서 fix css 명령어만 작성했을 뿐인데 정의해 둔 디자인 토큰으로 자동 변환되고 심지어 필요한 경우에는 COLORS와 같은 외부 변수도 자동으로 import 된다. (import 처리 역시 Cursor AI 룰에 포함시켜 둔 부분이다!)

굉장히 작은 부분의 개선이지만 이번 프로젝트를 진행하면서 가장 만족스러웠던 작업이었다.
그래서 관련 내용을 내부 문서로 정리해 두고 Cursor AI를 사용하는 팀 내 다른 분들에게도 슬랙으로 공유했다.

혼자만 쓰기 아까운 개선이라고 느껴졌고, 이런 작은 자동화들이 쌓이면 분명 팀 전체의 개발 경험도 더 좋아질 거라고 생각한다!!

 

만약, 이 글을 보시고 더 나은 방식이나 아이디어가 떠오르신다면 공유해 주시면 감사하겠습니다.
저도 이제 막 고민하면서 알아가는 중이라 함께 개선하면 좋을 것 같습니다. 😇