Web application
또박
거래를 한 줄로 적고, 장부와 세무 일정을 이어서 확인하는 세무 애플리케이션.
서비스와 화면 설계
거래를 입력해 장부에 기록하고, 기간별 수입·비용과 증빙을 확인하는 세무 애플리케이션입니다. 거래처의 기본 계정과목을 다시 활용하고, 카드 내역 파일은 미리 확인한 뒤 선택한 줄만 장부에 넣습니다. 세무 일정과 신고 준비는 별도 화면으로 이어집니다.
거래를 한 문장으로 적기
화면 중앙에 거래 입력칸을 크게 두고, 바로 아래에 장부 보기와 카드 내역 가져오기를 붙였습니다. 왼쪽 메뉴에서는 거래처·세무 달력·신고 도우미로 이동합니다.
장부 입력과 합계를 한 화면에
위쪽의 수입·비용·부가세 요약 아래에 날짜, 계정과목, 거래처와 금액을 입력하는 칸을 배치했습니다. 항목을 채우면서 현재 집계도 함께 확인하는 화면입니다.
가져온 거래를 골라 장부에 넣기
가져온 카드 내역을 날짜·가맹점·금액별로 펼치고, 각 행에 선택 표시와 계정과목을 두었습니다. 아래의 선택 건수를 확인한 뒤 장부에 넣습니다.
거래처 등록 창
거래처 목록 위에 등록 창을 열어 상호와 기본 계정과목을 입력합니다. 사업자등록번호와 대표자명처럼 함께 관리할 정보도 같은 창에서 적습니다.
다음 마감과 월별 일정
가장 가까운 신고·납부일까지 남은 날짜를 크게 보여주고, 그 아래에 열두 달 선택칸을 놓았습니다. 선택한 달의 일정은 화면 아래 목록으로 이어집니다.
신고 유형별 준비 안내
맨 위에서 신고 유형을 고르면 아래에 해당 신고서 이름과 과세기간, 제출 안내가 나타납니다. 안내문과 근거 링크를 함께 읽으며 준비할 내용을 확인합니다.
개발 구조 자세히 보기
거래 자료를 장부 구조로
날짜·금액·증빙을 읽는 과정과 사용자가 장부 반영을 확인하는 과정을 구분했습니다. 파일을 올리는 것만으로 장부에 저장되지 않습니다.
반복 입력 줄이기
거래처를 다시 선택하면 기본 계정과목을 추천합니다. 추천값은 사용자가 수정할 수 있습니다.
가져온 자료의 추적
파일별로 가져온 거래 묶음을 관리하고 중복 판단용 식별자를 보관합니다. 묶음을 되돌릴 때는 해당 묶음으로 들어온 줄을 대상으로 합니다.
사용 기술
- 언어
- TypeScript · HTML · CSS
- 주요 기술
- React · Vite
- 데이터·연동
- 브라우저 로컬 저장소 · PDF.js · Tesseract.js