화면 만들기

공통 샘플 데이터는 수질측정_샘플데이터.xlsx입니다. 관정 세 곳의 서른 달치 측정 결과가 들어 있습니다.

1. 요청문 쓰기

PRD 2번을 옮겨 적습니다. 다음 정도의 길이면 충분합니다.

수질 측정 데이터를 검토하는 담당자용 대시보드를 설계해줘. 상단에 판정 카드 네 개(전체·정상·주의·오염 의심), 중단에 관정별 TPH 시계열 차트와 판정 분포 도넛, 하단에 측정 데이터 표(판정 뱃지, AI 해석 컬럼). 엑셀 업로드 영역도 넣어줘. 공공기관 남색 테마로.

자기 업무 과제로 하시는 분은 아침에 채운 PRD의 컬럼과 화면 구성으로 바꿔 적습니다.

2. 고쳐 나가기

캔버스에 시안이 그려지면 배치를 손봅니다. 한 번에 한 가지씩 말합니다. 카드 크기, 차트 위치, 색 순서를 따로따로 고치면 무엇이 어떻게 바뀌는지 눈에 보입니다.

3. 내보내고 올려두기

마음에 드는 화면이 나오면 HTML 파일로 내려받습니다. 그리고 그 파일을 프로젝트 지식에 올립니다. 두 번째 단계를 빠뜨리기 쉬운데, 올려두지 않으면 다음 대화에서 "이 디자인 기반으로"라고 말할 수 없습니다.

내려받은 파일은 브라우저에서 한 번 열어봅니다. 아직 아무 기능도 없고 숫자는 전부 가짜지만, 이 껍데기에 다음 단계에서 심장을 답니다.

확인할 것

네 영역이 보이면 다음으로 넘어갑니다. 판정 카드 넷, 차트 둘, 데이터 표, 엑셀 업로드 자리입니다. 세부 모양은 사람마다 달라도 됩니다. 같은 요청문을 넣어도 시안은 조금씩 다르게 나오고, 그것이 문제가 되지 않습니다.

HTML 파일이 내려받아졌는지, 그 파일을 프로젝트 지식에 올렸는지 두 가지를 마지막으로 확인합니다.

막혔을 때

step1 완성본이 이 단계의 결과물입니다. 내 화면이 이만큼 나오지 않았다면 열어보고 무엇이 다른지 견줍니다.

다만 먼저 스스로 만들어 보는 편이 남습니다. 완성본을 그대로 쓰면 내일 자기 업무 과제를 할 때 다시 막힙니다. 오늘 막히는 것이 내일 막히는 것보다 낫습니다.