📮 4만 5천 명이 받는 AI 뉴스레터 구독하기

에이전트 / 노코드 자동화
j
jaden
·에이전트 / 노코드 자동화에 게시됨

대화 한 줄을 운영 웹앱으로: 10번의 검증으로 키운 인테리어 계약 안전가이드

소개

인테리어 계약 주의사항을 정리해 달라는 요청에서 출발해, 업체 조회·체크리스트·요청사항·브라우저 OCR·인쇄·시공 사례 검색까지 갖춘 웹앱을 만들고 실제 운영 환경에서 반복 검증했어요.

이런 분들께 도움돼요

  • 에이전트에게 한 번의 큰 요청보다 작은 피드백을 연속으로 주며 결과물을 발전시키고 싶은 분

  • 코드 작성뿐 아니라 GitHub 커밋, 배포, 운영 화면 검증까지 에이전트에게 맡겨 보고 싶은 분

  • 사용자의 짧은 불편 제보를 재현 가능한 테스트와 기능 개선으로 연결하는 방법이 궁금한 분

처음 요청은 ‘인테리어 계약서를 작성할 때 무엇을 확인해야 하는가’를 조사해 달라는 것이었어요. 하지만 정리된 글만으로는 계약 직전이나 공사 중에 다시 찾아보기 어려웠어요. 그래서 흩어진 주의사항과 피해 사례를 실제로 사용할 수 있는 한 화면의 도구로 바꾸는 방향으로 작업이 확장됐어요.

인테리어 계약서 작성 시 주의사항과 피해 사례,
꼭 특이사항에 추가해야 할 내용을 꼼꼼히 정리해줘.

인테리어 계약 안전가이드 첫 화면과 계약 안전 5원칙

그림 1. 계약 안전 5원칙을 한 화면에 정리한 운영 웹앱

진행 방법

사용한 도구

  • Aside AI 브라우저 — 자료 확인, 코드 수정, 실제 화면 조작과 운영 검증

  • HTML·CSS·JavaScript — 별도 서버 없이 실행되는 단일 페이지 웹앱 제작

  • GitHub — 기능과 수정 사항을 작은 단위로 기록하고 상태 검사 확인

  • Vercel — 각 변경을 운영 환경에 배포하고 Production 상태 확인

  • Tesseract.js·PDF.js — 이미지 OCR과 PDF 내장 문자 추출을 브라우저 안에서 처리

  • KISCON·오늘의집 — 공식 업체 조회와 공사 사례 검색으로 연결

조사 결과를 ‘읽는 글’이 아니라 ‘쓰는 도구’로 바꾸기

첫 번째 버전에는 계약 안전 원칙, 반복되는 피해 유형, 바로 복사해 쓸 수 있는 특약 문구를 담았어요. 이후 건설업체 정보를 앱이 복제하거나 저장하지 않고 KISCON 공식 조회로 직접 연결했어요. 사용자가 입력한 업체명과 검색어도 앱의 서버나 브라우저 저장소에 남기지 않는 방향을 명확히 했어요.

여기서 중요한 선택은 정보를 많이 모으는 것보다 ‘공식 출처로 이동하는 경로’와 ‘사용자 입력을 저장하지 않는 구조’를 먼저 정한 것이었어요.

짧은 피드백을 다음 기능의 테스트 조건으로 사용하기

사용자의 후속 요청은 길지 않았어요. “체크 확인 표시를 추가해줘”, “시공사 요청사항을 날짜별로 정리하고 싶어”, “모든 카테고리를 인쇄하고 싶어”처럼 한두 문장이었어요. 에이전트는 각 문장을 독립 기능으로 바꾸고, 구현 뒤에는 로컬 화면만 보지 않고 실제 운영 페이지까지 확인했어요.

그 결과 체크리스트 완료 표시, 날짜별 요청사항과 처리 여부, 주요 영역별 인쇄 기능이 차례로 추가됐어요. 사진이나 PDF를 올리면 브라우저에서 문자를 추출해 요청사항 초안에 보탤 수 있도록 OCR도 연결했어요.

‘작동한다’와 ‘사용자 환경에서 작동한다’의 차이 확인하기

인쇄 기능은 처음에는 느렸고, 일반 문서와 달리 특정 페이지에서 인쇄 창이 열리지 않는다는 피드백이 나왔어요. 최종 코드에서는 인쇄 버튼의 클릭 이벤트 안에서 대상 영역을 바로 지정한 뒤 window.print()를 동기적으로 호출하도록 바꿨어요.

button.addEventListener('click', () => {
  clearPrintMode();
  printTarget = document.getElementById(button.dataset.printTarget);
  if (!printTarget) return;
  document.body.classList.add('print-mode');
  printTarget.classList.add('print-target');
  printTarget.getBoundingClientRect();
  try {
    window.print();
  } finally {
    setTimeout(clearPrintMode, 300);
  }
});

이 경험으로 기능 구현 완료보다 브라우저 권한과 사용자 클릭 맥락을 포함한 운영 검증이 더 중요하다는 것을 확인했어요.

날짜별 시공사 요청사항과 브라우저 OCR 입력 화면

그림 2. 시공사 요청사항과 파일 OCR을 함께 처리하는 화면

검색 결과가 없을 때는 조건을 더하지 않고 줄이기

마지막으로 예상 비용, 지역, 아파트명, 평형을 이용해 오늘의집 공사 사례를 찾는 기능을 추가했어요. 처음에는 조건을 모두 넣어 정확도를 높이려 했지만, 조건이 많을수록 검색 결과가 사라질 수 있다는 문제가 생겼어요.

그래서 사용자가 아파트명·평형·지역·예상 비용 중 1개부터 4개까지 직접 선택하도록 바꿨어요. 기본값은 비교적 결과가 잘 나오는 아파트명과 평형 두 개로 두고, 필요하면 조건을 최소화한 검색도 다시 열 수 있게 했어요.

const selectedConditions = new Set(
  conceptConditionInputs
    .filter((input) => input.checked)
    .map((input) => input.value)
);

if (!selectedConditions.size) {
  conceptAlert.textContent = '검색 조건을 1개 이상 선택해 주세요.';
  conceptAlert.style.display = 'block';
  return;
}

const queryParts = [];
if (selectedConditions.has('address')) queryParts.push(address);
if (selectedConditions.has('apartment')) queryParts.push(apartment);
if (selectedConditions.has('size')) queryParts.push(`${Math.round(size)}평`);
queryParts.push('아파트 인테리어');

사용한 프롬프트 전문

아래는 개인정보와 계정·저장소 식별 정보를 제외한 공개 가능한 작업 요청 전체예요.

인테리어 계약서 작성 시 주의사항과 피해 사례,
꼭 특이사항에 추가해야 할 내용을 꼼꼼히 정리해줘.

GitHub에 커밋하고 Vercel에 배포해줘.
건설업체 정보조회를 할 수 있도록 추가해줘.

저장소는 비공개로 하고 개인정보는 저장하지 않는다.

체크리스트에 체크 확인 표시를 추가해줘.
시공사 요청사항 탭을 추가해 날짜별로 정리할 수 있도록 해줘.
체크리스트와 요청사항은 인쇄할 수 있도록 인쇄 아이콘을 추가해줘.
검증하고 배포해줘.

모든 카테고리에 인쇄 아이콘을 추가해줘.
요청사항에는 사진 및 문서 파일을 올리면 OCR로 문자를 정리해줘.

첨부 문자 추출이 이상하다. 확인하고 수정해줘.
첨부파일을 확대해서 다시 확인해줘.

인쇄가 너무 느린데 이유가 뭐야.
일반 문서는 정상인데 이 페이지에서는 동작하지 않는 것 같아. 변경해줘.

인테리어 컨셉 찾기를 추가해줘.
예상 비용, 공사할 집의 지역·아파트 이름·평형을 입력하면
오늘의집에서 공사 사례를 찾아줘.

조건이 많아 사례가 없는 것 같으니
검색 조건의 선택 개수를 사용자가 정할 수 있게 해줘.

결과와 배운 점

확인된 결과

  • Before: 계약 주의사항이 조사 결과로만 존재했어요.

After: 안전 원칙, 피해 유형, 특약 문구, 공식 업체 조회가 한 웹앱에 구성됐어요. 현재 파일과 운영 페이지에서 기능을 직접 확인했어요.

  • Before: 공사 단계별 확인과 요청사항을 따로 관리해야 했어요.

After: 체크리스트 완료 표시와 날짜별 시공사 요청사항·처리 확인·개별 인쇄 기능이 추가됐어요.

  • Before: 사진이나 PDF의 문자를 별도로 옮겨 적어야 했어요.

After: Tesseract.js와 PDF.js를 이용해 파일을 브라우저 안에서 처리하고, PDF 내장 문자를 우선 추출하는 구조가 들어갔어요.

  • Before: 인쇄 기능이 느리거나 특정 페이지에서 반응하지 않는다는 피드백이 있었어요.

After: 사용자 클릭 이벤트 안에서 인쇄를 직접 호출하도록 최종 코드가 수정됐어요.

  • Before: 공사 사례 검색 조건이 고정돼 결과가 지나치게 좁아질 수 있었어요.

After: 네 가지 조건 중 1~4개를 사용자가 선택하고 선택 개수를 실시간으로 확인할 수 있게 됐어요.

  • 배포 기록에서는 기능 추가와 수정이 총 10개 커밋으로 나뉘어 있었고, 각 커밋의 상태 검사가 성공했어요. 대응하는 Vercel 배포도 모두 Production Ready로 확인했어요.

  • 최종 운영 페이지는 HTTP 200으로 응답했고 KISCON, OCR, 인쇄, 검색 조건 선택, 개인정보 미저장 안내가 포함된 것을 다시 확인했어요.

시행착오

첫째, OCR은 라이브러리를 연결하는 것만으로 끝나지 않았어요. 이미지 보정본과 원본을 비교하고, PDF에 문자층이 있으면 OCR보다 먼저 사용하는 구조가 필요했어요.

둘째, 인쇄는 화면 모양만 맞추면 되는 문제가 아니었어요. 브라우저의 인쇄 창은 사용자 클릭과 실행 시점의 영향을 받았고, 비동기 대기 뒤에 호출하면 실제 환경에서 반응하지 않을 수 있었어요.

셋째, 검색은 조건이 많다고 항상 좋아지지 않았어요. 정확도를 높이려고 넣은 예산·지역 조건이 오히려 결과를 없앨 수 있었고, 최종적으로는 사용자가 조건 수를 조절하게 하는 편이 더 유용했어요.

검색 조건 1개부터 4개까지 선택할 수 있는 인테리어 공사 사례 찾기 화면

그림 3. 결과 범위를 사용자가 조절하도록 바꾼 조건 선택 검색 화면

꿀팁

  1. 에이전트에게 “만들어줘”만 말하지 말고 “검증하고 운영 환경까지 확인해줘”를 완료 조건에 넣어보세요.

  2. 사용자의 짧은 불편 제보를 그대로 테스트 시나리오로 바꾸세요. “느리다”, “안 열린다”, “결과가 없다”는 모두 좋은 재현 조건이에요.

  3. 개인정보 보호는 마지막 안내 문구가 아니라 저장 구조와 외부 전송 경로를 정하는 첫 설계 조건으로 두세요.

  4. 검색 결과가 부족하면 조건을 추가하기 전에 조건을 사용자가 끌 수 있게 만들어보세요.

  5. 기능 추가와 오류 수정을 작은 커밋으로 나누면 어떤 변경이 운영 결과를 바꿨는지 추적하기 쉬워요.

다른 업무에 적용한다면

이 방식은 계약 가이드뿐 아니라 사내 점검표, 현장 요청사항, 고객 상담 기록 정리, 문서 OCR, 조건형 검색 도구에도 적용할 수 있어요. 다만 각 업무의 개인정보와 외부 서비스 전송 범위는 별도로 설계하고 검증해야 해요.

도움이 필요한 부분

브라우저 인쇄처럼 자동화 테스트가 까다로운 기능을 에이전트 작업 흐름 안에서 회귀 테스트하려면 어떤 검증 방식을 쓰고 계신지 궁금해요. 또한 OCR 품질을 사용자의 실제 문서 유형별로 비교할 때 유용했던 평가 기준이 있다면 의견을 듣고 싶어요.

앞으로의 계획

  • 주요 기능별 회귀 테스트 항목을 더 명확히 만들기

  • 모바일 화면과 키보드 접근성 점검 강화

  • OCR 결과의 원문 대조 과정을 더 쉽게 만들기

  • 검색 결과가 부족할 때 조건을 단계적으로 줄이는 안내 개선

확인이 필요한 부분

  • 실제 공사 현장에서 장기간 사용했을 때 체크리스트와 요청사항 흐름이 충분히 편리한지는 아직 확인이 필요해요.

  • 다양한 촬영 각도와 필체에서 OCR 정확도가 어느 정도 유지되는지는 추가 검증이 필요해요.

  • 외부 검색 서비스의 결과 구성은 바뀔 수 있으므로 검색 연결은 주기적으로 확인해야 해요.

도움 받은 글 (옵션)

1
2개의 답글
지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 오후,
읽고 바로 써먹을 AI 소식만

✉️ 무료로 구독하기