최종 업데이트: 2026-06-18 ← 홈으로

1. 개요

PARAPIA 홈페이지는 프레임워크 없는 순수 정적 사이트(HTML/CSS/JS)입니다. 서버 로직이 없어 빠르고, 유지보수가 단순합니다.

기술 스택: HTML5, 순수 CSS(다크 테마), Vanilla JavaScript, Pretendard 폰트, EmailJS(문의 메일), Google Apps Script(시트 연동), DiceBear(아바타).

2. 전체 아키텍처

 [방문자 브라우저]
        │  https://papi.kr 요청
        ▼
 [반값도메인 DNS]   papi.kr → GitHub Pages IP / www → github.io
        │
        ▼
 [GitHub Pages]  ← 저장소 YudaeSong/papi-kr (main 브랜치)
        │  정적 파일 전송 (index.html, css, js, assets)
        ▼
 [브라우저에서 JS 실행]
        │   1) language.js 기본 콘텐츠로 즉시 렌더
        │   2) (새로고침 시) 구글시트 데이터 fetch
        ▼
 [Apps Script 웹앱]  doGet() → 시트를 JSON으로 변환
        │
        ▼
 [Google Sheet]  ← 운영자가 내용 편집하는 곳

 ─ 부가 ─
 [EmailJS]   연락처 폼 → 이메일 발송
 [GitHub]    코드 수정 → push → Pages 자동 재배포(1~2분)
핵심 한 줄: 코드(GitHub)는 "껍데기와 기본값", 구글 시트는 "실시간 내용"입니다. 글자만 바꿀 땐 시트를, 구조·디자인을 바꿀 땐 코드를 수정합니다.

3. 파일 구조

경로역할
index.html메인 페이지. 모든 섹션 + 인라인 스크립트(시트 로드, 설정버튼, FAQ)
legal.html개인정보 보호정책 + 서비스 약관 (탭 전환)
manual.html이 운영자 매뉴얼
css/styles.css전체 디자인. 라이트 기본 + body.theme-dark 다크 오버라이드
js/language.js콘텐츠 기본값(한/영) + 다국어 엔진. 가장 자주 보는 파일
js/google-sheets-api.jsApps Script 웹앱 URL, 시트 편집 URL, fetch 로직
js/main.js모바일 메뉴, 스크롤 애니메이션, 연락처 폼(EmailJS)
js/content-data.js / content-manager.js구버전 보조 스크립트(현재 핵심 동작과 무관, 유지만)
assets/logos/logo.png(영문명, 실제 사용), 원본(.ai/.psd/.pdf)
assets/team/avatar1~4.png 팀 아바타
CNAMEpapi.kr (GitHub Pages 커스텀 도메인 지정)
.nojekyllGitHub Pages의 Jekyll 처리 비활성(파일 그대로 서빙)
server.js / package.json로컬 미리보기용. 배포(Pages)에는 사용되지 않음

4. 호스팅 & 도메인

GitHub

도메인 DNS (반값도메인)

타입호스트값
Apapi.kr185.199.108.153
CNAMEwwwyudaesong.github.io

※ 반값도메인은 같은 이름 A레코드 중복이 안 되어 IP 1개만 등록(정상 동작). GitHub 공식 IP는 108/109/110/111.153 네 개이며 여러 개 등록 가능한 DNS라면 4개 모두 권장.

HTTPS: DNS 반영 후 Settings → Pages → Enforce HTTPS 체크 시 무료 SSL 자동 적용(자물쇠).

5. 콘텐츠 관리 (핵심)

모든 텍스트는 HTML에 data-i18n="키" 형태로만 들어있고, 실제 글자는 두 곳에서 채워집니다.

  1. 기본값 — js/language.js 의 translations.ko / translations.en
  2. 실시간 값(선택) — 구글 시트 → Apps Script → 페이지 로드 시 덮어씀

① 시트로 수정 (권장 · 코드 안 건드림)

  1. 구글 시트에서 해당 셀의 한국어/영어 값을 수정 → 자동 저장
  2. papi.kr에서 F5(새로고침) → 반영
자동 주기 갱신은 꺼져 있습니다. 새로고침할 때만 시트 내용을 가져옵니다.

② 코드로 수정 (기본값 자체 변경)

  1. js/language.js 에서 해당 키의 ko/en 문자열 수정
  2. git commit → push → 1~2분 뒤 자동 반영 (아래 12장)

data-i18n 동작

<h2 data-i18n="services_title"></h2>   <!-- 빈 껍데기 -->
// language.js: services_title: "우리의 서비스"
// → 페이지 로드 시 applyTranslations()가 채움

입력칸 안내문은 data-i18n-placeholder="키" 를 사용합니다.

6. 구글 시트 & 설정 버튼

시트 구조

시트는 섹션별 탭으로 구성되고, 각 탭은 구분 / 항목 / 한국어 / 영어 4열입니다.

MenuHomeServices PortfolioTeamTestimonials ContactFooterBrands WhyChooseUsFAQ

각 행은 순서대로 번역 키에 매핑됩니다(매핑표는 Apps Script 코드 안 MAP 객체). 행 순서를 바꾸면 매핑이 어긋나니 주의.

Apps Script 웹앱 (시트 → JSON)

설정(⚙️) 버튼 — 시트 빠른 열기

암호는 소스에 평문이 아니라 SHA-256 해시로만 저장됩니다. 단, 클라이언트 측 잠금이라 강력한 보안은 아닙니다(14장 참고). 암호 변경은 새 해시를 계산해 index.html 의 ADMIN_HASH 값을 교체.

7. 다국어

8. 디자인 / 테마

9. 팀 아바타 / 로고

10. 연락처 폼 (EmailJS)

12. 수정 & 배포 절차

코드(디자인·구조·기본값)를 바꾸면 아래로 배포합니다. 시트 글자만 바꿀 땐 불필요(5장).

cd d:/Projects/papi.kr
git add -A
git commit -m "수정 내용 설명"
git push            # → GitHub Pages가 1~2분 뒤 자동 재배포

13. 문제 해결

증상점검
시트를 바꿨는데 반영 안 됨① Ctrl+Shift+R 강력 새로고침 ② Apps Script 웹앱이 "모든 사용자" 권한으로 배포됐는지 ③ 새 탭/행 추가 시 Apps Script 재배포 했는지
화면 일부가 비어 보임해당 키가 시트에서 빈 값이거나 기본값 누락. js/language.js 에 기본값 있는지 확인
papi.kr 접속 안 됨DNS 반영 대기(최대 수시간) / A·CNAME 레코드 값 확인 / Settings→Pages 도메인 초록체크
자물쇠(HTTPS) 없음Settings→Pages의 Enforce HTTPS 체크(인증서 발급 후 활성화)
로고/이미지 깨짐파일 경로·파일명(영문) 확인, 대소문자 일치
콘솔(F12)에 빨간 오류메시지 그대로 확인. 시트 연동 실패 시에도 사이트는 기본값으로 계속 동작

14. 보안 참고

문의/추가 변경이 필요하면 이 매뉴얼의 해당 장(예: "5. 콘텐츠 관리")을 기준으로 요청하시면 됩니다.