테크

헥토 그룹 리브랜딩 프로젝트 개발 과정 및 결과

작성자 hectodata 2024.10.23

🚀 프로젝트 소개

저희 헥토데이터가 속해 있는 헥토 그룹에서 이번에 리브랜딩을 통해 새로운 로고와 각 그룹사별 홈페이지 리뉴얼 등 많은 부분을 새롭게 바꾸게 되었습니다. 그에 따라 저희 헥토데이터 서비스개발팀에서는 헥토 그룹사 홈페이지와 헥토데이터의 홈페이지를 새로운 브랜딩 디자인에 맞춰 리뉴얼하는 작업을 하게 되었습니다.

💻 개발 과정

1. 요구사항 분석

초기에 헥토 그룹의 비즈니스 요구사항을 분석하여 사용성 개선에 집중했습니다. 주로 반응형 웹 디자인을 통한 모바일 최적화와, 직관적인 사용자 인터페이스 제공이 주요 요구사항이었습니다. 기존에 있던 홈페이지에서 부분 변경을 하는 것이 아닌 전체적인 페이지를 새로 개발하는 것이었기 때문에 개발에 앞서 요구사항을 최대한 꼼꼼하게 분석하고 개발을 착수했습니다.

2. 설계 및 디자인

디자인 단계에서는 Figma를 사용하여 헥토 그룹의 새로운 브랜드 아이덴티티를 나타내면서도 현대적인 디자인 요소를 반영한 UI/UX를 구체화했습니다. 특히, 사용자가 쉽게 탐색할 수 있도록 간결한 네비게이션 구조와 최신 디자인 트렌드를 반영한 레이아웃에 집중하였습니다. 또한, 사용자 피드백을 반영하여 각 요소의 위치와 크기, 색상 등을 조정했습니다.

3. 기술 스택 선택

프론트엔드 개발에서는 Vue.js를 사용했습니다. Vue.js는 가벼우면서도 컴포넌트 기반으로 개발할 수 있어 빠르고 유연한 개발이 가능했습니다. Pinia를 상태 관리 라이브러리로 사용해 전역 상태를 관리하였으며, Vue Router를 통해 페이지 간의 이동을 손쉽게 처리했습니다. 전체적인 반응형 디자인은 미디어 쿼리를 사용하여 각 모바일 및 태블릿 기기에 맞게 조절하였고, 각종 카드의 스크롤 효과를 위해 swiper 라이브러리를 사용했습니다.

4. 개발

컴포넌트 기반 개발: 우선 디자인을 분석한 후 공통 컴포넌트 제작을 먼저 시작했습니다. Vue.js의 컴포넌트 기반 구조 덕분에 UI 요소들을 모듈화하여 재사용 가능한 컴포넌트로 구축했습니다. 이로 인해 각 페이지에서 중복된 코드 없이 효율적으로 개발할 수 있었고, 헥토 그룹사 홈페이지 개발에 사용된 컴포넌트들을 재활용 해 빠른 시간 내에 헥토데이터 홈페이지까지 개발을 완료할 수 있었습니다.
상태 관리: Pinia를 사용하여 전역 상태를 관리했습니다. Pinia는 간단하면서도 강력한 상태 관리 도구로, 상태 변화가 일관성 있게 유지되도록 도와주었고, 특히 복잡한 데이터 흐름을 처리하는 데 효과적이었습니다.
반응형 웹 디자인: CSS의 모바일 쿼리를 사용하여 다양한 디바이스에서 일관된 UI를 제공하였고, 특히 모바일 환경에서 최적화된 사용자 경험을 구현하는 데 중점을 두었습니다.

💡 결과 및 성과

짧은 기간인 1달 동안의 집중적인 개발 끝에, 우리는 헥토 그룹의 새로운 리브랜딩 웹사이트를 성공적으로 런칭했습니다. 특히, 향상된 로딩 속도와 더 나은 사용자 경험을 제공하면서 긍정적인 피드백을 받았습니다. 모바일 환경에서도 사용자들이 쉽게 탐색할 수 있었고, 개선된 디자인이 헥토 그룹의 브랜드 이미지에 긍정적인 영향을 주었습니다.

헥토 그룹사 홈페이지

헥토데이터 홈페이지

👑 결론

'헥토 그룹 리브랜딩' 프로젝트는 짧은 기간 동안 각자의 맡은 파트를 잘 소화해낸 팀워크와 최신 기술 스택을 통해 성공적인 리브랜딩을 이뤄낸 의미 있는 경험이었습니다. 특히, Pinia를 이용한 상태 관리와 Vue.js 컴포넌트 기반 개발을 통해 빠르고 효율적인 개발이 가능했으며, 앞으로의 프로젝트에서도 이러한 경험을 적극 활용할 계획입니다.

헥토데이터는 데이터 기반 다양한 서비스를 지원하는 기업입니다. 온라인에 분산된 데이터를 실시간으로 제공하기 위해 클라이언트 엔진과 웹 API를 활용합니다. 유수의 비대면 대출 핀테크 서비스가 선택한 헥토데이터의 CODEF API. 꼼꼼한 보안과 빠른 대응으로 기업이 자사 서비스에만 집중할 수 있도록 돕는 CODEF API에 대해 아래 배너를 눌러 확인해 보세요.