생태도 그리기 웹앱 v1.1

반응형

생태도 그리기 웹앱

 

 

https://script.google.com/macros/s/AKfycbw2qqyDIpjIaOHN2qBusKLnbh3McbFXQkvcf_ibxkrPYXx8Lag8zswUV6XF1kLfjPs/exec

 

 

https://script.google.com/macros/s/AKfycbxaq0DbFskQ4bVNsF5bbqeLiSROL0yszlm86fz4QCtMf7xMrMR8t21joMPDxbdTahE/exec

 

script.google.com

클릭하시면 바로 실행해 보실 수 있습니다.

 

소스 코드를 보시려면 아래 링크를 클릭하세요.

https://script.google.com/d/1vsM92mjCaiN5L-LEbsx13e7BNtVde7shYpnZ9Jq2UVK9UcvFhy-fBj6E/edit?usp=sharing

 

Google Drive: 로그인

이메일 또는 휴대전화

accounts.google.com

 

가계도와 마찬가지로 Claude.ai를 기본으로 했습니다.

이때 사용된 프롬프트는 다음과 같습니다.

당신은 지금부터 지상 최고의 구글 Apps Sciprt 웹 앱 개발자입니다.
이번에 새로운 프로젝트로 구글 스프레드 시트, 구글 Apps Script, html/canvas 또는 SVC 조합으로 "생태도 그리기 웹앱"을 만드려합니다. 
앱 주요 기능과 사용자 흐름은 다음과 같습니다.
== [앱 주요 기능] 시작 ==
1. 사용자가 웹에서 생태도를 그리는 웹 앱을 만들고 싶습니다.
2. 사용자는 중심인물과 주변인물, 그리고 중심인물과 주변인물의 관계를 웹에서 입력하면, 앱스 스크립트를 통해 생태도로 전환해 보여줍니다.
3. 만들어진 생태도는 이미지로 저장할 수 있습니다.
== [앱 주요 기능] 끝 ==

== [사용자 흐름] 시작 ==
1. 웹에서 생태도를 그릴 중심인물의 데이터를 입력합니다.
2. 중심인물을 중심으로 주변인물 또는 조직의 의 관계를 입력합니다.
- 이름
- 관계: 좋은 관계, 소원한 관계, 갈등 관계
- 방향: 중심인물을 중심으로 화살표가 밖으로 향하는지, 안으로 향하는지, 양방향인지
3. 생태도 자동 그리기: 시트 데이터를 기반으로 canvas에서 자동 배치
4. 클릭 조정: 만들어진 도형은 마우스 드래그로 위치 조정
5. 실행 취소를 통해 이전단계로 돌아가는 기능
6. 이미지 저장: 캔버스를 png로 다운로드
7. 데이터 삭제: 저장된 데이터를 삭제해서 생태도를 초기화(빈 캔버스)
== [사용자 흐름] 끝 ==

== [백엔드 구성] 시작 ===
1. 필드 구조 : 이름, 관계, 방향, 비고
== [백엔드 구성] 끝 ===

== [화면 인터페이스 구성] 시작 ==
화면은 두 개의 영역으로 구분됩니다.
1. 1영역은 생태도를 그리고자 하는 사람의 정보를 입력하는 영역
먼저 중심인물을 입력합니다.
이후 주변인물의 정보를 입력합니다.
이때 중심인물과의 관계를 선택 입력합니다.
관계는 좋은 관계, 소원한 관계, 갈등 관계을 선택할 수 있습니다.

2. 2영역은 입력된 정보가 구현되어 보여지는 영역입니다.
- 중심인물과 주변인물은 원(<circle>)으로 구현합니다. 이때 도형 안의 색깔은 흰색으로 합니다.
- 입력된 중심인물과 주변인물의 관계를 선으로 연결: 좋은 관계는 실선, 소원한 관계는 점선, 갈등 관계는 지그재그 선으로 표현
- 완성된 도형은 마우스로 클릭하고 드래그 해서 수평, 수직 이동이 가능해야합니다. 이때 이미지나 선 모양의 변형은 없어야 합니다.
- 실행 취소를 통해 마지막에 입력한 인물을 지울 수 있어야 합니다.
- 생태도가 구현이 되면, 이를 이미지로 저장(다운로드)할 수 있는 버튼이 있습니다.
== [화면 인터페이스 구성] 끝 ==

== [추가 요청] 시작 ==
- 모든 개발은 구글 Apps Script + HTML/CSS/JS 로 진행합니다.
- Code.gs, index.html, styles.html, script.html 각각의 역할별로 코드를 만들어주세요.
- 만드는 코드의 길이가 지나치게 길어지지 않도록 최적화 해주세요.
- 최신 트렌드에 맞춰서 세련된 디자인으로 꾸며주세요.
== [추가 요청] 끝 ==
반응형

가계도 그리기 웹앱 v1.1

반응형

AI를 활용해서 가계도를 그리는 웹앱을 개발해보았습니다.

이를 위해 구글 스프레드 시트, 구글 Apps Script가 활용되었습니다.

 

실행은 아래 링크를 통해 바로 테스트해보실 수 있습니다.

 

https://script.google.com/macros/s/AKfycbwfQb2KurCoYtD_xJNaVkuQrN9nKoDGE8b-5KBsoSrAmXG2IMWjVT4V6H1M5CnjjLw/exec

 

 

단, 개인사용자를 위해 만들었기 때문에 사본만들기를 통해 개인계정에 등록하고 사용해주시면 감사하겠습니다.

사본은 아래 구글 스프레드 시트에서 사본만들기 하시면 됩니다.

 

https://docs.google.com/spreadsheets/d/1383VpKg63M2MaTRnm5VIP9_AJRWTqX7YBO1Av78sE8A/edit?gid=0#gid=0

 

이후 스프레드 시트 ID를 사용해 Code.gs를 본인의 것으로 수정해주시면 됩니다.

Code.gs
0.01MB
index.html
0.01MB
script.html
0.03MB
styles.html
0.01MB

 

반응형

PDF에 비밀번호 설정하기

반응형

PDF_Encryptor.exe
4.14MB

 

급한 분을 위해 파일을 먼저 올려두었습니다.

하지만 아래도 한번 읽어봐주세요.

 

 

개인정보보호법 등이 강화되면서 PDF 파일을 보내려할 때에도 비밀번호를 설정해야하는 경우가 있습니다.

하지만 유료 프로그램을 사용해야하는 등 쉽지가 않습니다.

특정 웹사이트를 이용하면 비밀번호를 걸어주기도 하지만, 그 경우 서버로 파일을 일단 업로드 해야하기 때문에 해당 파일이 유출되지 않을 것이라는 보장은 없습니다.

 

그래서 찾아보았습니다.

Github에 보면 qpdf라는 프로그램이 있습니다.

https://github.com/qpdf/qpdf

 

GitHub - qpdf/qpdf: qpdf: A content-preserving PDF document transformer

qpdf: A content-preserving PDF document transformer - qpdf/qpdf

github.com

 

다양한 기능을 가진 프로그램이지만, 사용법이 쉬워보이진 않습니다.

그래도 설명해보자면, 파일들을 다운받은 다음 bin 폴더에 있는 qpdf.exe 파일을 cmd 창에서 실행합니다.

qpdf.exe --encrypt %userPwd% %userPwd% 256 -- "%inputFile%" "encrypted_%inputFile%"

 

이걸 bat 파일로 만들면 조금더 쉽긴 합니다.

 

PDF_Encryptor.bat

@echo off
title PDF 암호화 도구 (QPDF)
echo ==============================
echo PDF 파일에 비밀번호를 설정합니다.
echo set a password on your PDF
echo ==============================
echo.

set /p inputFile="비밀번호를 설정할 PDF 파일명을 입력하세요 (예: sample.pdf): "
set /p userPwd="설정할 비밀번호를 입력하세요: "

:: 암호화 실행 - 소유자 비밀번호는 사용자 비밀번호와 동일하게 설정
qpdf.exe --encrypt %userPwd% %userPwd% 256 -- "%inputFile%" "encrypted_%inputFile%"

echo.
echo ■ 암호화 완료! 결과 파일: encrypted_%inputFile%
echo -----------------------------------------------------------------------------------------
echo This software includes QPDF, which is licensed under the Apache License 2.0.
echo See https://github.com/qpdf/qpdf for more information.
pause

 

조금더 검색해 봅니다.

그랬더니 bat 파일을 기반으로 exe, dll 등을 묶어서 하나의 실행파일로 만들어주는 프로그램을 Github에서 찾을 수 있습니다.

https://github.com/l-urk/Bat-To-Exe-Converter-64-Bit/releases

 

Releases · l-urk/Bat-To-Exe-Converter-64-Bit

Bat To Exe Converter (64 Bit) - Developer Fatih Kodak - l-urk/Bat-To-Exe-Converter-64-Bit

github.com

 

이제 이걸 이용해서 하나의 파일로 묶어봅니다.

 

PDF_Encryptor.exe
4.14MB
README.txt
0.00MB

 

예의상 README.txt도 만들어 봅니다.

 

이제 PDF_Encryptor.exe 파일 하나만 있으면 PDF에 비밀번호를 설정할 수 있습니다.

단, 이 실행파일과 PDF 파일이 같은 폴더에 있어야 합니다.

그리고 PDF 파일 명은 직접 입력해주셔야 합니다.

 

기왕 만들었으니 배포해봅니다. 저작권에도 문제는 없다고 합니다.

그럼...

반응형

동아대학교 노인복지론 특강

반응형

일시: 2025. 5. 14. 12:00-13:30

장소: 동아대학교 부민캠퍼스 종합강의동  B04(C) B113

주제: 노인복지현장의 변화와 그 현장을 이끌어갈 인재상

제목: 고찌 글라, 고찌 가(같이 가라, 같이 가)

 

노인복지현장의 변화와 그 현장을 이끌어갈 인재상(강의 교안)

 

고찌 글라, 고찌 가.pdf
1.87MB
고찌 글라, 고찌 가.pptx
12.69MB

 

* 부속 파일

첨부 자료.zip
0.12MB

반응형

구글 Apps Script로 후원신청서 만들기

반응형

구글 Apps Script로 입력폼을 만들고, 입력된 데이터들이 구글 스프레드 시트에 저장되도록 하는 스크립트를 구현해 보았습니다.

 

Apps Script는 두 개의 파일로 작동합니다.

Code.gs라는 이름의 스크립트 파일과 웹화면을 통해 보여질 index.html이 그것입니다.

 

※ 이 스크립트는 기본적으로 구글 스프레드 시트의 Apps Script를 다룰 줄 아는 사람을 대상으로 하기 때문에 스크립트 적용 이전단계에 대해서는 설명하지 않습니다.

 

Code.gs

 
// 스프레드시트 ID와 시트 이름, 서명이미지 저장 폴더 ID를 변수로 선언
var SPREADSHEET_ID = ' YOUR_SPREADSHEET_ID';
var SHEET_NAME = '시트1';
var FOLDER_ID = ' YOUR_FOLDER_ID';

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function sendUserData(name, gender, ssn_a, ssn_b, cphone_n, phone_n, address, e_mail, s_term, s_type, s_money, s_how, s_item, s_item_q, s_unit, s_sector, s_why, s_path, receipt1, receipt2, a_date, signature) {
  var sheet = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName(SHEET_NAME);
  var imageUrl = saveSignatureToDrive(signature, name);
  sheet.appendRow([
    name, gender, ssn_a, ssn_b,
    "'" + cphone_n, // 앞에 작은 따옴표 추가
    "'" + phone_n,  // 앞에 작은 따옴표 추가
    address, e_mail, s_term, s_type, s_money, s_how,
    s_item, s_item_q, s_unit, s_sector, s_why, s_path,
    receipt1, receipt2, a_date, '=IMAGE("' + imageUrl + '")'
  ]);
}

function saveSignatureToDrive(signature, name) {
  var folder = DriveApp.getFolderById(FOLDER_ID);
  var blob = Utilities.newBlob(Utilities.base64Decode(signature.split(',')[1]), 'image/png', name + '_signature.png');
  var file = folder.createFile(blob);
  var fileId = file.getId();
}

 

index.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <title>부민노인복지관 후원신청서</title>
  <style>
    #sig {
      background-color: #e0e0e0;
      border: 1px solid black;
      width: 500px;
      height: 300px;
    }

    #s_item_q, #ssn_a {
      width: 6em;
    }

    #ssn_b {
      width: 7em;
    }

    #savingMessage {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      border: 1px solid black;
      padding: 20px;
      z-index: 1000;
    }

  </style>
</head>
<body>
  <p>부민노인복지관 후원신청서</p>
  <form id="donationForm">
    <label>이름</label>
    <input type="text" id="name" name="name" placeholder="이름" required><br>

    <label>성별</label>
    <input type="radio" name="gender" value="남">남자
    <input type="radio" name="gender" value="여">여자<br>

    <label>주민등록번호</label>
    <input type="text" id="ssn_a" name="ssn_a" size="6" maxlength="6" required>-
    <input type="password" id="ssn_b" name="ssn_b" size="7" maxlength="7" required><br>

    <label>휴대전화</label>
    <input type="text" id="cphone_n" name="cphone_n" size="11" maxlength="11"> ※ 숫자만 입력<br>

    <label>일반전화</label>
    <input type="text" id="phone_n" name="phone_n" size="11" maxlength="11"> ※ 숫자만 입력<br>

    <label>주소</label>
    <input type="text" id="address" name="address" size="30"><br>

    <label>이메일</label>
    <input type="text" id="e_mail" name="e_mail" size="30"><br>

    <label>후원방식</label>
    <input type="radio" name="s_term" value="정기">정기
    <input type="radio" name="s_term" value="비정기">비정기<br>

    <label>후원구분</label>
    <input type="radio" name="s_type" value="지정">지정
    <input type="radio" name="s_type" value="비지정">비지정<br>

    <label>후원금</label>
    <input type="text" id="s_money" name="s_money"><br>

    <label>후원방법</label>
    <input type="radio" name="s_how" value="자동이체">자동이체
    <input type="radio" name="s_how" value="현금납부">현금납부
    <input type="radio" name="s_how" value="CMS">CMS 이체
    <input type="radio" name="s_how" value="기타">기타<br>

    <label>후원품</label>
    (품명) <input type="text" id="s_item" name="s_item"> /
    (수량) <input type="number" id="s_item_q" name="s_item_q" size="4"> /
    (단위) <select id="s_unit" name="s_unit">
            <option value="">---</option>
            <option value="개"></option>
            <option value="세트">세트</option>
            <option value="Box">Box</option>  
            <option value="건"></option>  
            <option value="Kg">Kg</option>  
            <option value="명"></option>  
            <option value="포"></option>  
            <option value="g">g(그램)</option>  
            <option value="리터">리터</option>  
            <option value="대"></option>  
            <option value="장"></option>  
            <option value="통"></option>  
            <option value="판"></option>  
            <option value="병"></option>  
            <option value="마리">마리</option>  
            <option value="봉지">봉지</option>  
            <option value="팩"></option>  
            <option value="묶음">묶음</option>  
            <option value="그루">그루</option>  
            <option value="송이">송이</option>  
            <option value="포기">포기</option>  
            <option value="자루">자루</option>  
            <option value="인분">인분</option>  
            <option value="짝"></option>  
            <option value="포대">포대</option>  
            <option value="기타">기타</option>  
    </select><br>

    <label>후원분야</label>
    <select id="s_sector" name="s_sector">
      <option value="">---------</option>
      <option value="밑반찬지원">밑반찬지원</option>
      <option value="저소득노인 무료급식사업">저소득노인 무료급식사업</option>
      <option value="위기 및 취약노인 사업">위기 및 취약노인 사업</option>
      <option value="지역복지 연계사업">지역복지 연계사업</option>
      <option value="명절 정나눔 행사">명절 정나눔 행사</option>
      <option value="기타">기타</option>
    </select><br>

    <label>참여동기</label>
    <select id="s_why" name="s_why">
      <option value="">---------</option>
      <option value="경제적 여유가 있어서">경제적 여유가 있어서</option>
      <option value="불우한 이웃을 돕기위해">불우한 이웃을 돕기위해</option>
      <option value="지역사회복지를 위해">지역사회복지를 위해</option>
      <option value="종교적 신념으로">종교적 신념으로</option>
      <option value="기타">기타</option>
    </select><br>

    <label>참여경로</label>
    <select id="s_path" name="s_path">
      <option value="">---------</option>
      <option value="기존 후원자/자원봉사자 소개를 통해">기존 후원자/자원봉사자 소개를 통해</option>
      <option value="복지관 소식지나 안내물을 통해">복지관 소식지나 안내물을 통해</option>
      <option value="언론매체를 통해">언론매체를 통해(TV, 라디오, 신문 등)</option>
      <option value="특정 행사 및 기념일 축하">특정 행사 및 기념일 축하</option>
      <option value="기타">기타</option>
    </select><br>

    <label>후원금영수증 발급</label><br>
      <input type="checkbox" name="receipt1" value="후원금영수증 필요">후원금 영수증 필요<br>
      <input type="checkbox" name="receipt2" value="국세청 연말정산 간소화 후원내역 제공 동의">국세청 연말정산 간소화 후원내역 제공 동의 <br>

    <label>신청일자</label>
    <input type="date" id="a_date" name="a_date"><br>

    <label>서명</label><br>
    <canvas id="sig"></canvas><br>
    <button type="button" id="clearSig">서명 지우기</button><br><br>

    <button type="button" onclick="submitData()">제출</button>
  </form>

  <div id="savingMessage">저장 중입니다...</div>

  <script>
    var signaturePad;

    function setupSignatureBox() {
      var canvas = document.getElementById("sig");
      canvas.width = 500;  // 명시적으로 크기 설정
      canvas.height = 300; // 명시적으로 크기 설정
      signaturePad = new SignaturePad(canvas);
    }

    function clearSignature() {
      signaturePad.clear();
    }

    function submitData() {
      const form = document.getElementById('donationForm');
      const formData = new FormData(form);

      // 필수 입력 필드 확인
      if (!formData.get('name') || !formData.get('ssn_a') || !formData.get('ssn_b') || !formData.get('cphone_n') || signaturePad.isEmpty()) {
        alert('성명, 주민등록번호, 서명은 필수 입력 항목입니다.');
        return;
      }

      const data = {
        name: formData.get('name'),
        gender: formData.get('gender'),
        ssn_a: formData.get('ssn_a'),
        ssn_b: formData.get('ssn_b'),
        cphone_n: formData.get('cphone_n'),
        phone_n: formData.get('phone_n'),
        address: formData.get('address'),
        e_mail: formData.get('e_mail'),
        s_term: formData.get('s_term'),
        s_type: formData.get('s_type'),
        s_money: formData.get('s_money'),
        s_how: formData.get('s_how'),
        s_item: formData.get('s_item'),
        s_item_q: formData.get('s_item_q'),
        s_unit: formData.get('s_unit'),
        s_sector: formData.get('s_sector'),
        s_why: formData.get('s_why'),
        s_path: formData.get('s_path'),
        receipt1: formData.get('receipt1') ? '필요' : '불필요',
        receipt2: formData.get('receipt2') ? '동의' : '미동의',
        a_date: formData.get('a_date'),
        signature: signaturePad.toDataURL()
      };

      document.getElementById('savingMessage').style.display = 'block'; // 저장 중 메시지 표시

      google.script.run.withSuccessHandler(() => {
        document.getElementById('savingMessage').style.display = 'none'; // 저장 중 메시지 숨기기
        alert('데이터가 성공적으로 저장되었습니다.');
      }).withFailureHandler(error => {
        document.getElementById('savingMessage').style.display = 'none'; // 저장 중 메시지 숨기기
        console.error('Error:', error);
        alert('데이터 저장 중 오류가 발생했습니다. 다시 입력해주세요.');
      }).sendUserData(
        data.name, data.gender, data.ssn_a, data.ssn_b, data.cphone_n, data.phone_n,
        data.address, data.e_mail, data.s_term, data.s_type, data.s_money, data.s_how,
        data.s_item, data.s_item_q, data.s_unit, data.s_sector, data.s_why, data.s_path,
        data.receipt1, data.receipt2, data.a_date, data.signature
      );
    }

    document.getElementById("clearSig").addEventListener("click", clearSignature);
    document.addEventListener("DOMContentLoaded", setupSignatureBox);
  </script>
</body>
</html>

 

입력 폼은 아래 링크와 같이 보여지게 됩니다.

https://script.google.com/a/macros/bmsenior.org/s/AKfycbxOwy1AJqVZypRUhlJtNl3xzWDSm4mUWhKxtBwI0_FrT66QLX_6ruxFn0h0WR4JUYrA3w/exec

 

https://script.google.com/a/macros/bmsenior.org/s/AKfycbxOwy1AJqVZypRUhlJtNl3xzWDSm4mUWhKxtBwI0_FrT66QLX_6ruxFn0h0WR4JUYrA3w/exec

 

script.google.com

 

반응형