🗒️ 주제 : 현대자동차 온라인 쇼핑몰
🎯 목적 : 제네시스 공식 사이트 보다 빠른 국내 오토 커머스(Auto-commerce) 웹사이트 개발
👥 팀명 : Hyundai-morgans Genisisuyeon (현대모건스 제니시수연)
🗓️ 개발기간 : 7/29 ~ 08/28
🔗 실행 링크: https://hyundai-morgans.vercel.app/
🔒 테스트 계정(ID): test@market.com
🔑 테스트 계정(PW): 11111111
| Frontend | Backend | Config | Environment | Communication |
|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
 |
 |
 |
||
 |
 |
|||
 |
제니시수 프로젝트는 국내 유일 프리미엄 자동차 브랜드 GENESIS 데이터를 기반으로 제공되는 오토커머스(auto-commerce) 웹 서비스입니다.
코로나 팬더믹 이후 Tesla, BMW를 주축으로 차량 판매 시장이 변화하고 있으며, 온라인 판매 성과도 매년 상승하고 있습니다. 테슬라코리아 판매 추이만 보더라도 국내 소비자이 점차 온라인 자동차 판매 적응해 나가는 있는 것을 보입니다. 이러한 오토커머스 시장에서 '현대자동차가 제네시스 온라인 판매를 개시한다면 이런 서비스가 될 것이다'라는 가정에서 기획하고 개발하게 되었습니다.
핵심 개발 기능으로는 자동차 구매와 다양한 옵션 선택 그리고 전시시승 신청 및 게시판 기능입니다. 현대모건스 제니시수연은 Next.js 프레임워크를 사용하여 웹 사이트의 로딩 시간을 최소화하여 사용자 경험 향상에 주력했습니다.
1주차 | 메인 페이지 퍼블리싱, 메인 페이지 디자인, 기획 및 개발환경 세팅, 데이터 DB화
2주차 | 메인 페이지 퍼블리싱, 핵심 페이지 퍼블리싱, 데이터 DB화, 상품 목록
3주차 | 기술면접, 연휴, 메인 페이지 인터렉션, 결제, 주문, 전시시승 게시판, 상세 및 댓글, 게시판, 게시글 작성
4주차 | 404, 페이지별 스타일 통일, QnA 게시판 상세 및 댓글, 게시판, 게시글 작성, 이벤트 게시판 상세 및 댓글, 게시판, 게시글 작성, 각 페이지 최적화 작업
5주차 | README 작성하고 꾸미기, 발표 자료 만들기, 발표
| 페이지 플로우 |
|---|
 |
| 와이어 프레임을 만들기 전 기초단계 수립을 위하여 개발 전 GNB 기준으로 페이지 구성을 나누어 전체 페이지 이동 환경을 구축했습니다. 한 눈에 페이지 흐름을 보기 위하여 선택한 방법입니다. |
| 피그마 환경구성 |
|---|
 |
| https://weniv.link/C_rKwn |
| 페이지플로우, 와이어프레임, 디자인 시안작업을 위한 협업UI툴로 Figma를 선택하여 쉽고 빠르게 화면 관련 작업을 진행할 수 있도록 진행하였습니다. |
| 메인 | 메인_캐러셀 |
|---|---|
 |
 |
| 상품 목록 | 상품 상세_360View |
|---|---|
 |
 |
| 상품 상세_미리보기 | 옵션 선택 |
|---|---|
 |
 |
| 결제 | 전시시승 신청 |
|---|---|
 |
 |
| 고객지원 게시판 | 공지사항 상세 |
|---|---|
 |
 |
| 로그인 | 회원가입 |
|---|---|
 |
 |
| 사이트 맵 | 에러 |
|---|---|
 |
 |
- feature / dev / main 세가지 이슈를 이용한 Github-Flow 전략을 이용한 이슈관리를 진행했습니다. 세부적으로 Label로 해시태그를 생성하여 이슈 및 PR 가독성을 살리게 되었고 Milestone, Project 단계로 이어지는 큰 단위의 프로젝트 관리를 진행했습니다.
- Github-Flow의 기본적인 흐름을 소개드리자면 다음과 같습니다
- 원본 레포지토리를 Fork 해서 가져오거나 Clone해서 각자의 로컬 레포지토리로 가져옵니다.
- 이슈를 생성합니다.
- 생성한 이슈번호를 토대로 feature/#{이슈번호} 브랜치를 각자의 로컬 환경에서 생성합니다.
- 이슈에 해당되는 개발코드를 완성한 후 원본 레포지토리로 Pull Request를 생성 후 팀원들과 조율 후에 원본 레포지토리의 'dev' 브랜치로 merge작업을 진행합니다.
- 계속 개발이슈 및 개발용 배포용 코드는 원본의 'dev'브랜치로 계속 merge작업을 진행하다 실 배포는 지금까지의 dev 브랜치에 쌓아둔 커밋들을 'main'브랜치로 이전하여 새롭게 배포를 진행합니다
- 이후 dev, main 브랜치를 관리하며 개발, 실배포 환경에서의 작업을 진행합니다.
⭐ 메인 페이지
- 프로모션 영상, 판매 모델, 공지시항 등을 보여주는 캐러셀 기능
⭐ 차량 옵션 선택
- 13종 차량을 8가지 옵션으로 나만의 제네시스 구성 가능
⭐ 자동차 결제
- Playground SDK 결제 모듈 적용
⭐ 게시판
- 전시시승, 공지사항, QnA 게시판 제공
- 오프라인 차량 전시장 방문 신청 기능
- 차량 관련 공지사항이나 관련 서비스에 대한 질문 작성 기능
- 메인 페이지 Data Fetching 개선
- 옵션 선택 기능 추가 개발
- 게시판 개선
- 게스트 작성 및 수정
- 스타일 개선
- 반응형 웹 구현
- 로그인/회원가입
- 기능 개선, 현대맵버스 로그인 기능
- 계정 권한별 기능 제한
- 애니메이션 인터렉션 추가
- 데이터 시각화
끈질기게 도전하는 3명의 프론트엔드 개발자로 이루어진 “현대모건스 - 제니시수연”팀입니다.
모건 - 상품 목록 및 옵션 선택
수연 - 전시시승 신청, 고객지원, 공지사항 게시판
재준 - 메인 페이지, 주문 결제, 퍼블리싱
김모건
이수연
자기소개 때 꼴지로 들어왔지만 가장 많은 폭의 성장을 해서 나가겠다고 다짐한 것을 지키고 나가는 것 같아서 뿌듯합니다.