여러분, 안녕하세요, 첫 게시물입니다.

오늘은 Claude Code의 개발 Tips를 소개하겠습니다!

매일 다양한 프로덕트를 구동하다 보면, 여러 가지를 동시에 병행하며 만들고 있는 경우가 많다고 생각합니다. 그럴 때 가장 문제가 되는 것이 Claude Code가 만들어준 결과물을 확인하는 작업이라고 생각합니다.

제가 지금 만들고 있는 것은 Web 애플리케이션이 많은데, Claude에게 어느 정도 지시를 내려 만든 후에 당연히 확인을 해야 합니다.

하지만 애초에 만들어진 것의 조작법을 모르거나, 제작 의도를 파악하는 것부터 시작해야 하는 케이스가 많아서, 시간을 들여야 한다는 점은 이해하고 있지만 그것을 일일이 직접 열어서 확인하는 작업이 매우 스트레스였습니다.

하지만 이 방법을 사용함으로써 작업 효율이 극적으로 개선되었고, 피드백 사이클 (Feedback Cycle)도 원활하게 돌아가게 되었기에 공유하고자 합니다.

구현이 끝나면, 그 내용을 일련의 흐름으로 화면 캡처(Screen Capture)를 찍게 한다
그 캡처를 담은 HTML을 만들게 한다
그것을 Artifact로서 발행하게 하여, 돌아온 URL을 열어서 체크한다

이 세 가지를 수행함으로써 시각적으로 알기 쉽게 확인하는 것을 실현하고 있습니다.

아래의 프롬프트 (Prompt)를 Claude Code에서 지시하면 설정해 줍니다.

구현이 끝난 뒤의 보고를 화면 캡처가 포함된 HTML로 받고 싶습니다.
다음 운용을 이 프로젝트에 설정해 주세요.
# 해야 할 일
...

화면 캡처 촬영은 여러분도 잘 알고 계시는 Playwright의 MCP를 사용하고 있습니다.

Claude에게 구현 내용의 일련의 흐름을 실제 화면에서 스크린샷 (Screenshot)으로 찍게 하는 방식으로 진행하고 있습니다.

조작 흐름을 찍게 함으로써, 만들어진 것의 전체상이나 만들어진 것 자체가 사용하기 편한 것인지 등을 판단할 수 있도록 하고 있습니다.

먼저 Playwright MCP를 사용할 수 있는 상태로 만들 필요가 있습니다.

찍어온 캡처에 대해서는 HTML로 편집하게 하여, Claude의 Artifact로서 발행하도록 하고 있습니다.

이 Artifact에 대해서도 최근 많이 사용하시는 분들이 많다고 생각하는데, 그대로 Claude 상에서 페이지로서 확인할 수 있는 형태이므로 URL을 받아 열 수 있습니다.

이렇게 함으로써 굳이 로컬 파일 (Local File)에서 열어야 하는 번거로움이 없어 매우 편리합니다.

실제로 결과물을 내놓으면 다음과 같은 형태가 됩니다.

정말 보기 편하지 않나요??

이 부분은 스킬화하여, CLAUDE.md에도 '구현 시에는 반드시 실행할 것!'이라고 적어둠으로써 기본적으로 지키도록 만들 수 있습니다.

실제로 만들어가는 과정에서 구현을 맡기는 부분이 지금은 많아지고 있다고 생각합니다만, 전부를 지시하고 있는 것은 아니기에 조작 방법조차 모르는 케이스도 발생합니다.

그럴 때도 알기 쉽게 가르쳐 주며, 그쪽에서 작성된 것을 보고 명백히 생각했던 것과 다르거나 상정(Assumption)과 다른 것이 만들어졌다면 그대로 되돌려 다시 만들게 하는 판단이 빨라집니다.

직접 손을 움직여 확인하는 것보다 한 발 앞서, 빠르게 리뷰(Review)할 수 있다는 점에서 매우 추천합니다.

이러한 부분도 효율화 측면에서 매우 중요하다고 생각하며, 이런 방식으로 사용하고 있습니다.

앞으로도 제가 하고 있는 이러한 정보들을 올려나가도록 하겠습니다!

잘 부탁드립니다!