프로젝트 사례
Northline Systems Inc. 웹사이트
온타리오의 T-slot 알루미늄 프로파일 및 플렉스 체인 컨베이어 공급업체를 위한 카탈로그·견적 웹사이트. 방문자가 두 제품군을 둘러보며 부품을 요청 목록에 담고, 도면과 함께 하나의 견적 요청으로 보낼 수 있도록 설계했습니다.
라이브 프로젝트 보기 →개요
Northline Systems Inc.는 두 가지 산업 부품군을 공급합니다. 장비 제작·가드·작업대용 T-slot 알루미늄 프로파일 시스템(프로파일, 커넥터, 체결구, 액세서리)과, 개별 부품부터 완성형 설비까지 제공하는 플렉스 체인 컨베이어 시스템입니다.
이 업종은 장바구니로 구매하지 않습니다. 프로파일은 현장에 맞춰 절단·가공·키트화되고, 컨베이어는 고객의 레이아웃에 맞춰 구성됩니다. 사이트는 이 현실을 그대로 반영해 카탈로그 먼저, 견적은 그다음이라는 흐름으로 설계했습니다.
목표
두 제품군을 나란히 보여주고, 각각의 카탈로그 PDF를 바로 다운로드할 수 있게 제공
모든 부품을 품번·사양·카탈로그 페이지와 함께 찾을 수 있게 구성
둘러보면서 부품을 담고, 하나의 요청으로 보낼 수 있는 흐름
정확한 견적을 위해 도면·CAD 파일을 요청과 함께 첨부 가능
어느 페이지에서든 연락처와 견적 폼까지 한 번에 이동
정보 구조(IA)
Home: 히어로, 두 제품군 비교, 3단계 "주문 방식" 안내, 마무리 CTA
T-Slot Extrusion / Flex Conveyor: 고객 카피 덱을 따른 제품군 페이지(소개, 제품 범위, 공급 옵션, 카탈로그)
Components: 제품군별 전체 부품 목록(카테고리 필터)과 부품별 상세 페이지
About: 회사 소개와 시설
Contact: 요청 목록, 견적 폼, 연락처, 지도를 한 페이지에
모든 "Request a quote" 버튼은 같은 폼으로 연결되어 전환 경로가 하나로 모입니다.
핵심 UX 결정
1) 장바구니처럼 동작하지만 장바구니가 아닌 "요청 목록"
방문자는 둘러보면서 수량과 함께 부품을 담습니다. 헤더에 개수가 표시되고, 수량 변경·삭제가 가능하며, 다음 방문 때 목록이 복원됩니다. 가격도 결제도 없기 때문에 의도적으로 "장바구니"라는 표현을 쓰지 않았습니다.
2) 도면을 첨부한 하나의 요청
견적 폼을 열면 요청 목록이 자동으로 첨부됩니다. 치수, 도면, CAD 파일을 추가하면 엔지니어가 구성을 확인한 뒤 견적을 보냅니다.
3) 카탈로그 PDF를 전면에
각 제품군은 페이지 수와 파일 크기를 표시한 카탈로그를 바로 내려받을 수 있게 해, PDF를 선호하는 엔지니어가 웹 카탈로그를 거치지 않아도 되도록 했습니다.
4) 타이포그래피 중심의 산업형 아이덴티티
굵고 넓은 NORTHLINE 워드마크 아래 붉은 라인을 전폭으로 두고, 파비콘용 정사각 N 마크를 함께 만들었습니다. 히어로는 블루프린트 그리드와 제품 사진을 조합해 소매가 아닌 엔지니어링 회사라는 인상을 줍니다.
운영 측면에서 달라진 점
빠르고 안정적인 페이지: 모든 페이지를 미리 만들어 두고 방문자와 가까운 글로벌 네트워크에서 제공하며, 잘못 입력한 주소에는 깨진 화면 대신 정상적인 "페이지 없음" 안내가 나옵니다.
사라지지 않는 요청 목록: 구매 담당자가 담은 부품은 요청을 보낼 때까지 본인 기기에 저장되어, 나갔다가 나중에 다시 와도 그대로 남아 있습니다.
요청마다 자동 회신: 견적 요청이 들어오면 담당자에게 알림이 가고, 고객에게는 확인 메일이 동시에 발송됩니다.
스팸 없는 문의함: 모든 제출을 담당자에게 전달하기 전에 봇 여부를 확인하므로, 실제 문의만 처리하면 됩니다.
코드 수정 없는 카탈로그 교체: 임시로 넣어 둔 부품, 사진, PDF를 사이트 코드를 고치지 않고 실제 자료로 바꿀 수 있습니다.
이 프로젝트가 보여주는 역량
산업 구매자의 실제 주문 방식(탐색 → 목록 → 도면 첨부 → 견적)에 맞춘 B2B 흐름 설계
견적 전용 비즈니스를 위한 장바구니형 경험 구현
부품·사진·PDF를 코드 수정 없이 교체할 수 있는 카탈로그 데이터 모델
Live: https://northlinesystemsinc.servith.workers.dev/
Role: Solo delivery (IA → brand → UI → request list → quote ops)
