자동화를 향한 딸깍 한 번: 임대료 정산 스트레스를 줄이기 위한 여정 (~ing)

소개

매달 임대료와 관리비를 확인하고 정산하는 작업은 생각보다 많은 시간과 정신적 에너지를 소모합니다. 누가 냈는지, 안 냈는지, 언제 냈는지를 확인하다 보면 “이걸 자동화할 수는 없을까?”라는 생각이 자연스럽게 들게 되죠.

마침 타이칸 님의 이벤트 설계 강의를 통해 ‘트리거와 액션’으로 업무를 분해하는 사고방식을 접했고, 이를 실제 자동화에 적용해보기로 마음먹었습니다.

진행 방법

1. 이벤트를 트리거와 액션으로 분해하기

자동화의 첫걸음으로, '입금 확인'이라는 업무를 트리거-액션 형태로 나눠 보기로 했습니다.

트리거(Trigger): 특정 날짜가 되면 입금 내역을 확인한다
액션(Action): 입금 내역을 납부 대상과 비교하고, 미납자에게 알림을 보낸다

이런 분해를 통해 n8n과 같은 워크플로우 도구에 맞게 자동화 설계를 시작할 수 있었어요.

2. n8n + Claude를 통한 노드 설계

Claude에게 전체 자동화 흐름을 설명하고, n8n에서 사용할 노드 구조를 어떻게 짜면 좋을지 물어봤습니다.

Claude는 단계별로 노드를 어떻게 배치할지, 필요한 조건문과 HTTP 요청 노드 등에 대해 설명해줬습니다.

이 결과를 바탕으로 n8n 내에서 테스트 삼아 노드를 직접 구성해보며 구조를 점검할 수 있었습니다.

3. 입금 확인 방식 2가지 설계

임대료 입금 확인 자동화를 위해 두 가지 접근법을 고민했습니다:

✔️ 방법 1: 수기 비교 방식

은행에 직접 로그인
입금 내역 엑셀로 다운로드
납부 대상 리스트와 수기 비교

이 방식은 나름의 경험을 통해 가능할 것이라는 확신이 있었습니다. 하지만 사람이 계속 해야 한다는 단점이 있었죠.

🚀 방법 2: NH 오픈 플랫폼 API 활용

NH 오픈 API를 이용해 실시간으로 입금 내역 조회
자동으로 납부 대상과 비교
조건에 따라 알림 또는 보고서 생성

1번 방식 대신에, 2번 방식으로 도전을 해보았습니다.

NH오픈플랫폼(https://nhfintech.nonghyup.com/)이 있다는 것을 확인했습니다.

4. 웹앱 PRD 작성과 젠스파크 시도

2번 방식의 자동화를 위해 더 나아가 웹앱으로 구현해보기로 결심했습니다.

Claude에게 입금 비교 자동화를 위한 웹앱 PRD (Product Requirement Document) 작성을 요청
PRD에는 사용자의 인터랙션, API 호출 방식, 화면 구성 등이 포함됨
NH 오픈 API 문서와 실제 서비스 웹페이지 링크도 함께 제공하여 더 정확한 설계를 유도

# 농협은행 API 계좌 잔액 조회 웹앱 개발

## 프로젝트 개요
농협은행(NH Bank) Open API를 활용하여 실시간 계좌 잔액을 조회할 수 있는 웹 애플리케이션을 개발해주세요.

## 기술 요구사항

### API 정보
- **Base URL**: https://developers.nonghyup.com
- **API 문서**: https://developers.nonghyup.com/guide/GU_1000
- **인증 방식**: OAuth 2.0 (Access Token 기반)
- **Content-Type**: application/json

### 필수 구현 기능

#### 1. 회원 정보 관리
- 사용자 등록 및 로그인 (데모용 임시 계정 생성)
- API 인증을 위한 Access Token 관리

#### 2. 키 관리 기능
- API Key 등록 및 관리
- 보안을 위한 키 암호화 저장

#### 3. 계좌 잔액 조회
- **API 엔드포인트**: `/v1/inquiry/balance`
- **HTTP Method**: POST
- **필수 파라미터**:
  - `accessToken`: 인증 토큰
  - `accountNo`: 계좌번호
  - `bankCode`: 은행코드 (농협은행: 011)

#### 4. 거래 내역 조회
- 최근 거래 내역 조회 기능
- 거래일자, 거래금액, 잔액 정보 표시

## UI/UX 디자인 요구사항

### 디자인 컨셉
- 농협은행의 브랜드 컬러 활용 (녹색 계열)
- 깔끔하고 직관적인 인터페이스
- 모바일 반응형 디자인

### 주요 화면 구성
1. **로그인/회원가입 화면**
   - 간단한 폼 기반 인터페이스
   
2. **메인 대시보드**
   - 계좌 잔액 조회 버튼
   - 최근 거래 내역 표시
   - 새로고침 기능
   
3. **계좌 관리 화면**
   - 계좌번호 입력/수정
   - API 키 설정
   
4. **거래 내역 화면**
   - 테이블 형태의 거래 내역 표시
   - 필터링 및 정렬 기능

## 기술 스택 제안
- **Frontend**: React.js 또는 Vue.js
- **UI Framework**: Material-UI 또는 Ant Design
- **상태 관리**: Context API 또는 Zustand
- **HTTP 클라이언트**: Axios
- **스타일링**: Styled-components 또는 Tailwind CSS

## 보안 고려사항
1. **API 키 보안**
   - 환경변수를 통한 API 키 관리
   - 클라이언트 사이드에서 민감 정보 노출 방지

2. **데이터 암호화**
   - 계좌번호 등 민감 정보 암호화
   - HTTPS 통신 강제

3. **에러 처리**
   - API 호출 실패 시 적절한 에러 메시지
   - 네트워크 오류 처리

## 샘플 API 응답 형태
```json
{
  "status": "success",
  "data": {
    "accountNo": "356-0000-0000-00",
    "accountName": "홍길동",
    "balance": "1,000,000원",
    "availableBalance": "950,000원",
    "lastUpdated": "2025-09-16 14:30:00"
  }
}
```

## 개발 시 주의사항
1. **실제 API 연동 대신 Mock API 구현**
   - 농협 API는 실제 금융 서비스이므로, 데모용 Mock 데이터 사용
   - 실제 API 구조와 동일한 형태로 Mock 응답 구현

2. **반응형 디자인**
   - 모바일, 태블릿, 데스크톱 환경 모두 지원
   - 터치 친화적인 UI 구성

3. **사용자 경험**
   - 로딩 상태 표시
   - 적절한 피드백 메시지
   - 직관적인 네비게이션

4. **성능 최적화**
   - 불필요한 API 호출 방지
   - 데이터 캐싱 구현
   - 컴포넌트 최적화

## 추가 기능 제안
1. **알림 기능**: 잔액 변동 시 알림
2. **차트 표시**: 잔액 변화 그래프
3. **PDF 내보내기**: 거래 내역 PDF 다운로드
4. **다크 모드**: 테마 변경 기능

위 요구사항을 바탕으로 사용자 친화적이고 안전한 농협은행 계좌 잔액 조회 웹앱을 개발해주세요.

이후, 젠스파크에서 해당 PRD를 기반으로 웹앱을 직접 구현해보는 실험에 돌입했습니다!

<실패사례 #1 - 더미데이터 생성, API 연결 X>

<실패사례 #2 - 더미데이터 생성, API 연결 X>

<향후 최종 UI 예시>

결과와 배운 점

NH API 연동에는 결국 실패했지만, 그 과정에서 많은 것을 배웠습니다:
- NH API는 사전 심사나 복잡한 인증 절차가 많아 바로 활용이 어려움
  구현 불가능한 기능들:
  1. 농협 API 직접 연동:
    - API 키 인증이 필요한 보호된 API
    - CORS 제한으로 브라우저에서 직접 호출 불가
    - 서버사이드 프록시가 필요
  2. 실시간 은행 데이터 조회:
    - 백엔드 서버 없이는 외부 API 호출 제한
    - 민감한 금융 정보 처리를 위한 서버사이드 로직 필요
  대안 구현 방안:
  정적 웹사이트 환경의 제약을 고려하여, 실제 API 연동 없이 농협 API 구조를 시뮬레이션하는 임대료 관리 대시보드를 제작하겠습니다:
  1. 모의 데이터 기반 시스템: 농협 API 응답 구조를 기반으로 한 샘플 데이터
  2. 완전한 임차인 관리 기능: CRUD 기능이 포함된 관리 시스템
  3. 임대료 매칭 알고리즘 시뮬레이션: 실제 로직과 동일한 매칭 시스템
  4. 반응형 대시보드: 납부 현황을 시각적으로 확인할 수 있는 인터페이스
- 입금 내역 확인에 필요한 필드, 반환 데이터 구조 등에 대한 이해도가 올라감
- 자동화를 위한 전체 흐름을 직접 설계해본 경험은 큰 자산
Claude를 활용할 때 유용했던 팁:
- "이해했는지 꼭 확인하고, 모르는 게 있으면 되묻도록 지시"하기
- PRD부터 함께 만들면 훨씬 더 명확한 결과물을 받을 수 있음
무엇보다 중요한 건...
딸깍이라도 해봐야 자동화가 내 것이 된다! (해죠♥ Skill +10)
코드 작성까지는 못 했지만, 작성된 PRD가 내가 의도한 바를 담고 있는지 검토하고 조율하는 경험이 큰 도움이 되었어요.
앞으로는 API 연동을 위한 사전 조건이나 외부 플랫폼 연계 구조에 대한 사전 조사를 좀 더 철저히 할 예정입니다.

도움 받은 글

타이칸 님의 이벤트 분해 강의
NH 오픈 플랫폼 공식 문서
Claude를 통한 PRD 작성 실험
젠스파크를 이용한 웹앱 시도

AI의 파도, 함께하면 이뤄낼 수 있어요! 22기 스터디 사전판매 시작 🚀

자동화를 향한 딸깍 한 번: 임대료 정산 스트레스를 줄이기 위한 여정 (~ing)

소개

진행 방법

1. 이벤트를 트리거와 액션으로 분해하기

2. n8n + Claude를 통한 노드 설계

3. 입금 확인 방식 2가지 설계

4. 웹앱 PRD 작성과 젠스파크 시도

결과와 배운 점

구현 불가능한 기능들:

대안 구현 방안:

도움 받은 글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요