[00:00]
AI 에이전트가 작성하는 코드가 좋지 않습니다.
[00:02]
그 이유를 말씀드리겠습니다.
[00:04]
이 채널에서는 AI 코딩과 관련된
[00:05]
많은 문제를 해결해왔습니다.
[00:07]
예를 들어 모델이 구축 중인 프로젝트의
[00:09]
충분한 맥락을 갖지 못하는 문제나,
[00:11]
심지어 모델이 자신이 만들어야 할
[00:13]
앱을 잊어버리는 문제까지 말이죠.
[00:14]
하지만 이런 문제들 대부분은 컨텍스트와
[00:17]
작업 관리를 활용한 코딩으로 해결됐습니다.
[00:19]
그런데 사람이 코드를 작성할 때조차
[00:21]
실수를 할 수밖에 없고, 뭔가를
[00:22]
놓쳐서 품질이 낮은 코드를 만들어내
[00:25]
실패하게 됩니다. 그래서 AI가 등장하기 이전부터도
[00:27]
작성된 코드가 표준에 맞는지
[00:29]
그리고 올바르게 작성됐는지
[00:30]
확인하는 방법들이 이미 있었습니다.
[00:31]
그리고 오늘은 이런 기존 방법들을
[00:34]
AI 코딩과 결합하는 방법을
[00:35]
보여드리겠습니다. 실제로 AI 에이전트가
[00:37]
깨끗한 코드를 작성하도록 하는 방법을 말이죠.
[00:40]
이제 모두가 알고 있듯이 Claude Code는
[00:42]
놀라운 AI 코딩 도구입니다.
[00:44]
Claude Code를 최고의 코딩 에이전트로
[00:46]
만들어주는 수많은 기능들을
[00:48]
제공해왔습니다. 그 기능 중 하나가 바로
[00:50]
훅(Hook)입니다. 훅을 사용하면 Claude Code가
[00:52]
코드를 작성하는 특정 시점에
[00:54]
특정 명령어를 실행할 수 있습니다.
[00:57]
단순한 MD 파일에 지시사항을 작성하는 것에만
[00:59]
의존하지 않고, 특정 시점에 실행할
[01:01]
명령어를 실제로 하드코딩할 수 있습니다.
[01:03]
따라서 실패할 가능성이 전혀 없습니다.
[01:05]
이제 오늘의 스폰서인 스크리바에 대해
[01:07]
잠깐 소개하겠습니다.
[01:08]
최근에 트위터를 스크롤하고 있는데
[01:11]
갑자기 AI가 어디에나 있더군요.
[01:13]
모든 사람이 구축하고, 프롬프팅하고, 배포하고 있었고,
[01:15]
솔직히 제가 뒤처지고 있는 것 같은
[01:17]
느낌이 들기 시작했습니다. 그때 드디어
[01:19]
AI를 실제로 배울 수 있는 곳을 찾았는데,
[01:22]
체계적이고 실습 중심의 방식이었습니다.
[01:23]
임의의 레슨들만 있는 또 다른 사이트가 아닙니다.
[01:25]
학습 경험이 완전히 인터랙티브합니다.
[01:27]
브라우저 내에서 직접 강사와 함께
[01:28]
코딩을 진행할 수 있습니다.
[01:31]
그리고 그들의 새로운 강의인
[01:33]
AI 엔지니어 패스는 완전한 게임체인저입니다.
[01:36]
이 패스는 저 같은 개발자를 위해
[01:37]
특별히 구성되었습니다. OpenAI API,
[01:40]
허깅페이스 임베딩, AI 에이전트 등
[01:42]
실제로 사용할 수 있는 도구들에 집중합니다.
[01:45]
구축하는 모든 것이 실용적이고 시각적이며,
[01:47]
무대 뒤에서 일어나는 일을
[01:49]
이해할 수 있도록 설계되었습니다.
[01:51]
따라서 AI 학습에 진지하고
[01:53]
실제로 의미 있는 실제 프로젝트를
[01:55]
구축하고 싶다면, 여기서 시작하세요.
[01:57]
설명란의 링크로 스크리바 프로를 20% 할인받으세요.
[01:59]
예를 들어, Claude Code 훅을 사용해
[02:01]
실제로 알림을 받을 수 있습니다.
[02:03]
즉, Claude Code가 출력을 중단할 때마다
[02:05]
시스템에 있는 사운드를 재생하도록
[02:07]
프로그래밍할 수 있습니다.
[02:09]
실제로 보여드리겠습니다. hello.md 파일을
[02:11]
만들어달라고 요청한 다음
[02:13]
탭을 전환해보겠습니다. hello.md 파일이
[02:15]
생성된 것을 볼 수 있고, 곧바로
[02:17]
사운드를 들었습니다. 이는 Claude Code가
[02:19]
출력을 중단할 때마다 사운드를
[02:21]
트리거하도록 프로그래밍되어 있기 때문입니다.
[02:23]
이처럼 특정 파일 작업을 중단할 때
[02:25]
명령어가 실행되도록 할 수 있습니다.
[02:27]
예를 들어 SwiftUI 파일 같은
[02:31]
SwiftUI 파일 같은 경우 말이에요. 예를 들어서
[02:33]
많은 사람들이 사용하는 코드 포매터인 Prettier가 있습니다.
[02:35]
이건 많은 언어와 호환되고, 이제 우리는
[02:37]
Claude Code가 이런 코드 포매터들을
[02:39]
특정 파일을 편집할 때마다 실행하도록 프로그래밍할 수 있어요.
[02:41]
이런 방식으로 좋은 코드 품질을 얻고
[02:44]
좋은 코딩 관행들이 강제되죠. 그리고 이런
[02:46]
유형의 포매터들은 모든 언어에 존재합니다.
[02:48]
이제 이런 훅들을 만드는 것이
[02:50]
문법이나 모든 것들 때문에 좀 복잡해 보일 수도 있지만
[02:52]
바로 그것을 이 영상에서 보여드리겠습니다.
[02:54]
어떤 프로젝트든 최고의
[02:56]
Claude Code 훅을 자동으로 생성할 수 있는 방법을요.
[02:57]
제가 실제로 무슨 얘기를 하는지
[03:00]
명확히 보여드리기 위해서
[03:02]
제가 만든 이 SwiftUI 프로젝트를 봐주세요.
[03:04]
이 작은 레시피 앱을 구현했고
[03:05]
Claude Code 훅을 사용해서
[03:07]
작성되는 코드가 깨끗하도록 하는 방법을
[03:09]
안내해드리겠습니다. Claude Code가
[03:11]
코드를 작성할 때마다 테스트되어서
[03:12]
나중에 돌아가서 에러를 확인하거나
[03:14]
망가진 것들을 수정할 필요가 없어요.
[03:16]
Claude Code가 자동으로
[03:18]
그런 것들을 처리해줍니다.
[03:20]
먼저, 저는 이 implement.md 파일을
[03:21]
만들어놨어요. 이 영상을 위해서
[03:24]
Claude Code가 읽고 사용해서
[03:26]
자체 작업을 설정할 수 있는
[03:28]
이 작은 작업 파일을 만들었죠.
[03:30]
로컬 SQLite 데이터베이스를 가진
[03:32]
iOS 앱이고 꽤 간단합니다.
[03:35]
만약 완전히 구현한다면
[03:37]
BMAD 방법을 사용하는 것 같은
[03:39]
더 나은 방법들이 있을 텐데요.
[03:40]
하지만 단순함을 위해 이 접근법을 사용했어요.
[03:43]
그 다음 dangerously skip permissions 태그로
[03:45]
Claude Code를 열어서
[03:47]
명령어를 수락하라고 요구하지 않고
[03:48]
자동으로 코드를 작성하도록 했습니다.
[03:50]
iOS 앱이 이미 설정되어 있다고 말했고
[03:52]
계획으로써 implement 파일을
[03:54]
구현하기 시작해야 한다고 했죠.
[03:56]
그러면 할 일들을 설정하고
[03:59]
하나씩 실행하기 시작했어요.
[04:01]
그 과정에서 코드를 작성할 때마다
[04:03]
매번 쓰기 후에 세 개의 명령어를 실행했는데
[04:05]
특히 SwiftUI 파일에만 해당했어요.
[04:07]
실제로 훅에서 이걸 구성할 수 있어서
[04:09]
특정 훅이 특정 파일에서만
[04:11]
실행되도록 할 수 있어요.
[04:13]
그럼 그것들이 무엇이었는지 보여드리겠습니다.
[04:14]
훅들은 실제로 이 settings.json 파일에
[04:16]
구현되어 있어요. 여기를 보시면
[04:19]
Claude Code가 코드를 작성한 후에
[04:20]
실행되는 세 개의 bash 명령어를 볼 수 있어요.
[04:22]
기본적으로 edit, multi-edit, 또는
[04:24]
쓰기 도구를 사용해서 swift 파일들을
[04:26]
작성하면, 이 세 개의 bash 명령어들이
[04:28]
실행되는 거죠. 먼저 Swift format 명령어를
[04:30]
실행하는데, 이건 우리 Swift 코드를 포맷해줘요.
[04:32]
이건 별도의 포매터로
[04:34]
실행하면 자동으로 Swift 코드를
[04:36]
포맷해주는 거예요. 여기에
[04:38]
설정 파일도 있고, 이 설정을
[04:40]
사용합니다. 그러면 자동으로
[04:42]
코드를 포맷해서 우리 코드가
[04:45]
깨끗하고 제대로 유지되도록 해줘요.
[04:47]
제대로 깨끗한 코드를 갖는 것의
[04:49]
장점 중 하나는 Claude Code가
[04:51]
돌아와서 읽기가 더 쉽다는 거예요.
[04:53]
깨끗하게 유지된 코드는 Claude Code가
[04:55]
이해하기 더 쉬워요. 유지되지 않는
[04:57]
코드와는 대조적으로 말이에요
[04:59]
관리되지 않는 코드는 어느 정도
[05:01]
환각 현상을 일으킬 수 있습니다. 다음으로는
[05:03]
SwiftLint 코드 품질 검사가 있습니다. 이를 위해
[05:06]
swiftlint.yml 파일을 사용합니다. 이것들은
[05:08]
코드에 대한 적절한 규칙이 준수되도록
[05:10]
하는 몇 가지 조건들입니다.
[05:12]
만약 규칙이 준수되지 않으면 린트 검사가
[05:13]
실행될 때 위반 사항을 표시합니다.
[05:16]
대부분의 경우 통과하지만 때로는
[05:18]
린트 검사 오류를 발생시키기도 했습니다.
[05:20]
Claude Code가 자동으로 이런 오류들을 잡아내고
[05:22]
이를 이용해 코드 품질을 수정했습니다.
[05:24]
앞서 언급했듯이, 모든 언어는
[05:26]
그 언어에 특화된 비슷한 도구를 가지고 있습니다.
[05:28]
제가 보여드리는 방법은
[05:30]
쉽게 복제할 수 있습니다. 어떤 모델에든
[05:32]
이런 코드 품질 검사를 생성하도록
[05:34]
요청할 수 있습니다. 그 다음 제가 알려드릴
[05:36]
슬래시 명령어를 사용하면
[05:38]
제 settings.json 파일에서와 마찬가지로
[05:40]
모든 것이 여러분을 위해 구현될 수 있습니다.
[05:42]
파일 편집 후에 실행되는 다음 명령어는
[05:44]
빌드 검증입니다. 실제로
[05:46]
터미널에서 SwiftUI 앱을 실행할 수 있고
[05:48]
만약 무언가 깨져있다면,
[05:50]
연결되지 않았거나 앱이 데이터를 받지 못하는
[05:52]
상황이라면, 터미널이
[05:54]
자동으로 오류를 출력합니다.
[05:56]
그러면 Claude Code가 이런 오류들을 가져와서
[05:58]
즉시 수정합니다.
[06:01]
이렇게 해서 저는 깨진 앱으로
[06:02]
돌아가서 이 패널에서 오류를 스크린샷으로
[06:04]
찍어서 Claude Code에 보내서
[06:06]
수정하도록 할 필요가 없습니다. 이미 앱을 빌드해서
[06:08]
검증을 수행하기 때문입니다.
[06:10]
이것이 루프가 되는 이유입니다.
[06:12]
파일을 편집할 때마다 이 세 가지 명령어가
[06:14]
모두 실행됩니다. 제 코드 품질이
[06:16]
유지되고 앱이 항상 예상대로
[06:18]
작동하는지 확인됩니다.
[06:20]
처음에는 만든 UI가 꽤
[06:22]
기본적이었습니다. 그래서 이
[06:24]
스크린샷을 주고 여기서
[06:26]
색상 스킴을 구현하라고 했습니다.
[06:27]
물론 이미지로부터 디자인을
[06:29]
구현하는 더 좋은 방법들이 있지만
[06:30]
이건 단순한 데모 프로젝트이고 저는
[06:32]
Claude Code에 직접 스크린샷을
[06:34]
주고 있는 것입니다. 그래서 그것이
[06:36]
작업을 진행했고 SwiftUI에도
[06:38]
오류들이 있었습니다. 그래서 돌아와서
[06:40]
SwiftUI 2에 대한 훅을 생성하기로 했습니다.
[06:43]
특히 이것,
[06:44]
접근성 감사가 꽤
[06:46]
흥미로웠습니다. 그래서 이것도
[06:47]
보여드리려고 합니다. 또한 Claude Code에게
[06:49]
규칙 세트를 구현하라고 했더니
[06:51]
그것도 진행했습니다.
[06:53]
이 테스트들을 실행했더니 처음에는
[06:55]
감사에서 접근성 실패가 있었습니다.
[06:57]
처음에는 성공하지 못했지만
[06:59]
Claude Code가 이런 문제들도
[07:00]
수정하기 시작했고 결국
[07:02]
완전히 업데이트된 앱을 얻었습니다.
[07:04]
이제 훅을 어떻게 구현하는지
[07:06]
단계별로 안내해드리겠습니다.
[07:08]
모든 것은 'clawed code rule to
[07:10]
hook'이라는 GitHub 저장소에서 시작되었습니다.
[07:12]
이 저장소가 하는 일은
[07:14]
정말 놀라운데, 여러분의
[07:16]
자연어 규칙을 clawed code 훅으로
[07:18]
자동 변환해줍니다. 복잡한 코드를
[07:20]
작성하는 대신, 단순히
[07:22]
'이것은 이것 다음에 실행되어야 한다'라고
[07:24]
말하면 그것을 적절한 형태로 변환해줍니다
[07:26]
훅을 프로그래밍 방식으로 실행할 수 있습니다.
[07:28]
작동 원리는 이렇습니다. 규칙을
[07:30]
직접 또는 파일에서 일반 텍스트로 작성합니다.
[07:32]
마법은 슬래시 명령어를 통해 일어납니다.
[07:34]
예를 들어, 제가 슬래시 명령어를 입력하면
[07:36]
시스템이 이러한 자연어 규칙을
[07:38]
가져와서 적절한 훅으로 변환합니다.
[07:40]
이 파일에는 훅이 어떻게 작동하는지,
[07:41]
Claude Code에서 사용할 수 있는 도구들에
[07:43]
대한 전체 구현 세부사항이 포함되어 있으며,
[07:45]
이 모든 정보를 사용하여 필요한
[07:48]
정확한 훅을 생성합니다.
[07:50]
이해하기 쉽도록 간단한 예시를 들어보겠습니다.
[07:51]
편집 후 Python 파일을 Black으로
[07:53]
포맷하고 싶다고 가정해보세요.
[07:55]
Black은 Swift Format과 비슷하지만
[07:57]
Python 파일용입니다.
[07:59]
규칙을 작성하고 슬래시 명령어에
[08:01]
전달하기만 하면 됩니다.
[08:03]
그러면 자동으로 Claude Code 훅이
[08:05]
생성됩니다. 왜냐하면 시스템이 컨텍스트를
[08:06]
이해하고 정확히 무엇을 해야 하는지 알기 때문입니다.
[08:09]
훅은 Python 파일을 위해
[08:10]
특별히 작성됩니다. 따라서 Claude Code가
[08:12]
Python 파일을 편집하거나 수정할 때마다
[08:15]
포맷팅이 자동으로 실행됩니다.
[08:17]
이제 제가 처음 시도했을 때
[08:18]
문제가 발생했습니다.
[08:20]
구현이 조금 오래된 것이었어요.
[08:22]
hooks.json을 사용하고 있었는데, 이는
[08:24]
구 형식이었다고 생각합니다.
[08:26]
Claude Code는 이제 settings.json에서
[08:28]
훅을 찾습니다. 그래서 업데이트해야 했습니다.
[08:30]
또한 원래 구현에서 몇 가지 핵심 도구가
[08:32]
누락되어 있어서 이를 추가했습니다.
[08:34]
업데이트된 파일은 제 리소스에서
[08:35]
사용할 수 있도록 제공하겠습니다.
[08:37]
하지만 tools.md라는 또 다른
[08:39]
중요한 파일이 필요합니다.
[08:42]
이 파일은 모든 Claude Code 도구와
[08:43]
실행 지점을 설명합니다.
[08:46]
왜 이게 중요할까요? Swift UI 프로젝트를 위한
[08:48]
규칙을 생성해서 코드가 깔끔하고
[08:50]
적절히 테스트되도록 보장하고 싶다고 가정해봅시다.
[08:52]
규칙을 생성할 때 ChatGPT에게
[08:54]
이 파일을 제공해야 합니다.
[08:56]
모든 사람이 각 언어와 프레임워크의
[08:58]
특정 규칙과 모범 사례를
[09:00]
알고 있는 것은 아닙니다.
[09:01]
따라서 수동으로 조사하는 대신
[09:04]
ChatGPT에게 생성하도록 요청하면 됩니다.
[09:06]
하지만 ChatGPT는 도구와
[09:08]
Claude Code가 명령을 실행할 수 있는
[09:09]
자연스러운 중단점에 대해 알아야 합니다.
[09:11]
그래서 제가 한 일은 ChatGPT에게
[09:14]
tools.md 파일을 주고 Swift UI
[09:16]
프로젝트를 위한 규칙을 생성하도록 요청했습니다.
[09:18]
Swift Format과 Swift Lint를 포함하여
[09:20]
사용할 수 있는 여러 도구로 응답했습니다.
[09:22]
그런 다음 ChatGPT가 생성한 파일을 가지고
[09:24]
Claude Code로 돌아갔습니다.
[09:26]
슬래시 명령어를 실행하고 ChatGPT가 생성한
[09:28]
모든 규칙을 rules.md 파일에 배치했습니다.
[09:30]
모든 규칙을 한 곳에 모아두니
[09:32]
Claude Code가 읽기 쉬웠습니다.
[09:34]
또한 웹 검색을 수행하여
[09:36]
실행해야 하는 정확한 명령어를
[09:38]
찾도록 지시했습니다.
[09:40]
다음으로, 프로젝트 settings.json 파일에
[09:43]
훅을 구현하도록 지시했습니다.
[09:45]
여기서 구현하지 않을 것도 지정할 수 있습니다.
[09:47]
예를 들어, ChatGPT는 적절한 Git
[09:49]
추적, 코드 자동 커밋,
[09:51]
CI/CD 파이프라인 실행을 위한 명령어도 제안했습니다.
[09:54]
이 프로젝트에는 필요하지 않아서
[09:56]
간단히 제외했습니다.
[09:57]
Claude Code는 제가 원하는 훅만
[09:59]
구현했습니다.
[10:01]
정말 이게 전부입니다.
[10:03]
과정을 이해하면 놀랍도록 간단합니다.
[10:04]
Python, JavaScript든
[10:06]
제 경우처럼 Swift와 Swift UI든
[10:09]
어떤 프레임워크를 사용하든
[10:11]
제가 리소스에서 제공할 두 파일,
[10:13]
도구 파일과 규칙을 훅으로 변환하는
[10:15]
파일을 사용할 수 있습니다.
[10:16]
이를 통해 작업하는 모든 프레임워크에
[10:18]
맞는 훅을 만들 수 있습니다.
[10:20]
이 접근법을 시도해보시길 강력히 권합니다.
[10:22]
작성되는 코드가 지속적으로 깔끔하고
[10:24]
프로젝트가 모든 적절한 지점에서
[10:26]
올바르게 테스트되도록 보장합니다.
[10:28]
AI 코딩 도구로 코드 품질을 유지하는
[10:30]
게임 체인저입니다.
[10:33]
이제 이 영상의 끝에 도달했습니다.
[10:34]
채널을 지원하고 이런 영상을
[10:36]
계속 만들 수 있도록 도와주고 싶으시다면
[10:38]
아래의 슈퍼 댓글 버튼을 사용하실 수 있습니다.
[10:40]
그리고 항상 그렇듯이, 시청해주셔서 감사하고
[10:42]
다음 영상에서 뵙겠습니다.