원목 맞춤제작 견적 의뢰서 페이지 구축 새 디자인

원목 맞춤제작 견적 의뢰서 페이지 구축

 

개발 첫 단추로써, 대략 어떤 형태가 되어야 할 지 다시 그려봤다. (Google Sheets로.)

 

맞춤제작 견적 의뢰서 페이지, 대략적인 시안 by 23-07-19 이미모든

 

HTML, CSS, JavaScript, 여러 API를 활용해서 되도록 빠르게 빌드하고,

주석을 충분히 많이 달도록 해서, 계속적인 학습이 이뤄지도록 한다.

 

각 요소별 동작방식을 간단히 시뮬레이팅해보면 이렇다.

 

• 로고와 타이틀은 사용자에 의해 삭제 및 교체 가능하게 만든다. 타이틀은 다른 이름을 입력할 수 있게 하되 삭제는 불가능하게.
• 의뢰자 / 받을 주소 / 이메일 / 전화번호는 '데이트 유효성 검사'를 적용.
• 아이템 종류는 팝업창의 '트리뷰' 형태로 선택 가하도록.
• 원하는 스타일은 슬라이드뷰 방식을 통해 선택 가능하도록. (각 스타일별 대표 이미지와 간단한 설명이 들어간 카드 레이아웃을 만들어야 함.)
• 한계 예산액은 '드롭다운 메뉴'로. (미정, 15만 원 이하 30만 원 이하, 50만 원 이하, 60만 원 이하, 70만 원 이하, 80만 원 이하, 90만 원 이하, 100만 원 이하, 125만 원 이하, 150만원 이하, 175만 원 이하, 200만 원 이하, 250만 원 이하, 300만 원 이하, 400만 원 이하, 500만 원 이하, 700만 원 이하, 1000만 원 이하)
• 요청 D-day는 캘린더 API로 구현.

그리고

• 의뢰서 미리보기에는 '인쇄' 기능과 '저장' 버튼이 포함되어야 함. (5분 단위로 자동저장 작동하도록 한다. 저장 위치는 사용자의 클라우드에? 구글? 네이버?)
• 의뢰서 보내기는 이메일을 통해 나(작업자, 말하는나무 팀원)에게 송달되도록. (알림 기능 필수)
• 방문예약도 캘린더 API를 통해 구현하고, 작업자가 'OK'를 해야 성사 (알림 기능 및 리스폰스 기능 필수)
• 작가와의 채팅 기능은 코린이가 할 수 있는 일이 아니기에, API를 활용하여 하단에 덧붙임.

---

디자인 요청사항 입력 부분이 난해할 것인데,

계획은 거창하지만, 이중에 절반만 성취되어도 아직은 상관 없다.

일단 걱정스러운 것은 정식의 서버 없이 공유될 이 파일(페이지)에 고용량 파일을 업로드할 경우 발생할 지도 모를 난항..

 

HTML, 바닐라 JavaScript, 그리고 몇 가지 API를 활용하여 웹을 통해 손님이 맞춤가구를 주문할 수 있는 "맞춤제작 견적 의뢰서" 페이지를 구축하려고 한다. 이 의뢰서는 작은 규모이기 때문에 정식으로 호스팅 서비스를 통하지 않고, 그냥 Github 같은 곳을 통해 릴리즈하거나 공유하려고 한다. 이 의뢰서 페이지는 사용자(의뢰자)가 자신이 원하는 디자인에 대해 콤멘트를 삽입-편집할 수 있는 입력 공간이 있는데, 여기에 비디오 파일이나 3D모델 파일도 첨부할 수 있도록 만들려고 한다. 의뢰서가 작성완료되면 의뢰자는 해당 페이지를 '이메일'로 송달할 수 있다. 이런 기획은 용량 압박의 산을 넘어서, 실현 가능하니?

 

Bard

네,

HTML, 바닐라 JavaScript, 그리고 몇 가지 API를 활용하여 웹을 통해 손님이 맞춤가구를 주문할 수 있는 "맞춤제작 견적 의뢰서" 페이지를 구축하는 것은 가능합니다. 다음은 몇 가지 팁입니다.

 

• 의뢰서 페이지의 크기를 최소화합니다.
• 비디오 파일과 3D모델 파일은 압축하여 저장합니다.
• 의뢰서 페이지를 배포하기 전에 용량을 테스트합니다.
• 용량이 초과하는 경우, 호스팅 서비스를 사용합니다.

 

이러한 팁을 따르면 용량 압박을 줄이고, "맞춤제작 견적 의뢰서" 페이지를 성공적으로 구축할 수 있습니다.

 

 

chatGTP

이러한 기획은 실현 가능합니다.

아래는 각 요소를 구현하기 위해 사용할 수 있는 도구와 기술입니다:

 

1. HTML: 웹 페이지 구조를 작성하기 위해 HTML을 사용합니다. 사용자의 입력 폼, 콤멘트 박스, 파일 첨부 등을 HTML 요소로 구현할 수 있습니다.
2. 바닐라 JavaScript: 페이지의 동적 기능 및 사용자와의 상호작용을 구현하기 위해 JavaScript를 사용합니다. 사용자 입력의 유효성 검사, 콤멘트 편집 기능, 파일 업로드 등을 JavaScript를 통해 구현할 수 있습니다.
3. File API: JavaScript의 File API를 사용하여 사용자가 비디오 파일이나 3D 모델 파일을 선택하고 업로드할 수 있도록 할 수 있습니다. File API는 파일 선택, 파일 업로드, 파일 정보 읽기 등의 기능을 제공합니다.
4. 이메일 송신 기능: JavaScript에서 이메일을 보내기 위해 Node.js와 nodemailer와 같은 패키지를 사용할 수 있습니다. 이를 통해 작성된 의뢰서 페이지를 의뢰자에게 이메일로 송달할 수 있습니다.
5. GitHub Pages: 작은 규모의 웹 페이지를 호스팅하기 위해 GitHub Pages를 사용할 수 있습니다. GitHub Pages는 GitHub 저장소에 정적 파일을 호스팅하고 공유하는 데 사용되며, 간단한 웹 페이지 배포에 적합합니다.

 

요약하자면, 제시된 기획은 실현 가능하며 HTML, 바닐라 JavaScript, File API, 이메일 송신 기능, 그리고 GitHub Pages와 같은 도구와 기술을 사용하여 구현할 수 있습니다. 용량의 산이나 제약사항이 있을 수 있으므로 파일 업로드와 이메일 송신 기능의 용량 및 서버 제한을 고려해야 합니다.

---

욕심

I/O 구역 안에 CSS Grid로 생성된 Grid-System을 내장하는 것. (이 그리드 시스템이 페이지의 각 컨텐츠(요소)의 위치정보의 기준이 되며 '이미지 편집' 기능의 기본바탕이 되어야 하는데...