YUJIN ROBOT

📄 프로젝트 개요

YUJIN ROBOT은 산업별 로봇 솔루션을 통해 물류, 제조, 헬스케어 등 여러 분야에서 효율성을 극대화합니다.
Yujin Robot은 AI, 자율주행 기술, 로봇 자동화를 결합하여 혁신적인 스마트 팩토리 환경을 구축합니다. Yujin Robot의 로봇 기술을 홍보하고, 제품에 대한 정보를 제공하기 위해 설계되었습니다.

URL : YUJIN ROBOT

[기간]

2023.01 ~ 2023.06 ( 6개월 )

[목표]

YUJIN ROBOT 구축 및 CMS 개발.

[역할]

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

[기여도]

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

[활동내용]

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

[주요기능]

1. CMS 기반 콘텐츠 관리

HubSpot CMS를 활용하여 다양한 콘텐츠(제품, 기술, 블로그 등)를 쉽게 관리하고 업데이트할 수 있도록 구성되었습니다.
템플릿 시스템을 통해 일관된 디자인과 구조를 유지하면서 빠르게 새로운 페이지를 추가할 수 있습니다.

2. 블로그 및 콘텐츠 마케팅

HubSpot의 블로그 기능을 활용하여 최신 뉴스, 기술 혁신, 제품 업데이트 등 다양한 정보를 제공합니다.
SEO 최적화와 블로그 템플릿을 사용해 검색 엔진에서 가시성을 높이고, 정기적인 콘텐츠 업데이트로 방문자와의 지속적인 연결을 유지합니다.

3. 양방향 고객 피드백 시스템

문의 양식과 상담 요청 버튼을 배치하여, 방문자가 쉽게 연락할 수 있도록 유도 하였습니다.
HubSpot의 폼 툴과 자동화된 이메일 응답 시스템을 사용해 고객 응대를 자동화하고, 효율적으로 관리할 수 있습니다.

4. 웹사이트 네비게이션

메인 네비게이션: 주요 섹션인 제품, 기술, 회사 소개 등을 포함하여 각 페이지 간 이동이 용이합니다.
하위 메뉴 및 다국어 지원: 한국어와 영어로 된 다국어 사이트를 제공하며, 각 페이지마다 기술적 내용과 제품 정보가 명확하게 구분됩니다.

[사용된기술]

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. OAuth 2.0 인증

HubSpot 로그인 API를 사용하여 OAuth 2.0 인증 방식을 통해 안전하게 사용자 정보를 관리.
로그인 후 회원 대시보드와 같은 개인화된 페이지를 제공하여, 사용자에게 최적화된 정보를 표시.

8. 디자인 툴

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

[성과]

유지보수 1년 계약.

[느낀점]

1. HubSpot Content List 활용 Private Page 연동

문제 설명

HubSpot에서는 기본적으로 모든 콘텐츠가 공개되어 있기 때문에
Private Page를 만들고, 사용자의 로그인 여부에 따라 접근을 제한하는 기능을 구현하는 데 어려움이 있었습니다.
특히, Content List와 회원 관리 시스템을 연동하여 사용자의 개인화된 페이지를 제공하는 데 어려움이 있었습니다.

해결 방법

이를 해결하기 위해 HubSpot의 Content List 기능을 활용하여 특정 콘텐츠를 로그인한 사용자만 볼 수 있도록 설정했습니다.
이와 함께, HubSpot CMS의 회원 관리 API와 연동하여 사용자가 로그인한 경우에만 해당 콘텐츠가 표시되도록 했습니다.
또한, 템플릿 조건문을 사용하여 개인화된 페이지와 대시보드를 제공하는 방식으로 접근 제한을 구현했습니다.

2. HubSpot HTML Template HUBL 사용