Google Apps Script 활용, 법률서비스 원페이지 웹앱 구현 ②

한국어 웹 사이트의 홈페이지

[결과물 URL: https://script.google.com/macros/s/AKfycbylBn9Yk2RbBGCIQAk7OoHbyOQ4gPp_mWwgUxjbNSKHPYXdTWByV1VD1Qs_I2spnJ8/exec]

소개

• 금 주 목표는 디테일 수정과 이미지 적용에 주안을 둠

• Form 기능 실효성을 높이기 위해 업데이트 작업 진행

• 일러스트→ DAL·E 시도 했으나 컨셉 맞지 않아 실패

• 코딩→ 클로드로 작업 재개

// Code.gs
const SPREADSHEET_ID = '아이디';

function doGet() {
  return HtmlService.createTemplateFromFile('Index')
    .evaluate()
    .setTitle('크레딧닥터 - 법률상담 서비스')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1.0')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function processForm(formData) {
  // 스프레드시트에 데이터 저장
  var spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
  var sheet = spreadsheet.getActiveSheet();
  
  // 저장할 데이터 준비
  var timestamp = new Date();
  var rowData = [
    timestamp,             // timestamp
    formData.name,         // 이름1
    formData.phone,        // 전화
    formData.consultType,  // 상담분야
    formData.debtAmount,   // 채무금액
    formData.residenceType,// 거주형태
    formData.location,     // 거주지역
    formData.incomeType,   // 소득형태
    formData.preferredTime,// 상담희망시간
    'Y'                    // 개인정보동의여부
  ];

  // 데이터를 새로운 행에 추가
  sheet.appendRow(rowData);
  
  return '상담 신청이 완료되었습니다. 요청 주신 시간에 연락드리겠습니다.';
}

function processExpectedPaymentForm(formData) {
  // 스프레드시트 ID (기존 스프레드시트 ID 사용)
  var spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
  var sheet = spreadsheet.getSheetByName('예상변제금') || spreadsheet.insertSheet('예상변제금');
  
  // 타임스탬프 추가
  var timestamp = new Date();
  
  // 데이터 행 준비
  var rowData = [
    timestamp,
    formData.loanExistence,
    formData.debtCauses,
    formData.jobType,
    formData.monthlyIncome,
    formData.childrenCount,
    formData.name,
    formData.phone
  ];
  
  // 데이터 추가
  sheet.appendRow(rowData);
  
  return '신청이 완료되었습니다.';
}

function processForm(formData) {
  // 기존 스프레드시트에 데이터 저장 로직 유지
  var spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
  var sheet = spreadsheet.getActiveSheet();
  
  // 저장할 데이터 준비
  var timestamp = new Date();
  var rowData = [
    timestamp,             // timestamp
    formData.name,         // 이름1
    formData.phone,        // 전화
    formData.consultType,  // 상담분야
    formData.debtAmount,   // 채무금액
    formData.residenceType,// 거주형태
    formData.location,     // 거주지역
    formData.incomeType,   // 소득형태
    formData.preferredTime,// 상담희망시간
    'Y'                    // 개인정보동의여부
  ];

  // 데이터를 새로운 행에 추가
  sheet.appendRow(rowData);
  
  return '상담 신청이 완료되었습니다. 빠른 시일 내에 연락드리겠습니다.';
}

function getRealtimeConsultations() {
  var spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
  var sheet = spreadsheet.getActiveSheet(); // 현재 활성 시트 사용
  
  // 데이터 범위 가져오기
  var dataRange = sheet.getDataRange();
  var values = dataRange.getValues();
  
  // 헤더 제외, 최근 5개 데이터 추출 (역순)
  var recentConsultations = values.slice(1).reverse().slice(0, 5).map(function(row) {
    return {
      name: row[1], // 이름 열
      consultType: row[3], // 상담분야 열
      date: Utilities.formatDate(row[0], 'Asia/Seoul', 'MM/dd HH:mm') // 타임스탬프 열
    };
  });
  
  return recentConsultations;
}

진행방법

개선 작업 리스트

1. 상담 신청 문구 개선

• 빠른 시일 내에 연락드리겠습니다.→ 요청 주신 시간에 연락드리겠습니다.

2. 전화번호 자릿수 체크 시도

• 실무 간 자릿수 오류가 빈번

• 이를 해소하기 위한 설정 필요

• '-'를 제외 11자리 숫자가 입력되지 않을 경우 값을 재입력 하도록 팝업 설정

• 팝업 메시지는 "전화번호를 다시 확인하여 입력해 주세요" 출력 시도

• 자릿수 초과 시 입력 되지 않도록 처리 되었으나, 자릿수 미만 시에는 팝업 창이 닫히지 않는 오류 발생→ 시간 관계상 후순위 차리 예정

3. 채무금액 체크

• 실무 간 채무금액은 1,000만 원 이하일 때 제도 신청이 불가능

• 따라서, '1,000만 원' 미만 금액을 입력 시 신청을 다시 고려하도록 팝업 설정

• 액션은 '1000 이하의 숫자', '1000만 원 이하의 숫자', '10,000,000원 이하의 숫자 입력시' 팝업 설정 후 신청버튼 불가 처리 후 "1,000만 원 미만의 채무는 개인회생 및 개인파산 진행이 불가합니다" 팝업 되도록 설정

4. 상담희망시간

• 신청인의 희망 시간을 100% 대응하기 어렵기에, 실무자의 희망 시간을 드롭다운 메뉴로 제공

• 테스트를 위해 아래 8개 항목 적용

· 오전 10시-10시 반

· 오전 10시반-11시

· 오전 11시-11시 반

· 오후 1시 - 1시반

· 오후 1시 반-2시

· 오후 2시-2시 반

· 오후 3시-3시 반

· 오후 3시 반-4시

5. 개인정보 취급방침 등록

• 현행법상 동의 처리 내용을 확인할 수 있도록 Form에서 게시 필요

• 관련 내용을 박스 형태로 삽입 후 스크롤 처리

6. 비주얼 영역 이미지 삽입

• 누끼 베이스의 이미지를 중앙 처리해 반응형 구동시에도 어색 하지 않도록 처리

• 영역의 크기는 1,920 x 1080 px의 1MB 이하의 JPG 또는 PNG 파일을 권장 확인

• ChatGPT→ DALL·E를 활용, 동 사이즈의 이미지 생성

• 구글 드라이브 업로드 후 연동 과정에서 지속적인 오류 발생→ 추후 수정 예정

[참조] 이미지 작업 간에는 아래의 프롬프트를 최적화 요청

개인회생 및 파산 상담을 제공하는 법률상담 웹페이지의 Visual 영역 디자인을 위한 프롬프트를 작성해 줘.

• 해당 영역의 크기는 1,920 x 1,080px

• 비주얼 영역을 제외한 배경 색상은 White야.

• 복잡하지 않은 메타포 이미지 적용

• 신뢰감 느낄 수 있는 40대 젠틀한 한국인 변호사의 상반신을 필수 배치

• 희망적인 컬러, 하이퍼리얼리즘 스타일 적용

• 배경을 제외한 누끼 이미지 처리

결과적으로 실패했기에, 코드 삽입 제외(코드 블록 삽입 시 느려짐)

※ 단, DALL·E에서 투명 배경 처리 불가하여 이미지 생성 후 Photoshop에서 누끼 처리해야 한다는 점 학습

7. 네비게이션 메뉴 기능 수정

• 로고 텍스트 클릭 시 최상단 위치 이동 하도록 변경

8. 실시간 상담 신청 현황 확인할 수 있도록 처리

• visual 영역 내 구글 스프레드 시트에서 값을 할당 받아 확인할 수 있도록 처리

• 영역 내 플로팅 하여 배치되도록 설정, 단 백그라운드 색상 안먹는 오류 발생

9. 예상변제금 확인 섹션 추가

• 최초 구동 목표는 단계별 선택 후 진행 방식을 착안했으나, 기능 확인을 위해 펼쳐진 형태로 변경

• 대출 유무 판단→ 2. 채무 발생 원인→ 3. 직업→ 4. 월 평균 수입→ 5. 자녀 수→ 6. 이름 및 전화 번호 입력란

• 각 단계는 라운드 + 체크 박스 혼용해 기입할 수 있도록 구성

[다음 예정 작업]

1. 도메인 연결

• 서치 결과 구글 워크스페이스를 통한 도메인 연결 가능성 확인

• 구글 사이트 내 커스텀 도메인 기능을 제공하는 것을 확인하였을 때 지원 가능성 ↑

• 최종적으로 별도 도메인 세팅 후 포털사이트 검색 등록 시도

2. 예상변제금 섹션 고도화

• 별도 알고리즘 작성해 예상금액 실시간 확인할 수 있도록 변경

• 사실상 자가진단 메뉴로의 빌드업

3. 질의응답 고도화

• 아코디언 방식 테스트 제공 아닌 챗봇 배치를 통한 구성 변경

4. 디자인 최적화

• 기능 고도화 이후 마지막 단계 배치

• 로고를 비롯 주요 공간의 디자인 작업 진행

5. 양산 작업

• 상기 기능 구현을 토대로 동 작업을 손쉽게 양산 할 수 있도록 코드 최적화

• 주석 작업 토대로 템플릿식 활용 가능하도록 고도화 진행

결과와 배운 점

• 구글 앱스 스크립트만으로도 원페이지 랜딩 구성 위한 모든 작업 가능하다는 점을 다시 확인

• 최소 비용 할당해 '양산' 기대, 구글 워크스페이스 및 구글 사이트 접목 가능성 확인

• 클로드 토큰 소진량이 생각보다 빨라서 당황

• 퀄리티 향상 방향에서는 DAL·E만으로는 이미지 작업 한계 판단

• 4주는 짧다, 내 속도 맞춰서 사전 계획의 순차 완수가 목표

도움 받은 채널

14기 사이드프로젝트

1
2개의 답글

👉 이 게시글도 읽어보세요