Prompting, 모호함과 정확함

Source: Dev.to

저는 샤이리라는 날카로운 제품 매니저와 함께 Claude Code Web의 기능을 시연하는 세션에 있었습니다. 우리는 작업하기 좋은 기능을 하나 골랐습니다: 데이터 테이블에 현재 활성화된 필터 상태를 반영하는 것.

제품에는 수십 개의 열이 있는 테이블이 있습니다. 사용자는 하나 이상의 열에 있는 값으로 행을 필터링할 수 있고, 원하는 대로 열을 표시하거나 숨길 수 있습니다.

문제점: 사용자는 활성화된 필터가 있더라도 어떤 열에서 필터링하고 있는지 전혀 알 수 없습니다. 열 헤더에서 필터 표시기를 찾으려면 테이블을 가로로 스크롤해야 하고, 현재 숨겨진 열을 다시 표시해야 할 수도 있습니다. 일종의 숨바꼭질 게임이죠.

첫 번째 시도: 문제는 막연하게, 해결책은 정확히

Claude Code에 테이블 위에 필터링된 필드 목록을 추가해 달라고 요청했습니다:

Add next to the text of "Showing 21 items", the fields we are filter 
the items by (if any). e.g. "Showing 21 items, filtered by Name and Country".

코드가 작성되고 커밋된 뒤 푸시되었습니다. 빌드를 기다리고 프리뷰 환경을 확인했더니, 제가 요청한 대로 정확히: 보기 흉한 필드 이름 목록이 나타났습니다.

두 번째 시도: 문제는 정확히, 해결책은 막연하게

우리는 새로 시작했습니다.

LLM을 활용한 프로토타입 제작의 달인인 샤이리가 다시 시도해 보라고 제안했습니다. 이번에는 그녀가 프롬프트를 이렇게 말했습니다:

On the items table, I want to help the user understand that there is an active filter and what it is.
(without having to look for it on the columns' headers, to scroll, or find hidden column with filter, etc.)

이번에는 해결책에 대해 훨씬 막연하게 설명했지만, 문제는 위 글 상단에 제가 설명한 그대로 정확히 기술했습니다.

그 결과는 저를 놀라게 했습니다.

단순 텍스트 목록 대신 Claude Code는 칩 형태의 행을 렌더링했습니다. 각 칩은 필드 이름과 선택된 필터 값을 보여주었습니다. 두 개 이상의 값이 선택된 경우에는 개수만 표시했습니다. 각 칩에는 해당 필드의 필터를 제거할 수 있는 작은 X가 있었습니다. 여러 필터가 활성화되면 “clear all” 버튼이 나타났습니다.

하루 밤낮 차이였습니다. 두 번째 구현은 한 단계 높은 수준이었고, 친숙하고 전문적이며 훨씬 더 유용했습니다—디자이너가 만든 것 같은 느낌이었습니다.

교훈

• 해결책을 설명하면 모델은 제가 설명한 그대로의 해결책을 만들었습니다.
• 문제를 설명하면 모델은 문제를 해결하고 종종 제가 상상한 것보다 더 좋은 해결책을 찾아냈습니다.

문제는 정확히, 해결책은 막연히 설명하세요.