눈이 전부다: Agentic Design Loop 닫기
Source: Dev.to
LLM‑지원 코딩을 위한 긴밀한 피드백 루프의 힘
LLM이 실제로 코딩에 효과를 발휘하게 하는 요소—출력을 꼼꼼히 검토하는 것 외에—는 긴밀한 피드백 루프입니다.
- 단위 테스트가 가능한 코드는 LLM이 쉽게 완성할 수 있습니다.
- 수용 기준을 설명하고, 모델에게 테스트 작성을 맡긴 뒤, 작업이 끝날 때까지 TDD(테스트 주도 개발)를 진행합니다.
- 검토하고, 취약점 및 엣지 케이스를 찾아 필요에 따라 반복합니다.
- PR(풀 리퀘스트)에서 코드 리뷰 봇을 활용해 이 루프의 일부를 자동화할 수도 있습니다. 봇이 “싸우게” 하여 만족할 때까지 진행하고, 마지막에 인간이 검증합니다.
나의 배경
- 거의 10년 차 개발자.
- 다양한 스택과 언어를 다뤘음.
- 내 작업이 특허를 받은 클라이언트가 있음.
자랑이 아니라 프론트‑엔드 설계가 언어 모델을 활용한 코딩에서 가장 답답한 부분이라는 점을 공유하는 것입니다. 이는 제 실력 부족 때문이 아닙니다.
프론트엔드 피드백 루프가 깨진 느낌이 드는 이유
일반적인 상호작용
| You | AI |
|---|---|
| “모달을 중앙에 배치하고 패딩을 좀 추가해 주세요.” | 코드를 변경합니다 |
| “중앙에 배치됐지만 패딩이 너무 많이 들어갔어요.” | “원하는 패딩 양이 얼마인가요?” |
| “덜요. 절반 정도로요. 그리고 닫기 버튼이 이제 가장자리와 너무 가깝습니다.” | 코드를 변경합니다 |
| “패딩은 나아졌지만 닫기 버튼 위치가 깨졌어요.” | “닫기 버튼에 어떤 문제가 있는지 설명해 주시겠어요?” |
| 포기하고 CSS 파일을 열어 약 30 seconds 동안 직접 수정합니다. |
I rarely make it past step 5. Because I know CSS, it’s faster to edit the styles manually than to keep prompting the model, which often produces non‑modern or non‑holistic solutions.
(제가 일해본 모든 주니어 개발자를 합친 것보다 Claude와 Cursor에서
!important플래그를 더 많이 본 적이 있습니다. 보상 해킹은 LLM에서 실제 문제입니다.)
스크린샷이 도움이 되지만—충분하지는 않다
You can paste screenshots into the chat, which is better than a pure textual description, yet you still have to:
- 무언가 이상해 보인다는 것을 눈치챔.
- 스크린샷을 찍어야 한다는 것을 기억함.
- 매번 수동으로 붙여넣음.
The human remains the bottleneck.
Claude Code + --chrome Flag: 루프 닫기
Claude Code의 --chrome 플래그는 모델을 브라우저 확장 프로그램에 연결하여 다음과 같은 도구를 제공합니다:
- 스크린샷 찍기.
- 뷰포트 크기 조정.
- 클릭 및 스크롤 수행.
- 상호작용을 GIF로 기록 (문서 작성이나 진행 상황 공유에 유용).
새로운 워크플로
You: "Make the contact form button more prominent."
AI: changes code, takes screenshot, notices a double‑border issue it just introduced.
AI: "Done. I also fixed the double‑border problem where the preview container meets the button area."또는 문제가 보일 때:
You: "The preview tab has a double border."
AI: navigates to the page, clicks the preview button, takes a screenshot, and fixes it.컨텍스트가 핵심—시각적 피드백이 가장 가치 있는 UI 컨텍스트입니다.
시작하기
-
Claude in Chrome 확장 프로그램을 설치합니다.
-
Chrome에서
claude.ai에 로그인합니다. -
다음 명령으로 Claude Code를 시작합니다
claude --chrome
브라우저 도구가 자동으로 활성화됩니다.
Note: 개발 서버가 실행 중이어야 합니다 (Claude가 브라우저를 직접 새로 고칠 수 없습니다). 인증이 필요한 페이지도 세션 시작 시 이미 로그인되어 있으면 정상 작동합니다. 핫‑리로드도 이 설정에서 잘 동작합니다—바로 이것이 핵심 포인트입니다.
Source: …
실제 사례: Democracy Direct
Democracy Direct는 제가 만들고 있는 시민 참여 도구입니다. 사용자는 자신이 담당하는 대표자를 찾고 편지를 씁니다. 주요 인터페이스는 ContactFlow 컴포넌트이며, UI 전면 개편이 필요했습니다.
기존 레이아웃
- 모든 요소가 수직으로 쌓여 있음:
- 사용자 정보 필드(상단) → 에디터 → 미리보기 → “편지 보내기” 버튼 → 별도 “인쇄 & 우편” 섹션(주소 필드, 서식 체크박스).
- 문제점:
- 에디터와 미리보기가 겹쳐 있어 스크롤이 과다함.
- 작업 버튼이 하단에 숨겨져 있음.
- 대부분의 사용자는 디지털 흐름을 사용하지만 인쇄 옵션이 항상 보임.
- 모바일에서는 “보내기” 버튼을 찾기 위해 전체 편지를 스크롤해야 함.
새로운 레이아웃
- 오른쪽 사이드바가 있는 두 컬럼 레이아웃.
- 보기 모드 버튼(Edit / Preview / Print Preview)으로 에디터/미리보드가 겹치는 것을 대체.
- 작업 버튼은 항상 하단에 표시(비어 있을 때는 비활성화, 숨기지 않음).
- 인쇄 서식 옵션은 Print Preview 모드에서만 표시.
- **“Contact Form으로 보내기”**가 핵심 액션이 되어 눈에 띄게 함—놓치기 불가능.
모바일 조정
- 사이드바(“Your Information”)가 CSS
order유틸리티를 이용해 에디터 위에 나타남. - 사용자는 편지를 스크롤하기 전에 정보를 먼저 입력함.
- 작업 버튼은 2‑컬럼 그리드로 쌓임.
스크린샷이 차이를 만든 순간들
| 상황 | 스크린샷이 도움이 된 이유 |
|---|---|
| 모바일 재배열 – 사이드바는 모바일에서는 에디터 위에, 데스크톱에서는 옆에 있어야 함. | Claude가 뷰포트를 375 px로 조정하고 스크린샷을 찍어 CSS order 유틸리티가 정상 작동함을 확인함. |
| 이중 테두리 – “ 를 컨테이너에 감싸면서 이중 테두리가 생김. | Claude가 스크린샷에서 문제를 발견하고 보고한 뒤 같은 응답에서 바로 수정함. |
| 모바일 버튼 레이아웃 – 모바일에서는 2‑컬럼 그리드가 필요하고, 데스크톱에서는 한 줄이어야 함. | 뷰포트를 조정하고 각 변경 후 스크린샷을 찍으며 Claude가 빠르게 수렴, “버튼이 모바일에서 이상하게 보인다”는 반복적인 논의를 피함. |
Takeaway
Claude Code의 --chrome 플래그와 같은 도구가 제공하는 긴밀한 시각적 피드백 루프는, 인간이 병목이 되던 UI 반복 과정을 빠르고 대부분 자동화된 워크플로우로 전환합니다. 인간은 여전히 방향을 제시하지만, 모델은 UI를 실시간으로 보고 작동할 수 있어, 다듬어진 프런트엔드를 만들기 위해 필요한 왕복 단계 수를 크게 줄입니다.
Technology. 이전에 열려 있던 피드백 루프를 닫는 것에 불과합니다. LLM은 자신의 출력을 검증할 수 있을 때 잘 작동합니다. 대부분의 코드에서는 테스트가, UI에서는 스크린샷이 그 역할을 합니다.
그 결과 “이상한 간격이 뭐야?”와 같은 질문을 주고받는 라운드가 줄어들고, 실제 반복 라운드가 늘어납니다. UI가 사용자가 대표에게 성공적으로 연락할 수 있는지를 직접 좌우하는 시민 참여 도구에서는 이것이 매우 중요합니다.
Democracy Direct는 시민 참여를 보다 쉽게 만들기 위해 만든 오픈소스 프로젝트입니다. GitHub에서 확인해 보세요.