ITFactory365
  • 도구
  • 컬렉션
  • 크리에이터
  • 솔루션 제안
  • 설문조사

© 2026 ITFactory365

ITFactory365

About ITFactory365

잇(IT)팩토리365란?

기술로 사람과 해결책을 잇습니다.

잇(IT) 이용자

문제를 해결하고 싶은 사람들

필요한 도구와 컬렉션을 둘러보고 실제 생활과 업무에 적용합니다.

크레딧 구매를 통해 좋은 도구를 만든 크리에이터의 활동을 지원합니다.

이용자 소개

잇(IT) 크리에이터

해결책을 만드는 사람들

직접 경험한 문제를 해결하기 위해 도구를 만드는 사람들입니다.

도구 공유, 크리에이터 패스, 정산 기준을 안내받고 활동합니다.

크리에이터 소개

잇(IT) 팩토리

사람과 해결책을 잇는 곳

좋은 도구가 필요한 사람에게 전달될 수 있도록 연결합니다.

ITFactory365는 실용적인 도구가 모이는 도구 마켓입니다.

잇팩토리365 소개
ITFactory365
소개우리의 약속크레딧크리에이터 패스성장 시스템FAQ환불 정책이용약관개인정보처리방침

© 2026 ITFactory365. All rights reserved.

컬렉션공개추천

나만의 명함관리 프로그램 소스코드

나만의 명함관리 프로그램 소스코드 입니다. 수정하여 최적화 후 사용하세요.

후기 대기중
도구1
파일0
링크0
획득0

상세 설명

Google Card Manager — 개발자 가이드

일반 사용자용 안내는 README.md, 백엔드 초기 설정은 GAS_SETUP_GUIDE.md를 참고하세요.

이 문서는 소스 수정·빌드·배포 산출물 생성을 위한 개발자용 안내입니다.
.gitignore 설정상 이 파일은 GitHub에 올라가지 않으며 로컬 개발 환경에서만 유지됩니다.

아키텍처

[ frontend (HTML/CSS/JS) ]
         │
         │  fetch POST → Apps Script Web App URL
         ▼
[ backend/Code.gs ]
         ├── Google Spreadsheet  (명함 DB)
         ├── Google Drive        (명함 이미지)
         └── Cloud Vision API    (OCR)
  • 프론트엔드: 정적 SPA. 빌드 시 단일 HTML로 번들됩니다.
  • 백엔드: Google Apps Script. 별도 서버 없음.
  • Android: Capacitor WebView에 dist/index.html을 탑재한 APK.

폴더 구조

google-card-manager/
├── README.md                 # 사용자용 (GitHub 공개)
├── GAS_SETUP_GUIDE.md        # GAS 설정 가이드 (GitHub 공개)
├── DEV_README.md             # 이 문서 (로컬 전용)
├── package.json
├── capacitor.config.json
├── scripts/
│   ├── build-single-html.js  # 단일 HTML 번들
│   └── build-apk.ps1         # APK 빌드 (JDK 21 자동 탐지)
├── dist/                     # 배포 산출물 (GitHub 공개)
│   ├── index.html
│   └── card-manager.apk
├── frontend/                 # 프론트엔드 소스 (로컬)
│   ├── index.html
│   ├── style.css
│   ├── app.js
│   └── 에이투지체-4Regular.ttf
├── backend/                  # GAS 소스 (로컬)
│   └── Code.gs
└── android/                  # Capacitor Android 프로젝트 (로컬)

사전 요구사항

작업필요 환경
HTML 빌드Node.js 18+
APK 빌드Node.js + JDK 21 + Android SDK
로컬 프론트 테스트브라우저, GAS 웹 앱 URL
백엔드 수정·배포Google 계정, Apps Script

APK 빌드 환경 (Windows)

winget install Microsoft.OpenJDK.21
# Android SDK: cmdline-tools 설치 후 platform-tools, platforms;android-35, build-tools;35.0.0

환경 변수 (예시):

$env:JAVA_HOME = "C:\Program Files\Microsoft\jdk-21.0.11.10-hotspot"
$env:ANDROID_HOME = "$env:LOCALAPPDATA\Android\Sdk"

android/local.properties (최초 1회):

sdk.dir=C:/Users/<사용자>/AppData/Local/Android/Sdk

최초 설정

npm install

Capacitor Android 프로젝트가 없다면 (최초 1회):

npx cap add android

이미 android/ 폴더가 있으면 생략합니다.

개발 워크플로우

1) 프론트엔드 수정

편집 대상:

  • frontend/index.html — UI 마크업
  • frontend/style.css — 스타일, @font-face
  • frontend/app.js — API 연동, OCR UI, 검색 등

로컬에서 빠르게 확인하려면 frontend/ 세 파일을 그대로 브라우저로 열어도 됩니다.
(단, Lucide CDN·폰트 파일 경로 때문에 배포와 동일한 환경을 보려면 dist/index.html 빌드 후 확인하는 것이 정확합니다.)

2) 백엔드 수정

backend/Code.gs 내용을 스프레드시트 Apps Script 편집기에 붙여넣고 새 배포합니다.
프론트엔드는 GAS 웹 앱 URL만 알면 되므로, 백엔드만 바뀌는 경우 HTML/APK 재빌드는 필요 없을 수 있습니다.

3) 배포 산출물 생성

단일 HTML

npm run build

결과: dist/index.html (CSS·폰트·Lucide·app.js 인라인, 약 1.3MB)

Android APK

npm run android:debug

내부 동작: npm run build → cap sync android → Gradle assembleDebug → dist/card-manager.apk 복사

산출물경로
HTMLdist/index.html
APK (복사본)dist/card-manager.apk
APK (Gradle 원본)android/app/build/outputs/apk/debug/app-debug.apk

4) GitHub에 배포 파일 반영

.gitignore는 dist/, README.md, GAS_SETUP_GUIDE.md만 추적합니다.

git add README.md GAS_SETUP_GUIDE.md dist/
git commit -m "배포 산출물 갱신"
git push origin main

npm 스크립트

명령설명
npm run buildscripts/build-single-html.js 실행 → dist/index.html
npm run cap:syncHTML 빌드 + Capacitor Android 동기화
npm run cap:openAndroid Studio에서 android/ 열기
npm run android:debugHTML 동기화 후 debug APK 빌드

빌드 상세

단일 HTML 번들 (build-single-html.js)

  1. frontend/style.css 읽기 → 에이투지체-4Regular.ttf를 Base64 data: URI로 인라인
  2. frontend/index.html body 추출 (외부 <link>, <script src> 제거)
  3. node_modules/lucide/dist/umd/lucide.min.js 인라인
  4. frontend/app.js 인라인
  5. dist/index.html 출력

Capacitor

  • webDir: dist (capacitor.config.json)
  • appId: com.cardmanager.app
  • Android 권한: INTERNET, CAMERA, READ_MEDIA_IMAGES 등 (android/app/src/main/AndroidManifest.xml)

APK 빌드 시 주의

  • Capacitor 7 / Android Gradle은 JDK 21 필요 (JDK 17이면 invalid source release: 21 오류)
  • scripts/build-apk.ps1이 Microsoft OpenJDK 21 경로를 자동 탐지합니다.

트러블슈팅

증상확인 사항
JAVA_HOME is not setJDK 21 설치 및 JAVA_HOME 설정
invalid source release: 21JDK 17 대신 JDK 21 사용
SDK location not foundandroid/local.properties에 sdk.dir 설정
HTML에서 API 통신 실패GAS 웹 앱 URL, 배포 권한(모든 사용자), CORS
APK에서 카메라 안 됨앱 권한(카메라·갤러리) 허용
README 한글 깨짐 (git)rebase 시 PowerShell Set-Content로 UTF-8 변환 금지. git checkout <commit> -- README.md 사용

관련 문서

  • README.md — 사용자용 소개·다운로드 안내
  • GAS_SETUP_GUIDE.md — 스프레드시트·Vision API·GAS 배포

획득 후 열리는 자료

전체 실행 순서와 파일은 컬렉션 획득 후 확인할 수 있습니다.

실행 순서

도구 1개를 어떤 순서로 쓰는지 안내합니다.

AI 지침 파일

프롬프트·템플릿 파일 0개가 포함될 수 있습니다.

참고 링크

참고 링크 0개를 함께 정리합니다.

실행 체크리스트

확인 항목 0개로 누락을 줄입니다.

후기·Q&A

6크레딧

획득 후 실행 순서와 포함 자료를 계속 열람할 수 있습니다.

로그인 후 획득하기
컬렉션은 도구, 지침 파일, 참고 링크, 체크리스트를 한 번에 묶은 실행 패키지입니다.
컬렉션 둘러보기

기본 정보

등록일
2026. 6. 30.
업데이트
2026. 6. 30.
필요 크레딧
6 크레딧
포함 도구
1개
포함 파일
0개
참고 링크
0개
체크리스트
0개

이용 상태

검수를 통과한 공개 컬렉션입니다.

획득 후 실행 순서, 지침 파일, 링크, 체크리스트를 확인할 수 있습니다.

제이케이

@itsjk365

솔루션 제작자