화면을 먼저 만드는 까닭

기능부터 만들고 화면을 나중에 붙이면 완성한 뒤에 다시 만들자는 말을 듣습니다. 요구를 글로만 주고받았기 때문입니다. 같은 문장을 읽어도 요청한 사람과 만든 사람이 머릿속에 그리는 화면은 다릅니다. "관정별 추이를 보여달라"는 말에서 한 사람은 관정마다 선이 하나씩 있는 그래프를 떠올리고 다른 사람은 관정을 고르는 드롭다운과 그래프 하나를 떠올립니다. 둘 다 틀리지 않았고, 그래서 만들고 나서야 어긋남이 드러납니다.

화면을 먼저 만들면 그 어긋남이 삼십 분 만에 드러납니다. 아직 아무 기능도 없는 껍데기지만 무엇이 어디에 보일지가 눈앞에 있으니 "이 숫자는 위에 있어야 한다"거나 "이 표는 안 봐도 된다"는 말이 바로 나옵니다. 고치는 비용도 다릅니다. 목업은 다시 그리면 그만이지만 기능이 얽힌 뒤에 배치를 바꾸는 일은 훨씬 큽니다.

순서를 바꾸는 것만으로 생기는 이득이 하나 더 있습니다. 화면을 먼저 만들어두면 그다음 요청이 쉬워집니다. "이 디자인 기반으로 엑셀을 읽는 기능을 붙여줘"라고 하면 되기 때문입니다. 만들 것을 처음부터 다 설명할 필요가 없어집니다.

볼 것과 미룰 것

목업에서 숫자가 맞는지는 보지 않습니다. 아직 데이터를 읽지 않으니 화면의 값은 전부 가짜입니다. 표에 서른 줄이 있어도 그것은 예시일 뿐이고, 차트가 그럴듯하게 올라가도 아무 뜻이 없습니다. 여기서 값을 확인하려 들면 시간만 씁니다.

대신 볼 것은 넷입니다. 한 화면에 다 들어오는가. 제일 먼저 봐야 할 것이 제일 위에 있는가. 없어도 되는 것이 끼어 있지 않은가. 캡처해서 보고에 붙일 만한 모양인가. 마지막 항목이 의외로 중요합니다. 만든 도구를 실제로 쓰는 자리가 대개 보고이기 때문입니다.

미룰 것은 색과 글꼴입니다. 지금 정한 색이 마음에 안 들어도 나중에 한 줄로 바꿉니다. 이 단계에서 시간을 쓸 값이 있는 것은 배치와 우선순위뿐입니다. 공공기관 화면이라면 남색 계열로 정해두고 넘어가면 충분합니다.

Claude Design

Claude Design은 대화로 화면을 그리는 도구입니다. 코드도 디자인 프로그램 사용법도 필요 없습니다. 왼쪽 채팅창에 원하는 화면을 문장으로 설명하면 오른쪽 캔버스에 시안이 그려지고, "카드를 더 크게"라고 한마디 하면 그 자리에서 바뀝니다.

흐름은 셋입니다. 만들고 싶은 화면을 문장으로 설명하고, 캔버스에 그려진 시안을 확인하고, 고칠 곳을 말로 지시합니다. 이 세 걸음을 몇 번 돌면 원하는 모양에 닿습니다. 마음에 들면 HTML 파일로 내보내는데, 그 파일이 다음 단계의 출발점이 됩니다.

내보낸 파일은 프로젝트 지식에 올려둡니다. 그러면 그다음 대화에서 "이 디자인 기반으로"라고 말할 수 있습니다. 화면과 기능이 따로 놀지 않게 하는 방법입니다.