생태도 그리기 웹앱 v2.2

반응형

최초 버전에서는 불가능했던 생태도 저장 문제를 해결했습니다.

그외 자잘한 편의가 추가되었구요~

 

이번엔 claude가 아니라 Google AI Studio를 활용했습니다.

https://aistudio.google.com/ 

주어지는 토큰이 훨씬 많아, 개발 오류를 해결하는데 훨씬 도움이 되었습니다.

 

주요변화라면,

1. 저장이 가능합니다. 따라서 불러오기도 됩니다.

    이 기능이 필요했던 건, Apps Script를 잘 모르시는 분들이 사본만들기 하시는 번거로운 과정을 생략할 수 있기 때문입니다.

    단, 구글 계정에 로그인해 있어야 합니다. 최소한의 장치입니다.

2. 이미 그린 생태도의 관계를 선택한 후 delete 키로 삭제가 가능합니다.

    처음부터 다시 그려야하는 번거로움이 줄었습니다.

3. 관계에 있어 갈등관계를 표현하는 선의 모양이 바뀌었습니다.

    화살표 모양의 처리도 조금 달라졌습니다. 사용하는 코드의 소스가 다릅니다.

4. 만들어진 생태도를 jpg로도 png로도 저장할 수 있습니다.

    jpg 이미지는 배경이 흰색입니다. 하지만 png는 배경이 투명입니다.

    용도에 따라 맞게 다운로드하시면 됩니다.

 

update. 2025. 6. 23.-----------------------------------------------------------------------

갈등관계를 나타내는 선을 물결모양에서 뽀족한 모양으로 변경했습니다.

--------------------------------------------------------------------------------------------------

https://script.google.com/macros/s/AKfycbz3MgR2ggZJoMK0UGnMM8eOogbhixguaUYn44Fy4_t2lf4TW-flzclh797Fw3BUha8/exec

 

 

참고로 처음 사용시, 사용자의 구글 계정 ID를 확인합니다.

권한 허용을 해주셔야만 사용하실 수 있습니다.

 

 

혹시나 따라하실 분을 위해 프롬프트도 제공해드립니다.

https://docs.google.com/document/d/1TMp371bQ7G6ZAPuz6ookG8_S7dO5SafINV19tTRpr2w/edit?usp=sharing

 

생태도 웹앱 만들기 프롬프트

당신은 지금부터 지상 최고의 구글 Apps Sciprt 웹앱 개발자입니다. 이번에 새로운 프로젝트로 구글 스프레드 시트, 구글 Apps Script, html/canvas 또는 SVG 조합으로 "생태도 그리기 웹앱"을 만드려합니다

docs.google.com

 

반응형

생태도 그리기 웹앱 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

 

반응형

기안 시 붙임을 표기하는 방법(1부, 각 1부)

반응형

기안을 할 때 본문에 모두 내용을 담을 수 없을 경우, 우리는 붙임 문서로 처리합니다.

이때 1부, 각 1부, 2부는 각기 어떤 경우에 사용하게 되는 것일까요?

 

붙임 부수를 표기하는 방법

 

붙임 1 ○○○ 1부.
기본적으로 1부의 의미는 1장 또는 여러장의 문서를 묶어서 1세트를 이르는 말입니다.

가장 보편적으로 쓰이는 방식입니다.

예) 붙임 1 소식지 1부.

만일 똑같은 소식지를 100부 발송한다면, 아래와 같이 쓰시면 됩니다. 

예) 붙임 1 소식지 100부.

 

붙임 1 ○○○, ○○○ 각 1부.
각 1부는 첨부한 문서의 명을 병렬로 나열할 때 그것이 각각 1부씩이라는 의미입니다.

예) 붙임 1 이력서, 자기소개서 각 1부

또는 다음과 같이 표기할 수도 있습니다.

예) 붙임 1 이력서 1부.

      붙임 2 자기소개서 1부.

 

-----------

 

이번에는 좀더 깊이 들어가 보겠습니다.

이력서를 각기 다른 A, B, C 3명이 제출한 경우 어떻게 표기해야할까요?

이때는 다음 두 가지의 표기를 사용할 수 있습니다.

예)

붙임 1 이력서 3부.

또는

붙임 1 이력서 A 1부.

붙임 2 이력서 B 1부.

붙임 3 이력서 C 1부.

이 경우 가장 효과적인 표기는 3부로 표기하는 것일 겁니다.

 

만일 이력서, 자기소개서를 A, B, C 3명이 제출한 경우 어떻게 표기해야할까요?

이 때에는 세 가지 형태로 표기가 가능합니다.

 

예)

붙임 1 A 이력서, 자기소개서 각 1부

붙임 2 B 이력서, 자기소개서 각 1부

붙임 3 C 이력서, 자기소개서 각 1부

또는

붙임 1 이력서 3부

붙임 2 자기소개서 3부

또는

붙임 1 이력서, 자기소개서 각 3부

 

이 경우 세 번째 방법이 가장 효율적입니다만, 일반적으로는 두 번째 방법을 사용합니다. 

 

-----------

 

요즘은 PDF로 문서를 하나의 파일로 만들어 첨부하는 경우가 많습니다.

이 경우 첨부된 파일이 여러 문서를 묶어서 하나라면 각 1부를 활용하셔야 할 것입니다.

위의 사례에서 응시자 별로 이력서와 자기소개서를 PDF로 묶어서 첨부한 경우가 그러할 것입니다.

 

붙임 표기 방법, 꼭 한번 확인해두세요.

반응형
[정보] IT정보&활용 2025. 6. 2. 18:35

PDF에 비밀번호 설정하기2

반응형

2025.05.28 - [[楞嚴] 생각 나누기/[情] 사회복지정보화] - PDF에 비밀번호 설정하기

 

PDF에 비밀번호 설정하기

급한 분을 위해 파일을 먼저 올려두었습니다.하지만 아래도 한번 읽어봐주세요. 개인정보보호법 등이 강화되면서 PDF 파일을 보내려할 때에도 비밀번호를 설정해야하는 경우가 있습니다.하지만

welfareact.net

 

앞서 CMD 창에서 직접 입력해야하는 PDF 비밀번호 설정 프로그램을 공유했지만, 아무래도 이런 직접적인 명령에 익숙치 않은 분들도 많을거 같아 추가로 작업해보았습니다.

 

PDF 비밀번호 v2.exe
7.52MB

 

먼저번 것은 파일 하나만으로 가능토록 통합한 것이었다면, 이번엔 PDF 파일을 선택하고, 비밀번호를 입력하는 창이 떠서 보다 직관적으로 작업할 수 있도록 수정했습니다.

다만, 이번엔 파일 하나로 안되어서 압축 자동실행 파일로 만들었습니다.

위 파일을 다운로드 받으신 다음, 실행하면 프로그램 폴더가 만들어집니다.

 

이후 파일 중 bat 파일 [ PDF_비밀번호_v2.bat ]을 더블클릭하시면 됩니다.

PDF 비밀번호 설정 도구

 

아래는 몰라도 되는 이야기입니다.

더보기

위와 같이 만들기 위해 PowerShell GUI 스크립트를 먼저 만들었습니다.

바로 [ EncryptPdf-GUI.ps1 ] 파일입니다.

Add-Type -AssemblyName Systehttp://m.Windows.Forms
Add-Type -AssemblyName System.Drawing

# 폼 생성
$form = New-Object Systehttp://m.Windows.Forms.Form
$form.Text = "PDF 비밀번호 설정 도구 (use QPDF)" 
$form.Size = New-Object Systehttp://m.Drawing.Size(400, 360)
$form.StartPosition = "CenterScreen"

# 파일 선택 라벨
$fileLabel = New-Object Systehttp://m.Windows.Forms.Label
$fileLabel.Text = "PDF 파일: 아직 선택되지 않음"
$fileLabel.Location = New-Object Systehttp://m.Drawing.Point(10, 20)
$fileLabel.Size = New-Object Systehttp://m.Drawing.Size(360, 20)
$forhttp://m.Controls.Add($fileLabel)

# 파일 선택 버튼
$fileButton = New-Object Systehttp://m.Windows.Forms.Button
$fileButton.Text = "PDF 파일 선택"
$fileButton.Location = New-Object Systehttp://m.Drawing.Point(10, 50)
$fileButton.Size = New-Object Systehttp://m.Drawing.Size(120, 30)
$forhttp://m.Controls.Add($fileButton)

# 비밀번호 입력 라벨
$pwdLabel = New-Object Systehttp://m.Windows.Forms.Label
$pwdLabel.Text = "설정할 비밀번호:"
$pwdLabel.Location = New-Object Systehttp://m.Drawing.Point(10, 100)
$pwdLabel.Size = New-Object Systehttp://m.Drawing.Size(200, 20)
$forhttp://m.Controls.Add($pwdLabel)

# 비밀번호 입력 박스
$pwdBox = New-Object Systehttp://m.Windows.Forms.TextBox
$pwdBox.Location = New-Object Systehttp://m.Drawing.Point(10, 125)
$pwdBox.Size = New-Object Systehttp://m.Drawing.Size(360, 25)
$pwdBox.UseSystemPasswordChar = $true
$forhttp://m.Controls.Add($pwdBox)

# 암호화 버튼
$encryptButton = New-Object Systehttp://m.Windows.Forms.Button
$encryptButton.Text = "PDF 암호화 실행"
$encryptButton.Location = New-Object Systehttp://m.Drawing.Point(10, 160)
$encryptButton.Size = New-Object Systehttp://m.Drawing.Size(120, 30)
$forhttp://m.Controls.Add($encryptButton)

# 상태 표시 라벨
$statusLabel = New-Object Systehttp://m.Windows.Forms.Label
$statusLabel.Text = ""
$statusLabel.Location = New-Object Systehttp://m.Drawing.Point(10, 200)
$statusLabel.Size = New-Object Systehttp://m.Drawing.Size(360, 40)
$forhttp://m.Controls.Add($statusLabel)

# 저작권 라벨
$copyrightLabel = New-Object Systehttp://m.Windows.Forms.Label
$copyrightLabel.Text = "This software includes QPDF, licensed under Apache License 2.0.`nSee https://github.com/qpdf/qpdf"
$copyrightLabel.Location = New-Object Systehttp://m.Drawing.Point(10, 250)
$copyrightLabel.Size = New-Object Systehttp://m.Drawing.Size(380, 50)
$copyrightLabel.Font = New-Object Systehttp://m.Drawing.Font("Arial", 8)
$forhttp://m.Controls.Add($copyrightLabel)

# 전역 변수로 파일 경로 보관
$global:selectedPdfPath = $null

# 파일 선택 버튼 이벤트
$fileButton.Add_Click({
    $fileDialog = New-Object Systehttp://m.Windows.Forms.OpenFileDialog
    $fileDialog.Filter = "PDF Files (*.pdf)|*.pdf"
    if ($fileDialog.ShowDialog() -eq "OK") {
        $global:selectedPdfPath = $fileDialog.FileName
        $fileLabel.Text = "PDF 파일: " + [Systehttp://m.IO.Path]::GetFileName($selectedPdfPath)
    }
})

# 암호화 버튼 이벤트
$encryptButton.Add_Click({
    if (-not $selectedPdfPath) {
        [Systehttp://m.Windows.Forms.MessageBox]::Show("먼저 PDF 파일을 선택하세요.", "오류", "OK", "Error")
        return
    }

    $password = $pwdBox.Text
    if (-not $password) {
        [Systehttp://m.Windows.Forms.MessageBox]::Show("비밀번호를 입력하세요.", "오류", "OK", "Error")
        return
    }

    $outputPath = Join-Path -Path ([Systehttp://m.IO.Path]::GetDirectoryName($selectedPdfPath)) -ChildPath ("encrypted_" + [Systehttp://m.IO.Path]::GetFileName($selectedPdfPath))

    try {
        Start-Process -FilePath "qpdf.exe" -ArgumentList "--encrypt `"$password`" `"$password`" 256 -- `"$selectedPdfPath`" `"$outputPath`"" -NoNewWindow -Wait
        $statusLabel.Text = "★ 암호화 완료! 파일: encrypted_" + [Systehttp://m.IO.Path]::GetFileName($selectedPdfPath)
    } catch {
        $statusLabel.Text = "☆ 암호화 실패: $_"
    }
})

# 폼 실행
$form.Topmost = $true
$form.Add_Shown({ $form.Activate() })
[void]$form.ShowDialog()

 

이후 이 파일을 .bat에서 불러오게 했습니다.

@echo off
title PDF 비밀번호 설정 도구 실행기 (QPDF)
echo ========================================
echo  PowerShell GUI를 실행합니다...
echo ========================================
echo.

powershell -ExecutionPolicy Bypass -File "%~dp0EncryptPdf-GUI.ps1"

echo.

 

 

반응형