검색결과 리스트
2025/06/17에 해당되는 글 1건
- 2025.06.17 생태도 그리기 웹앱 v1.1 1
글
[楞嚴] 생각 나누기/[情] 사회복지정보화
2025. 6. 17. 18:10
생태도 그리기 웹앱 v1.1
반응형
https://script.google.com/macros/s/AKfycbxaq0DbFskQ4bVNsF5bbqeLiSROL0yszlm86fz4QCtMf7xMrMR8t21joMPDxbdTahE/exec
script.google.com
클릭하시면 바로 실행해 보실 수 있습니다.
소스 코드를 보시려면 아래 링크를 클릭하세요.
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 (1) | 2025.06.12 |
|---|---|
| PDF에 비밀번호 설정하기 (0) | 2025.05.28 |
| 구글 Apps Script로 후원신청서 만들기 (3) | 2024.09.30 |
| Apps Script를 활용해 스프레드 시트로 데이터 전송하기 (0) | 2024.09.23 |
| 폰트 저작권 이슈에 대한 점검 (0) | 2020.08.12 |
RECENT COMMENT