작업 사례

메인의 자주 찾는 메뉴와 알림 팝업존, 문화관광 지도, 주민 의견 게시판, 민원과 정보공개, 자동완성과 오타 교정이 되는 통합검색, 첨부 문서 바로 보기를 갖췄습니다. 관리자 CMS에서는 메뉴별 권한, 콘텐츠 변경 이력과 되돌리기, 팝업과 메인 비주얼 게시 기간, 접속통계 엑셀 다운로드를 다룹니다.

정부 디지털 서비스 디자인시스템 기준으로 글꼴과 명도 대비를 맞췄고, 기능 21개를 구현했습니다. 웹 접근성 자동 검사는 32개 화면에서 위반 0건, 자동 화면 테스트 24건을 통과했습니다.

병원은 진료시간과 진료 중 여부, 진료과목, 건강검진, 비급여 진료비를 앞에 두었습니다. 학원은 학년별 수업시간과 커리큘럼, 교습비를, 펜션은 입실·퇴실 시간과 객실, 요금·환불 규정을 첫 화면과 주요 섹션에 배치했습니다. 세 곳 모두 문의 폼과 오시는 길을 갖췄습니다.

Next.js·React·Tailwind CSS로 만든 반응형 화면입니다.

제목이 어절 단위로 올라오고 대표 이미지가 스크롤에 따라 움직입니다. 작업 목록은 데스크톱에서 가로로 넘어가고 휴대폰에서는 스와이프로 바뀝니다. "움직임 줄이기"를 켠 방문자에게는 모션 없이 보입니다.

관리자는 제목·대표 이미지·본문·유형만 넣으면 목록과 상세 화면이 자동으로 만들어집니다. 다국어는 무료 플러그인(Polylang)으로 관리하고 검색엔진용 언어 표시와 사이트맵이 자동으로 나갑니다.

학원 소개, 강좌와 수강 신청, 설명회 예약, 자료실, 오시는 길 다섯 페이지로 구성했습니다. 설명회 예약은 참석 회차, 학교와 학년, 관심 과목을 받고 개인정보 수집 동의를 함께 받습니다. 자료실은 목록은 누구나 보고 글과 첨부파일은 회원만 열 수 있으며, 글쓰기는 관리자만 할 수 있게 권한을 나눴습니다.

템플릿의 색, 글꼴, 사진, 문구는 모두 바꿨고 단계 카드와 길 안내 그래픽은 직접 만들었습니다. PC와 모바일 화면을 따로 맞췄고 어절 단위 줄바꿈을 적용해 단어 중간에서 줄이 끊기지 않게 했습니다.

홈, 상품(소포장 상품·도매 대용량), 도매 회원 안내, 주문·배송 안내, 견적 문의로 구성했습니다. 소포장 상품은 누구나 가격을 보고 주문하고, 도매 대용량 카테고리는 로그인한 회원에게만 가격과 주문 버튼이 보이게 카테고리 권한을 나눴습니다. 견적 문의는 입력폼으로 상호, 업종, 필요한 품목, 받고 싶은 요일을 받고 개인정보 수집·이용 동의를 함께 받습니다.

템플릿의 색, 글꼴, 사진, 문구는 모두 바꿨습니다. 색은 짙은 녹색과 황토색 두 가지, 글꼴은 Pretendard로 통일했습니다. PC와 모바일 화면을 따로 맞췄고, 모든 텍스트 위젯에 어절 단위 줄바꿈을 적용했습니다.

메뉴는 병원 소개, 진료 안내, 예약·공지 세 갈래입니다. 홈 첫 화면 아래에 수요일 야간 진료, 토요일 진료 시간, 역에서 걸리는 시간을 숫자로 올려 환자가 가장 먼저 찾는 정보를 바로 보게 했습니다. 상담·예약 신청은 입력폼으로 희망 진료 과목, 첫 방문 여부, 희망 날짜와 시간대를 받고 개인정보 수집·이용 동의를 함께 받습니다. 공지사항은 관리자만 쓰는 게시판이고 최신 글 세 개가 홈에 자동으로 올라옵니다.

의료광고 기준에 맞춰 치료 후기, 치료 전후 사진, 최고·최초 같은 표현은 넣지 않았습니다. 템플릿의 색, 글꼴, 사진, 문구는 모두 바꿨습니다. 색은 남색과 청록색 두 가지, 글꼴은 Pretendard입니다. PC와 모바일 화면을 따로 맞췄습니다.

예약 요청과 동시에 결제하고, 강사가 수락하면 확정, 거절하면 결제가 자동으로 취소됩니다. 같은 칸은 한 명만 잡히고 결제 대기 칸은 30분 뒤 풀립니다. 레슨이 끝난 예약에만 리뷰를 남길 수 있습니다.

공간 대여, 과외, 반려동물 돌봄, 출장 수리, 상담 예약처럼 공급자가 시간을 내놓고 수요자가 예약하는 서비스에 같은 구조를 씁니다.

관리자는 기간과 매장을 골라 매출, 객단가, 폐기율 추이와 매장별 비교를 보고, 알림 기준을 숫자로 바꾸며 주간 리포트를 인쇄합니다. 직원은 담당 매장만 보고 입력만 할 수 있습니다. CSV에 잘못된 줄이 있으면 몇 번째 줄이 왜 틀렸는지 돌려줍니다.

프랜차이즈 점포, 건설 현장 점검, 창고 재고, 학원 출결처럼 여러 현장에서 같은 항목을 날마다 모으는 업무에 같은 구조를 씁니다.

고객은 지도와 목록으로 매장을 찾고 상품, 옵션, 디자이너, 시간을 골라 전체 금액을 선결제합니다. 매장 관리자는 입점 신청, 예약 승인과 거절, 영업시간과 휴무일, 상품, 디자이너, 매출 대시보드, 정산 요청을 관리하고, 운영사 관리자는 입점 승인과 전체 내역 조회를 맡습니다.

공고 기능 20개를 모두 구현했습니다. 결제는 테스트 결제로 승인과 취소 API를 실제로 호출하고, 같은 디자이너의 겹치는 시간은 서버가 거절합니다. 단위 테스트 12건과 배포본 브라우저 자동 테스트 4건을 통과했습니다.

입출고를 등록하면 해당 창고 재고가 바로 바뀌고, 재고보다 많이 출고하려 하면 저장하지 않고 현재고를 알려 줍니다. 발주는 작성중, 발주확정, 부분입고, 입고완료 순서로 진행되고 도착한 수량만 입고 처리하면 재고와 발주 상태가 함께 바뀝니다.

표준 엑셀 템플릿 5종을 올리면 화면과 서버가 두 번 검사하고, 한 줄이라도 틀리면 아무것도 반영하지 않고 줄 번호와 사유를 보여 줍니다. 창고 직원 계정은 관리 메뉴에 접근할 수 없습니다. 단위 테스트 19건과 배포본 브라우저 자동 테스트 10건을 통과했습니다.

거래처 조회는 약칭으로 검색해도 정식 회사명을 찾도록 관련도 순 목록을 보여 주고, 결과가 없는 회사는 정밀 조회 신청으로 이어집니다. 병원 현황은 미리 측정한 결과를 바로 보여 주고, 아직 측정하지 않은 조합은 대기열에 올려 측정 뒤 다시 보여 줍니다. 조회 요청은 접속자별 횟수 제한을 두었습니다.

공동구매 주문 챗봇은 고객 채팅 화면과 운영자 주문 관리 화면을 나란히 두어, 주문이 쌓이고 결제 확인과 발송 처리가 고객에게 바로 알림으로 가는 흐름을 보여 줍니다. 맞춤 추천은 추천 기준 비중을 바꾸면 목록 순서가 바뀌고, 엑셀 예측 분석은 가진 데이터로 문의 유형을 자동 분류하는 예측과 추이 분석을 비교합니다.

그 밖에 콘텐츠 발행 관리 대시보드, 보험 정보 사이트, 보건관리 안내 챗봇, 모임 일정 공유 화면이 있습니다.

열량과 급여량은 공개 가이드라인 공식으로 계산해 같은 입력이면 늘 같은 값이 나옵니다. 체형 점수는 AI가 사진을 보고 추정하며 근거와 신뢰도를 함께 적습니다. 화면에서 계산값과 AI 추정을 나눠 보여 주고, AI는 계산값을 바꾸지 못합니다.

운영자 화면에서 일별 분석 수, AI 비용, 상한 차단 수를 봅니다. 학습 진단, 상담 요약, 상품 추천, 문서 검토처럼 입력을 받아 AI가 분석하는 서비스에 같은 구조를 씁니다.

규칙이 많아질수록 AI 입력이 불어나 비용이 커지고, 규칙을 고칠 때마다 예전 판정이 조용히 바뀌는 문제가 생깁니다. 규칙마다 적용 어휘를 선언해 두고 문서에 해당하는 규칙만 판정 단계로 넘깁니다. 규칙을 바꾸면 미리 정해 둔 기준 사례를 다시 돌려 기존 판정이 그대로인지 확인한 뒤에만 배포합니다.

계약서·광고물·신청서처럼 기준표가 있는 문서 검토, 사내 규정 점검, 대량 서류의 1차 분류에 씁니다.

평소 말투로 물으면 단가 조회, 재고 확인, 거래 이력, 견적 작성 4종으로 나눠 거래처 등급과 협상단가 조건을 적용해 답합니다. 최소 수량에 못 미치면 정가로 계산하고 이유를 함께 알려 주며, 재고가 0이면 입고 예정일을 안내합니다.

여러 품목을 한 번에 요청하면 공급가, 부가세, 합계를 계산하고 견적서 PDF 모듈이 문서 번호를 매겨 A4 견적서를 만듭니다. 도매, 제조, 건설 3개 업종 데모가 같은 코어로 동작합니다.

기준을 넘으면 상위 근거 문서 4개만 넘겨 그 안의 내용으로만 답하게 합니다. 검색은 한글 음절 단위 BM25로 만들어 임베딩 API 없이 동작합니다.

사이트와 무관한 질문, 관련은 있지만 근거 문서가 없는 질문을 따로 테스트해 차단을 확인합니다. 테스트 85건 통과. 이미지는 가상 부품 유통사의 예시 문서 8건으로 실제 판정 로직을 돌린 기록입니다.

견적서 자동 작성은 고객 이름과 평수만 넣으면 항목별 금액과 공급가, 부가세, 합계를 계산해 견적서를 만듭니다. 문의 자동 응답은 언어모델이 1차 답변을 쓰고, 블로그 초안은 주제만 넣으면 만들되 발행은 사람이 검토한 뒤에 합니다.

채용 지원자 스크리닝, 메신저 명령으로 연차 잔여일 계산, 노코드 도구 n8n 설치와 기동, 문자 발송 API 연동 검증, 노코드 워크플로를 코드로 바꾸는 비교 명세까지 8종이고 각각 실행 결과를 함께 보여 줍니다.

연결 대상은 설명서가 사실상 없는 오래된 SOAP 인터페이스였고, 데이터 일부는 표준이 아닌 이진 포맷이었습니다. 인터페이스 정의를 전부 분석해 요청을 직접 구성하고 이진 포맷을 해독해 파서를 만들었습니다.

보고서 작성과 사전 검증을 자동으로 돌리고, 실제 제출은 사람이 승인해야만 나가도록 분리했습니다. 제출 뒤에는 서버에 저장된 신고본을 다시 받아 모든 칸을 원천 값과 대조합니다.

API 문서가 없는 사내 시스템, ERP, 거래처 시스템과 데이터를 주고받거나 기관 제출 양식을 자동으로 채워야 할 때 같은 방식을 씁니다.

만들기 전에 과거 제출본을 빈 양식과 칸 단위로 비교해, 사람이 실제로 채우던 칸이 어디인지부터 확정했습니다. 자동화 범위를 감이 아니라 비교 결과로 정했습니다.

요청 감지, 조사표 작성, 사전 검증, 발송 또는 보류, 알림 순서를 상태 기계로 만들어 하루 세 번 돌리고, 건마다 상태를 기록해 같은 회신이 두 번 나가지 않습니다. 검증을 통과하지 못하면 보내지 않고 담당자에게 알립니다.

거래처나 기관이 보내는 정기 요청서, 견적 요청, 자료 요청에 서식을 채워 회신하는 업무에 같은 구조를 씁니다.

사내 업무 시스템 메뉴마다 흩어진 자료를 분석할 수 있는 형태로 모으고, 사람이 적는 적요는 판정 근거로 쓰지 않았습니다. 카드 승인번호로 사용 내역과 증빙을 잇고, 업종, 결제 시각, 금액처럼 바꿀 수 없는 값으로 판정합니다.

금액 이상치, 업종, 심야와 주말 사용, 증빙 미매칭, 중복 5가지 신호를 합산한 위험 점수로 소명 대상만 고릅니다. 경비 사후 점검, 거래처 정산 대조, 감사 대응 자료 준비에 같은 방식을 씁니다.

새로 띄운 브라우저에는 로그인 세션이 없어 인증에서 멈추기 때문에, 실제로 로그인된 브라우저 세션에 연결해 화면을 조작하는 방식을 택했습니다. 비용 처리 문서 작성, 결재선 지정, 참조 문서 첨부, 보관을 자동으로 처리하고 사내 정기 업무 여러 건을 누락 감시와 함께 예약 실행합니다.

환급 처리는 요청 접수, 케이스 정리, 처리 대장 기록, 기안 상신, 승인 확인, 문서번호 기입까지 한 흐름으로 묶었고 결재 승인과 실제 지급만 사람이 합니다.

API가 없는 사내 업무 시스템, ERP, 관리자 화면의 반복 입력과 기안을 자동화할 때 같은 방식을 씁니다.

주문을 접수, 부분 체결, 체결, 취소, 거부, 시간 초과 6단계로 추적하고, 같은 종목에 처리 중인 주문이 있으면 새 주문을 내지 않습니다. 새 주문 직전에는 외부 잔고와 내부 장부를 양쪽 방향으로 대조하고, 반영이 늦을 수 있는 방금 주문한 종목은 30초 동안 대조에서 뺍니다.

ERP 재고와 창고 실재고 대조, 거래처 발주 중복 방지, 정산 내역 대사에 같은 원리를 씁니다.

엑셀·CSV·텍스트 PDF에서 거래처·일자·품목·합계를 읽습니다. 거래처마다 다른 열 이름(공급업체·매입처·상호, 청구금액·지급예정액 등)은 별칭 사전으로 흡수하고, 필수 열을 못 찾으면 빈 값으로 채우지 않고 멈춥니다.

두 문서를 전수 대조해 일치 건은 자동 확인으로 넘기고, 어긋난 건만 사유와 차액을 붙여 담당자에게 올립니다. 기본 허용오차는 0원이라 1원 차이도 사람이 확인합니다. 스캔 이미지 PDF의 글자 인식은 포함하지 않습니다.

문의자가 이름·회사명·문의 내용과 유형을 입력하면 유형(영업·서비스·마케팅·일반)에 맞는 부서로 보냅니다. 문의자에게는 접수번호를 안내합니다.

카카오 사진 주소는 10분만 유효해서 링크로 넘기지 않고 받는 즉시 내려받아 첨부 파일로 바꿉니다. 서버는 접수 내용을 저장하지 않습니다. 필수 항목이 빠졌거나 유형을 읽지 못한 문의는 임의 부서로 보내지 않고, 빠진 항목을 알려 줍니다.

웹은 CSS 변수 파일 하나가 정본이고, 인쇄물은 같은 값을 디자인 토큰으로 옮겨 제안서, 견적서, 로고, 서식이 모두 그 값을 읽습니다. 버튼과 카드 규칙, 쓰지 않을 표현 목록까지 문서로 정리했습니다.

첫 화면에는 커서에 반응하는 그래픽을 WebGL로 직접 그렸고, 바뀌는 값을 사이트 2곳에 자동으로 맞추는 동기화 스크립트로 한쪽만 바뀌는 일을 막았습니다.

시안마다 색 체계와 역할, 한글 지원 서체 조합, 크기 단계, 모서리와 간격, 레이아웃 문법, 모션 성격을 시스템 시트로 정리했습니다. 첫 화면 그래픽은 레퍼런스의 코드를 가져오지 않고 직접 다시 그렸고, 커서와 터치에 반응합니다.

20벌 모두 일괄 검증으로 오류와 글자 겹침을 검사하고 PC와 모바일 화면을 확인했습니다. 홈페이지를 맡기실 때 원하는 분위기를 이 중에서 고르고, 그 시스템을 브랜드에 맞춰 다시 짜는 출발점으로 씁니다.