KT Enterprise 웹 사이트 개선 프로젝트

Categorization 기반 맞춤형 상품 검색 기능 개발

KT 22-3 신입사원 루키캠프 프론트엔드 교육 프로젝트

🎈프로젝트 소개

KT의 B2B 사이트인 KT Enterprise의 고객 이탈률을 낮추고 계약 성사율을 높이기 위해 새로운 프론트엔드 디자인을 고안하고 구현하는 프로젝트입니다.

본 프로젝트에서는 갓 창업을 시작한 젊은 자영업자들을 타겟이자 이해관계자로 설정하고, 이들의 pain-point를 집중공략하는 방향으로 주제를 설정했습니다.

다시 말해, 소상공인이 KT에서 어떤 B2B 상품을 판매하고 있는지 모른다는 것을 가정으로 두고, 본인(소상공인)에게 필요한 서비스를 쉽고 빠르게 찾아낼 수 있도록 맞춤형 상품을 검색해주는 기능을 구현하였습니다.

🎨 Architecture

🎨 ERD

🎈Demo

🎨 흐름도

🎨 페이지 상세 화면

• KT Enterprise 메인 페이지에서 맞춤형 상품 검색을 위해 모달창의 '찾기' 버튼 클릭

• 맞춤형 서비스 탐색을 위한 사전 설문조사 진행

• 설문조사 결과 기반 맞춤형 서비스 추천 리스트
• 각 상품 클릭 시 상세 페이지로 이동

• 상품 상세 페이지
• 왼쪽 ‘맞춤 서비스’ 배너를 통해 다른 맞춤 서비스 상세 페이지로 바로 이동 가능
• 오른쪽 만족도 조사를 통해 서비스 개선사항 수집

🎨 시연영상

🎈Skills

🎈Usage

1. 터미널에 아래 명령어 실행

git clone https://github.com/Jeongeun-s-Kids/RookieCamp-Frontend-Project.git

2. H2 Database 로그인

• 드라이버 클래스: org.h2.Driver
• JDBC URL: jdbc:h2:tcp://localhost/~/test
• 사용자명: sa

3. DemoApplication.java 실행

• 파일 경로: RookieCamp-Frontend-Project/demo/src/main/java/com/example/demo/DemoApplication.java

4. 크롬에서 아래 링크 접속

• http://localhost:9999/enterprise.kt.com/main.jsp.html

🎈Contributor

이름	역할
박정은	디자인 및 프론트
박한나	프론트
송현진	백엔드
정형섭	프론트
천명철	백엔드, PM

🎈Project Directory

RookieCamp-Frontend-Project
└──                                
    ├── demo/src/main/  
    |    ├── resources
    │    │    ├── mybatis-mapper             # MyBatis로 H2 DataBase와 Spring Boot 연결
    │    │    └──  static                    # Frontend 파일
    │    │          ├── enterprise.kt.com    
    │    │          │   └── main.jsp.html    # KT Enterprise 메인 화면 사이트
    │    │          │
    │    │          └── front
    │    │              └── survey_1
    │    │                  └── survey.html  # 맞춤형 상품 검색 survey 창
    │    │
    │    └── java/com/example/demo
    │        │── DemoApplication.java
    │        │── controller                  # API 구현
    │        └── model
    │             ├── dao                    # DB와 연동
    │             ├── service                # 추상화 후 구현
    │             └── vo                     # 객체
    │    
    │ 
    ├── docs                                 # 프로젝트 관련 자료 (이미지 등)
    │ 
    └── project_sql.txt                      # SQL 파일