3D 도면 쇼핑몰 제작

구매 화면

검색창

기타 자세한 것도 보여드리고 싶지만 나중에는 파이어베이스로 만들어서 보여주는게 좋을 것 같아요.

깃에서는 디비가 따로 지원이 안되더라구요..

로그인 / 회원가입 / 회원탈퇴 / 다운로드 등을 만들었습니다 !

 

총 5명의 팀이었고, 제가 맡은 부분은 위의 화면들 및 따로 게시물로 올린 슬라이드 대문화면을 만들었습니다 !

 

테스팅 환경 :

• Chrome v77.0.3865.90(공식 빌드) (64비트)

- 해상도

PC      1920*1080

 

개발 환경 사양 :

• HTML5
• CSS3
• PHP v7.1
• JS(jQuery) 
• mysqlnd 5.0.12

 

작업 방식 :

• 데이터 베이스 설계자 1명, 웹 개발자 2명, 프로젝트 매니저 1명이 진행.
• 프로젝트 매니저의 설계의도에 따라 웹 개발자들이 각각의 프로젝트들을 진행함.
• 데이터 베이스 설계자는 데이터 베이스를 설계하며 필요 쿼리문을 웹 개발자에게 전달.

개발 기간 : 

• 화면 디자인 4d
• 화면 구성 및 배치 2d
• 데이터 베이스 설계 1d
• 백엔드 3d

○ 프로젝트 소개

3D 프린터 도면을 판매하는 가상의 플랫폼입니다 본 플랫폼은 회원 인증을 거친 후 가상의 화폐를 사용하여 도면을 구매한 내역이 있을 경우 도면을 다운 받을 수 있는 시스템을 가진 플랫폼 입니다.

 

○ 프로젝트 수행 팀원

데이터 베이스 설계자, 개발자 2명(본인), 디자이너 2명(본인)

 

○ 본인의 역할

- 디자인 설계

페이지의 전체적인 레이아웃과 구도를 어떠한 형식으로 표현할 것인지 Adobe CS6로 초안을 제작하여 팀원들과 회의를 진행하여 컨펌을 받고 개발에 착수하였습니다.

- 회원가입 페이지

회원가입에는 가입 시 비밀번호 및 아이디 찾기를 위한 아이디 / 비밀번호 질문 및 아이디, 비밀번호 등이 필요하며 아이디 값을 데이터베이스에서 조회하여 중복이 있는지를 판별하도록 개발하였습니다.

- 로그인 페이지

일반적인 로그인 형태이며 아이디를 데이터베이스에 조회하며 비밀번호 값이 일치하는지 확인 후 세션에 등록하여 로그인 절차를 거쳤는지 인증하도록 설계하였습니다.

- 그리드 형식 BBS

도면을 그저 텍스트형태로 띄우게 된다면 UI가 좋지 않을 것으로 판단하여, 직관적으로 어떠한 도면인지 파악할 수 있는 썸네일을 그리드 형식으로 개발하였습니다.

- 파일 업로드 / 다운로드

세션에 회원이 등록되어 있을 경우, 다운로드 권한이 주어집니다 잔여 가상 현금에 따라 구매를 진행할 경우 회원의 금액을 차감합니다.

 

○ 프로젝트 진행 방식

주 간 2회씩 회의를 진행하는 방식, 온라인 SNS로 실시간 소통하며 프로젝트를 진행하였습니다 각 파트의 이슈를 서로 이야기하며 디자이너의 초안을 바탕으로 개발자는 프론트 엔드를 개발하였고 컨펌을 받은 작업물의 기능을 보완하여 프로젝트를 완성시켜나갔습니다.

 

○ 테스팅 브라우저

Chrome v77.0.3865.90(공식 빌드) (64비트)