# 땡큐지 회계장부 매뉴얼 — 작업 요약

작성일: 2026-08-29
대상: 땡큐지 회계 장부 (www.gplatform.co.kr)
독자 기준: **회계장부를 처음 쓰는 소상공인**
저장 위치: `C:\Users\burus\OneDrive\플랫폼\WebSite\땡큐지 메뉴얼`

---

## 1. 무엇을 했나

Claude in Chrome으로 실제 서비스 화면을 하나하나 눌러가며 확인하고, 그 화면을 캡처해 웹 매뉴얼 7개 장을 만들었습니다. 화면을 보고 옮겨 적은 것이 아니라 **직접 조작하며 동작을 확인한 뒤** 작성했기 때문에, 문서대로 따라 하면 실제로 되는지가 검증되어 있습니다.

작업 중 테스트 장부에 가상 직원(김샘플)을 등록하고 급여 계산 → 마감 → 명세서 → 급여대장까지 실제로 돌려, 그 데이터가 재무제표에 어떻게 반영되는지도 화면으로 확인했습니다.

### 결과물

| 파일 | 내용 | 상태 |
|---|---|---|
| `index.html` | 매뉴얼 표지 겸 목차 | 완료 |
| `01_연결기관.html` | 홈택스·카드사·여신금융협회·배달·위택스 연결 | 완료 |
| `02_장부작성.html` | 화면 읽는 법, 자동 수집, 전표 등록, 거래명 정리 | 일부 |
| `03_급여관리.html` | 설정·직원·급여계산·마감·명세서·급여대장·신고 | 완료 |
| `04_재무제표.html` | 재무제표 3종, 엑셀 내보내기, 자산·거래처, 전기재무상태표 | 완료 |
| `05_세무신고.html` | 부가세·급여(원천세)·소득세 신고, 1년 일정 | 완료 |
| `06_홈화면.html` | 캘린더, 오늘의 경리 요약, 경영 요약, 바로가기 | 완료 |
| `07_고객지원.html` | 문의 순서, 내 저장 공간, 계정설정, 장부 여러 개 쓰기 | 일부 |
| `01_회계장부_매뉴얼_목차.html` | 설계 문서 — 전체 목차와 화면 패턴 분류표 | 완료 |
| `captures/` | 회계장부 캡처 39장 + 가져오기 스크립트 | — |

### 2차 작업 — 3.3 장부와 공통 자료 (2026-08-29)

폴더가 `회계장부/`와 `book33/`으로 나뉘었고, 루트는 두 매뉴얼로 가는 포털이 되었습니다.

| 파일 | 내용 |
|---|---|
| `../index.html` | 포털 — 두 매뉴얼 · 공통 자료 · 캡처 안내 · 발견 사항 |
| `../장부선택가이드.html` | 세 가지 질문으로 장부 고르기, 회계 vs 3.3 비교표 |
| `../용어사전.html` | 6개 묶음 40여 개 용어 풀이 |
| `../FAQ_통합.md` | 두 매뉴얼 FAQ 통합 + 미구현 기능 표 (고객센터·챗봇용) |
| `../book33/` | 3.3 장부 매뉴얼 6장 + 공용 style.css + 캡처 12장 |

**3.3 장부는 회계장부와 완전히 다른 앱입니다.** 아래쪽 탭이 3개(가계부·종합소득세·더보기), 달력 중심 UI, 연결기관 3곳(홈택스·카드사·은행). 그래서 별도 매뉴얼로 만들었습니다.

3.3 캡처는 **규격이 다릅니다.** 앱 iframe을 화면 왼쪽 위(0,0)에 470px 폭으로 고정해 찍었기 때문에, 잘라내는 규칙이 `width:315%` 하나로 단순합니다. `book33/style.css`의 `.shot`을 보세요. 회계장부 캡처(`left:-117.06%`)와 섞으면 어긋납니다.

---

## 2. 작업 방식 (다음 회차에 그대로 이어가려면)

### 화면 캡처 규격

- 브라우저 창: **1500 × 1000**, 스크린샷 결과는 1568 × 778
- 앱은 iframe 안에 있어 폭이 창 크기에 따라 들쭉날쭉합니다. 캡처 전에 아래를 실행해 고정합니다.

```js
const f = document.querySelector('iframe');
f.style.setProperty('width','470px','important');
f.style.setProperty('height','770px','important');
```

- 이러면 앱 영역이 항상 **가로 549~1018, 세로 4~774**에 놓입니다.
- 매뉴얼 HTML은 이 영역만 CSS로 잘라 보여줍니다. 잘라내는 값은 모든 장이 동일합니다.

```css
.shot   { aspect-ratio: 469/778; overflow: hidden; }
.shot img { left: -117.06%; width: 334.33%; height: 100%; }
```

> **주의**: 다른 창 크기로 다시 찍으면 잘리는 위치가 어긋납니다. 새 캡처를 넣기 전에 위 규격을 반드시 맞추세요.

### 개인정보 가리기

이미지 파일을 편집하지 않고, 매뉴얼 HTML에서 그 위치에 회색 박스를 덮는 방식입니다.

```html
<div class="shot">
  <img src="captures/03-10-payslip-list.jpg">
  <div class="mask" style="left:7%;top:28.4%;width:12.8%;height:2.8%"></div>
</div>
```

- 현재 가린 곳: 직원 연락처(3장), 공동인증서 정보(1장)
- **캡처 원본에는 정보가 그대로 남아 있습니다.** 이미지 파일 자체를 외부에 전달하지 마세요.

### 파일명 규칙

```
<장번호>-<순번>-<영문 주제>.jpg
예) 03-06-payroll-detail.jpg
```

한글 파일명을 쓰면 배치 파일이 깨집니다(아래 4번 참고). 어느 파일이 어느 화면인지는 `captures/README.txt`에 한글 설명과 함께 표로 정리해 두었습니다.

### 문서 형식

각 장은 같은 틀을 씁니다. 새 장을 추가할 때 기존 파일을 복사해 쓰면 됩니다.

- 맨 위: 진행 순서 띠 (① → ② → ③)
- 절마다: 목적 한 문장 → 번호 단계 → 캡처 → 캡처 설명
- 버튼·메뉴 이름은 `<b class="btn">`로 감싸 버튼 모양으로 표시
- 절 끝: 주의 박스(빨강) / 알아두기 박스(민트) / 결제·이용권 박스(노랑)
- 장 끝: FAQ + "이 부분은 다음 회차에 채웁니다" 박스

---

## 3. 서비스에서 발견한 것

매뉴얼 작성 중 확인한 내용입니다. **개발팀에 전달할 가치가 있는 항목**을 따로 모았습니다.

### 미구현 / 준비 중

| 위치 | 내용 |
|---|---|
| 더보기 › 전자계약 | "준비중입니다" 안내만 뜸 → 매뉴얼에서 제외 |
| 홈 › 바로가기 › 입출금 관리 | "준비중입니다" 안내만 뜸 |
| 신고&제출 › 급여 신고 | 근로·퇴직·사업 **지급명세서** 준비 중 |
| 신고&제출 › 급여 신고 | **기타소득** 간이지급명세서 미지원 (홈택스에서 직접 제출) |

### 버그로 보이는 것

| 위치 | 내용 |
|---|---|
| 장부작성 › 우하단 아래쪽 버튼 | 사진·파일로 전표 올리기(AI 거래명 분류). 눌러도 화면이 열리지 않고 메뉴만 닫힘. **디버깅 예정으로 확인받음** |

### 사용자가 헷갈릴 만한 것 (매뉴얼에 반영함)

- **급여 마감에 해당 월 이용권 결제가 필요합니다.** 계산까지는 무료라 여기서 처음 막힙니다.
- **"입금명세서 전송"은 임금명세서 발송 화면으로 갑니다.** 메뉴 이름과 실제 기능이 다릅니다.
- **카드사 연결과 여신금융협회 연결은 방향이 반대입니다.** 카드사 = 내가 쓴 비용, 여신금융협회 = 손님이 결제한 매출. 이름만 봐서는 알 수 없습니다.
- **등록 화면에는 하단 탭이 없고 ←로만 나갑니다.** 나가면 입력 내용이 사라집니다.
- **직원 등록의 4대보험 체크는 실제 신고와 연동되지 않습니다.** 급여 계산용입니다.
- **연결만으로는 전표가 들어오지 않습니다.** 장부작성 › 수집 실행을 눌러야 합니다.
- **장부를 잘못 골라 넣은 전표는 다른 장부로 옮길 수 없습니다.**

### 확인된 데이터 흐름 (매뉴얼에 표로 넣음)

급여 300만 원 마감 시:

| 표 | 계정 | 금액 |
|---|---|---|
| 손익계산서 | 판매비와관리비 › 급여 | 3,000,000 |
| 재무상태표 | 유동부채 › 미지급금 | 2,636,110 |
| 재무상태표 | 유동부채 › 예수금 | 363,890 |

---

## 4. 작업 환경 제약

### 셸(리눅스 VM)이 없습니다

이 PC에서 Cowork의 리눅스 환경이 켜지지 않아(`not supported on this device`), 다음이 불가능했습니다.

- 이미지 파일을 자동으로 폴더에 옮기기
- 캡처 검증 스크립트 실행
- 이미지 자체를 편집(마스킹)하기

**해결하려면**: BIOS/UEFI에서 가상화(Intel VT-x / AMD SVM) 활성화 → Windows 기능에서 **가상 머신 플랫폼** 체크 → 재부팅. 켜지면 캡처가 `captures` 폴더에 바로 저장되어 아래 복사 단계가 사라집니다.

### 캡처 이미지 복사가 수동입니다

캡처는 Claude 세션의 outputs 폴더에 저장됩니다. `captures/get-captures.bat`을 더블클릭하면 복사 + 이름 변경이 한 번에 됩니다.

> **한글 파일명 배치 파일은 쓰지 마세요.** 명령 프롬프트는 배치 파일을 시스템 코드페이지(949)로 읽는데 파일은 UTF-8이라 한글이 깨집니다. `chcp 65001`은 파싱 시점보다 늦어 소용없습니다. 이것 때문에 첫 시도가 실패했고, 파일명을 영문으로 바꿔 해결했습니다.

> **세션이 바뀌면 outputs 경로가 달라집니다.** `get-captures.bat` 안의 `SRC` 값을 새 경로로 고쳐야 합니다.

### 하지 않은 동작

되돌릴 수 없거나 사용자 대신 할 수 없는 것들입니다. 해당 화면은 캡처가 비어 있습니다.

- **신고·제출** — 누르는 순간 국세청에 실제 제출
- **명세서 발송** — 직원 휴대폰으로 카카오톡 발송
- **결제** — 이용권 구매, 다운로드
- **자격 정보 입력** — 인증서 비밀번호, 각 기관 ID/PW, 주민등록번호

---

## 5. 남은 작업

### 장별로 비어 있는 곳

**1장 연결기관**
- 인증서 비밀번호 입력 화면, 연결 완료 화면
- 카드사·여신금융협회·배달 앱의 로그인 화면

**2장 장부작성** ← 가장 많이 남음
- 매출 3종(종이계산서·현금매출 미증빙·PG매출), 매입 4종의 화면별 차이
- 수익·비용 상세 목록 화면
- 자산/대출 화면
- 휴지통(삭제 전표) 화면
- 사진·파일 AI 분류 (버그 수정 후)

**3장 급여관리**
- 원천세·지방세 신고 진행 화면
- 지급명세서 제출 3종 화면

**4장 재무제표**
- 엑셀 내보내기 결과 파일
- 전기재무상태표 숫자 입력 화면
- 재무상태표 수기 수정 화면 (결산 완료 후에만 열림)
- 건물·임차보증금·대출·임대보증금 등록 화면

**5장 세무신고**
- 신고하기 이후 진행 화면 (금액 확인 → 제출 → 완료)

**6장 홈 화면**
- 매출·입금 캘린더 상세
- 경리요약·경영요약 탭 전체 화면
- 전자세금계산서 발급 화면
- 자동수집 및 영수증 발행 화면

**7장 고객지원**
- 공지사항·이벤트·자주하는질문·내 저장 공간·계정설정 화면 전부

### 3.3 장부에서 비어 있는 곳

- **1장** 튜토리얼 각 단계 화면, 설정(⚙) 화면
- **2장** 홈택스 연결(3.3 기준), 카드사·은행 로그인, 수기입력 카드 추가, 연결 완료 화면
- **3장** AI+ 사진 인식 화면, 비용 상세 목록, 날짜별 내역, 일괄기록 미리보기
- **4장** 자산 등록 입력, 재무제표(3.3 기준), 수익 상세, 미완료 전표 목록
- **5장** 직접신고 진행 화면, 신고대리신청, 신고 이력 — 실제 제출이 일어나 진행하지 않음
- **6장** 공지사항·이벤트·자주하는질문·통장 내역 확인·계정설정 화면

### 아직 확인하지 못한 장부

급여 · 부가세 · 캐디 장부는 열어보지 못했습니다. `장부선택가이드.html`의 장부 종류 표가 추정으로 채워져 있으니, 확인 후 정확히 채워야 합니다.

### 아직 만들지 않은 산출물

원래 계획에는 있었으나 이번 회차에서 못 만든 것입니다.

- **FAQ 문서** — 각 장의 FAQ를 한 파일로 모아 고객문의 응답·챗봇 학습에 쓰는 용도
- **툴팁 데이터(JSON)** — 앱 안에서 물음표를 눌렀을 때 뜨는 짧은 설명

각 장에 FAQ가 이미 들어 있으므로, 그것을 뽑아 정리하면 됩니다.

### 품질 개선 항목

- **1~3장 캡처 화질** — 4장부터 iframe 폭을 고정해 찍어 글자가 또렷합니다. 1~3장은 그 전에 찍어 상대적으로 흐립니다. 같은 규격으로 다시 찍으면 통일됩니다.
- **손익계산서·재무상태표의 회사명** — 캡처에 실제 상호가 보입니다. 외부 배포용이면 마스킹이 필요합니다.

---

## 6. 다음 회차 시작하는 법

1. `captures/get-captures.bat`의 `SRC` 경로를 이번 세션의 outputs 폴더로 수정
2. 브라우저 창을 1500×1000으로 맞추고, 위 2번의 iframe 고정 스크립트 실행
3. 채울 화면을 캡처 → `<장>-<순번>-<영문주제>.jpg` 이름 부여
4. 해당 장 HTML에 `<div class="shot">` 블록 추가
5. `get-captures.bat`과 `captures/README.txt`에 새 파일 추가
6. `index.html`의 캡처 장수와 진행 상태 갱신

---

## 7. 이번에 확정한 것 (바꾸지 말 것)

- 목차 순서: **연결기관 → 장부작성 → 급여관리 → 재무제표 → 세무신고 → 홈 → 고객지원**
  앞 단계를 건너뛰면 뒤가 막히는 실제 의존 관계를 따른 것입니다.
- 화면 골격 5가지: 목록형(6) · 등록 폼(16) · 조회·내보내기(7) · 연결 설정(5) · 신고 진행(8)
  공통 문서를 먼저 쓰고 화면별로 차이만 적는 구조. UI가 바뀔 때 다시 만드는 비용이 여기서 갈립니다.
- 독자 기준: 처음 쓰는 소상공인. 회계 용어가 나오면 반드시 한 줄로 풀어 씁니다.
- 세무 판단(어떤 비용을 넣을 수 있는지 등)은 매뉴얼에서 다루지 않고 전문가 확인을 안내합니다.