← 프로젝트 목록으로

개인개발진행

ServiceOn HomePage

사이트 열기

ERP 20년, 이제 Shopify까지. 쇼핑몰과 업무 시스템을 연결하는 개발자 소개

대표 이미지
대표 이미지

소개

ServiceOn 홈은 회사를 소개하고, 무료 진단 메일로 대화를 시작하게 하는 한 장짜리 사이트입니다.

처음에 페이지는 세로로 긴 섹션이었습니다. 히어로, 소개, 하는 일, 사례, FAQ, 연락이 차례로 내려갔습니다. 메뉴도 많았습니다.

다 정리 후 남는 일은 세 가지뿐입니다. 쇼핑몰과 시스템을 연결하는 연동 자동화, 필요한 화면을 만드는 시스템·유틸 개발, 이미 있는 시스템을 고치고 이어 가는 유지·개선.

워드마크는 블로그와 같은 SERVICE⏻N입니다. 사이트 이름은 ServiceOn입니다. 도메인은 serviceon.kr입니다. ServiceOn — Your service is ON. 긴 설명은 설득이 아니라 스크롤이 됩니다. 방문자는 카드 일곱 장을 넘기며 “내가 맡길 일이 여기 있는지”만 확인하고, 버튼을 누르면 적을 칸이 채워진 메일이 열립니다.

흐름 요약

방문 흐름은 카드 일곱 장에 맞춰져 있습니다. 스크롤하면 이전 카드가 뒤로 눕고, 다음 카드가 그 위에 쌓입니다.

  1. 시작 — 누구인지, 무엇을 붙이는지, 무료 진단

  2. 사라지는 일 — 주문 이기기, 재고 알림, 고객 안내, 전표, 관리 화면

  3. 하는 일 — 연동 자동화 / 시스템·유틸 개발 / 유지·개선

  4. 붙이는 것 — Shopify·카페24·스마트스토어·쿠팡, 그리고 지금 쓰는 ERP·시트·회계·알림

  5. 사례 — 진행 중 연동, 완료한 외주 시스템, 운영 중인 블로그

  6. 진행·케어 — 진단 → 범위·견적 → 개발 → 인수인계, 월 케어와 단기 자문

  7. 문의 — 메일 템플릿, 주소, 블로그 링크, 핵심 FAQ

사용자는 사이트를 읽고 메일만 보내면 됩니다. 견적과 범위는 메일 이후에 문서로 맞춥니다.

기능

웹페이지 - 카드 스택

풀스크린 파스텔 카드 7장. 레퍼런스는 Osmo Stacking Cards 3D(CSS only)입니다.

각 행은 100svh, 카드는 sticky로 고정됩니다. 다음 카드가 올라오면 이전 카드가 뒤로 눕고 어두워집니다(CSS Scroll-driven Animation, JS 없음). 마지막 카드는 눕지 않습니다. Firefox와 prefers-reduced-motion에서는 기울임 없이 쌓이기만 합니다. 카드마다 크림·피치·세이지·스카이·샌드·라벤더·나이트 톤이 다릅니다. 상단 메뉴는 없습니다. 떠 있는 워드마크, 무료 진단 버튼, 데스크톱 우측 점 인덱스, 모바일 n/7 카운터만 남겼습니다.

사용기술

  • Node.js 22
  • TypeScript 5
  • React 19
  • Vite 6