r/vibecoding•1일 전•6•4
UI 변경을 위한 가장 빠른 프롬프트는 사실 프롬프트가 아님
the fastest prompt i've found for UI changes isn't a prompt
핵심 요약
AI에게 UI 변경을 요청할 때 텍스트 대신 주석을 단 스크린샷을 보내는 것이 훨씬 효율적임.
- UI 변경 효율화 — 텍스트 설명 대신 주석이 달린 스크린샷을 활용함.
- 워크플로우 최적화 — 아이패드와 펜슬을 이용해 즉각적으로 수정 사항을 시각화함.
- 엣지 케이스 고려 — 다양한 상태의 스크린샷을 함께 보내 오류를 방지함.
- 원치 않는 수정 방지 — 유지해야 할 스타일을 명확히 표시해 불필요한 디자인 변경을 막음.
AI랑 일하면서 UI 수정 사항을 말로 설명하는 게 여전히 제일 좆같은 부분이라고 느낄 때가 많다.
간격이 안 맞아서 버튼을 제목 아래로 옮겨야 할 때, 내가 문단을 길게 써서 설명해도 opus는 엉뚱한 걸 건드리기 일쑤다. 더 길고 정확하게 써봐도 마찬가지임. 세 번째 시도쯤 되면 그냥 포기하고 내가 직접 파일 열어서 수정하게 되는데, 이러면 이 셋업을 쓰는 의미가 아예 없잖아.
그러다 claude code가 이미지 붙여넣기를 지원한다는 게 생각났다. 다들 에러 스크린샷 찍어서 올릴 때 쓰던 거 말이야.
그래서 이제는 실행 중인 UI를 스크린샷 찍어서 그 위에 그림을 그린다. 버튼에 동그라미 치고, 가야 할 위치에 화살표 긋고, 패딩 쪽에는 "너무 좁음"이라고 갈겨쓰지. 그리고 텍스트는 딱 한 줄만 적는다: "이대로 수정해."
그럼 화살표까지 다 읽어버림. 문단 같은 거 필요 없음.
다섯 달째 이렇게 하고 있는데, 내가 그동안 썼던 어떤 프롬프트보다 이게 훨씬 효과적이라 좀 짜증 날 정도다.
너희는 UI를 거의 맞게 만들었을 때 뭐라고 피드백 보내냐?
