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
화면 오류00
깨진 파일00
가로 넘침·글자 잘림00
동작 시험13 / 13 통과13 / 13 통과

동작 시험 13가지: 단계별 보드 표시 · 새 거래 등록(빈칸·금액 확인 뒤 저장) · 단계 옮기기(PC 끌어 놓기, 휴대폰 단계 고르기) · 연락 기록과 다음 연락일 · 보류·실패 사유 확인과 되돌리기 · 새로고침 뒤 거래·기록 유지와 Esc로 닫기 · 연락할 곳 묶음 · 검색·담당자·단계 거르기 · 거래처 목록 불러오기(잘못된 줄 건너뜀) · CSV 내려받기 내용 확인 · 담당자별 현황 계산 · 보는 사람 바꾸기 저장 · 뒤로 가기

속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)

성능접근성권장사항검색 최적화
휴대폰100100100100
PC100100100100

휴대폰: 첫 화면 표시 1.1초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.3초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0 · 입력 막힘 0ms

7. 결과

직접 눌러보기 ↗
PC 완성 화면휴대폰 완성 화면
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr
개인정보처리방침