공공데이터 API 활용하기 ③: 공고·개찰결과 통합 조회 웹툴 완성하기

오늘 목표

이번 주에는 준비된 공고 조회 시작 파일에 나라장터 낙찰정보 API를 연결합니다.
한 API에서 받은 공고번호·차수를 다음 API의 입력으로 넘기고, 개찰 상태에 따라 업체별 결과를 조회하는 흐름을 완성합니다.

• 나라장터 낙찰정보서비스를 별도로 활용신청하기
• 첫 번째 API의 결과를 다음 API의 조회조건으로 연결하기
• 선택한 공고의 개찰완료·유찰·재입찰 상태 확인하기
• 개찰완료 건의 업체별 순위·투찰금액·투찰률을 표로 표시하기
• 공고번호·차수·입찰분류번호·재입찰번호를 문자열로 유지하기
• 0건·유찰·재입찰·요청 실패를 다른 상태로 안내하기
• 개찰 1순위와 최종낙찰자가 같은 뜻이 아님을 구분하기
• React나 서버 없이 순수 HTML 파일 하나로 완성하기

목표 결과물

• 나라장터통합조회기_v0.1.html — 선택 공고의 개찰 상태 조회
• 나라장터통합조회기_v0.2.html — 개찰완료 건의 업체별 결과표
• 나라장터통합조회기_v1.0.html — 상태처리와 화면을 완성한 최종 통합 조회기

준비물

• ChatGPT 또는 Claude

• Chrome 또는 Microsoft Edge

• 7주차에 발급받은 공공데이터포털 Decoding 인증키

• Windows 메모장 또는 사용할 수 있는 코드 편집기

• 인터넷 연결

• 아래 첨부파일 나라장터통합조회기_시작파일.html

  나라장터통합조회기_시작파일.html

9주차 시작파일과 7주차의 Decoding 인증키만 있으면 진행할 수 있습니다.

오늘 순서

1. 나라장터 낙찰정보서비스 활용신청하기
2. 오늘 연결할 API 두 개와 시작파일 확인하기
3. 코드 전에 AI가 데이터 연결 흐름을 이해했는지 확인하기
4. v0.1에서 선택 공고의 개찰 상태 조회하기
5. v0.2에서 업체별 개찰결과를 표로 표시하기
6. v1.0에서 0건·유찰·재입찰·요청 실패를 구분하기
7. 실제 나라장터 공고로 최종 테스트하기

오늘 만들 도구

나라장터 공고·개찰결과 통합 조회기

Decoding 인증키 + 조회기간 + 공고명
→ 용역공고 목록 조회
→ 좌측 목록에서 공고 선택
→ 우측에 공고 상세정보 표시
→ 개찰결과 조회 버튼 클릭
→ 개찰 상태 API로 상태·식별값 확인
→ 개찰완료면 업체별 결과 API 호출
→ 화면 하단에 순위·업체명·투찰금액·투찰률 표시

최종 화면 구성

좌측: 공고 조회조건 + 공고목록
우측: 선택한 공고 상세 + 개찰 상태 + 조회 버튼
하단: 선택한 공고의 업체별 개찰결과표

오늘 사용할 API

이번 주에는 한 공고를 선택하고 그 공고의 업체별 개찰결과까지 확인하는 흐름에 집중합니다.

핵심 개념

1. 인증키는 같아도 새 API는 활용신청이 필요합니다

8주차 공고 조회와 9주차 개찰결과 조회는 같은 사이트의 다른 서비스입니다.

기존 Decoding 인증키를 그대로 사용하되, 낙찰정보서비스에 대한 활용권한은 별도로 신청해야 합니다.

2. 앞 API의 결과가 뒤 API의 입력이 됩니다

각 API를 따로 호출하는 것보다, 먼저 받은 값을 다음 요청에 연결하는 것이 오늘의 핵심입니다.

공고 API의 item
  bidNtceNo  공고번호
  bidNtceOrd 공고차수
        ↓
개찰 상태 API의 요청값
        ↓
개찰 상태 API의 item
  bidClsfcNo 입찰분류번호
  rbidNo     재입찰번호
        ↓
업체별 개찰결과 API의 요청값

사용자가 공고번호나 차수를 다시 입력하게 하지 않습니다.
웹툴이 현재 선택한 item에서 필요한 값을 꺼내 다음 요청에 사용합니다.

3. 상태를 먼저 확인해야 0건을 올바르게 해석할 수 있습니다

getOpengResultListInfoOpengCompt는 개찰완료 건의 업체별 결과를 제공합니다.
해당 API만 바로 호출했다가 0건이 나오면 다음을 구분하기 어렵습니다.

• 아직 개찰 전인지
• 유찰된 건인지
• 재입찰 중인지
• 결과가 아직 등록되지 않았는지
• 요청값이 다른지

따라서 먼저 개찰 상태 API의 progrsDivCdNm을 확인합니다.

개찰완료 → 업체별 결과 API 호출
유찰     → 유찰 상태 안내 후 종료
재입찰   → 재입찰 상태 안내 후 종료
결과 없음 → 아직 개찰결과가 등록되지 않음으로 안내

4. 개찰 1순위는 최종낙찰자를 뜻하지 않습니다

오늘 표시하는 opengRank는 개찰순위입니다.
적격심사·서류확인·기술평가 등이 남아 있을 수 있으므로 1순위 업체를 낙찰업체나 최종낙찰자로 표시하지 않습니다.

최종낙찰자는 낙찰정보서비스의 다른 오퍼레이션으로 확인해야 하며, 이번 주차 범위에서는 제외합니다.

5. 공고차수 000과 같은 식별값은 문자열 그대로 사용합니다.

공고차수·입찰분류번호·재입찰번호에는 000, 002처럼 앞자리 0이 있을 수 있습니다.
숫자로 바꾸지 않고 문자열 그대로 연결합니다.

6. API 호출은 사용자의 의도가 있을 때 실행합니다

공고를 클릭하는 것만으로 개찰 API를 자동 호출하지 않습니다.
사용자가 공고 상세를 확인한 뒤 개찰결과 조회를 눌렀을 때만 API를 호출합니다.

이렇게 하면 어떤 동작이 API를 호출하는지 명확하고, 필요 없는 호출도 줄일 수 있습니다.

준비 - 9주차 폴더와 시작파일

1. 원하는 위치에 9주차_API 폴더를 만듭니다.
2. 첨부된 나라장터통합조회기_시작파일.html을 그 폴더에 저장합니다.
3. 파일을 더블클릭해 Chrome 또는 Edge에서 엽니다.
4. 최근 7일, 공고명, 좌측 목록, 우측 상세정보가 보이는지 확인합니다.

9주차_API/
  나라장터통합조회기_시작파일.html
  나라장터통합조회기_v0.1.html
  나라장터통합조회기_v0.2.html
  나라장터통합조회기_v1.0.html

시작파일은 9주차 첨부자료이며, 학습자가 만든 8주차 파일을 가져오지 않습니다.
인증키를 TXT나 HTML 파일에 미리 넣어 저장하지 않습니다.

실습 1 - 나라장터 낙찰정보서비스 활용신청하기

1. 서비스 찾기

1. 공공데이터포털에 로그인합니다.

2. 검색창에 다음 이름을 입력합니다.

   복사

   조달청_나라장터 낙찰정보서비스
   

3. 제공기관이 조달청인 오픈 API를 엽니다. (조달청_나라장터 낙찰정보서비스)

4. 설명에 개찰결과·개찰순위·재입찰·유찰정보를 제공한다고 되어 있는지 확인합니다.

2. 활용신청하기

1. 활용신청을 누릅니다.

2. 7주차에서 사용한 같은 계정과 인증키로 신청합니다.

3. 활용목적은 예를 들어 다음과 같이 작성합니다.

   복사

   사내 AI 교육용 나라장터 공고·개찰결과 조회 웹툴 실습
   

4. 마이페이지 > 데이터 활용 > Open API > 활용신청 현황에서 승인 상태를 확인합니다.

개발계정은 자동승인이지만, 승인 후 인증키가 실제 API에 반영되는 데 시간이 걸릴 수 있습니다.
오류가 나더라도 인증키를 재발급하지 말고 먼저 활용신청 상태와 반영 시간을 확인합니다.

실습 1 완료 확인

• 서비스명이 조달청_나라장터 낙찰정보서비스이다.
• 제공기관이 조달청이다.
• 활용신청 현황이 승인 상태이다.
• 새 인증키를 발급받지 않고 기존 Decoding 인증키를 사용한다.

실습 2 - 오늘 사용할 API 정보 확인하기

여기에 정리한 항목만 오늘 코드에 사용합니다.
공식 문서의 모든 요청변수와 응답값을 웹툴에 넣지 않습니다.

API 1 - 선택 공고의 개찰 상태 확인

요청주소

https://apis.data.go.kr/1230000/as/ScsbidInfoService/getOpengResultListInfoServcPPSSrch

요청변수

화면에 사용할 응답값

상태 API가 여러 항목을 보내면 선택한 공고의 bidNtceOrd와 같은 항목만 사용합니다.
같은 차수에 재입찰 회차가 여러 개면 rbidNo가 가장 큰 최신 항목을 사용합니다.
같은 재입찰번호에 입찰분류가 여러 개인 복잡한 공고는 이번 주차에서 첫 항목만 표시합니다.

API 2 - 개찰완료 건의 업체별 결과 조회

요청주소

https://apis.data.go.kr/1230000/as/ScsbidInfoService/getOpengResultListInfoOpengCompt

이번 주차 요청변수

bidClsfcNo와 rbidNo에 값이 있을 때만 요청주소에 추가합니다.

결과표에 사용할 응답값

numOfRows=100이므로 이번 웹툴은 한 공고의 업체별 결과를 최대 100건까지 표시합니다.
totalCount가 100보다 크면 전체 N건 중 100건 표시라고 알려 누락을 숨기지 않습니다.

실습 2 완료 확인

• API 1이 개찰 상태와 다음 요청용 식별값을 제공한다.
• API 2가 개찰완료 건의 업체별 결과를 제공한다.
• API 2에는 API 1에서 받은 네 가지 식별값을 연결한다.
• 업체별 결과는 최대 100건까지 표시한다.

실습 3 - 코드 전에 AI가 요청을 이해했는지 확인하기

시작파일을 아직 첨부하지 않고 ChatGPT 또는 Claude에서 새 대화를 시작합니다.
실제 인증키는 AI 대화에 입력하지 않습니다.

복사 프롬프트 ① — 두 API의 연결 흐름 확인

순수 HTML 파일 하나로 나라장터 공고·개찰결과 통합 조회 도구를 만들려고 해.

시작파일은 이미 날짜·공고명으로 용역공고를 찾고, 목록에서 공고를 선택하는 기능이 있어.

추가할 흐름
1. 선택한 bidNtceNo와 bidNtceOrd로 개찰 상태 API를 호출한다.
2. 상태 API에서 같은 차수의 progrsDivCdNm, bidClsfcNo, rbidNo를 확인한다.
3. 개찰완료면 네 개의 식별값으로 업체별 결과 API를 호출한다.
4. 하단에 업체별 개찰순위·투찰금액·투찰률을 표시한다.

개찰 1순위는 최종낙찰자로 표현하지 않을 거야.
아직 코드는 작성하지 말고, 데이터가 어떻게 연결되는지와 v0.1, v0.2, v1.0의 제작순서만 짧게 정리해줘.

AI 답변 확인

AI가 공고를 클릭할 때마다 모든 API를 자동 호출하거나, 처음부터 최종낙찰자·예비가격·다운로드까지 추가했다면 코드를 요청하기 전에 범위를 다시 줄입니다.

실습 4 - v0.1: 선택 공고의 개찰 상태 조회하기

이번 단계에서 추가할 기능

• 우측 상세정보 아래 개찰결과 조회 버튼
• 선택한 공고번호로 개찰 상태 API 호출
• 선택한 공고차수와 같은 응답 항목 찾기
• 진행상태·개찰일시·참가업체수·입찰분류번호·재입찰번호 표시
• 선택한 개찰 상태 item을 다음 단계에 사용할 수 있게 유지

아직 업체별 개찰결과표는 만들지 않습니다.

복사 프롬프트 ② — v0.1 개찰 상태 연결

9주차_API 폴더의 나라장터통합조회기_시작파일.html을 앞의 AI 대화에 첨부하고 아래 프롬프트를 입력합니다.

첨부한 시작파일을 v0.1로 수정해줘.

- 우측 공고 상세 아래에 개찰결과 조회 버튼과 개찰 상태 영역 추가
- 공고를 선택해야 버튼을 누를 수 있게 하기
- 버튼을 누르면 아래 API를 한 번 호출
  https://apis.data.go.kr/1230000/as/ScsbidInfoService/getOpengResultListInfoServcPPSSrch
- serviceKey, pageNo=1, numOfRows=20, type=json, inqryDiv=3, 선택한 bidNtceNo 전달
- body.items 배열과 body.items.item 형태를 모두 하나의 배열로 맞추기
- 응답에서 선택한 bidNtceOrd와 같은 항목을 찾기
- 같은 차수가 여러 개면 rbidNo가 가장 큰 최신 항목을 우선하고, 같은 rbidNo가 여러 개면 첫 항목 사용
- 진행상태, 개찰일시, 참가업체수, 입찰분류번호, 재입찰번호 표시
- 공고번호·차수·분류번호·재입찰번호는 숫자로 바꾸지 않기
- 다른 공고를 선택하면 이전 개찰 상태 비우기

아직 업체별 결과 API와 결과표는 추가하지 마.
기존 공고 조회·선택 기능은 유지하고 실행 가능한 전체 HTML을 출력해줘.

v0.1 파일 저장·실행

1. AI 답변의 <!DOCTYPE html>부터 </html>까지 전체를 복사합니다.

2. 메모장에 붙여넣습니다.

3. 9주차_API 폴더에 다음 이름으로 저장합니다.

   복사

   나라장터통합조회기_v0.1.html
   

4. 파일 형식은 모든 파일, 인코딩은 UTF-8로 선택합니다.

5. 저장한 v0.1을 브라우저에서 엽니다.

v0.1 공통 테스트 조건

완료된 개찰결과를 안정적으로 확인하기 위해 아래 실제 용역공고를 사용합니다.

공고를 검색한 뒤 공고번호가 같은 항목을 선택합니다.
동일한 공고명의 다른 차수가 보이면 번호와 차수를 함께 확인합니다.

v0.1 새 기능 테스트

1. Decoding 인증키와 공통 테스트 조건을 입력해 공고를 조회합니다.
2. R25BK01099370, 차수 000인 공고를 선택합니다.
3. 개찰결과 조회를 누릅니다.

기대 결과

• 선택한 공고번호와 차수가 바뀌지 않습니다.
• 진행상태·개찰일시·참가업체수가 표시됩니다.
• 입찰분류번호와 재입찰번호의 앞자리 0이 유지됩니다.
• 업체별 결과표는 아직 보이지 않습니다.

다른 공고를 선택했을 때 이전 개찰 상태가 사라지면 v0.1 테스트가 끝납니다.

실습 5 - v0.2: 업체별 개찰결과를 표로 표시하기

이번 단계에서 추가할 기능

• 개찰상태가 개찰완료일 때만 업체별 결과 API 호출
• v0.1의 개찰 상태 item에서 네 개의 식별값 재사용
• 화면 하단에 전체 너비의 업체별 결과표 추가
• API가 보낸 모든 item을 여러 행으로 표시
• 개찰 1순위 행을 색상으로 구분

복사 프롬프트 ③ — v0.2 업체별 결과 연결

테스트를 통과한 나라장터통합조회기_v0.1.html을 AI 대화에 첨부하고 아래 프롬프트를 입력합니다.

첨부한 정상 v0.1을 v0.2로 수정해줘.

- 개찰 상태가 개찰완료면 아래 API를 이어서 한 번 호출
  https://apis.data.go.kr/1230000/as/ScsbidInfoService/getOpengResultListInfoOpengCompt
- serviceKey, pageNo=1, numOfRows=100, type=json과 v0.1에서 선택한 bidNtceNo, bidNtceOrd, bidClsfcNo, rbidNo 전달
- bidClsfcNo와 rbidNo는 값이 있을 때만 요청에 추가
- 상태가 유찰이나 재입찰이면 업체별 API를 호출하지 않기
- body.items 배열과 body.items.item 형태를 모두 하나의 배열로 맞추기
- 화면 하단 전체 너비에 개찰순위, 투찰업체명, 사업자등록번호, 투찰금액, 투찰률, 투찰일시, 비고 표시
- 사업자등록번호는 숫자로 바꾸거나 천 단위로 구분하지 않기
- API가 보낸 전체 item을 행으로 표시하고 개찰 1순위 행만 강조
- 개찰순위를 낙찰순위나 최종낙찰자로 표현하지 않기
- 다른 공고를 선택하면 이전 개찰 상태와 결과표 비우기

페이지 이동이나 다운로드는 추가하지 말고 실행 가능한 전체 HTML을 출력해줘.

v0.2 파일 저장

1. AI 답변의 전체 HTML을 복사합니다.

2. 9주차_API 폴더에 다음 이름으로 저장합니다.

   복사

   나라장터통합조회기_v0.2.html
   

3. v0.1에 덮어쓰지 않습니다.

4. 저장한 v0.2를 브라우저에서 엽니다.

v0.2 새 기능 테스트

1. v0.1과 같은 공통 테스트 공고를 검색합니다.
2. R25BK01099370, 차수 000인 공고를 선택합니다.
3. 개찰결과 조회를 누릅니다.
4. 개찰 상태와 하단 결과표를 함께 확인합니다.

기대 결과

• 개찰 상태를 먼저 확인한 뒤 업체별 API가 이어서 호출됩니다.
• 여러 투찰업체가 여러 행으로 표시됩니다.
• 개찰순위·업체명·사업자등록번호·투찰금액·투찰률·투찰일시·비고 열이 보입니다.
• 1순위 행은 다른 행과 구분되지만 낙찰업체로 표시되지 않습니다.
• 다른 공고를 선택하면 이전 개찰 상태와 결과표가 사라집니다.

결과표의 행 수를 상태의 참가업체수와 대조합니다.
두 값이 다르더라도 바로 오류로 단정하지 말고 totalCount와 현재 받은 행 수를 함께 확인합니다.

실습 6 - v1.0: 상태처리와 화면 완성하기

이번 단계에서 추가할 기능

• 공고 조회 중과 개찰결과 조회 중의 버튼 잠금
• 개찰 상태에 따른 안내문
• resultCode=03과 정상 0건을 결과 없음으로 처리
• 투찰금액 천 단위 구분과 원 표시
• 투찰률 %, 빈 값 표시
• 전체 N건 중 M건 표시 안내
• 작은 화면에서 결과표 가로 스크롤
• 새로고침할 때 인증키 비우기

복사 프롬프트 ④ — v1.0 완성

테스트를 통과한 나라장터통합조회기_v0.2.html을 AI 대화에 첨부하고 아래 프롬프트를 입력합니다.

첨부한 정상 v0.2를 이번 주 최종본 v1.0으로 완성해줘.

- 공고 조회 중과 개찰결과 조회 중에는 해당 버튼 잠금
- 개찰완료, 유찰, 재입찰, 아직 결과 없음, API 요청 실패를 구분해 짧게 안내
- resultCode 03과 정상 응답의 0건은 오류가 아닌 결과 없음으로 처리
- 투찰금액은 화면에서만 천 단위로 구분하고 원 표시
- 투찰률에는 % 표시, 빈 값은 undefined나 NaN 대신 - 표시
- 결과표 위에 전체 건수와 현재 표시 건수를 구분해 표시
- 다른 공고를 선택하거나 새 목록을 조회하면 이전 개찰 상태·결과·안내문 초기화
- 새로고침하면 인증키 비우기
- 작은 화면에서는 좌우 영역을 위아래로 배치하고 결과표는 가로 스크롤 허용

기존 두 API 연결 방식은 유지해줘.
페이지 이동, 다운로드, 예비가격, 최종낙찰자, 인증키 저장 등 새 기능은 추가하지 마.
실행 가능한 전체 HTML을 출력해줘.

최종 HTML 저장

1. AI 답변의 전체 HTML을 복사합니다.

2. 9주차_API 폴더에 다음 이름으로 저장합니다.

   복사

   나라장터통합조회기_v1.0.html
   

3. v0.2에 덮어쓰지 않습니다.

4. 저장한 v1.0을 브라우저에서 엽니다.

실습 7 - v1.0 최종 테스트

라이브 API의 결과값은 시점에 따라 달라질 수 있으므로 특정 업체명이나 금액을 코드에 정답으로 넣지 않습니다.
선택한 공고의 식별값이 다음 API로 올바르게 이동하는지를 중심으로 테스트합니다.

테스트 1 - 공고 검색과 선택

1. 파일을 열어 인증키가 비어 있고 날짜가 최근 7일로 설정되었는지 확인합니다.
2. Decoding 인증키와 공통 테스트 조건을 입력합니다.
3. 시작일과 종료일을 2025-10-17 로 입력합니다.
4. 공고명이 회양천, 공고번호가R25BK01099370 인 공고를 선택합니다.

기대 결과

• 좌측에 공고목록, 우측에 선택한 공고의 상세정보가 보입니다.
• 우측의 공고번호·차수가 좌측 선택 공고와 같습니다.
• 공고를 선택한 후에만 개찰결과 조회 버튼을 누를 수 있습니다.

테스트 2 - 개찰 상태와 식별값

개찰결과 조회를 한 번 누릅니다.

테스트 3 - 업체별 개찰결과표

공통 테스트 공고가 개찰완료로 표시되면 하단 표를 확인합니다.

기대 결과

• 표 위에 전체 건수와 현재 표시 건수가 보입니다.
• 각 행에 개찰순위·업체명·사업자등록번호·투찰금액·투찰률·투찰일시·비고가 보입니다.
• 투찰금액은 1,077,300,000원처럼 천 단위로 구분됩니다.
• 투찰률에는 %가 붙습니다.
• 빈 값은 undefined나 NaN이 아니라 로 표시됩니다.
• 1순위 행은 강조되지만 최종낙찰자라는 표현은 없습니다.

위 금액은 표시 형식을 설명하는 예시입니다. 해당 공고의 실제 결과가 반드시 같아야 하는 정답은 아닙니다.

테스트 4 - 다른 공고로 전환

1. 다른 공고를 선택합니다.
2. 이전 개찰 상태와 결과표가 사라지는지 확인합니다.
3. 새 공고의 개찰결과 조회를 누릅니다.

기대 결과

• 새 공고를 선택하는 즉시 이전 개찰결과가 비워집니다.
• 새 공고의 상태를 확인한 후에만 새 결과표가 나타납니다.
• 이전 공고의 업체명이 남아 있지 않습니다.

테스트 5 - 결과 없음과 요청 실패

유찰과 재입찰의 실제 공고를 바로 찾지 못했다면 해당 두 테스트는 생략해도 됩니다.
다만 코드가 progrsDivCdNm을 확인한 뒤 업체별 API 호출 여부를 결정하는지는 AI와 함께 코드로 확인합니다.

웹툴이 제대로 작동하지 않을 때

오류를 AI에게 알릴 때는 현재 버전, 실패한 동작, 기대 결과, 실제 화면 문구를 짧게 적고 현재 HTML을 첨부합니다.

예시:

v0.2에서 개찰 상태는 개찰완료로 나와.
그런데 하단 결과표는 0건이라고 해.
기대 결과는 상태 API의 bidNtceNo, bidNtceOrd, bidClsfcNo, rbidNo로 업체별 API를 요청하는 거야.
현재 HTML을 확인하고 수정된 전체 HTML을 출력해줘.

AI에게 보내기 전에 실제 인증키와 serviceKey=가 포함된 전체 요청주소를 제거합니다.

오류를 해결하기 위해 mode: "no-cors"나 공개 CORS 우회 서비스를 추가하지 않습니다.

API가 일시적으로 작동하지 않을 때

별도의 테스트 파일은 사용하지 않습니다.
아래 JSON은 실제 API 연결을 대신하지 않고, 두 응답의 연결 구조를 AI와 검토하는 용도로만 사용합니다.

구조 검토용 개찰 상태 응답

{
  "response": {
    "header": { "resultCode": "00", "resultMsg": "정상" },
    "body": {
      "items": [
        {
          "bidNtceNo": "R25BK01099370",
          "bidNtceOrd": "000",
          "bidClsfcNo": "0",
          "rbidNo": "000",
          "bidNtceNm": "회양천 재해복구사업 기본 및 실시설계용역",
          "opengDt": "2025-10-23 11:00:00",
          "prtcptCnum": "11",
          "progrsDivCdNm": "개찰완료"
        }
      ],
      "totalCount": 1
    }
  }
}

구조 검토용 업체별 결과 응답

{
  "response": {
    "header": { "resultCode": "00", "resultMsg": "정상" },
    "body": {
      "items": [
        {
          "bidNtceNo": "R25BK01099370",
          "bidNtceOrd": "000",
          "bidClsfcNo": "0",
          "rbidNo": "000",
          "opengRank": "1",
          "prcbdrNm": "구조확인용 A업체",
          "prcbdrBizno": "0000000001",
          "bidprcAmt": "1077300000",
          "bidprcrt": "80.123",
          "bidprcDt": "2025-10-23 09:30:00",
          "rmrk": ""
        },
        {
          "bidNtceNo": "R25BK01099370",
          "bidNtceOrd": "000",
          "bidClsfcNo": "0",
          "rbidNo": "000",
          "opengRank": "2",
          "prcbdrNm": "구조확인용 B업체",
          "prcbdrBizno": "0000000002",
          "bidprcAmt": "1078300000",
          "bidprcrt": "80.198",
          "bidprcDt": "2025-10-23 09:35:00",
          "rmrk": ""
        }
      ],
      "totalCount": 2
    }
  }
}

현재 HTML을 AI 대화에 첨부하고 위 JSON 두 개와 아래 문장을 함께 붙여넣습니다.

현재 HTML은 수정하지 말고 코드만 검토해줘.
첫 응답의 bidNtceNo, bidNtceOrd, bidClsfcNo, rbidNo를 두 번째 API의 요청값으로 사용하는지,
두 번째 응답의 items 두 건을 결과표 두 행으로 만드는지 확인해줘.
차수와 재입찰번호의 000이 유지되는지도 알려줘.

다음 내용을 코드 기준으로 확인합니다.

• 개찰 상태가 개찰완료일 때만 두 번째 API를 호출하는가
• 네 개의 식별값이 그대로 넘어가는가
• 업체 두 건을 표 두 행으로 만드는가
• 000을 숫자 0으로 바꾸지 않는가
• 개찰순위를 최종낙찰자로 표현하지 않는가

실제 API가 정상화되면 v0.1의 개찰 상태 조회부터 다시 테스트합니다.
축약 JSON을 이용한 코드 검토는 실제 API 연결 성공을 대신하지 않습니다.

이번 주 해보기

실제 업무 공고 한 건 분석하기

1. 자신의 업무와 관련된 단어로 용역공고를 찾습니다.
2. 개찰예정일시가 지난 공고를 선택해 개찰결과를 조회합니다.
3. 다음 네 가지를 업무 메모에 정리합니다.
   • 참가업체수
   • 개찰 1순위 업체와 투찰금액
   • 1순위와 2순위의 투찰금액 차이
   • 자사 또는 관심 업체의 순위·투찰률
4. 개찰 1순위가 최종낙찰자로 확정되었는지는 이 웹툴만으로 단정하지 않습니다.

심화 과제

심화과제 1 - 자사 행 강조하기

결과표에서 자사를 바로 찾을 수 있도록 다음 기능을 AI에게 요청해 봅니다.

v1.0에 우리 회사 사업자등록번호를 선택으로 입력하는 칸을 추가해줘.
입력한 번호와 prcbdrBizno가 같은 결과 행만 다른 색으로 강조해줘.
사업자등록번호의 하이픈과 공백은 제거한 뒤 비교하고, 코드나 브라우저 저장소에는 저장하지 마.
나머지 기능은 바꾸지 마.

심화과제 2 - 인증키 등 고정값 자동 인식하기

1. 인증키와 고정값들을 별도 설정 파일에 저장하고, 이를 자동으로 불러오도록 개선해보세요.
2. 인증키, 경호사업자등록번호 를 입력합니다. (경호엔지니어링의 사업자등록번호는 1328106125 )
3. 해당 고정값들은 HTML 코드에 직접 작성하지 않고 별도의 config.js 파일에서 관리합니다.

완성 모습

구현 힌트

AI에게 다음과 같이 요청해보세요.

지금 첨부한 파일은 나라장터 공고와 개찰결과를 조회하는 HTML 웹툴인데, 인증키와 우리 회사 사업자등록번호를 매번 입력하는 것이 번거로워서 개선하려고 해. 

1. HTML과 같은 폴더에 config.js 파일을 두고, 여기에 설정한 Decoding API Key와 사업자등록번호를 자동으로 불러오게 수정해줘. 
2. 화면의 인증키, 사업자등록번호 입력란과 관련 안내는 제거해줘. 인증키가 없으면 config.js 설정 안내를 보여주고, 사업자등록번호는 없어도 사용할 수 있게 해줘. 
3. 사업자등록번호가 있으면 하이픈과 공백을 제외하고 prcbdrBizno와 비교해 일치하는 행을 자동으로 강조해줘. 기존 공고 조회·개찰결과 조회 기능은 그대로 유지하고, 수정된 전체 HTML과 config.js 예시를 만들어줘.

완료 확인

• config.js의 인증키와 사업자등록번호가 자동으로 적용된다.
• 새로고침 후에도 설정한 값을 다시 입력할 필요가 없다.
• 인증키가 없으면 설정 안내가 표시된다.
• 사업자등록번호가 없어도 공고·개찰결과를 조회할 수 있다.
• 사업자등록번호가 일치하는 우리 회사 결과 행이 강조된다.
• 기존 공고 조회·선택·개찰결과 조회 기능이 정상 작동한다.
• 실제 인증키가 담긴 config.js 파일을 외부에 공유하지 않았다. (중요)

결과물 저장하기

9주차_API 폴더에 다음 파일이 있는지 확인합니다.

9주차_API/
  나라장터통합조회기_시작파일.html
  나라장터통합조회기_v0.1.html
  나라장터통합조회기_v0.2.html
  나라장터통합조회기_v1.0.html

• 시작파일은 공고를 검색하고 선택하는 제공 파일입니다.
• v0.1은 선택 공고의 개찰 상태 조회를 통과한 중간본입니다.
• v0.2는 업체별 개찰결과표를 통과한 중간본입니다.
• v1.0은 상태처리와 최종 테스트를 통과한 완성본입니다.
• React 프로젝트나 별도 JavaScript 파일은 없습니다.

오늘 완료 확인

• 나라장터 낙찰정보서비스를 별도로 활용신청했다.
• 9주차 시작파일과 7주차 Decoding 인증키만으로 실습했다.
• 코드를 요청하기 전에 AI가 API 연결 흐름을 이해했는지 확인했다.
• v0.1에서 선택 공고의 개찰 상태를 조회했다.
• 선택한 공고차수와 같은 상태 항목을 사용했다.
• 공고번호·차수·입찰분류번호·재입찰번호를 문자열 그대로 연결했다.
• v0.2에서 개찰완료 건의 업체별 결과를 여러 행으로 표시했다.
• 개찰 1순위를 최종낙찰자로 표현하지 않았다.
• v1.0에서 개찰완료·유찰·재입찰·0건·요청 실패를 구분했다.
• 투찰금액·투찰률·빈 값을 읽기 쉽게 표시했다.
• 다른 공고를 선택하면 이전 개찰결과가 초기화된다.
• 새로고침하면 인증키가 사라진다.
• 순수 HTML 파일 하나로 완성했다.
• HTML·AI 대화·스크린샷에 실제 인증키와 전체 요청주소를 남기지 않았다.

공식 참고자료

• 조달청_나라장터 낙찰정보서비스
• 공공데이터포털 API 호출 URL 생성 가이드
• 조달청_나라장터 입찰공고정보서비스

오늘의 핵심

이번 주에는 공고를 선택하면 웹툴이 필요한 정보를 이어 받아 개찰상태와 업체별 결과까지 조회하도록 만들었습니다. 사용자는 공고번호와 차수를 다시 입력하지 않고, 공고 검색부터 개찰결과 확인까지 한 화면에서 처리할 수 있습니다.