SWAGELOK

📄 프로젝트 개요

SWAGELOK KOREA는 Swagelok이 제공하는 다양한 유체 시스템 솔루션을 소개하는 웹사이트입니다.
이 사이트는 유체 시스템에 필요한 부품을 공급하고, 고객에게 다양한 서비스와 솔루션을 제공하며, 유체 시스템 설계 및 유지 관리에 필요한 기술적인 지원을 지원하는 플랫폼입니다.

특히, 산업별 맞춤형 솔루션과 제품 정보를 상세히 제공하여 고객이 자신의 필요에 맞는 제품과 서비스를 찾을 수 있도록 설계되었습니다.

URL : SWAGELOK KOREA

[기간]

2023.06 ~ 2023.10 ( 5개월 )

[목표]

SWAGELOK 구축 및 CMS 개발.

[역할]

HTML 구조 설계 및 CSS 적용, HubL 개발 및 퍼블리셔.

[기여도]

내부 개발팀 총 2명 중 약 50% 기여. ( 퍼블리싱 파트 : 50% )

[활동내용]

CMS 구축에 필요한 HubL 사용 하여, 템플릿 및 구조 설계 및 개발.
HubSpot API 연동 및 CSS 전반 퍼블리셔 업무 진행.
HubDB 사용 DB (Database) 관리 및 사용.

[주요기능]

1. 제품 정보 제공

Swagelok의 다양한 제품군(피팅, 밸브, 튜브 등)의 상세 설명과 기술 문서 제공.
제품 선택 가이드와 사용 사례 안내.

2. 산업별 맞춤 솔루션

화학, 반도체, 석유/가스 등 특정 산업에 최적화된 제품과 서비스 제공.

3. 교육 및 기술 자료

유체 시스템 관련 기술 자료 및 교육 콘텐츠 제공.
PDF 및 동영상 형식으로 접근 가능한 자료 공유.

4. 고객 지원 시스템

실시간 문의와 기술 지원 기능.
현장 서비스 및 상담 요청 페이지 제공.

5. 사용자 친화적 UI

간결한 레이아웃과 반응형 웹 디자인으로 사용자 편의성 강화.

[사용된기술]

1. HubSpot CMS

템플릿 시스템을 통해 사이트 구조를 효율적으로 관리하고, 페이지 및 블로그 콘텐츠 업데이트.
모듈화된 콘텐츠 관리와 디자인 최적화를 통해 개발 속도와 유지 관리.
HubDB 사용 DB (Database) 관리 및 사용.

2. HTML5/CSS3

반응형 웹 디자인: Flexbox 및 Grid 시스템을 활용하여 다양한 화면 크기에 맞춰 디자인을 최적화 했습니다.

3. JavaScript

동적 기능 구현: 사용자 인터랙션(폼 제출, 데이터 로딩)을 위한 비동기 처리.
API 연동: 제품 정보 및 사용자 데이터를 위한 RESTful API 통신 구현.

4. HubL (HubSpot Markup Language)

HubSpot CMS에서의 데이터 바인딩과 템플릿 관리.
마케팅 자동화를 위한 동적 콘텐츠 생성에 사용.

5. SEO 최적화

HubSpot SEO 도구를 활용하여 메타태그, 구조화된 데이터, 키워드 최적화 등을 통해 사이트의 검색 엔진 가시성을 높였습니다.

6. 마케팅 자동화

HubSpot CRM과의 통합을 통해 방문자 데이터를 수집하고, 맞춤형 마케팅 캠페인과 이메일을 자동화.

7. 디자인 툴

Figma: 디자이너와의 협업을 통해 UI/UX 프로토타입 제작.

[성과]

유지보수 2년 계약.
허브스팟 워크플로우 CRM(Customer Relationship Management) “트리거 기반 자동화” 솔루션 적용.

[느낀점]

1. 다양한 고객 지원 시스템 (문의하기 FORM) HubSpot 연동

문제 설명

고객들이 문의 양식을 통해 간편하게 지원 요청을 할 수 있도록 HubSpot과 연동된 시스템을 구축해야 했습니다.
다국어를 지원하며, 입력된 데이터를 CRM에 자동으로 저장하고 적절한 팀원에게 배정하는 기능이 필요했습니다.

해결 방법

HubSpot Forms를 활용하여 다국어 지원 양식을 제작했습니다.
양식 데이터를 HubSpot CRM에 자동 저장 및 고객 관리 워크플로우와 연동하여 실시간으로 팀에 알림이 전달되도록 설정했습니다.
추가적으로, 양식 제출 후 확인 메시지와 리디렉션 페이지를 사용자 친화적으로 설계해 사용자 경험을 개선했습니다.

2. HubSpot Blog List를 Custom Page에 연동