직접 고쳐 쓰는 HTML 반응형 상세페이지 제작

[ 사진은 찍었는데 첫 줄에서 막히셨다면 ]

무슨 말을 몇 번째 화면에 놓을지부터 정해 드립니다.

그다음에 화면을 만듭니다.

웹페이지를 만드는 방식 그대로 짜기 때문에 납품 후에도 문구를 직접 고치실 수 있습니다.

리뷰가 아직 하나도 없습니다.

그래서 할 수 있는 것보다 못 하는 것을 먼저 적고 가격이 어떻게 나오는지도 먼저 밝힙니다.

판단하실 재료를 아래에 전부 펼쳐 두었습니다.

[ 이런 상황이면 읽어보실 만합니다 ]

· 제품 사진은 있는데 어떤 말을 몇 번째에 놓아야 할지 모르겠다

· 받은 시안이 PC에서는 괜찮은데 휴대폰에서 글자가 작아 안 읽힌다

· 문구 한 줄 고치려는데 포토샵이 없어서 매번 부탁해야 한다

· 시즌이 바뀔 때마다 같은 페이지를 처음부터 다시 만들고 있다

· 견적이 어디서 어떻게 나온 금액인지 알 수 없다

[ 저희 방식이 다른 점 ]

상세페이지는 보통 포토샵으로 만들어 이미지 한 장으로 납품됩니다. 저희는 HTML과 CSS로 화면을 짜고 그 화면을 이미지로 뽑아 드립니다. 납품되는 물건이 그림 대신 글자로 된 문서입니다. 그래서 세 가지가 달라집니다.

· 하나의 소스가 휴대폰 화면과 PC 화면에 각각 맞춰집니다

· 문구는 포토샵 없이 메모장으로도 고칠 수 있습니다

· 이미지를 다시 뽑을 때 숫자 하나만 바꾸면 폭과 배율이 바뀝니다

상세페이지를 보는 사람 대부분이 휴대폰으로 봅니다. 포토샵 시안은 큰 화면 기준으로 그린 그림을 줄여서 보여주는 방식입니다. 저희 방식은 처음부터 화면 크기별로 따로 맞춥니다.

[ 가격이 어떻게 나오는지 먼저 밝힙니다 ]

섹션 한 칸당 3만원입니다.

섹션은 상세페이지를 위에서 아래로 잘랐을 때 하나의 이야기가 끝나는 단위입니다. 휴대폰에서 손가락으로 한두 번 넘기는 분량이고 이미지로 뽑으면 세로 2000px 안팎이 됩니다. 한 칸이 3000px을 넘으면 저희가 두 칸으로 세고 그만큼 받습니다.

· 5섹션 15만원

· 10섹션 30만원

· 15섹션 45만원

섹션이 늘어도 칸당 단가는 그대로입니다. 몇 칸이 필요한지 모르셔도 됩니다. 제품과 하고 싶은 말을 알려주시면 몇 칸이 적당한지 계산해서 먼저 알려드립니다.

장당 얼마라는 기준은 쓰지 않습니다. 한 장의 길이를 정하는 쪽이 만드는 사람이라 같은 분량도 장 수를 조절해 금액을 다르게 만들 수 있습니다. 섹션은 내용이 끝나는 자리라 세는 사람이 바뀌어도 개수가 크게 달라지지 않고 픽셀 기준까지 같이 밝혀 두면 나중에 다시 셀 수 있습니다.

[ 보내주실 것 ]

정리된 기획안은 없어도 됩니다. 이 다섯 가지면 시작합니다.

01 파실 상품: 규격과 성분과 가격처럼 이미 갖고 계신 자료 그대로

02 제품 사진: 배경이 정리된 제품컷과 사용 장면. 휴대폰으로 찍은 것도 됩니다

03 써두신 문구: 문장이 아니어도 됩니다. 메모 몇 줄이면 저희가 정리합니다

04 사시는 분: 누가 이 상품을 사는지 한 줄이면 충분합니다

05 참고하실 페이지: 마음에 드는 상세페이지 두세 개. 그대로 따라 만들지는 않습니다

[ 의뢰하시는 방법 ]

01 문의: 제품 사진과 지금 가지고 계신 자료를 보내주시면 됩니다. 정리된 기획안은 없어도 됩니다.

02 견적: 몇 섹션이 필요한지와 금액과 일정을 먼저 알려드립니다.

03 결제: 금액과 범위에 동의하신 다음에 결제하시면 됩니다.

04 확인: 문구와 순서를 먼저 확정하고 그다음에 화면을 만듭니다.

05 납품: 완성 이미지와 HTML 소스를 함께 드립니다.

[ 받으시는 파일 ]

먼저 밝힙니다. 포토샵 원본은 드리지 않습니다. 포토샵으로 만들지 않아서 존재하지 않는 파일입니다. 앞으로도 포토샵으로 계속 손보실 계획이라면 저희 방식은 맞지 않습니다.

대신 이렇게 드립니다.

· 완성 이미지: PNG와 JPG. 쇼핑몰 업로드 규격에 맞춰 자른 파일도 함께 드립니다

· HTML과 CSS 소스: 문구가 글자 그대로 들어 있어 메모장으로도 고칠 수 있습니다

· 재출력 방법: 문구를 고친 뒤 이미지를 다시 뽑는 절차를 한 장으로 정리해 드립니다

· 배치 근거 메모: 어떤 말을 왜 그 자리에 놓았는지 섹션별로 적어 드립니다

포토샵 원본을 열려면 포토샵이 있어야 합니다. HTML은 메모장과 브라우저만 있으면 열립니다. 고치실 수 있는 형태로 드리는 것이 원본을 드리는 것보다 실제로 쓸모 있다고 봅니다.

[ 안 되는 건 안 된다고 먼저 말씀드립니다 ]

앞서 말씀드린 대로 못 하는 것을 먼저 적습니다.

· 포토샵 원본 파일은 없습니다

· 제품 촬영은 하지 않습니다. 사진은 보내주셔야 합니다

· 화장품과 건강기능식품의 표시 광고 문구 검수와 심의 접수는 하지 않습니다

· 영상과 움직이는 배너는 다루지 않습니다

대신 지금 보여드릴 수 있는 것을 그대로 냅니다.

· 크몽에 올린 저희 서비스 안내 이미지 14장을 같은 HTML 방식으로 만들었습니다

· 상세페이지 견본 3건을 상세 이미지에 실었습니다

견본 3건 가운데 2건은 저희가 만든 가상 브랜드입니다. 실제 고객사가 아닙니다. 나머지 1건은 저희가 실제로 파는 서비스입니다. 없는 고객사를 있는 것처럼 적지 않습니다. 견본마다 어떤 말을 왜 그 순서에 놓았는지 근거를 같이 적어 두었으니 결과물보다 그 부분을 봐 주시면 됩니다.

[ 저작권과 소유권 ]

· 완성물의 소유권은 의뢰인에게 있습니다. 판매와 광고에 제한 없이 쓰실 수 있습니다

· HTML 소스도 함께 드리며 직접 고쳐 다시 쓰셔도 됩니다

· 저작권은 제작자인 엔트릭에 있습니다. 완성물이나 소스를 제3자에게 재판매하거나 템플릿으로 되파는 용도는 어렵습니다

· 작업한 결과물은 저희 포트폴리오에 쓸 수 있습니다. 원하지 않으시면 문의하실 때 말씀해 주시면 공개하지 않습니다

· 서체와 이미지 소재는 상업적 사용이 가능한 것만 씁니다. 보내주신 사진의 권리는 의뢰인에게 있습니다

· 수정 횟수는 패키지별 안내를 따릅니다. 저희 실수로 생긴 오류는 횟수와 상관없이 바로잡아 드립니다

[ 문의하실 때 이것만 알려주세요 ]

①파실 상품: (예: 드립백 커피 열 개들이 한 상자)

②제품 사진 유무: (예: 제품컷 여섯 장 있고 사용 장면은 없습니다)

③써두신 문구: (예: 상품명과 성분표만 있습니다)

④사시는 분: (예: 사무실에서 혼자 내려 마시는 삼십대)

⑤참고하실 페이지: (예: 마음에 드는 상세페이지 주소 두 개)

다섯 줄이 오면 하루 안에 견적과 가능 여부를 드립니다. 빠진 항목은 저희가 되묻습니다.