화면 구성 인터뷰
AI의 질문에 답하며 화면에 필요한 요소를 정합니다.
나는 [무엇을 하는 화면]을 만들고 싶어. 만들기 전에 필요한 것을 알아야 하니 질문을 한 번에 하나씩 해 줘. 화면에 보여야 할 것, 사용자가 누를 것, 입력할 것 순서로 물어봐 줘. 대답이 모이면 화면 구성안을 목록으로 정리해 줘.
프롬프트로 원하는 화면 만들기
만들기 전에 어떤 화면이 필요한지 먼저 말로 그려 보았나요?
화면을 어떻게 만들지 AI에게 바로 맡기기보다, 먼저 무엇이 보여야 하는지 목록으로 정리합니다.
AI가 질문을 먼저 하게 하면 내가 놓친 조건을 찾을 수 있습니다.
AI의 질문에 답하며 화면에 필요한 요소를 정합니다.
나는 [무엇을 하는 화면]을 만들고 싶어. 만들기 전에 필요한 것을 알아야 하니 질문을 한 번에 하나씩 해 줘. 화면에 보여야 할 것, 사용자가 누를 것, 입력할 것 순서로 물어봐 줘. 대답이 모이면 화면 구성안을 목록으로 정리해 줘.
만들 기능을 필수와 나중에 할 일로 나눕니다.
위에서 정리한 화면 구성안을 '꼭 필요한 것'과 '나중에 해도 되는 것'으로 나눠 줘. 꼭 필요한 것은 오늘 안에 만들 수 있는 양으로 줄여서 번호를 붙여 줘.
만들기 전에 필요한 요소를 목록으로 정리하면 수정 횟수가 줄어듭니다.
버튼을 누르면 무슨 일이 일어나야 하는지 정확히 말할 수 있나요?
버튼은 누르는 순간 일어날 일까지 함께 말해야 합니다. '버튼을 만들어 줘'보다 '누르면 입력한 내용이 아래 목록에 추가되게 해 줘'가 정확합니다.
입력 폼은 어떤 항목이 필수인지, 잘못 입력하면 어떤 안내를 보일지도 함께 정합니다.
버튼을 누르면 화면이 바뀌도록 만듭니다.
[파일 이름]에 '[버튼 이름]' 버튼을 추가해 줘. 이 버튼을 누르면 [일어나야 할 일]이 되게 해 줘. 버튼은 손가락으로 누르기 편한 크기로 하고, 눌렀다는 것을 알 수 있게 화면에 표시해 줘.
이름, 연락처 같은 입력 항목을 가진 폼을 만듭니다.
[파일 이름]에 입력 폼을 추가해 줘. 항목은 [항목1], [항목2], [항목3]이고, 이 중 [필수 항목]은 꼭 입력해야 해. 제출 버튼을 누르면 입력한 내용을 화면 아래에 보여 줘.
빈칸이나 틀린 형식에 친절한 안내를 보여 줍니다.
방금 만든 입력 폼에서 필수 항목이 비어 있거나 [연락처 / 이메일] 형식이 맞지 않으면 어떤 항목이 왜 문제인지 해당 칸 아래에 알려 줘. 안내 문구는 짧고 차분한 말투로 써 줘.
산출물 · index.html
버튼은 눌렀을 때 일어날 일까지 함께 말합니다.
입력한 내용이 쌓이면 어떤 모양으로 보여 주면 좋을까요?
목록은 추가, 삭제, 빈 상태를 함께 생각해야 쓸 만해집니다.
한 번에 모두 요청하지 말고, 보여 주기, 추가하기, 지우기 순서로 나눠 확인합니다.
입력한 항목이 아래로 쌓이는 목록을 만듭니다.
입력 폼에서 제출한 내용이 [항목 이름]별로 아래 목록에 한 줄씩 쌓이게 해 줘. 가장 최근 것이 위에 보이게 하고, 아직 아무것도 없을 때는 '[비어 있을 때 보여 줄 문구]'라고 보여 줘.
목록의 항목을 지우거나 끝낸 일로 표시합니다.
목록의 각 줄에 '삭제' 버튼과 '완료' 표시를 추가해 줘. 완료한 항목은 글자에 취소선을 그어서 색이 아니라 모양으로도 구분되게 해 줘.
여백과 글자 크기를 읽기 편하게 정리합니다.
지금 화면을 휴대폰과 노트북 모두에서 읽기 편하게 다듬어 줘. 글자 크기, 여백, 버튼 간격만 조정하고 기능은 바꾸지 마. 바꾼 내용은 목록으로 알려 줘.
좁은 화면에서 깨지는 곳을 찾습니다.
이 화면을 휴대폰처럼 좁은 폭에서 볼 때 깨지거나 불편해질 곳을 점검해 줘. 문제가 있으면 위치와 이유를 알려 주고, 내가 허락하면 그때 고쳐 줘.
빈 상태, 추가, 삭제를 나눠서 확인하면 목록이 단단해집니다.
HTML은 화면에 무엇이 있는지, CSS는 어떻게 보이는지, JavaScript는 누르면 어떻게 움직이는지를 맡습니다. 직접 쓰지 않아도 어느 부분이 어떤 역할인지 알면 AI에게 정확히 시킬 수 있습니다.
이름, 연락처처럼 사용자가 정보를 입력하고 제출하는 화면 요소입니다. 필수 항목과 입력 형식을 미리 정해 두면 잘못된 입력을 줄일 수 있습니다.
버튼을 누르거나 글자를 입력하는 것처럼 화면에서 일어나는 사용자의 동작입니다. '이 동작이 일어나면 이렇게 해 줘'라고 말하는 것이 화면을 움직이는 기본 지시입니다.
휴대폰, 태블릿, 노트북 같은 서로 다른 화면 폭에 맞춰 배치가 달라지는 화면입니다. 가장 좁은 화면에서 먼저 확인하면 문제를 빨리 찾을 수 있습니다.
빈칸이나 형식이 틀린 값을 제출하기 전에 걸러 내는 과정입니다. 무엇이 왜 잘못됐는지 짧게 알려 주면 사용자가 바로 고칠 수 있습니다.
결과를 눈으로 확인하고 한 가지씩 고쳐 달라고 요청하는 과정입니다. 화면 작업에서는 바꾼 곳만 확인하면 되어 속도가 빠릅니다.