MIDAS BANDITONG

📄 프로젝트 개요

MIDAS BANDI-TONG은 MIDAS IT에서 운영하는 “반디통” 플랫폼으로, 주로 CAE(Computer-Aided Engineering) 관련 지식과 자원을 공유하는 데 초점을 맞추고 있습니다.
이 플랫폼은 대한민국의 중소·중견 기업들이 설계 및 해석 기술력을 강화할 수 있도록 다양한 자료를 제공하기 위해 설계되었습니다.

URL : MIDAS BANDITONG

[기간]

2022.06 ~ 2022.12 ( 7개월 )

[목표]

MIDAS BANDI-TONG 구축 및 CMS 개발.

[역할]

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

[기여도]

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

[활동내용]

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

[주요기능]

1. 세미나통

국내외 저명한 전문가들의 세미나를 통해 최신 기술과 트렌드를 학습할 수 있습니다.

2. 해석지식통

실무에서 바로 적용할 수 있는 해석 기술과 보고서 기반의 학습 자료를 제공합니다.

3. 기술용어통

설계와 해석에 필요한 기술 용어와 기초 자료를 체계적으로 정리하여 제공합니다.

[사용된기술]

1. HTML5

구조와 시맨틱 마크업.

2. CSS3

반응형 웹 디자인: Flexbox와 Grid를 활용해 다양한 기기에서 일관된 사용자 경험 제공.
디자인 일관성: 커스텀 스타일과 애니메이션을 통해 고급스럽고 전문적인 UI 구현.

3. JavaScript

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

4. HubL (HubSpot Markup Language)

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

5. HubSpot CMS

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

6. 디자인 툴

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

[성과]

유지보수 3년 계약.

[느낀점]

1. HubSpot 카테고리 HubDB 연동

문제 설명

HubSpot의 HubDB를 사용하여 동적 카테고리 목록을 생성하려고 했을 때, 카테고리 데이터의 구조화와 연동 과정에서 어려움이 있었습니다.
특히, 다중 레벨 카테고리를 관리하고 이를 UI에서 동적으로 렌더링하는 데 있어 제한이 있었습니다. HubDB의 데이터는 기본적으로 관계형 데이터베이스처럼 복잡한 참조 구조를 처리하는 데 부족한 점이 있었습니다.

해결 방법

카테고리 데이터를 중첩 배열 형태로 저장하여, 각 카테고리의 하위 항목을 동적으로 처리할 수 있도록 설계했습니다.
HubDB에서 데이터를 API로 호출하여, 동적으로 업데이트된 카테고리 목록을 HubSpot 모듈에 바인딩하여 렌더링할 수 있도록 구현했습니다.
데이터가 변경되면 UI에 즉시 반영되도록 자동 리렌더링 기능을 추가해 사용자 경험을 개선했습니다. 이 방식으로 복잡한 카테고리 구조를 효과적으로 처리할 수 있었습니다.

2. 페이지와 블로그 템플릿의 차이점