온라인 스토어 상품 페이지의 새 디자인: 스크린샷으로 만드는 HTML과 CSS의 깔끔한 상품 페이지

결과물 예시

스탠다드 패키지 예시전체 보기

스크린숏을 바탕으로 새롭게 디자인한 베이커리 홈페이지

전: 의뢰인이 보낸 스크린숏

후: 새 페이지

파일: index.html, 스타일 파일, 페이지용으로 그린 이미지 2개가 담긴 ZIP 압축 파일로, 의뢰인의 호스팅 서버에서 예전 페이지를 바로 교체할 수 있습니다. 여기 보이는 이미지는 각 페이지의 스크린숏입니다.

의뢰인: 가족이 운영하는 베이커리 Miller Street Bakery. 요청: 상호, 따뜻한 갈색, 영업시간, 굽는 빵 목록은 그대로 두고 예전 홈페이지를 산뜻하고 모던하게 바꾸기. 큼직한 빵 이미지와 눈에 잘 띄는 주문 버튼 넣기.

고객과 모든 정보는 가상입니다.

서비스 소개

상품 페이지는 작은 휴대폰 화면에서 팔려야 합니다. 사진, 가격, 옵션, 구매 버튼이 한눈에 보여야 하고, 의문에 대한 답은 한 번 스크롤하면 나와야 합니다. 현재 상품 페이지의 스크린샷을 올려 주시면 새롭게 디자인하고 만들어 드립니다. 깔끔한 갤러리 영역, 이름, 가격, 옵션, 짧은 블록으로 정리한 장점, 읽기 쉬운 사양표, 배송과 반품 안내, 이미 페이지에 있는 리뷰와 FAQ를 고객님의 색상과 로고로 담습니다. 상품 사진은 그리지 않습니다. 충분히 선명한 사진은 스크린샷에서 가져오고 그렇지 않으면 원본을 넣을 표시된 자리로 남기며, 새 이미지는 아이콘, 배너, 배경에만 씁니다. 가격, 재고, 사양은 알려 주신 그대로 둡니다. 페이지에는 장바구니나 결제가 없으며, 구매 버튼은 스토어 자체 링크로 연결됩니다.

포함 사항

• 제공 내용새 페이지의 HTML과 CSS, 스타일, 이미지가 들어 있어 호스팅에 바로 올릴 수 있는 ZIP 파일과, 주문 페이지에서 컴퓨터와 휴대폰으로 보는 미리보기. 프리미엄에서는 하나의 스타일로 만든 3개 페이지.
• 눈에 띄는 구매 영역사진, 가격, 옵션, 버튼을 한눈에
• 읽기 쉬운 사양휴대폰에 맞는 표
• 실제 상품만그려 넣은 사진이 아니라 내 사진
• 배송과 반품내 조건을 알아보기 쉬운 자리에
• 모바일 대응, 깔끔한 코드일반 HTML과 CSS

진행 방식

1. 1
   스크린샷상품 페이지 스크린샷을 올리고 바꿀 점을 알려 주세요
2. 2
   리디자인페이지를 새롭게 디자인하고, 이미지를 그리고, 만들어 드립니다
3. 3
   미리보기새 페이지와 기존 페이지를 컴퓨터와 휴대폰에서 비교하세요
4. 4
   압축 파일압축 파일을 내려받고 패키지 범위 안에서 수정을 요청하세요

준비해 주실 내용

PNG, JPEG 또는 WebP 이미지 최대 5장: 위에서 아래까지 상품 페이지 스크린샷, 원하시면 별도 파일로 로고. 구매자가 가장 먼저 봐야 할 것, 상품의 옵션과 사양, 배송 및 반품 조건, 보여도 되는 리뷰, 구매 버튼의 연결처, 지금 마음에 들지 않는 점, 스타일의 힌트로 좋아하시는 스토어를 알려 주세요.

다음 내용을 여쭤봅니다:

• 어떤 상품 페이지인가요?
• 구매자가 가장 먼저 봐야 할 것은 무엇인가요?
• 옵션과 사양
• 지금 마음에 들지 않는 점은 무엇인가요?
• 구매 버튼은 어디로 연결되나요?

패키지 비교

질문과 답변

답을 찾지 못하셨나요? 질문하기