기능 붙이기

앞 단계에서 만든 화면에 기능을 붙입니다. 한 번에 다 요청하지 말고 넷으로 나눠 진행합니다. 중간에 어긋나면 어디서 어긋났는지 알기 쉽습니다.

프로젝트 지식에 디자인 HTML과 PRD가 올라가 있으므로 "프로젝트 지식의 디자인과 PRD를 기반으로"라고 시작하면 됩니다. 만들 것을 처음부터 다시 설명하지 않아도 됩니다.

1. 엑셀 읽기

파일을 끌어다 놓으면 표에 값이 채워지게 합니다. 컬럼 이름은 PRD 2번에 적은 그대로 씁니다. 여기까지 되면 샘플 파일을 넣어 서른 건이 다 들어오는지 셉니다.

2. 판정 규칙

PRD 3번을 그대로 옮겨 달라고 합니다. 순서까지 적어 주는 편이 안전합니다. 판정이 붙으면 색으로 구분되게 합니다.

3. 차트

관정별 추이와 판정 분포를 그립니다. 추이 차트에는 기준선을 그어둡니다. 500이라는 선이 보이면 어느 시점에 넘었는지 한눈에 들어옵니다.

4. AI 해석

키 입력창을 만들고 관정별로 한 문장 요약을 받아 표에 넣습니다. 키를 비운 채로도 한 번 돌려 폴백을 확인합니다.

완료 기준 대조

PRD 6번을 꺼내 하나씩 짚습니다. 오늘 샘플이라면 전체 서른 건이 정상 스물다섯, 주의 둘, 이상치 하나, 오염 의심 둘로 갈려야 합니다.

숫자가 맞으면 두 행을 따로 확인합니다. W01 관정의 용존산소 25인 행이 이상치로, W02 관정의 총석유계탄화수소 320인 행이 주의로 표시되어야 합니다. 뒤엣것이 이 도구가 제대로 도는지를 가르는 행입니다. 기준 500을 넘지 않았는데도 주의로 잡히는 이유는 같은 행의 용존산소가 1.8이기 때문입니다.

W02 관정을 시계열로 펼쳐보면 이야기가 보입니다. 용존산소는 4.8에서 시작해 반년 동안 3.9까지 서서히 내려가다가 4월에 1.8로 한 번에 꺾입니다. 같은 달 산화환원전위가 88에서 마이너스 15로 돌아서고, 전기전도도는 352에서 445로 오릅니다. 총석유계탄화수소가 320으로 처음 검출되는 것도 이 달입니다. 그리고 두 달 뒤 1,200까지 오릅니다.

오염이 눈에 보이기 전에 주변 환경이 먼저 바뀐 것입니다. 기준을 넘기 전에 잡아내는 것, 이것이 규칙을 잘 설계했을 때 생기는 힘입니다.

배포

여기까지 됐으면 공개 주소로 올립니다. 명령어를 쓰지 않고 웹 화면만으로 됩니다.

저장소를 만들고 완성한 HTML 파일을 끌어다 놓은 뒤 저장을 누르면 코드가 올라갑니다. 그다음 배포 서비스에서 그 저장소를 가져와 배포를 누르면 일이 분 만에 주소가 생깁니다. 설정은 바꿀 것이 없습니다.

올리기 전에 한 가지만 확인합니다. 코드 안에 API 키가 적혀 있지 않은지입니다. 우리 앱은 키를 입력창으로 받는 구조라 괜찮지만, 이 확인은 습관으로 만들어야 합니다.

주소가 생기면 휴대폰으로 열어봅니다. 방금까지 노트북 안에만 있던 도구가 이제 주소를 가진 서비스입니다. 옆 사람과 주소를 주고받아 서로의 화면을 열어보십시오. 외주도 서버도 없이 오늘 오후에 만든 것입니다.

배포한 주소에서 완료 기준을 한 번 더 확인합니다. 내 컴퓨터에서 되던 것이 배포본에서 안 되는 일이 실제로 자주 있습니다. 특히 AI 호출처럼 외부와 통신하는 부분이 그렇습니다.

막혔을 때

step2 완성본이 이 단계의 결과물입니다.