힌트 바 — 답 대신 질문을 건네기로 했다

Fecit에서 할 일을 적다 보면, 어떤 칸은 막막합니다. “기대”는 뭘 적으라는 거고, “난관”은 또 뭐지. 빈 칸을 앞에 두면 손이 멈춥니다.

그래서 힌트 바를 만들었습니다. 어떤 필드를 누르면 상단에 작은 바가 내려오면서, 그 칸에 맞는 질문 하나를 건넵니다. 제목 칸이면 “이 일이 정확히 뭔가요?”, 난관 칸이면 “뭐가 발목을 잡을까요?” 같은 식으로.

답이 아니라 질문

처음엔 AI가 답을 채워주는 걸 생각했습니다. 그런데 답을 받으면, 그건 더 이상 내 할 일이 아니게 됩니다. 남이 대신 적어준 칸은 들여다보지 않게 되거든요.

그래서 방향을 틀었습니다. 답 대신 질문. 막힌 곳을 콕 집어 한 번 더 생각하게 만드는 것. 빈 칸을 마주한 사람에게 필요한 건 정답이 아니라, “아 그거” 하고 손이 움직이게 만드는 작은 질문 한 줄이었습니다.

질문 옆에는 ✨ 버튼이 있습니다. 누르면 AI가 지금 적은 내용을 보고 더 날카로운 질문 한 줄을 만들어줍니다. (이건 루멘을 한 개 씁니다.)

여기까지가 의도였고, 그다음부터가 늘 그렇듯 삽질입니다.

버그 1 — 버튼은 눌리는데 힌트가 안 뜬다

데스크톱에서 ✨를 눌렀더니, 아무 일도 안 일어났습니다. 정확히는 — 잠깐 떴다 사라지는 것도 아니고, 그냥 바가 통째로 없어졌습니다.

원인은 웹의 고전적인 함정이었습니다. 힌트 바는 “지금 어떤 필드가 포커스됐는가”에 묶여 있습니다. 포커스가 풀리면 바도 사라지죠. 그런데 입력창 옆의 ✨ 버튼을 클릭하면, 그 클릭이 입력창의 포커스를 가져가버립니다. 입력창은 blur되고, 힌트 바는 “포커스 없네?” 하고 사라지고, 그 사이에 도착한 AI 답은 보여줄 자리가 없어집니다.

해결은 한 줄이었습니다.

<button onMouseDown={(e) => e.preventDefault()} onClick={onHint}>

mousedown에서 기본 동작을 막으면 포커스가 입력창에 그대로 남습니다. 모바일에서는 멀쩡했던 게 웹에서만 터졌습니다. blur 동작이 다르거든요.

버그 2 — AI가 자꾸 제목 얘기만 한다

본문 칸에 “hey”라고 적고 ✨를 눌렀더니, AI가 제목에 대한 질문을 내놨습니다. ”.ㅁ.”

이유를 보니, 힌트를 만들 때 제목을 맥락으로 같이 보내고 있었습니다. “이 사람이 무슨 일을 하는지” 알려주려는 의도였죠. 그런데 정작 적은 본문이 “hey”처럼 빈약하면, AI가 기댈 건 제목밖에 없습니다. 그래서 제목으로 끌려간 겁니다.

우선순위를 분명히 했습니다. 1순위는 지금 누른 그 필드의 내용. 제목은 일단 프롬프트에서 뺐습니다. 보조 맥락으로 다시 넣는 건 나중에 고민하기로.

# 제목은 의도적으로 제외 — 1순위는 해당 필드 내용
prompt = f"내용: {content}"

버그 3 — <p> 태그까지 AI에게 보내고 있었다

본문과 분석·회고 칸들은 리치 텍스트 에디터입니다. 즉 값이 <p>보고서 작성</p> 같은 HTML이라는 뜻이죠. 그걸 그대로 AI에게 보내고 있었습니다. 사람한테 “다음 단계는 <p> 태그 안에 있어요”라고 말하는 셈입니다.

태그를 벗겨 텍스트만 보내도록 고쳤습니다. 덤으로, 빈 칸(<p></p>)도 이제 진짜 빈 값으로 인식돼서 ✨ 버튼이 적절히 비활성화됩니다.

교훈

1. 답보다 질문이 어렵고, 답보다 질문이 낫다. 좋은 질문 한 줄은 정답 한 단락보다 사람을 더 움직입니다.

2. 웹에서 입력창 옆 버튼은 포커스를 훔친다. onMouseDown + preventDefault는 외워두면 좋은 한 줄입니다.

3. AI에게 뭘 보내는지 직접 찍어보라. 우리가 보낸다고 생각한 것과 실제로 보낸 것은 자주 다릅니다. 제목이 섞여 있거나, <p>가 붙어 있거나.

질문 한 줄을 제대로 건네기까지, 생각보다 여러 줄을 고쳤습니다. 원래 다 그렇습니다.