들어가며

요즘 개발하면서 AI를 사용하는 일이 꽤 자연스러워졌습니다. 저 역시 개발하다 막히는 부분이 있으면 AI에게 물어보거나 코드를 작성하고 오류를 찾는 데 도움을 받곤 합니다.

그래서 Claude Code 교육을 들으러 갔을 때도 처음에는 코드를 조금 더 잘 만들어주는 AI 정도로 생각했습니다. 그런데 직접 실습해보니 생각했던 것과는 조금 달랐습니다. 질문에 답을 해주는 것을 넘어 실제 내 컴퓨터의 파일을 확인하고 수정하거나 실행까지 할 수 있었기 때문입니다.

교육을 들으면서 자연스럽게 내가 하는 UI 개발 업무는 어디까지 AI에게 맡길 수 있을지 궁금해졌습니다. 이번 글에서는 Claude Code를 직접 실습하면서 느낀 점과 UI 개발 업무에서의 활용 가능성을 정리해보려고 합니다.

 

첫 실습은 다운로드 폴더 정리

첫 번째 실습은 의외로 코딩이 아니었습니다. Claude Code에게 컴퓨터의 다운로드 폴더를 정리해달라고 요청하는 것이었습니다.

평소 받아놓고 정리하지 않은 이미지와 문서, 각종 파일이 뒤섞여 있었는데 Claude Code가 파일들을 확인하더니 확장자와 주제를 기준으로 분류하고 폴더를 만들어 하나씩 정리하기 시작했습니다.

이때 가장 먼저 든 생각은 진짜 내 컴퓨터에서 일을 한다는 것이었습니다. 기존에 사용하던 AI가 방법을 알려주는 존재였다면 Claude Code는 실제로 내 컴퓨터 안에서 작업하고 있었습니다. 마치 다른 사람이 원격으로 컴퓨터를 조작하며 대신 일을 해주는 것 같아서 신기하면서도 한편으로는 조금 무섭기도 했습니다.

물론 파일을 변경하거나 중요한 작업을 실행할 때는 계속 진행해도 되는지 승인을 요청했습니다. 처음에는 솔직히 조금 귀찮았습니다. 그냥 알아서 해주면 좋겠다는 생각도 들었는데, 내 파일을 직접 다룰 수 있는 만큼 이런 확인 과정은 꼭 필요하겠다는 생각이 들었습니다.

단순한 폴더 정리 실습이었지만 Claude Code가 기존에 사용하던 챗봇형 AI와 어떻게 다른지 가장 확실하게 체감했던 순간이었습니다.

 

UI 개발 업무에서도 쓸 수 있을까?

다운로드 폴더가 정리되는 모습을 보니 자연스럽게 제가 평소 하는 업무에도 대입해보게 됐습니다.

UI 개발을 하다 보면 새로운 화면을 만드는 것뿐 아니라 기존 화면을 수정하는 작업도 많습니다. 관련 파일을 찾고, 비슷한 UI가 구현된 화면을 찾아보고, 기존 컴포넌트의 구조를 파악한 뒤 마크업과 스타일을 수정하는 과정이 반복됩니다.

특히 지금 맡고 있는 오래 운영된 프로젝트에서는 코드 한 줄을 수정하는 것보다 그 코드가 어디에 있고 어떤 영향을 주는지 파악하는 데 더 많은 시간이 걸릴 때도 있습니다.

이런 과정에서 Claude Code를 활용하면 꽤 많은 시간을 줄일 수 있을 것 같았습니다. 특정 화면과 관련된 파일을 먼저 찾아달라고 하거나 비슷한 UI가 구현된 코드를 찾아 기존 구조와 스타일을 유지하면서 수정하도록 요청할 수 있습니다.

오래된 JavaScript나 jQuery 코드를 분석할 때도 활용할 수 있습니다. 하나의 기능이 어떤 이벤트와 함수로 연결되어 있는지 일일이 따라가기 전에 관련 코드를 먼저 찾아 정리하도록 하는 식입니다.

강의를 듣기 전에는 AI 코딩 도구라고 하면 코드를 만들어주는 기능부터 떠올렸는데, 직접 사용해보니 오히려 기존 프로젝트를 탐색하고 코드를 이해하는 과정에서도 유용하게 사용할 수 있겠다는 생각이 들었습니다.

 

편리하지만 바로 맡기지는 않기

강의에서 배운 기능 중 실제 업무에 적용해보고 싶었던 것이 Plan Mode였습니다. AI가 바로 코드를 수정하는 것이 아니라 어떤 파일을 확인하고 어떻게 수정할지 먼저 계획을 제시하고, 개발자가 이를 확인한 뒤 작업을 진행하는 방식입니다.

운영 중인 프로젝트에서는 작은 수정 하나가 예상하지 못한 다른 화면에 영향을 줄 수도 있기 때문에 실제 업무에서는 분석, 계획 확인, 실행, 검수 정도의 순서로 사용하는 것이 안전할 것 같습니다.

CLAUDE.md를 활용하는 방법도 흥미로웠습니다. 프로젝트에서 사용하는 클래스 네이밍이나 SCSS 작성 방식, breakpoint 기준, 공통 컴포넌트 사용 규칙 등을 미리 작성해두면 Claude Code가 작업할 때 참고할 수 있습니다.

결국 AI에게 일을 잘 맡기려면 단순히 프롬프트를 잘 작성하는 것뿐 아니라 프로젝트의 맥락과 지켜야 할 기준을 제대로 전달하는 것도 중요하다는 생각이 들었습니다.

 

AI가 코딩하면 개발자는 무엇을 할까?

강의를 듣고 나니 AI가 프로젝트를 분석하고 HTML과 CSS를 작성하고 수정까지 할 수 있다면 앞으로 UI 개발자의 역할은 어떻게 달라질지도 생각해보게 됐습니다.

실제 UI 개발에서는 화면에 보이는 것을 그대로 구현하는 것 외에도 여러 판단이 필요합니다. 공통 컴포넌트로 만들어야 할지, 다른 해상도에서는 어떻게 보여야 할지, 기존 화면에 영향을 주지는 않을지, 접근성에는 문제가 없는지 등을 함께 고려해야 합니다.

AI가 코드를 빠르게 작성해줄 수는 있지만 어떤 방식으로 구현하는 것이 적절한지 판단하고 결과를 검수하는 것은 여전히 개발자의 역할이라고 생각합니다. 오히려 코드 탐색이나 반복 작업에 쓰던 시간을 AI가 줄여준다면 개발자는 이런 판단이 필요한 부분에 조금 더 집중할 수 있을 것 같습니다.

 

마치며

하루 동안의 강의와 실습으로 Claude Code를 완벽하게 익힌 것은 아니지만 AI 코딩 도구를 바라보는 시각은 조금 달라졌습니다.

특히 첫 실습에서 다운로드 폴더가 실제로 정리되는 모습을 보면서 신기하고 편리하다는 생각과 동시에 조금 무섭다는 생각도 들었습니다. AI가 할 수 있는 일이 많아질수록 무엇을 맡기고 어디까지 허용할 것인지 판단하는 것도 중요해질 것 같습니다.

기존에는 AI에게 질문해서 필요한 코드를 얻었다면 이제는 하나의 작업을 어떻게 나눠 AI에게 맡길지를 고민하는 단계로 넘어가고 있다는 생각이 들었습니다.

앞으로 실제 업무에서도 처음부터 모든 것을 맡기기보다는 코드 탐색이나 분석, 반복 작업, 작은 UI 수정처럼 비교적 안전한 영역부터 하나씩 활용해보고 싶습니다.

AI에게 무엇을 맡길지 결정하고 필요한 맥락을 전달한 뒤 결과를 검수하는 능력도 앞으로 개발자에게 필요한 역량 중 하나가 되지 않을까 생각합니다.