1. 개요
| 업종 | 공장·물류센터에 소모품을 납품하는 B2B 영업팀 (담당자 3명) |
| 시스템 목적 | 엑셀과 메신저에 흩어진 거래처·영업 진행 상황을 한 화면에 모아, 누가 어디에 언제 다시 연락할지 놓치지 않게 하는 것 |
| 제작 범위 | 페이지 4개 · 화면 8개 · 영업 단계 5개 + 보류·실패 |
| 주요 흐름 | 거래 등록 → 단계 옮기기 → 연락 기록·다음 연락일 → 계약 또는 보류(사유) / 연락할 곳 확인 / 거래처 목록 파일 불러오기 → 거르기 → CSV 내려받기 / 담당자별 현황 |
거래, 단계 변경, 연락 기록, 다음 연락일, 보류 사유, 보는 사람은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.
범위 밖: 여러 사람이 같은 자료를 함께 쓰는 서버 저장과 로그인, 메일·문자 발송, 전화 연결, 캘린더 연동. 도입할 때 회사 서버와 계정에 연결합니다.
2. 과제
1. 진행 상황이 담당자 머릿속에만 있다.
거래처가 어느 단계인지 물어봐야 알 수 있으면 회의가 길어집니다. 단계별로 한눈에 보이고, 금액이 단계마다 합산돼야 합니다.
2. 다시 연락할 날을 놓친다.
"다음 주에 다시 연락드릴게요"가 가장 많이 새는 약속입니다. 기록을 남길 때 다음 연락일을 같이 정하고, 지났거나 다가온 곳이 따로 모여 있어야 합니다.
3. 이미 있는 거래처 목록을 옮겨 넣기 어렵다.
대부분 엑셀에 거래처 목록이 있습니다. 한 번에 불러오되, 틀린 줄과 이미 있는 거래는 걸러 줘야 합니다.
3. 화면 구조

보드·연락할 곳·전체 거래·현황은 주소가 따로 있는 화면이라 뒤로 가기가 동작합니다. 거래 하나를 누르면 옆에서 상세가 열리고, 그 자리에서 기록·단계·수정까지 끝냅니다.
4. 주요 기능

단계별 보드 — 끌어서 옮기기
첫 연락·미팅·제안·견적·협상·계약 다섯 칸에 거래 카드가 놓이고, 칸마다 건수와 금액 합계가 붙습니다. PC에서는 카드를 끌어 다른 칸에 놓으면 저장되고, 휴대폰에서는 단계를 골라 한 칸씩 보며 카드 아래 목록으로 옮깁니다.

연락 기록과 다음 연락일
통화·메일·방문·메모 중 하나를 고르고 내용을 적으면 거래 아래 기록이 최근 순으로 쌓입니다. 기록을 남길 때 다음 연락일을 함께 정하고, 카드에 "오늘 연락", "연락 지남"이 표시됩니다.

연락할 곳
다음 연락일이 지난 곳, 오늘, 7일 안에 돌아오는 곳을 나눠 보여 줍니다. 메뉴 옆 숫자는 오늘까지 연락해야 할 거래 수입니다.

거래처 목록 불러오기
엑셀에서 저장한 CSV를 올리면 한 번에 거래가 추가됩니다. 금액이 숫자가 아닌 줄, 이미 있는 거래는 건너뛰고 몇 번째 줄이 왜 빠졌는지 알려 줍니다.
- 새 거래 등록거래처·건명·금액이 비었거나 금액이 숫자가 아니면, 연락처 형식이 틀리면 칸마다 표시하고 문장으로 알려 줍니다. 담당자는 지금 보는 사람으로 먼저 채워집니다.
- 보류·실패와 되돌리기보류·실패로 옮길 때는 사유를 적어야 저장됩니다. 사유는 상세와 전체 거래에 남고, 다시 진행되면 진행 중으로 되돌립니다.
- 전체 거래 — 검색·거르기·CSV 내려받기거래처·고객 이름·건명으로 찾고, 담당자와 단계로 거릅니다. 지금 거른 목록 그대로 CSV로 내려받으며, 엑셀에서 열어도 한글이 깨지지 않습니다.
- 담당자별 현황단계별 진행 금액을 막대로, 담당자별 진행 건수·계약 금액·계약 성공 비율을 표로 보여 줍니다. 저장된 거래로 그 자리에서 계산합니다.
5. 기술
| 반응형 | 1100·760px 기준으로 배치가 바뀝니다. PC는 왼쪽 메뉴와 5칸 보드, 1100px 아래는 3칸, 760px 아래는 위 제목줄·아래 메뉴 막대로 바뀌고 보드는 단계를 골라 한 칸씩 봅니다. 표는 휴대폰에서 줄마다 카드로 바뀝니다. |
| 글꼴 | 본문 Pretendard, 금액·숫자 Space Grotesk(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 화면에 쓰인 글자만 남겨 2,010KB → 85KB로 줄였습니다. |
| 이미지 | 사진 없이 화면 요소만으로 구성했습니다. 전체 전송량은 글꼴 포함 약 150KB입니다. |
| 움직임 | 라이브러리 없이 브라우저 기본 끌어 놓기와 CSS 전환으로 만들었습니다. 상세 창은 옆에서 밀려 나오고, 기기에서 움직임 줄이기를 켜면 전환이 멈춥니다. |
| 접근성 | 입력 칸마다 이름표를 붙였고, 틀린 칸은 테두리와 문장으로 함께 알려 줍니다. 목록의 줄은 키보드로 골라 Enter로 열고, Esc로 창을 닫습니다. 끌어 놓기를 못 쓰는 경우를 위해 단계 고르기 목록을 함께 둡니다. 접근성 측정 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 자료는 브라우저 저장소(localStorage)에 저장하고 다시 읽습니다. CSV 읽기·쓰기는 직접 구현했고, 따옴표·쉼표가 들어간 칸도 처리합니다. 화면은 주소(#/board 등)로 나눠 뒤로 가기가 동작합니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 13 / 13 통과 | 13 / 13 통과 |
동작 시험 13가지: 단계별 보드 표시 · 새 거래 등록(빈칸·금액 확인 뒤 저장) · 단계 옮기기(PC 끌어 놓기, 휴대폰 단계 고르기) · 연락 기록과 다음 연락일 · 보류·실패 사유 확인과 되돌리기 · 새로고침 뒤 거래·기록 유지와 Esc로 닫기 · 연락할 곳 묶음 · 검색·담당자·단계 거르기 · 거래처 목록 불러오기(잘못된 줄 건너뜀) · CSV 내려받기 내용 확인 · 담당자별 현황 계산 · 보는 사람 바꾸기 저장 · 뒤로 가기
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.1초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.3초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침