본문으로 건너뛰기
스토어 1533-7038 문의하기
로그인 회원가입

otosystem

포트폴리오

데모산업고등학교 취업·진로·현장실습 포털 대표 이미지

데모산업고등학교 — 취업·진로·현장실습 포털

특성화고 학생의 진로 이력과 취업 준비, 현장실습 서류를 한곳에서 관리하는 데모입니다.

기술 스택
Laravel 13 · PHP 8.4 · MySQL 8.4 · Blade · Alpine.js · Tailwind CSS 4 · Chart.js · Docker

학교·학생·기업을 가상 데이터로 구성한 시연용 프로토타입이며 실제 고객사 수행 사례가 아닙니다. 방문자가 같은 데이터를 공유하고 매일 04:00에 초기화합니다. 개인정보나 실제 서류는 올리지 마세요. 알림 발송과 서명은 데모 흐름으로 체험합니다.

데모 사이트 보기
구현 상세 보기접기

제작 목적

특성화고 학생의 진로 이력과 취업 준비, 현장실습 서류를 한곳에서 관리하는 데모입니다. 학생·교사·취업지원부·학부모가 각자 맡은 화면에서 증빙 확인부터 실습 배정과 동의서 서명까지 이어갑니다.

핵심 구현

  • 학생이 자격증·수상·봉사·포트폴리오와 증빙을 올리고, 교사가 확인·보완 요청을 남깁니다. 직무별 기준에 따라 진로 리포트를 보여 줍니다.
  • 취업지원부가 학생을 실습 기업에 배정하고 협약서·동의서를 만듭니다. 문서 양식은 버전별로 관리합니다.
  • 학생과 학부모가 휴대폰에서 서명합니다. 학부모는 QR 링크와 확인 번호로 접근하며, 서명 이미지·시각·문서 해시를 PDF에 담습니다.
  • 대시보드와 통계에서 실습·서명 현황을 확인하고 보고용 XLSX를 내려받습니다. 학생 명단을 엑셀로 가져옵니다.
  • 역할별 체험 계정, 알림 발송·실패·재발송 시연, 학교 정보·색상·직무 기준 설정을 제공합니다.
Plancast 건축 3D 뷰어·벽 편집·링크 공유 대표 이미지

Plancast — 건축 3D 뷰어·벽 편집·링크 공유

건축 3D 모델을 웹에서 확인하고 벽을 간단히 편집한 뒤 보기 전용 링크로 공유하는 데모입니다.

기술 스택
Next.js 16 · React 19 · TypeScript · Three.js · Tailwind CSS 4 · Node.js 24 · SQLite · Docker

직접 만든 가상 공간으로 제작한 독립 데모이며 실제 고객사 수행 사례가 아닙니다. 고객의 실제 모델과 실제 스마트폰·카카오톡은 검증하지 않았습니다. 링크를 가진 사람이 해당 권한을 가지므로 기밀 모델은 올리지 마세요.

데모 사이트 보기
구현 상세 보기접기

제작 목적

건축 3D 모델을 웹에서 확인하고 벽을 간단히 편집한 뒤 보기 전용 링크로 공유하는 데모입니다. 직접 만든 가상 공간으로 모델 불러오기부터 치수·재질 변경, 저장과 갤러리 공개까지 체험합니다.

핵심 구현

  • OBJ·DAE 파일을 불러오고 마우스·터치로 회전·확대합니다. 위에서·전체·눈높이 시점으로 공간을 살펴봅니다.
  • 객체별로 나뉜 벽의 높이·두께를 바꾸고 삭제·복원합니다. 벽과 바닥에는 8종의 재질 프리셋을 적용합니다. 병합형 모델은 치수 편집을 제한합니다.
  • 원본 모델을 유지하며 편집 내용만 저장합니다. revision을 비교해 다른 창의 저장 내용을 덮어쓰는 충돌을 감지합니다.
  • 편집 링크와 보기 전용 링크를 분리합니다. 공유 화면에는 편집 도구와 편집 토큰을 노출하지 않습니다.
  • 추천 공간 8개와 사용자가 공개한 공간을 갤러리에서 보여 줍니다. 썸네일을 만들고 원본을 보존한 사본으로 편집을 시작합니다.
배움 학원 홈페이지·학원 운영 ERP 대표 이미지

배움 학원 — 홈페이지·학원 운영 ERP

학원 홈페이지의 상담·레벨테스트 예약부터 원생 등록, 평가·반배정, 출결, 교재 주문, 청구·수납까지 연결한 업무 데모입니다.

기술 스택
전자정부프레임워크(eGovFrame) 5.0.1 · Spring Boot · Java 17 · Spring Security · MyBatis · PostgreSQL · React · TypeScript

가상 학원·사용자·실적을 사용한 데모이며 실제 고객사 수행 사례가 아닙니다. 결제는 토스 테스트 환경을 사용하며 현금·계좌 수납은 장부 기록입니다. 모든 방문자가 같은 데이터를 사용하고 매시 초기화합니다. 실제 개인정보는 입력하지 마세요.

데모 사이트 보기
구현 상세 보기접기

제작 목적

학원 홈페이지의 상담·레벨테스트 예약부터 원생 등록, 평가·반배정, 출결, 교재 주문, 청구·수납까지 연결한 업무 데모입니다. 방문자의 신청을 운영자가 이어받고, 강사와 학생은 각자 맡은 업무와 학습 내역을 확인합니다.

핵심 구현

  • 홈페이지에서 시간표·강사·잔여석을 확인하고 상담·레벨테스트를 예약합니다. 관리자는 접수 내용을 확인해 원생으로 등록합니다.
  • 문항·채점 기준의 버전을 관리하고 시간 제한 응시와 자동 채점을 지원합니다. 평가 결과로 반을 추천하며 확정한 배정과 과거 결과를 보존합니다.
  • 수강·출결과 교재 재고·주문·출고·취소를 관리합니다. 중복 주문과 동시 재고 할당을 제어하고 주문·청구를 함께 처리합니다.
  • 수강료·교재비 청구와 현금·계좌 수납을 기록합니다. 토스 테스트 결제·취소를 연결하고 미확정 결과를 조회해 복구합니다.
  • 관리자·강사·학생의 권한을 구분하고 업무 변경 이력을 감사로그에 남깁니다.
기업 대금지급 요청·승인·처리·정산 대표 이미지

기업 대금지급 — 요청·승인·처리·정산

기업의 대금지급 요청부터 승인, 지급 실행, 정산까지 연결한 업무 데모입니다.

기술 스택
전자정부프레임워크(eGovFrame) 5.0.1 · Spring Boot · Java 17 · Spring Security · MyBatis · PostgreSQL · React · TypeScript

가상 기업·사용자·계좌로 만든 데모이며 실제 고객사 수행 사례가 아닙니다. 모의 은행 API를 사용하므로 실제 송금은 발생하지 않습니다. 모든 방문자가 같은 데이터를 사용하며 매일 초기화합니다.

데모 사이트 보기
구현 상세 보기접기

제작 목적

기업의 대금지급 요청부터 승인, 지급 실행, 정산까지 연결한 업무 데모입니다. 여러 건을 한꺼번에 처리하면서 중복 지급을 막고, 송금 결과가 불확실하거나 일부 건이 실패했을 때 후속 조치를 이어가도록 만들었습니다.

핵심 구현

  • 지급 요청을 직접 작성하거나 엑셀로 일괄 등록합니다. 행별 오류와 중복을 확인한 뒤 상신하고, 승인자는 사유를 남겨 승인·반려합니다.
  • 중복 요청과 동시 실행을 제어하고, 모의 은행에서도 같은 이체 키를 한 번만 처리해 중복 지급을 막습니다.
  • 타임아웃이 발생하면 결과 미확정 상태로 두고 은행에 처리 결과를 조회합니다. 처리 기록이 없을 때만 같은 키로 다시 전송하며, 확정 실패 건은 원인을 해결한 뒤 재처리합니다.
  • 내부 지급 기록과 모의 은행 거래내역을 대조해 금액 차이와 누락을 찾고 조치 내용을 남깁니다.
  • 요청자·승인자·관리자의 권한과 기업별 데이터를 구분합니다. 본인 요청의 승인을 막고 업무 변경과 거부 이력을 감사로그에 기록합니다.
누리빛 미술관 문화시설 예약·다국어 안내 대표 이미지

누리빛 미술관 — 문화시설 예약·다국어 안내

방문객의 전시 예약과 다국어 작품 안내, 운영자의 전시·콘텐츠 관리를 연결한 전자정부프레임워크 웹 서비스입니다.

기술 스택
전자정부프레임워크(eGovFrame) 5.0.1 · Java 17 · Spring 6.2 · Spring Security 6.5 · MyBatis · MySQL 8.4 · React 19 · TypeScript · Vite

가상 기관·인물·작품으로 만든 데모입니다. 실제 고객사 수행 사례가 아니며 결제·문자 발송·소셜 로그인·비회원 예약·자동 번역은 제공하지 않습니다. 실제 개인정보는 입력하지 마세요.

데모 사이트 보기
구현 상세 보기접기

제작 목적

방문객의 전시 예약과 다국어 작품 안내, 운영자의 전시·콘텐츠 관리를 연결한 전자정부프레임워크 웹 서비스입니다. 회차별 정원과 예약 상태를 함께 관리하고, 언어별 안내의 편집본과 발행본을 나눠 공개할 자료를 통제하도록 만들었습니다.

핵심 구현

  • 정원 확인과 예약 인원 반영을 조건부 UPDATE로 처리합니다. 중복 요청과 같은 회차의 중복 예약을 막고, 취소한 인원은 한 번만 복구합니다.
  • 작품별 QR 안내에서 한국어·영어와 이미지·음성을 제공합니다. 번역이 없으면 한국어 자료를 보여주며, 버전·파일 체크섬과 열람용 HTML을 ZIP으로 내려받습니다.
  • 언어별 안내를 작성 중·발행·이전 버전으로 구분합니다. 공개 API와 파일 다운로드는 공개 전시에 속한 발행본만 제공하도록 검사합니다.
  • 방문객·운영자·콘텐츠 관리자·최고 관리자 권한을 서버에서 확인합니다. 전시·회차·예약자·공지·배너·변경 이력을 관리하고 업로드 파일의 형식·시그니처·크기를 검사합니다.
단정회계법인 홈페이지·자체 CMS 대표 이미지

단정회계법인 — 홈페이지·자체 CMS

회계법인의 소개·구성원·인사이트를 운영자가 직접 관리하는 Next.js 홈페이지입니다.

기술 스택
Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 · Supabase · PostgreSQL · Drizzle ORM · Tiptap

가상 회계법인·구성원·샘플 콘텐츠로 만든 데모입니다. 실제 고객사 수행 사례가 아니며, 상담 접수·관리자별 승인 단계·버전 복구는 제공하지 않습니다.

데모 사이트 보기
구현 상세 보기접기

제작 목적

회계법인의 소개·구성원·인사이트를 운영자가 직접 관리하는 Next.js 홈페이지입니다. 공개 홈페이지와 관리자 CMS를 하나의 앱으로 구성하고, 편집 중인 내용과 실제 공개 내용을 분리해 발행 전 수정이 홈페이지에 섞이지 않도록 만들었습니다.

핵심 구현

  • 인사이트의 임시저장·발행·비공개 상태를 구분합니다. 발행한 글을 수정하는 동안에도 공개 화면에는 기존 내용을 유지합니다.
  • 글·구성원·연혁·팝업·사이트 설정을 CMS에서 관리하고, 공개 데이터가 바뀌면 관련 캐시를 갱신해 홈페이지에 반영합니다.
  • Supabase Auth 로그인과 활성 관리자 여부를 서버에서 확인합니다. 입력값을 검증하고 본문 HTML의 허용 태그와 속성을 제한합니다.
  • 본문 편집기와 이미지 업로드, 글별 SEO·공유 이미지·사이트맵을 구성했습니다. 임시저장·비공개 글은 공개 목록에서 제외하고 상세 주소도 404로 처리합니다.
강원 여행 도우미 Agentic RAG 대표 이미지

강원 여행 도우미 — Agentic RAG

강원특별자치도 관광정보를 바탕으로 여행자의 지역과 조건에 맞는 코스를 제안하는 서비스입니다.

기술 스택
Laravel 13 · PHP · PostgreSQL · Meilisearch · Hermes Agent · OpenAI · Blade · Tailwind CSS 4 · Vite · Docker

공개 데모는 요청 횟수와 하루 사용 한도 안에서 동작합니다. 예약 가능 여부·현재 가격·실시간 혼잡·실제 도로 이동 시간은 제공하지 않으며, 방문 순서는 좌표 사이 직선거리를 기준으로 안내합니다.

데모 사이트 보기
구현 상세 보기접기

제작 목적

강원특별자치도 관광정보를 바탕으로 여행자의 지역과 조건에 맞는 코스를 제안하는 서비스입니다. AI가 검색 도구로 장소를 찾고, 서버가 원본 근거와 필수 조건을 다시 확인해 근거 없는 장소 추천을 줄이도록 만들었습니다. 요청 시 로컬 LLM으로도 구성할 수 있습니다. DGX Spark·Mac Studio·RTX 5080 이상급 고성능 GPU 시스템을 모델과 사용 환경에 맞춰 구성합니다.

핵심 구현

  • AI 에이전트가 검색·상세 확인 도구를 골라 쓰고, 결과가 부족하면 검색어를 바꿔 다시 찾습니다.
  • 키워드와 의미 검색을 결합하고 지역·주차·반려동물 조건을 필터로 적용합니다.
  • 도구가 반환한 근거와 장소 정보를 대조해 지역 밖 장소, 미확인 필수 조건, 중복 항목을 제외합니다.
  • 관광자료를 새 릴리스로 등록하고 검증한 뒤 반영하며, 문제가 생기면 이전 릴리스로 복구합니다.
  • IP별 요청 횟수와 동시 실행, 하루 비용 한도를 관리하고 관리자 화면에서 사용량을 확인합니다.
오토모션 제조기업 홈페이지 대표 이미지

오토모션 — 제조기업 홈페이지

제조기업의 제품 소개를 견적 문의로 연결하는 WordPress 홈페이지입니다.

기술 스택
WordPress · PHP · MariaDB · Docker Compose

가상 제조기업 데모입니다. 견적 폼은 샘플 정보를 저장하며 이메일은 보내지 않습니다. 제품·인증·납품 내용은 실제 실적을 뜻하지 않습니다.

데모 사이트 보기
구현 상세 보기접기

제작 목적

제조기업의 제품 소개를 견적 문의로 연결하는 WordPress 홈페이지입니다. 방문자가 제작 분야와 제품 사양을 확인하고 관심 제품을 지정해 문의할 수 있게 구성했습니다. 운영자는 익숙한 관리자 화면에서 제품 사진과 사양, 회사 소개를 직접 관리합니다.

핵심 구현

  • 제품 전용 콘텐츠 유형과 분류를 만들어 제품 카탈로그를 관리하고, 상세 화면에서 선택한 제품을 견적 폼에 전달합니다.
  • 화면을 담당하는 자식 테마와 제품·문의 기능 플러그인을 분리해 기존 CMS를 확장했습니다.
  • 견적 문의는 공개 검색·REST API·개별 주소에서 제외하고 관리자만 확인하도록 저장합니다.
  • 서버에서 필수값·이메일·동의·공개 제품 여부를 검사하고, 서명된 제출 토큰으로 같은 폼의 중복 저장을 막습니다.
문화이음 지역 문화 플랫폼 대표 이미지

문화이음 — 지역 문화 플랫폼

흩어진 사람·단체·공간·일정을 함께 탐색하고, 회원이 등록한 문화 일정을 운영자가 심사해 공개하는 플랫폼입니다.

기술 스택
WordPress · PHP · MariaDB · REST API

일정 등록을 위한 심사 데모이며 행사 참가 신청이나 예약은 제공하지 않습니다. 이메일 인증과 비밀번호 재설정 메일은 연결하지 않았습니다.

데모 사이트 보기
구현 상세 보기접기

제작 목적

흩어진 사람·단체·공간·일정을 함께 탐색하고, 회원이 등록한 문화 일정을 운영자가 심사해 공개하는 플랫폼입니다. WordPress의 콘텐츠 관리에 회원 참여와 승인 업무를 연결했습니다. 수정 심사 중에도 방문자는 기존 승인 정보를 계속 확인할 수 있습니다.

핵심 구현

  • 전용 테마가 공개·회원 화면을, 기능 플러그인이 콘텐츠·인증·신청·심사를 맡도록 역할을 나눴습니다.
  • 신청의 소유자·제출 회차·결정 이력·공개 일정과 동시성 버전을 함께 관리합니다. 승인 후 수정해도 기존 일정과 사진은 유지합니다.
  • 요청 키와 본문 해시로 재전송을 구분하고, 오래된 버전의 수정은 거절합니다. 승인 정보는 트랜잭션으로 함께 저장합니다.
  • 사진의 실제 형식과 크기를 검사하고 EXIF·GPS를 제거합니다. 심사 전 원본과 승인된 공개 사본에 서로 다른 접근 권한을 적용합니다.
마켓노트 강좌·PDF 커머스 대표 이미지

마켓노트 — 강좌·PDF 커머스

강좌와 PDF를 판매하고 구매 이후의 학습·다운로드까지 연결하는 교육 커머스입니다.

기술 스택
WordPress · WooCommerce · Tutor LMS · PHP · MariaDB

테스트 결제 안내를 제공하는 데모입니다. 실제 결제 실적이나 정산 완료 서비스가 아니며 정산 원장·수수료 계산·지급은 제공하지 않습니다.

데모 사이트 보기
구현 상세 보기접기

제작 목적

강좌와 PDF를 판매하고 구매 이후의 학습·다운로드까지 연결하는 교육 커머스입니다. WooCommerce의 주문 기능과 Tutor LMS의 강좌 기능에 별도 업무 규칙을 더했습니다. 결제·환불·이용 기간이 달라질 때 실제 콘텐츠 접근 권한도 함께 바뀌도록 구성했습니다.

핵심 구현

  • 결제 성공 주소만 믿지 않고 서버에서 회원·주문·금액·통화·PG 승인 상태를 확인한 뒤 이용 권한에 반영합니다.
  • 승인·환불 작업을 외부 요청 전에 기록하고, 결과가 불명확하면 접근을 보류한 채 상태 조회로 확인하도록 설계했습니다.
  • 주문 항목별 이용 기간과 환불·만료·회수 상태를 판단하며, 영상·PDF 응답에서도 현재 권한을 검사합니다.
  • 이어보기·완료·메모·북마크·질문을 관리합니다. 강사의 수정안 검수 중에는 기존 판매본과 구매자의 이용 조건을 유지합니다.
OtoStay 숙소 예약 서비스 대표 이미지

OtoStay — 숙소 예약 서비스

날짜와 인원에 맞는 객실 탐색부터 예약 운영까지 연결하는 Laravel 서비스입니다.

기술 스택
Laravel · Eloquent · Blade · Vite · Tailwind CSS · Alpine.js

예약·결제 흐름을 소개하는 데모입니다. 기술 설명은 개발 구현 기준이며 공개 서버의 배포 버전과 차이가 있을 수 있습니다. 실제 예약이나 결제는 진행하지 마세요.

데모 사이트 보기
구현 상세 보기접기

제작 목적

날짜와 인원에 맞는 객실 탐색부터 예약 운영까지 연결하는 Laravel 서비스입니다. 검색 화면의 가격뿐 아니라 예약 시점의 잔여 객실·확정 방식·취소 조건을 일관되게 다루는 데 초점을 맞췄습니다. 고객과 숙소 운영자, 관리자의 업무 흐름을 함께 구성했습니다.

핵심 구현

  • 날짜·인원·지역·숙소 유형·가격·편의시설로 객실을 찾고 객실별 수용 인원과 요금, 확정 방식을 보여줍니다.
  • 즉시 확정·승인 대기·결제 대기를 구분하고, 결제 대기 만료 시각을 객실 재고 점유 판단에 사용합니다.
  • 예약 당시 결제 제공자와 정책을 스냅샷·버전으로 남겨 이후 설정 변경과 구분합니다. 토스·Eximbay 연동은 공통 결제 계약으로 분리했습니다.
  • 결제·일반·알림 큐와 스케줄러로 운영 작업을 나누고, 한국어·영어·일본어 공개 화면을 구성했습니다.
마중 입양·임시보호 관리 대표 이미지

마중 — 입양·임시보호 관리

동물 소개 페이지를 입양·임시보호 신청과 심사, 실제 보호·인계 업무로 확장한 서비스입니다.

기술 스택
Rhymix · PHP · MariaDB · Blade · SCSS · Docker

가상 브랜드와 가상 동물로 구성한 데모이며 실제 입양 접수를 운영하지 않습니다. 후원 결제·이메일·문자와 예정일에 따른 자동 보호 종료는 제공하지 않습니다.

데모 사이트 보기
구현 상세 보기접기

제작 목적

동물 소개 페이지를 입양·임시보호 신청과 심사, 실제 보호·인계 업무로 확장한 서비스입니다. Rhymix의 회원·권한 체계를 유지하면서 전용 업무 모듈을 연결했습니다. 신청 승인과 모집 상태, 실제 보호와 인계를 서로 다른 사건으로 관리하도록 구성했습니다.

핵심 구현

  • 브랜드 레이아웃과 업무 모듈을 분리하고, 동물·사진·신청·심사·보호 이력·인계 결과를 데이터로 관리합니다.
  • 접수·검토·상담·승인 여부와 실제 인계를 구분하며, 같은 회원이 같은 동물에 진행할 수 있는 신청을 한 건으로 제한합니다.
  • 신청 당시 질문·답변·동의문을 보존합니다. 입양 인계 시 다른 진행 신청과 기존 임시보호 상태를 함께 정리합니다.
  • 사진은 검사·재인코딩해 EXIF를 제거하고 응답마다 권한을 확인합니다. 탈퇴 시 식별 정보·답변을 정리하며 익명 인계 이력은 보존합니다.
답하다 근거 기반 상담 지원 대표 이미지

답하다 — 근거 기반 상담 지원

상담사가 공공자료에서 근거를 찾고 고객에게 보낼 답변을 준비하도록 돕는 Laravel RAG 시스템입니다.

기술 스택
Laravel · PostgreSQL · Meilisearch · OpenAI · Vite · Tailwind CSS

일반 안내용 데모이며 개별 사건의 법률 판단을 대신하지 않습니다. AI 답변에는 오류가 있을 수 있으므로 원문과 적용 조건을 확인해야 합니다. CS 초안은 발송 전에 담당자가 검토하고 수정하는 구조입니다.

데모 사이트 보기
구현 상세 보기접기

제작 목적

상담사가 공공자료에서 근거를 찾고 고객에게 보낼 답변을 준비하도록 돕는 Laravel RAG 시스템입니다. 한국소비자원 공개 자료를 검색해 출처가 붙은 답변과 편집 가능한 CS 초안을 만듭니다. 자연스러운 문장뿐 아니라 자료의 현재 권한과 인용의 정확성을 확인하는 데 초점을 맞췄습니다. 요청 시 로컬 LLM으로도 구성할 수 있습니다. DGX Spark·Mac Studio·RTX 5080 이상급 고성능 GPU 시스템을 모델과 사용 환경에 맞춰 구성합니다.

핵심 구현

  • 자료 업로드·검증·큐 적재·색인 검증·활성화를 나눠 업로드 성공과 검색 준비 완료를 구분합니다.
  • 키워드·벡터 검색 순위를 결합하고, 검색 결과를 원본 DB에서 다시 읽어 권한·현재 내용·색인 상태를 확인합니다.
  • 출처가 실제 검색 결과에 있는지 확인하고 수치·날짜 주장도 근거와 대조합니다. 검증에 실패한 답변은 성공으로 처리하지 않습니다.
  • 추가 조건·근거 답변·CS 초안·후속 질문을 연결하고 개인정보 마스킹, 사용량·비용 기록, 예산·타임아웃 관리를 적용했습니다.