포트폴리오

회원전용 서비스 입니다.

태성콘텍 충전서비스 웹사이트 구축

(주)태성콘텍

#제조, #웹

(주)태성콘텍

한눈에 보기

전기차 충전기 설치를 신청하고 충전 요금을 확인하는 서비스 홈페이지를 만들었습니다.

누가 쓰나요

전기차 충전기 설치를 알아보는 사람, 충전 요금을 확인하려는 이용자

뭐가 불편했나요

설치 신청과 요금 안내를 전화로만 처리하다 보니 같은 문의가 반복됐습니다.

어떻게 해결했나요

설치 신청 양식과 요금 안내를 홈페이지에 넣고 찾기 쉬운 자리에 배치했습니다. 어느 기기에서도 화면이 맞게 바뀝니다.

그래서 어떻게 됐나요

전화하지 않고도 홈페이지에서 바로 신청하고 요금을 확인하게 됐습니다.

● 포트폴리오 소개

이번 프로젝트는 전기차 충전기 서비스를 제공하는 (주)태성콘텍의 웹 페이지를 퍼블리싱한 사례입니다. 이 웹 사이트는 사용자 친화적인 인터페이스와 다양한 기기에서의 접근성을 보장하기 위해 반응형 디자인을 구현하는 데 중점을 두었습니다. 이를 통해 사용자 경험을 극대화하고, 모든 디바이스에서 최적의 화면을 제공하는 웹 사이트를 완성했습니다. 특히, 전기차 충전기 서비스의 특성을 고려하여 사용자가 쉽게 충전기 설치를 신청하고, 충전요금을 확인할 수 있도록 직관적인 UI/UX를 설계했습니다.

● 작업 범위

이번 프로젝트의 작업 범위는 기획 및 설계, 퍼블리싱, 반응형 디자인, AJAX 통신 적용, 단위 테스트 및 3자 테스트 등 웹 사이트 구축의 모든 단계를 포괄합니다.

  • 기획 및 설계: 사용자 경험(UX)과 사용자 인터페이스(UI)를 중점으로 하여 웹 사이트의 전반적인 구조와 디자인을 기획하고 설계했습니다. 특히, 사용자 흐름을 분석하여 주요 기능들을 쉽게 접근할 수 있도록 배치했습니다.
  • 퍼블리싱: HTML, CSS, JavaScript를 사용하여 웹 페이지를 퍼블리싱했습니다. 깔끔한 코드 작성과 구조적인 웹 페이지를 위해 노력했으며, 코드의 재사용성과 유지보수성을 고려하여 작성했습니다.
  • 반응형 디자인: 데스크탑, 태블릿, 모바일 등 다양한 디바이스에서 최적의 레이아웃과 스타일을 제공하기 위해 반응형 디자인을 구현했습니다. 이를 통해 사용자들은 어떤 기기에서든 최적화된 화면을 경험할 수 있습니다.
  • AJAX 통신: 비동기 데이터 바인딩 및 서버와의 원활한 데이터 전송을 위해 AJAX를 적용했습니다. 이를 통해 빠르고 효율적인 데이터 처리가 가능하도록 했습니다.
  • 테스팅: 크로스 브라우저 및 크로스 디바이스 테스팅을 통해 모든 환경에서의 정상 동작을 확인했습니다. 다양한 브라우저와 디바이스에서 일관된 사용자 경험을 제공하기 위해 철저한 테스트를 진행했습니다.

● 주요 기능

  • 메인: 서비스의 특장점을 소개하고, 충전기 설치 신청, 충전요금 소개, 파트너사 소개 등을 통해 사용자들에게 필요한 정보를 한눈에 제공합니다. 특히, 충전기 설치 신청 부분은 사용자들이 쉽게 접근할 수 있도록 직관적으로 설계되었습니다.
  • 비즈니스: 태성콘텍의 서비스 및 회사에 대한 상세한 소개를 제공합니다. 이를 통해 사용자들은 회사의 비즈니스 영역과 성과를 쉽게 이해할 수 있습니다.
  • 제품: 다양한 충전기 종류별로 상세한 소개를 제공하여, 고객들이 필요한 제품 정보를 쉽게 찾을 수 있도록 했습니다. 각 제품의 특장점과 기술 사양을 명확히 제시하여 선택의 폭을 넓혔습니다.
  • 고객지원: AJAX를 사용하여 실시간으로 충전기 설치 신청을 할 수 있는 기능을 포함하여 사용자 편의를 극대화했습니다. 공지사항, 온라인 문의, 오시는 길 등 고객 지원에 필요한 정보를 제공하여 사용자들이 필요한 도움을 받을 수 있도록 했습니다.
  • FAQ, Q&A: 실시간 데이터 바인딩을 통해 자주 묻는 질문과 답변을 제공하고, 사용자가 직접 문의를 등록할 수 있는 기능을 구현했습니다. 이를 통해 사용자들이 궁금한 사항을 빠르게 해결할 수 있도록 했습니다.

● 사용 기술

  1. 프론트엔드: HTML5, CSS3, JavaScript, jQuery를 사용하여 웹 페이지의 구조와 스타일을 구현했습니다. 이들 기술을 사용하여 인터랙티브한 요소와 동적 기능을 구현했습니다.
  2. AJAX: 비동기 데이터 전송 및 업데이트를 위해 AJAX를 사용했습니다. 이를 통해 페이지 리로드 없이도 실시간으로 데이터를 주고받을 수 있도록 했습니다.
  3. 기타 도구: Git을 사용하여 버전 관리를 했습니다. Git을 통해 코드의 변경 사항을 추적하고, 협업을 원활히 진행할 수 있었습니다. 또한, 브랜치를 활용하여 여러 기능을 동시에 개발하고 테스트할 수 있었습니다.

이번 (주)태성콘텍 충전서비스 웹사이트 구축 프로젝트는 사용자 중심의 웹 페이지를 만들기 위해 다양한 기술과 방법을 적용했습니다. 반응형 디자인을 통해 모든 디바이스에서 최적의 사용자 경험을 제공하며, AJAX 통신을 통해 빠르고 효율적인 데이터 처리를 구현했습니다. 크로스 브라우저 및 크로스 디바이스 테스팅을 통해 모든 환경에서 정상적으로 동작하는 웹 사이트를 완성했습니다. 이 프로젝트를 통해 전기차 충전기 서비스 제공사인 (주)태성콘텍의 온라인 존재감을 강화하고, 사용자들에게 더 나은 서비스와 정보를 제공할 수 있었습니다.

  • 2024.03~2024.05
  • (주)태성콘텍