인터페이스를 정한다

폴더 구성과 기술 선정에서 기술은 AI에게 고르게 했습니다. 이번 글은 AI에게 맡길 수 없는 것, 인터페이스를 정합니다. 만든 것에 어디서 닿을지를 여러분의 생활에서 역산해 고르고, 화면 하나를 그려 리포지토리에 넣습니다. 남은 마지막 결정은 다음 글 아웃풋을 정한다에서 다룹니다.

인터페이스는 여러분(이나 이용자)이 만든 것에 닿는 면을 말합니다. 화면인가, 채팅인가, 아니면 모습이 안 보이는 무언가인가.

기술 선정은 AI에게 맡길 수 있지만 이건 못 맡깁니다. 어디서 만지고 싶은가는 여러분의 생활 문제이기 때문입니다.

누가, 어디서, 어떻게 만지는가

머릿속 그림을 키운다의 "누가·언제·어떤 기분으로"를 떠올려 보세요. 인터페이스는 그 답에서 역산해서 정합니다.

예를 들어 "주말 밤, 완성한 킷 사진을 다 찍은 직후에 쓴다"라면, 답은 거의 자동으로 "모바일 브라우저에서, 찍은 사진을 바로 올릴 수 있는 화면"이 됩니다. PC용 관리 화면을 아무리 잘 다듬어도 그 순간에 PC는 안 켜져 있습니다.

선택지는 생각보다 많다

"만든다 = 웹사이트"라고 생각하기 쉽지만 선택지는 넓습니다.

놓치기 쉬운 게 아래 두 개입니다. 특히 "화면 없음"은 강력합니다. "매주 월요일 아침에 지난주 숫자를 정리해서 카카오톡으로 보내 준다" — 이것도 훌륭한 제품이고, 화면을 만드는 것보다 간단할 때도 있습니다.

이미 매일 열고 있는 곳(카카오톡, 슬랙, 메일)에 자리 잡게 하는 건 계속 쓰게 만드는 가장 확실한 방법입니다. 새 앱을 여는 습관은 좀처럼 안 붙습니다.

여기를 안 정하면 AI는 매번 다른 걸 만든다

인터페이스를 안 정하고 넘기면 무슨 일이 벌어질까요.

AI는 매번 그때그때 타당한 형태를 추측합니다. 오늘은 PC용 화면, 내일은 모바일용 버튼 배치, 다음 주는 또 다른 레이아웃. 하나하나는 타당한데 전체적으로는 뒤죽박죽인 게 완성됩니다.

이건 AI의 결점이 아닙니다. 정해져 있지 않으면 추측할 수밖에 없습니다. 그러니 정하고, 적습니다. 둘 자리는 docs/interface.md. "모바일 우선", "게시는 3탭 이내" — 몇 줄이면 충분합니다.

"화면 하나만 그려 본다"로 충분

말보다 강력한 전달법이 하나 더 있습니다. 그림입니다.

디자인 실력은 필요 없습니다. 종이에 볼펜으로, 가장 중요한 화면 하나만 그려 보세요.

• 가장 크게 보이는 건 무엇인가 (사진? 숫자? 버튼?)
• 누르는 건 어디 있는가
• 무엇이 "없어도 되는가"

그린 종이는 사진으로 찍어 리포지토리에 넣습니다(AI에게 "이 이미지를 docs/에 넣고 interface.md에서 참조해 줘"라고 부탁하면 끝입니다). Claude Code는 이미지를 읽을 수 있습니다. 서툰 손그림이 100줄짜리 설명문보다 정확하게 의도를 전달합니다.

전 화면을 그릴 필요는 없습니다. 주인공인 화면 하나만. 나머지는 그 한 장의 톤을 보고 AI가 추측해 줍니다.

해 보기

1. 위 표에서 내 프로젝트의 "만지는 면"을 고른다. 애매하면 "쓰는 순간, 손에 뭘 들고 있는가"로 정한다
2. 주인공 화면 하나를 종이에 그려서 사진으로 찍는다
3. AI에게 방침을 말로 전해 docs/interface.md에 정리하게 하고, 그림과 함께 리포지토리에 넣게 한다

정할 건 이제 하나 남았습니다.

다음 글: 아웃풋을 정한다